Move `Avatar` + `AvatarStack` styles to PVC #1607

simurai · 2022-11-16T04:10:01Z

Description

This is part of #1342 and adds the Avatar + AvatarStack styles from PCSS. There should be no visual changes.

Integration

Does this change require any updates to code in production?

Yes, the following lines can be removed on dotcom:

- @import '@primer/css/avatars/avatar.scss';
- @import '@primer/css/avatars/avatar-stack.scss';

Merge checklist

Added/updated tests
~~Added/updated documentation~~
Added/updated previews
Visual regression test

Before	After

changeset-bot · 2022-11-16T04:10:04Z

🦋 Changeset detected

Latest commit: fbfe4c8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

simurai · 2022-11-16T04:12:49Z

test/css/component_specific_selectors_test.rb

+      ".avatar-1",
+      ".avatar-2",
+      ".avatar-3",
+      ".avatar-4",
+      ".avatar-5",
+      ".avatar-6",
+      ".avatar-7",
+      ".avatar-8"


These sizes are not use in PVC and instead the width/height is inlined directly. I guess we could:

Use these classes for sizing in PVC

Move the styles to dotcom

Hmm, looking at the react component, they accept size in pixels, so I think we should move these to dotcom.

Yeah. I guess we should also move .avatar-link and .avatar-group-item to dotcom. Or even replace them with utility classes since they are sparingly used.

Anyways, I think I'll leave that for another "cleanup unused CSS" round.

github-actions · 2022-11-16T04:19:25Z

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

simurai · 2022-11-16T04:47:26Z

previews/primer/beta/avatar_preview.rb

      # @param href [String] text
-      def default(size: 24, shape: :circle, href: nil)


I think the Visual differences found is caused by perviously setting the size to 24 (which is not the default).

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@primer/css](https://primer.style/css) ([source](https://togithub.com/primer/css)) | [`^14.3.0` -> `^21.0.0`](https://renovatebot.com/diffs/npm/@primer%2fcss/14.4.0/21.0.1) | [![age](https://badges.renovateapi.com/packages/npm/@primer%2fcss/21.0.1/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/@primer%2fcss/21.0.1/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/@primer%2fcss/21.0.1/compatibility-slim/14.4.0)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/@primer%2fcss/21.0.1/confidence-slim/14.4.0)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>primer/css</summary> ### [`v21.0.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2101) [Compare Source](https://togithub.com/primer/css/compare/v21.0.0...v21.0.1) ##### Patch Changes - [#2421](https://togithub.com/primer/css/pull/2421) [`7dfcb0c5`](https://togithub.com/primer/css/commit/7dfcb0c595881439c15a38389168272da5aab59d) Thanks [@simurai](https://togithub.com/simurai)! - Bump [@primer/primitives](https://togithub.com/primer/primitives) to `7.11.5` - [#2404](https://togithub.com/primer/css/pull/2404) [`ae9d71b1`](https://togithub.com/primer/css/commit/ae9d71b117bf37e8f618db4474efd87c75a2f531) Thanks [@langermank](https://togithub.com/langermank)! - Add `font-size` to `html` tag to make rem units "safe" - [#2418](https://togithub.com/primer/css/pull/2418) [`bce38dee`](https://togithub.com/primer/css/commit/bce38dee01027c6ac6dd3dbcec644eec153fd2ba) Thanks [@simurai](https://togithub.com/simurai)! - Make list type selector case sensitive - [#2425](https://togithub.com/primer/css/pull/2425) [`718f1aa6`](https://togithub.com/primer/css/commit/718f1aa6a6f8b5823e55b6b2616a729f59392e83) Thanks [@langermank](https://togithub.com/langermank)! - - Bump primitives to v7.11.7 - Update size tokens to Primitives pre-v8 release ### [`v21.0.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2100) [Compare Source](https://togithub.com/primer/css/compare/v20.8.3...v21.0.0) ##### Major Changes - [#2403](https://togithub.com/primer/css/pull/2403) [`256affcf`](https://togithub.com/primer/css/commit/256affcf3404c97d3db199a0b3cf32d3b864627c) Thanks [@lukasoppermann](https://togithub.com/lukasoppermann)! - ## Removed DiffStat component - the diffStat component is removed from primer/css - the component is very specific to this use-case, it is not generic enough to be part of the primer design system and was thus chosen for removal - the component will be added to the github codebase directly so that it is still available - if you are working within github.com you should be ale to use diffStat just like before. On other projects you will need to copy the diffStat code and add it to your codebase - [#2402](https://togithub.com/primer/css/pull/2402) [`c6e214b7`](https://togithub.com/primer/css/commit/c6e214b75b5a25d3ebb7f41ca922c93d395ac109) Thanks [@simurai](https://togithub.com/simurai)! - Remove `form-validation` styles - [#2405](https://togithub.com/primer/css/pull/2405) [`85f31cc8`](https://togithub.com/primer/css/commit/85f31cc8f8d4423a712fda166421eb0ac7d6d562) Thanks [@simurai](https://togithub.com/simurai)! - Remove `ActionList` ##### Patch Changes - [#2407](https://togithub.com/primer/css/pull/2407) [`607337cc`](https://togithub.com/primer/css/commit/607337cce57e59c7bee00486b63fa43ce845aff2) Thanks [@simurai](https://togithub.com/simurai)! - Bump [@primer/primitives](https://togithub.com/primer/primitives) to `7.11.2` - [#2409](https://togithub.com/primer/css/pull/2409) [`cf38a932`](https://togithub.com/primer/css/commit/cf38a932e76e00a8c83c351bbb5f1ae23649d1b4) Thanks [@simurai](https://togithub.com/simurai)! - Bump [@primer/primitives](https://togithub.com/primer/primitives) to `7.11.3` - [#2391](https://togithub.com/primer/css/pull/2391) [`95ab0d0f`](https://togithub.com/primer/css/commit/95ab0d0f48fde360a9f0b0f6a8af0323b3e891da) Thanks [@simurai](https://togithub.com/simurai)! - Prevent `.show-on-focus` to change width/height ### [`v20.8.3`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2083) [Compare Source](https://togithub.com/primer/css/compare/v20.8.2...v20.8.3) ##### Patch Changes - [#2390](https://togithub.com/primer/css/pull/2390) [`73ae8ec4`](https://togithub.com/primer/css/commit/73ae8ec45bc7d92ecfe58226d233176856f7bca9) Thanks [@simurai](https://togithub.com/simurai)! - Remove `autocheck` + `status-indicator` styles - [#2388](https://togithub.com/primer/css/pull/2388) [`3ceb1964`](https://togithub.com/primer/css/commit/3ceb19648b651f2a5b2f571d066aa895af8f443e) Thanks [@arelia](https://togithub.com/arelia)! - update default for flex wrap styles - [#2378](https://togithub.com/primer/css/pull/2378) [`55f35e1d`](https://togithub.com/primer/css/commit/55f35e1d0fc9a441f14f29b61ac5fbefbf3c4884) Thanks [@simurai](https://togithub.com/simurai)! - Fix code block color inside a `<blockquote>` - [#2386](https://togithub.com/primer/css/pull/2386) [`1b53e23e`](https://togithub.com/primer/css/commit/1b53e23ed39fc2c001b07d810ebe516f2957f325) Thanks [@josepmartins](https://togithub.com/josepmartins)! - Add responsive `border-radius` story ### [`v20.8.2`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2082) [Compare Source](https://togithub.com/primer/css/compare/v20.8.1...v20.8.2) ##### Patch Changes - [#2380](https://togithub.com/primer/css/pull/2380) [`3010e199`](https://togithub.com/primer/css/commit/3010e199bb5068838eb46e73e748d1e5e2f0143c) Thanks [@langermank](https://togithub.com/langermank)! - Bump Primitives v7.11.1 ### [`v20.8.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2081) [Compare Source](https://togithub.com/primer/css/compare/v20.8.0...v20.8.1) ##### Patch Changes - [#2365](https://togithub.com/primer/css/pull/2365) [`4b94fbb7`](https://togithub.com/primer/css/commit/4b94fbb759e163abb9495777973b5a6e700769f7) Thanks [@jackbrewer](https://togithub.com/jackbrewer)! - Remove trailing margin from last-child within a markdown table cell - [#2351](https://togithub.com/primer/css/pull/2351) [`1b6694c4`](https://togithub.com/primer/css/commit/1b6694c40903eae4e107cd9d59faf5020a42f944) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Updating to primer view components 0.0.117 ### [`v20.8.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2080) [Compare Source](https://togithub.com/primer/css/compare/v20.7.1...v20.8.0) ##### Minor Changes - [`d7a4c343`](https://togithub.com/primer/css/commit/d7a4c343ab1bc0d7f55ff85d735c93d9825419ae) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Importing more styles from Primer View Components - [https://github.com/primer/view_components/pull/1587](https://togithub.com/primer/view_components/pull/1587) - [https://github.com/primer/view_components/pull/1590](https://togithub.com/primer/view_components/pull/1590) - [https://github.com/primer/view_components/pull/1592](https://togithub.com/primer/view_components/pull/1592) - [https://github.com/primer/view_components/pull/1593](https://togithub.com/primer/view_components/pull/1593) - [https://github.com/primer/view_components/pull/1594](https://togithub.com/primer/view_components/pull/1594) - [https://github.com/primer/view_components/pull/1598](https://togithub.com/primer/view_components/pull/1598) - [https://github.com/primer/view_components/pull/1599](https://togithub.com/primer/view_components/pull/1599) - [https://github.com/primer/view_components/pull/1600](https://togithub.com/primer/view_components/pull/1600) - [https://github.com/primer/view_components/pull/1601](https://togithub.com/primer/view_components/pull/1601) - [https://github.com/primer/view_components/pull/1607](https://togithub.com/primer/view_components/pull/1607) - [https://github.com/primer/view_components/pull/1609](https://togithub.com/primer/view_components/pull/1609) - [https://github.com/primer/view_components/pull/1618](https://togithub.com/primer/view_components/pull/1618) - [https://github.com/primer/view_components/pull/1626](https://togithub.com/primer/view_components/pull/1626) - [#2318](https://togithub.com/primer/css/pull/2318) [`aee4b6f5`](https://togithub.com/primer/css/commit/aee4b6f571d88f391fcf98170857c4eed7b1ae82) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Import blankslate styles from primer/view-components ##### Patch Changes - [#2309](https://togithub.com/primer/css/pull/2309) [`f76e7858`](https://togithub.com/primer/css/commit/f76e785807d9c9c64530201f858798e67668afe2) Thanks [@jdanyow](https://togithub.com/jdanyow)! - Use `--color-fg-default` for `mark` - [#2330](https://togithub.com/primer/css/pull/2330) [`83250f82`](https://togithub.com/primer/css/commit/83250f82751092cc9ad3a8fb46262a0f0f2a3a96) Thanks [@stevenlaidlaw](https://togithub.com/stevenlaidlaw)! - Fix collapsing spaces within inline code blocks - [#2327](https://togithub.com/primer/css/pull/2327) [`8cf13e98`](https://togithub.com/primer/css/commit/8cf13e984ca27a286a706fd2b7243980d3de7985) Thanks [@simurai](https://togithub.com/simurai)! - Move `fieldset` + `label` styles to `base.scss` - [#2340](https://togithub.com/primer/css/pull/2340) [`ecbcbb1b`](https://togithub.com/primer/css/commit/ecbcbb1b04e72fc2006be7ea8211aae0732d3530) Thanks [@simurai](https://togithub.com/simurai)! - Import `Layout` from PVC ### [`v20.7.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2071) [Compare Source](https://togithub.com/primer/css/compare/v20.7.0...v20.7.1) ##### Patch Changes - [#2322](https://togithub.com/primer/css/pull/2322) [`1259ddd4`](https://togithub.com/primer/css/commit/1259ddd408a415a74b740992a8d64197b48bf1f4) Thanks [@langermank](https://togithub.com/langermank)! - Use correct weight token for typography utilities ### [`v20.7.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2070) [Compare Source](https://togithub.com/primer/css/compare/v20.6.1...v20.7.0) ##### Minor Changes - [#2311](https://togithub.com/primer/css/pull/2311) [`3b397d98`](https://togithub.com/primer/css/commit/3b397d985c23592d0e18d14fe75d71ea7572aa18) Thanks [@langermank](https://togithub.com/langermank)! - \[WIP] Convert margin utilities to rem units with fallbacks - [`46016601`](https://togithub.com/primer/css/commit/46016601e89d8b777e06dc7d6cd4a272dba17f7d) Thanks [@langermank](https://togithub.com/langermank)! - Convert padding and border utilities to use `rem` units with `px` fallbacks - [#2302](https://togithub.com/primer/css/pull/2302) [`412d7820`](https://togithub.com/primer/css/commit/412d78208ba76e7a1cdc0872a2adcadabc3d0414) Thanks [@langermank](https://togithub.com/langermank)! - Convert typography to use `rem` units with `px` fallbacks ### [`v20.6.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2061) [Compare Source](https://togithub.com/primer/css/compare/v20.6.0...v20.6.1) ##### Patch Changes - [#2305](https://togithub.com/primer/css/pull/2305) [`12355f87`](https://togithub.com/primer/css/commit/12355f87ac8955da0707f6be6fa06a936c26b2fd) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Add upper-roman and upper-alpha list types - [#2307](https://togithub.com/primer/css/pull/2307) [`0370244f`](https://togithub.com/primer/css/commit/0370244f49322863534c62b5b5589128c551ccc7) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Bugfix: Adding `white-space: normal` to Overlay compontn to reset wrapping. - [#2316](https://togithub.com/primer/css/pull/2316) [`f3acb2b1`](https://togithub.com/primer/css/commit/f3acb2b116f10955e1ba4f1a35aa874eed019ceb) Thanks [@langermank](https://togithub.com/langermank)! - Increase Checkbox/Radio border contrast - [#2314](https://togithub.com/primer/css/pull/2314) [`c8100be7`](https://togithub.com/primer/css/commit/c8100be771634093fe3a4d36481fc43c0d966015) Thanks [@langermank](https://togithub.com/langermank)! - \[Bug] Radio checked + focus state fixes - [#2310](https://togithub.com/primer/css/pull/2310) [`551492eb`](https://togithub.com/primer/css/commit/551492ebf420b3ea8872e9a101bd874d8b4e8a1d) Thanks [@jdanyow](https://togithub.com/jdanyow)! - Update dropdown hover selector ### [`v20.6.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2060) [Compare Source](https://togithub.com/primer/css/compare/v20.5.1...v20.6.0) ##### Minor Changes - [#2300](https://togithub.com/primer/css/pull/2300) [`5a0b9b29`](https://togithub.com/primer/css/commit/5a0b9b2939c1428430d249aeeb9adb0ba8bc18ce) Thanks [@simurai](https://togithub.com/simurai)! - Add `Noto Sans` to the body font stack ### [`v20.5.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2051) [Compare Source](https://togithub.com/primer/css/compare/v20.5.0...v20.5.1) ##### Patch Changes - [#2292](https://togithub.com/primer/css/pull/2292) [`9a4f2ff7`](https://togithub.com/primer/css/commit/9a4f2ff78073be69127664b36d469c4b1ddf0c7c) Thanks [@camertron](https://togithub.com/camertron)! - Add additional :not selectors for flash classes ### [`v20.5.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2050) [Compare Source](https://togithub.com/primer/css/compare/v20.4.8...v20.5.0) ##### Minor Changes - [#2289](https://togithub.com/primer/css/pull/2289) [`c23346b9`](https://togithub.com/primer/css/commit/c23346b9a401beb3c2b0cbc853574a5259db42a5) Thanks [@camertron](https://togithub.com/camertron)! - Don't apply flash\* classes to banners ### [`v20.4.8`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2048) [Compare Source](https://togithub.com/primer/css/compare/v20.4.7...v20.4.8) ##### Patch Changes - [#2284](https://togithub.com/primer/css/pull/2284) [`8336334d`](https://togithub.com/primer/css/commit/8336334d12ba3a1dac323c853b9fdcaacd480b68) Thanks [@koddsson](https://togithub.com/koddsson)! - Remove action list item animation ### [`v20.4.7`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2047) [Compare Source](https://togithub.com/primer/css/compare/v20.4.6...v20.4.7) ##### Patch Changes - [#2228](https://togithub.com/primer/css/pull/2228) [`b087282e`](https://togithub.com/primer/css/commit/b087282e5040a53a48b707bd94151a3b896659db) Thanks [@simurai](https://togithub.com/simurai)! - Improve `AvatarStack` when hovering  - [#2269](https://togithub.com/primer/css/pull/2269) [`27266fcd`](https://togithub.com/primer/css/commit/27266fcd212af6256511a912fb85c303e1b3a4d9) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Fix Overlay easing animation  - [#2260](https://togithub.com/primer/css/pull/2260) [`6569fb3a`](https://togithub.com/primer/css/commit/6569fb3a048e324fea63674077fee587b6b9912a) Thanks [@simurai](https://togithub.com/simurai)! - Fix nested `<ul>` in footnotes  - [#2268](https://togithub.com/primer/css/pull/2268) [`2e2bc71b`](https://togithub.com/primer/css/commit/2e2bc71b78806e0ce81005e42871bc21ec829526) Thanks [@simurai](https://togithub.com/simurai)! - Set FormControl color ### [`v20.4.6`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2046) [Compare Source](https://togithub.com/primer/css/compare/v20.4.5...v20.4.6) ##### Patch Changes - [#2266](https://togithub.com/primer/css/pull/2266) [`c28cdf7e`](https://togithub.com/primer/css/commit/c28cdf7effbd3bd750585543ff774e1e7c84873a) Thanks [@langermank](https://togithub.com/langermank)! - Remove scrollbar CSS property from Overlay  - [#2255](https://togithub.com/primer/css/pull/2255) [`1a9a6689`](https://togithub.com/primer/css/commit/1a9a668931c51cb4ca0867173af78f1e18d2662d) Thanks [@jdrush89](https://togithub.com/jdrush89)! - Fixing ActionList Item hover focus style  - [#2249](https://togithub.com/primer/css/pull/2249) [`81083778`](https://togithub.com/primer/css/commit/81083778a73c1d1f0f37b4efefe5359926ce4269) Thanks [@koddsson](https://togithub.com/koddsson)! - Increase specificy for Overlay styles as they relate to the backdrop and positioning options - If a Dialog opens a second Dialog, each Dialog properties should be contained to its own scope ### [`v20.4.5`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2045) [Compare Source](https://togithub.com/primer/css/compare/v20.4.4...v20.4.5) ##### Patch Changes - [#2242](https://togithub.com/primer/css/pull/2242) [`ef31fd98`](https://togithub.com/primer/css/commit/ef31fd988d52391317cc8982caf06ef45732ca70) Thanks [@JoshBowdenConcepts](https://togithub.com/JoshBowdenConcepts)! - This border change was made to ensure that assignee avatars would stack next to one another correctly. ### [`v20.4.4`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2044) [Compare Source](https://togithub.com/primer/css/compare/v20.4.3...v20.4.4) ##### Patch Changes - [#2218](https://togithub.com/primer/css/pull/2218) [`6205337b`](https://togithub.com/primer/css/commit/6205337b4c871b6ce431c8b211ddb0bbd176946f) Thanks [@langermank](https://togithub.com/langermank)! - - Adding readonly styles - Fixing focus background color for inset field  - [#2211](https://togithub.com/primer/css/pull/2211) [`8e5f6224`](https://togithub.com/primer/css/commit/8e5f62244192a8e2a191be7e7ad20d00f4b4bedb) Thanks [@imjohnbo](https://togithub.com/imjohnbo)! - Remove outline reset of `.SelectMenu-closeButton`  - [#2220](https://togithub.com/primer/css/pull/2220) [`1a8e7db5`](https://togithub.com/primer/css/commit/1a8e7db5f6c7b369fcfb6598df2edc42d0511da7) Thanks [@reeceatkinson](https://togithub.com/reeceatkinson)! - Update Marketing Typography (marketing-type.md)  - [#2229](https://togithub.com/primer/css/pull/2229) [`8a4c0878`](https://togithub.com/primer/css/commit/8a4c0878857ff65447906bf7d969211f96715197) Thanks [@jonrohan](https://togithub.com/jonrohan)! - ActionList hide the first divider if there's hidden items in front of it.  - [#2225](https://togithub.com/primer/css/pull/2225) [`56ea4ab1`](https://togithub.com/primer/css/commit/56ea4ab17644ad0d521373f700d551d66217268a) Thanks [@langermank](https://togithub.com/langermank)! - Overlay updates for Alpha::Dialog - Size improvements - Support buttom and side sheets - Preliminary animations for sheets ### [`v20.4.3`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2043) [Compare Source](https://togithub.com/primer/css/compare/v20.4.2...v20.4.3) ##### Patch Changes - [#2208](https://togithub.com/primer/css/pull/2208) [`83e43486`](https://togithub.com/primer/css/commit/83e43486d83350b331953f3c3be450ee79eaa783) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Moving segmented_control.css to primer_view_components  - [#2202](https://togithub.com/primer/css/pull/2202) [`b74e78b2`](https://togithub.com/primer/css/commit/b74e78b2539925956ec19aa3efbf2410dc1167e0) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Rename SegmentedControl--iconOnly-whenNarrow to SegmentedControl-button--iconOnly-whenNarrow and place on button  - [#2191](https://togithub.com/primer/css/pull/2191) [`e175f69d`](https://togithub.com/primer/css/commit/e175f69dd87fb3b54f46130dbdae18b75e9263ad) Thanks [@josepmartins](https://togithub.com/josepmartins)! - Bump [@primer/gatsby-theme-doctocat](https://togithub.com/primer/gatsby-theme-doctocat) from 3.1.1 to 4.0.0 in /docs ### [`v20.4.2`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2042) [Compare Source](https://togithub.com/primer/css/compare/v20.4.1...v20.4.2) ##### Patch Changes - [#2180](https://togithub.com/primer/css/pull/2180) [`c71e7df0`](https://togithub.com/primer/css/commit/c71e7df03b9f6816dd2ce7f3d343f92edbc8cf00) Thanks [@dgreif](https://togithub.com/dgreif)! - Fail dist build when for postcss warnings  - [#2194](https://togithub.com/primer/css/pull/2194) [`5ee33aca`](https://togithub.com/primer/css/commit/5ee33acac56156eec990e50be0ecdfb370005b8e) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Adding position relative to SegmentedControl  - [#2195](https://togithub.com/primer/css/pull/2195) [`f9e5db5e`](https://togithub.com/primer/css/commit/f9e5db5e4a01b2b0dae64a4d00d36cfe1df58792) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Updating the SegmentedControl component to role=list and use `ul`. ### [`v20.4.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2041) [Compare Source](https://togithub.com/primer/css/compare/v20.4.0...v20.4.1) ##### Patch Changes - [#2178](https://togithub.com/primer/css/pull/2178) [`2df59776`](https://togithub.com/primer/css/commit/2df5977613d4b196e0eb08c49f290d18f74dd412) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Fix: autoprefix giving a warning about align-content ### [`v20.4.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2040) [Compare Source](https://togithub.com/primer/css/compare/v20.3.0...v20.4.0) ##### Minor Changes - [#2152](https://togithub.com/primer/css/pull/2152) [`edac9edb`](https://togithub.com/primer/css/commit/edac9edbcf833fc76d406d225b6cf6abfa2b7f99) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Add Stack component ##### Patch Changes - [#2177](https://togithub.com/primer/css/pull/2177) [`add769c9`](https://togithub.com/primer/css/commit/add769c97193b387de2fbfb4b0a66c7157826563) Thanks [@langermank](https://togithub.com/langermank)! - Autocomplete item selected state  - [#2174](https://togithub.com/primer/css/pull/2174) [`97f178d7`](https://togithub.com/primer/css/commit/97f178d7dedb92c713f1e684384db089c71eeae6) Thanks [@simurai](https://togithub.com/simurai)! - Prevent `SegmentedControl-text` from wrapping  - [#2168](https://togithub.com/primer/css/pull/2168) [`a52afe7e`](https://togithub.com/primer/css/commit/a52afe7e7d34cccf550b43c052777a392bb7229f) Thanks [@owenniblock](https://togithub.com/owenniblock)! - Increases z-index for .show-on-focus  - [#2176](https://togithub.com/primer/css/pull/2176) [`d8c218ab`](https://togithub.com/primer/css/commit/d8c218aba8b16a80a96b39ca086df34ed4c307df) Thanks [@langermank](https://togithub.com/langermank)! - Add `aria-selected` to ActionList-item for Autocomplete  - [#2090](https://togithub.com/primer/css/pull/2090) [`8016e3c5`](https://togithub.com/primer/css/commit/8016e3c507d8e72be1b32520cc548c362290a73c) Thanks [@Luckz](https://togithub.com/Luckz)! - Remove article ### [`v20.3.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2030) [Compare Source](https://togithub.com/primer/css/compare/v20.2.4...v20.3.0) ##### Minor Changes - [#2147](https://togithub.com/primer/css/pull/2147) [`9dd2a49e`](https://togithub.com/primer/css/commit/9dd2a49e2633f337c2316a43907f17dfd5c3173b) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Add AppFrame component ##### Patch Changes - [#2083](https://togithub.com/primer/css/pull/2083) [`13be7ef1`](https://togithub.com/primer/css/commit/13be7ef18d2d9874e7a08f20d9f93538752517c6) Thanks [@simurai](https://togithub.com/simurai)! - Add `SegmentedControl` component  - [#2171](https://togithub.com/primer/css/pull/2171) [`d2b4d698`](https://togithub.com/primer/css/commit/d2b4d698882f57a6c4a08e66c10bdca27924046f) Thanks [@khiga8](https://togithub.com/khiga8)! - Add .tooltipped to deprecations json ### [`v20.2.4`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2024) [Compare Source](https://togithub.com/primer/css/compare/v20.2.3...v20.2.4) ##### Patch Changes - [#2136](https://togithub.com/primer/css/pull/2136) [`89846844`](https://togithub.com/primer/css/commit/8984684470dc2e6cc69e7c80e4ce4a0e70e57eb3) Thanks [@langermank](https://togithub.com/langermank)! - Bug: ActionList-item disabled state  - [#2130](https://togithub.com/primer/css/pull/2130) [`544fb277`](https://togithub.com/primer/css/commit/544fb2773dbadd934a34232637970946de3c536d) Thanks [@renbaoshuo](https://togithub.com/renbaoshuo)! - Add link to source code in Timeline's doc  - [#2114](https://togithub.com/primer/css/pull/2114) [`facb9682`](https://togithub.com/primer/css/commit/facb96823a344369afdace1365dda38bb5312f2b) Thanks [@langermank](https://togithub.com/langermank)! - - Updates stories to reflect markup for Rails - Clean up FormControl classes - Add Radio and Checkbox custom styles  - [#2132](https://togithub.com/primer/css/pull/2132) [`c898103e`](https://togithub.com/primer/css/commit/c898103e0e942b7ab07f43b83496f019163458f1) Thanks [@vzrenggamani](https://togithub.com/vzrenggamani)! - docs: update deployment location of docs ### [`v20.2.3`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2023) [Compare Source](https://togithub.com/primer/css/compare/v20.2.2...v20.2.3) ##### Patch Changes - [#2124](https://togithub.com/primer/css/pull/2124) [`f1b3e55f`](https://togithub.com/primer/css/commit/f1b3e55f141ddaa5719d223d4670d935bf9d5337) Thanks [@langermank](https://togithub.com/langermank)! - FormControl + Overlay bug fixes  - [#2129](https://togithub.com/primer/css/pull/2129) [`2cc18d03`](https://togithub.com/primer/css/commit/2cc18d0348dc667961c9374886c8a82e95334d6f) Thanks [@camertron](https://togithub.com/camertron)! - Fix preview deploys  - [#2077](https://togithub.com/primer/css/pull/2077) [`ab078a58`](https://togithub.com/primer/css/commit/ab078a58c6ebe4118f917bed4c71fbbb56f0634f) Thanks [@mlynam](https://togithub.com/mlynam)! - Make .form-control elements render as disabled when a parent fieldset is disabled ### [`v20.2.2`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2022) [Compare Source](https://togithub.com/primer/css/compare/v20.2.1...v20.2.2) ##### Patch Changes - [#2075](https://togithub.com/primer/css/pull/2075) [`9f576a3c`](https://togithub.com/primer/css/commit/9f576a3c33479fa0beb5ef4fe9b794f67a58070c) Thanks [@langermank](https://togithub.com/langermank)! - FormControl + Autocomplete component updates ### [`v20.2.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2021) [Compare Source](https://togithub.com/primer/css/compare/v20.2.0...v20.2.1) ##### Patch Changes - [#2094](https://togithub.com/primer/css/pull/2094) [`33f799f1`](https://togithub.com/primer/css/commit/33f799f13edad2e7434425913a8d445aa27213de) Thanks [@camertron](https://togithub.com/camertron)! - Add missing ToggleSwitch--checked styles  - [#2091](https://togithub.com/primer/css/pull/2091) [`f740d008`](https://togithub.com/primer/css/commit/f740d00827fa854062f6ce3449ca6745fae9bea8) Thanks [@tobiasahlin](https://togithub.com/tobiasahlin)! - Marketing: Bump font size of large buttons ### [`v20.2.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2020) [Compare Source](https://togithub.com/primer/css/compare/v20.1.1...v20.2.0) ##### Minor Changes - [#2087](https://togithub.com/primer/css/pull/2087) [`8354de5c`](https://togithub.com/primer/css/commit/8354de5c5eeb60e447712c04e25c2ef370206488) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`.  - [#2074](https://togithub.com/primer/css/pull/2074) [`5cfae2c2`](https://togithub.com/primer/css/commit/5cfae2c2193885c34af97dd61da201c400bc8549) Thanks [@camertron](https://togithub.com/camertron)! - Add styles for the ToggleSwitch component ### [`v20.1.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2011) [Compare Source](https://togithub.com/primer/css/compare/v20.1.0...v20.1.1) ##### Patch Changes - [#2078](https://togithub.com/primer/css/pull/2078) [`92ac0e39`](https://togithub.com/primer/css/commit/92ac0e39e6f5aae0314397890c8f78227a6c6ba0) Thanks [@langermank](https://togithub.com/langermank)! - Setup new `primer-primitive` bundle ### [`v20.1.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2010) [Compare Source](https://togithub.com/primer/css/compare/v20.0.0...v20.1.0) ##### Minor Changes - [#2072](https://togithub.com/primer/css/pull/2072) [`ab6f0840`](https://togithub.com/primer/css/commit/ab6f0840f0131b370fb8871551720afa20fb466e) Thanks [@JasonEtco](https://togithub.com/JasonEtco)! - Add `.text-capitalize` utility class  - [#1998](https://togithub.com/primer/css/pull/1998) [`51e087aa`](https://togithub.com/primer/css/commit/51e087aa31f049c1cb148df6f04fdbc6de434cf0) Thanks [@bolonio](https://togithub.com/bolonio)! - Styles for the new Dialog Component ### [`v20.0.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#2000) [Compare Source](https://togithub.com/primer/css/compare/v19.8.2...v20.0.0) ##### Major Changes - [#2049](https://togithub.com/primer/css/pull/2049) [`f4dba96e`](https://togithub.com/primer/css/commit/f4dba96e0cb78d3d451226cf60b01187678ced45) Thanks [@langermank](https://togithub.com/langermank)! - Comment box upload focus border-radius  - [#1744](https://togithub.com/primer/css/pull/1744) [`942f65a4`](https://togithub.com/primer/css/commit/942f65a45a18b7042ba1ce2703688b62d874cf18) Thanks [@langermank](https://togithub.com/langermank)! - Global CSS focus styles  - [#1767](https://togithub.com/primer/css/pull/1767) [`7e01db97`](https://togithub.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://togithub.com/tobiasahlin)! - Marketing: Remove unused pullquote selector  - [#1821](https://togithub.com/primer/css/pull/1821) [`daa2685c`](https://togithub.com/primer/css/commit/daa2685c596d894b3bae1896bf97c3319cd9816c) Thanks [@jonrohan](https://togithub.com/jonrohan)! - UnderlineNav `:focus` styles Refactor selected state and spacing Add selected bold state override from github/github  - [#2047](https://togithub.com/primer/css/pull/2047) [`553d72cc`](https://togithub.com/primer/css/commit/553d72cc1baaf43a4c743c50cc8881f3811123e9) Thanks [@langermank](https://togithub.com/langermank)! - UnderlineNav bug fix  - [#2046](https://togithub.com/primer/css/pull/2046) [`55e2b069`](https://togithub.com/primer/css/commit/55e2b069a4cbd225af676bef918bbbe2e6cd73b7) Thanks [@langermank](https://togithub.com/langermank)! - Global focus style CSS from feature flag (next major) ##### Patch Changes - [#2048](https://togithub.com/primer/css/pull/2048) [`dc529e31`](https://togithub.com/primer/css/commit/dc529e3102788d5caa136a9d30c58e56721427a7) Thanks [@simurai](https://togithub.com/simurai)! - Fix headings with an anchor in a summary  - [#2041](https://togithub.com/primer/css/pull/2041) [`20550bbf`](https://togithub.com/primer/css/commit/20550bbfaa236ac197ca58805542eaab0bf38fd4) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Upgrading to stylelint-config-12.4.0 ### [`v19.8.2`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1982) [Compare Source](https://togithub.com/primer/css/compare/v19.8.1...v19.8.2) ##### Patch Changes - [#2019](https://togithub.com/primer/css/pull/2019) [`57be2d50`](https://togithub.com/primer/css/commit/57be2d50212b71f87ce612039375bcd5273eca53) Thanks [@langermank](https://togithub.com/langermank)! - \[Bug] TreeView animation and padding fix ### [`v19.8.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1981) [Compare Source](https://togithub.com/primer/css/compare/v19.8.0...v19.8.1) ##### Patch Changes - [#1996](https://togithub.com/primer/css/pull/1996) [`a4293bf9`](https://togithub.com/primer/css/commit/a4293bf921ebcb74c6973e3f50f07e470f495bd0) Thanks [@langermank](https://togithub.com/langermank)! - TreeView: remove bold active items + markup changes ### [`v19.8.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1980) [Compare Source](https://togithub.com/primer/css/compare/v19.7.1...v19.8.0) ##### Minor Changes - [#1997](https://togithub.com/primer/css/pull/1997) [`9806b54b`](https://togithub.com/primer/css/commit/9806b54b3829219c9ad141efd2fcd99fc5c08751) Thanks [@simurai](https://togithub.com/simurai)! - Add Tritanopia theme ##### Patch Changes - [#2002](https://togithub.com/primer/css/pull/2002) [`a3bc51f6`](https://togithub.com/primer/css/commit/a3bc51f6c4af0d45a9ce39f00c3cf3297b090067) Thanks [@simurai](https://togithub.com/simurai)! - Always break long `branch-name`s ### [`v19.7.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1971) [Compare Source](https://togithub.com/primer/css/compare/v19.7.0...v19.7.1) ##### Patch Changes - [#2001](https://togithub.com/primer/css/pull/2001) [`47cec404`](https://togithub.com/primer/css/commit/47cec40472173b412df59e6990c0ac1b1ed43d04) Thanks [@jdanyow](https://togithub.com/jdanyow)! - Remove IE11 support in tooltip  - [#1995](https://togithub.com/primer/css/pull/1995) [`557b100a`](https://togithub.com/primer/css/commit/557b100a77a4befe6d07fac14cb48b08bed18356) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Add narrow/regular/wide viewport range utilities  - [#2000](https://togithub.com/primer/css/pull/2000) [`264a89a5`](https://togithub.com/primer/css/commit/264a89a51a75eefa6a371e6ad11518519cd98b36) Thanks [@khiga8](https://togithub.com/khiga8)! - More CSS updates to `Autocomplete` ### [`v19.7.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1970) [Compare Source](https://togithub.com/primer/css/compare/v19.6.0...v19.7.0) ##### Minor Changes - [#1994](https://togithub.com/primer/css/pull/1994) [`69fe8c65`](https://togithub.com/primer/css/commit/69fe8c6512a3f0bbdbfdf7080b916a39173c2df9) Thanks [@khiga8](https://togithub.com/khiga8)! - Add support for inline, stack label in autocomplete ##### Patch Changes - [#1991](https://togithub.com/primer/css/pull/1991) [`5e87effa`](https://togithub.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://togithub.com/simurai)! - Fix `btn-primary` in flash alerts ### [`v19.6.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1960) [Compare Source](https://togithub.com/primer/css/compare/v19.5.1...v19.6.0) ##### Minor Changes - [#1989](https://togithub.com/primer/css/pull/1989) [`f544ef85`](https://togithub.com/primer/css/commit/f544ef8574a4d6e12cccf94d534ad66df3e9249a) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Make `pane` an optional region for PageLayout component ##### Patch Changes - [#1988](https://togithub.com/primer/css/pull/1988) [`e3443f1a`](https://togithub.com/primer/css/commit/e3443f1a69ba5a23d3e3804bf4e22d384783c443) Thanks [@simurai](https://togithub.com/simurai)! - Fix color-fg utilities in links  - [#1985](https://togithub.com/primer/css/pull/1985) [`c2bd6bc9`](https://togithub.com/primer/css/commit/c2bd6bc9bf90686f258af11c102097d7da000a5b) Thanks [@cheshire137](https://togithub.com/cheshire137)! - Adding .color-bg-transparent utility class ### [`v19.5.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1951) [Compare Source](https://togithub.com/primer/css/compare/v19.5.0...v19.5.1) ##### Patch Changes - [#1983](https://togithub.com/primer/css/pull/1983) [`07bc069e`](https://togithub.com/primer/css/commit/07bc069ec0faae9c0e4530e5171e3346fa643a10) Thanks [@simurai](https://togithub.com/simurai)! - Bump `primer/primitives` to `^7.5.1` ### [`v19.5.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1950) [Compare Source](https://togithub.com/primer/css/compare/v19.4.0...v19.5.0) ##### Minor Changes - [#1948](https://togithub.com/primer/css/pull/1948) [`6a83a92b`](https://togithub.com/primer/css/commit/6a83a92b4332d577cdd72eee084e3f2c41b588ee) Thanks [@simurai](https://togithub.com/simurai)! - Add `open` and `closed` color roles  - [#1961](https://togithub.com/primer/css/pull/1961) [`a35a8bdc`](https://togithub.com/primer/css/commit/a35a8bdcc17906848fcb486842d2345db0441c7c) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Default .PageLayout to display block ##### Patch Changes - [#1954](https://togithub.com/primer/css/pull/1954) [`30f29d38`](https://togithub.com/primer/css/commit/30f29d383256a7d4023a859fdeee44471307159d) Thanks [@simurai](https://togithub.com/simurai)! - Fix `input-block` in `form-group`  - [#1956](https://togithub.com/primer/css/pull/1956) [`39063461`](https://togithub.com/primer/css/commit/3906346182ed983d9725fd95da41b21424378b3e) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Upgrading [@primer/stylelint-config](https://togithub.com/primer/stylelint-config)[@12](https://togithub.com/12).3.2  - [#1931](https://togithub.com/primer/css/pull/1931) [`e5c5312e`](https://togithub.com/primer/css/commit/e5c5312ec8bf139f6c94d2f70ceecd4b3cd9fd82) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Page layout api updates renaming spacing options in storybook  - [#1950](https://togithub.com/primer/css/pull/1950) [`7c85c500`](https://togithub.com/primer/css/commit/7c85c500569fe6e1b29665c2eed37d58625ab06f) Thanks [@hectahertz](https://togithub.com/hectahertz)! - Fix sequence of content in Subhead  - [#1942](https://togithub.com/primer/css/pull/1942) [`0450ccbb`](https://togithub.com/primer/css/commit/0450ccbb86104564c7d4038eb68989f370014fa1) Thanks [@reeceatkinson](https://togithub.com/reeceatkinson)! - Added line break to docs  - [#1953](https://togithub.com/primer/css/pull/1953) [`3a91a29a`](https://togithub.com/primer/css/commit/3a91a29a822a28ea9679fbbb90250fc039057f23) Thanks [@hectahertz](https://togithub.com/hectahertz)! - Use `<h2>` instead of `<div>` on Subhead-heading docs  - [#1949](https://togithub.com/primer/css/pull/1949) [`dab83198`](https://togithub.com/primer/css/commit/dab83198c3bf1c7e03826b8cd498b8c48c9a2869) Thanks [@heiskr](https://togithub.com/heiskr)! - Render headings inline when in a `<summary>`  - [#1978](https://togithub.com/primer/css/pull/1978) [`a00e6bce`](https://togithub.com/primer/css/commit/a00e6bce01b368d9cb6da5ec2af1d833f4d785c1) Thanks [@langermank](https://togithub.com/langermank)! - Handle pointer-events on ActionList visuals  - [#1977](https://togithub.com/primer/css/pull/1977) [`80bf9d9d`](https://togithub.com/primer/css/commit/80bf9d9dea6fe7fbb0837fea265ec95cbbbd75d6) Thanks [@jonrohan](https://togithub.com/jonrohan)! - \[Bug Fix] Adding white-space nowrap to Labels ### [`v19.4.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1940) [Compare Source](https://togithub.com/primer/css/compare/v19.3.0...v19.4.0) ##### Minor Changes - [#1937](https://togithub.com/primer/css/pull/1937) [`67f08009`](https://togithub.com/primer/css/commit/67f08009ef458088b9fda6267ab25ad6d0a514aa) Thanks [@langermank](https://togithub.com/langermank)! - TreeView single item nesting  - [#1905](https://togithub.com/primer/css/pull/1905) [`50221a54`](https://togithub.com/primer/css/commit/50221a5486d28c54dc1f578b459addd867bd01d3) Thanks [@langermank](https://togithub.com/langermank)! - Refactors NavigationList to better handle accessibility. Backwards compatible for TreeView CSS.  - [#1936](https://togithub.com/primer/css/pull/1936) [`c53ecdff`](https://togithub.com/primer/css/commit/c53ecdff5442cf4ac5da0d1e2ba45871ab662855) Thanks [@khiga8](https://togithub.com/khiga8)! - Deprecating `.tooltipped` CSS classes ##### Patch Changes - [#1928](https://togithub.com/primer/css/pull/1928) [`0fb67895`](https://togithub.com/primer/css/commit/0fb6789555652860cfa5178b60433eb2c3d2575c) Thanks [@simurai](https://togithub.com/simurai)! - Fix `<sup><a>` from getting wrapped with `[ ]` ### [`v19.3.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1930) [Compare Source](https://togithub.com/primer/css/compare/v19.2.0...v19.3.0) ##### Minor Changes - [#1876](https://togithub.com/primer/css/pull/1876) [`bcf447ab`](https://togithub.com/primer/css/commit/bcf447ab226e6043dd47c1fcc395ba104af866d4) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Add mono font stack to <samp> tag  - [#1919](https://togithub.com/primer/css/pull/1919) [`21085f5c`](https://togithub.com/primer/css/commit/21085f5c6cc538b5014a47de76642554a4291cc6) Thanks [@hectahertz](https://togithub.com/hectahertz)! - Add blankslate classes to replace utilities ##### Patch Changes - [#1892](https://togithub.com/primer/css/pull/1892) [`55bd498b`](https://togithub.com/primer/css/commit/55bd498b7357e86659ac574f0f745f7b420fb6d3) Thanks [@langermank](https://togithub.com/langermank)! - Patch: Fix ActionList--divided for label with inline description scenarios  - [#1906](https://togithub.com/primer/css/pull/1906) [`f02d9a3e`](https://togithub.com/primer/css/commit/f02d9a3e4e86c2659a9f507995bcb90c5226e34e) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Upgrading [@primer/stylelint-config](https://togithub.com/primer/stylelint-config)[@12](https://togithub.com/12).3.0 and fixing violations  - [#1908](https://togithub.com/primer/css/pull/1908) [`84581e96`](https://togithub.com/primer/css/commit/84581e96aee50ff3883907dfe1069701edd1c24a) Thanks [@simurai](https://togithub.com/simurai)! - Reduce size of `Label--inline`  - [#1890](https://togithub.com/primer/css/pull/1890) [`74d0438b`](https://togithub.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://togithub.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode  - [#1882](https://togithub.com/primer/css/pull/1882) [`4a06aba1`](https://togithub.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://togithub.com/tqwewe)! - Fix layout gutter none styles  - [#1894](https://togithub.com/primer/css/pull/1894) [`d1adf595`](https://togithub.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://togithub.com/simurai)! - Make `pagination` responsive by default ### [`v19.2.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1920) [Compare Source](https://togithub.com/primer/css/compare/v19.1.1...v19.2.0) ##### Minor Changes - [#1737](https://togithub.com/primer/css/pull/1737) [`6b4089d8`](https://togithub.com/primer/css/commit/6b4089d8b37174ca061762c56b5e4134a54cf4ef) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Adds new PageLayout component CSS with Storybook documentation ##### Patch Changes - [#1855](https://togithub.com/primer/css/pull/1855) [`8f2e7534`](https://togithub.com/primer/css/commit/8f2e7534ecbdb3d0e773d60c725b55dc4bb263e2) Thanks [@simurai](https://togithub.com/simurai)! - Bump primer/primitives to `7.4.0`  - [#1869](https://togithub.com/primer/css/pull/1869) [`868f61a1`](https://togithub.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://togithub.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.  - [#1856](https://togithub.com/primer/css/pull/1856) [`cbe3fb56`](https://togithub.com/primer/css/commit/cbe3fb56e4c7ee6bfe803eb0c15e15ab95d84157) Thanks [@langermank](https://togithub.com/langermank)! - ActionList item outlines for high contrast theme  - [#1870](https://togithub.com/primer/css/pull/1870) [`815daff9`](https://togithub.com/primer/css/commit/815daff9f07d8096d572cf75bee17284f36492f6) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - \[ActionList] Add hover to `aria-current` elements and other micro interactions ### [`v19.1.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1911) [Compare Source](https://togithub.com/primer/css/compare/v19.1.0...v19.1.1) ##### Patch Changes - [#1827](https://togithub.com/primer/css/pull/1827) [`69e1fc53`](https://togithub.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://togithub.com/simurai)! - Support fractional viewport sizes for `max-width` media queries  - [#1803](https://togithub.com/primer/css/pull/1803) [`c46fe918`](https://togithub.com/primer/css/commit/c46fe9186efbcf6e4a482685529bdb0bda28aa9f) Thanks [@langermank](https://togithub.com/langermank)! - - Adds ActionList tree-view specific CSS - Minor bug fixes for ActionList default  - [#1827](https://togithub.com/primer/css/pull/1827) [`69e1fc53`](https://togithub.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://togithub.com/simurai)! - Support fractional viewport sizes for the `hide` utilities ### [`v19.1.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1910) [Compare Source](https://togithub.com/primer/css/compare/v19.0.0...v19.1.0) ##### Minor Changes - [#1759](https://togithub.com/primer/css/pull/1759) [`74724ce7`](https://togithub.com/primer/css/commit/74724ce7c72b1cb540a9ef3d845169f1df17b55e) Thanks [@langermank](https://togithub.com/langermank)! - Remove `popover` responsive hack  - [#1807](https://togithub.com/primer/css/pull/1807) [`13a4654f`](https://togithub.com/primer/css/commit/13a4654fa0854accfaabbbd2f21d2e0a1c90442d) Thanks [@enstyled](https://togithub.com/enstyled)! - Marketing: Add link components Marketing: Add animated arrow utility Marketing: Document button components with arrows ##### Patch Changes - [#1780](https://togithub.com/primer/css/pull/1780) [`8e9ba62d`](https://togithub.com/primer/css/commit/8e9ba62d30ed10c012b99dd998751df01ad6aa99) Thanks [@langermank](https://togithub.com/langermank)! - ActionList followup  - [#1805](https://togithub.com/primer/css/pull/1805) [`99537d31`](https://togithub.com/primer/css/commit/99537d317f04ff5474a076ab96d3ea315b2181e2) Thanks [@tobiasahlin](https://togithub.com/tobiasahlin)! - Fix local dev (revert webpack 5.5.0 → 6.0.0)  - [#1781](https://togithub.com/primer/css/pull/1781) [`4d8dcf24`](https://togithub.com/primer/css/commit/4d8dcf24bc9e0732a9a2f34c94f6bcad7d3382dd) Thanks [@simurai](https://togithub.com/simurai)! - Reformat `rgba()` colors for `.btn-mktg`  - [#1768](https://togithub.com/primer/css/pull/1768) [`4abb1af9`](https://togithub.com/primer/css/commit/4abb1af95b9b3c8c38512fa5e1e4fae9e7d01f4f) Thanks [@tobiasahlin](https://togithub.com/tobiasahlin)! - Marketing: Add disabled states for buttons (and tweak hover)  - [#1792](https://togithub.com/primer/css/pull/1792) [`b1c43f1f`](https://togithub.com/primer/css/commit/b1c43f1f8d9b07b58b275665ca69abd5d4f7a5fc) Thanks [@simurai](https://togithub.com/simurai)! - Use `counter-border` for LHC  - [#1808](https://togithub.com/primer/css/pull/1808) [`ee27583f`](https://togithub.com/primer/css/commit/ee27583f594248bd44122ea5dc81b12382c02b09) Thanks [@manuelpuyol](https://togithub.com/manuelpuyol)! - Add hover and active states to btn-invisible  - [#1818](https://togithub.com/primer/css/pull/1818) [`22c29e7a`](https://togithub.com/primer/css/commit/22c29e7a8b1b6a0df1dd61d400cc0dd132e0c909) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - \[Layout component] Avoid resizing `main` while loading ### [`v19.0.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1900) [Compare Source](https://togithub.com/primer/css/compare/v18.2.0...v19.0.0) ##### Major Changes - [#1716](https://togithub.com/primer/css/pull/1716) [`9b97dc8f`](https://togithub.com/primer/css/commit/9b97dc8fec28e44d8619aff6da636ecd8e48daf9) Thanks [@tobiasahlin](https://togithub.com/tobiasahlin)! - Update marketing buttons (including color mode support) ##### Minor Changes - [#1756](https://togithub.com/primer/css/pull/1756) [`ece7a3e6`](https://togithub.com/primer/css/commit/ece7a3e68c65252960b41d6df1b8ff64cb33c93f) Thanks [@heiskr](https://togithub.com/heiskr)! - Update mark tag to use background-color: var(--color-attention-subtle);  - [#1754](https://togithub.com/primer/css/pull/1754) [`3838e174`](https://togithub.com/primer/css/commit/3838e1743aa63bacf0ca241c2a3c4983ba92c5e6) Thanks [@simurai](https://togithub.com/simurai)! - Add `Box--overlay` styles  - [#1755](https://togithub.com/primer/css/pull/1755) [`1714778a`](https://togithub.com/primer/css/commit/1714778af72f5647894fca9561c56dfbccac62df) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Updating primer/[email protected] and adding Light High Contrast theme ##### Patch Changes - [#1746](https://togithub.com/primer/css/pull/1746) [`9e6b5f56`](https://togithub.com/primer/css/commit/9e6b5f5671ab60e3a9d452f516fb7b38173f0135) Thanks [@simurai](https://togithub.com/simurai)! - Remove `Label` bg hack ### [`v18.2.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1820) [Compare Source](https://togithub.com/primer/css/compare/v18.1.0...v18.2.0) ##### Minor Changes - [#1738](https://togithub.com/primer/css/pull/1738) [`dfe73db1`](https://togithub.com/primer/css/commit/dfe73db19556c4de8f57c9e610705af0a4d9f0f5) Thanks [@vdepizzol](https://togithub.com/vdepizzol)! - Update `Layout`'s sidebar width values.  - [#1657](https://togithub.com/primer/css/pull/1657) [`e7543009`](https://togithub.com/primer/css/commit/e754300989a4e762091a957edd324b26682b104a) Thanks [@langermank](https://togithub.com/langermank)! - ActionList Component: Primer CSS Implementation. Adding a new component `ActionList` to learn more checkout the docs <https://primer.style/css/components/action-list>. ##### Patch Changes - [#1731](https://togithub.com/primer/css/pull/1731) [`832e9988`](https://togithub.com/primer/css/commit/832e99886df66ea5860d725517aeb9d5f178dd58) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Updating [@primer/primitives](https://togithub.com/primer/primitives)[@6](https://togithub.com/6).1.0 ### [`v18.1.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1810) [Compare Source](https://togithub.com/primer/css/compare/v18.0.2...v18.1.0) ##### Minor Changes - [#1694](https://togithub.com/primer/css/pull/1694) [`b0e1687a`](https://togithub.com/primer/css/commit/b0e1687a562a194ed178fd2dd35588ff5da40847) Thanks [@simurai](https://togithub.com/simurai)! - Add more Octicon icon support to components  - [#1711](https://togithub.com/primer/css/pull/1711) [`bc3b94d2`](https://togithub.com/primer/css/commit/bc3b94d26f08f65d3a4938bafa1b988585f35764) Thanks [@simurai](https://togithub.com/simurai)! - Add new color `Label`s ##### Patch Changes - [#1710](https://togithub.com/primer/css/pull/1710) [`6a058ecb`](https://togithub.com/primer/css/commit/6a058ecbaf7edac6fce4a0d56b4aca46ac6cd4fa) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Updating [@primer/[email protected]](https://togithub.com/primer/primitives/releases/tag/v6.0.0)  - [#1712](https://togithub.com/primer/css/pull/1712) [`bc502033`](https://togithub.com/primer/css/commit/bc50203324ba03d4ece7ec6182c185a695626ffb) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Updating [@primer/stylelint-config](https://togithub.com/primer/stylelint-config) to 12.1.0  - [#1708](https://togithub.com/primer/css/pull/1708) [`f7c44c35`](https://togithub.com/primer/css/commit/f7c44c35f8085f2b793581a901ecb22c5174ef6a) Thanks [@langermank](https://togithub.com/langermank)! - Storybook: add Label stories  - [#1690](https://togithub.com/primer/css/pull/1690) [`af5a3ae8`](https://togithub.com/primer/css/commit/af5a3ae82668d6d04af8c3465302980dcf062cc4) Thanks [@simurai](https://togithub.com/simurai)! - Update `Subhead` actions  - [#1707](https://togithub.com/primer/css/pull/1707) [`a997790b`](https://togithub.com/primer/css/commit/a997790b69f0f3bb5c7a2dfc97c5d5c743bb6a38) Thanks [@maximedegreve](https://togithub.com/maximedegreve)! - Fix for disabled Safari inputs  - [#1693](https://togithub.com/primer/css/pull/1693) [`c1ca19d4`](https://togithub.com/primer/css/commit/c1ca19d4f071a9b12172e4a13bdb96c52a200d47) Thanks [@jasonmacgowan](https://togithub.com/jasonmacgowan)! - Fix light-theme attr reference in theme docs  - [#1689](https://togithub.com/primer/css/pull/1689) [`257f68f6`](https://togithub.com/primer/css/commit/257f68f6539539ab809fbdb4351aefa57173e044) Thanks [@adityatheoctocatdev](https://togithub.com/adityatheoctocatdev)! - Update all Toast variant icons to use `var(--color-fg-on-emphasis)` The only visible change is in the `warning` variant, previously using `var(--color-fg-default)` ### [`v18.0.2`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1802) [Compare Source](https://togithub.com/primer/css/compare/v18.0.1...v18.0.2) ##### Patch Changes - [#1680](https://togithub.com/primer/css/pull/1680) [`f013be66`](https://togithub.com/primer/css/commit/f013be66db59d21d7e2315303b5582169c59c479) Thanks [@privatenumber](https://togithub.com/privatenumber)! - Fixing broken close span tag in the docs.  - [#1677](https://togithub.com/primer/css/pull/1677) [`cdb0faa6`](https://togithub.com/primer/css/commit/cdb0faa606e6fb35ea4a85dd3866bbb33131b76c) Thanks [@simurai](https://togithub.com/simurai)! - Lower contrast for disabled text ### [`v18.0.1`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1801) [Compare Source](https://togithub.com/primer/css/compare/v18.0.0...v18.0.1) ##### Patch Changes - [#1663](https://togithub.com/primer/css/pull/1663) [`87b0b1d4`](https://togithub.com/primer/css/commit/87b0b1d4c91959c284bd53a2009a182dc9ef9b6e) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Removing the duplicate deprecation backgrounds ### [`v18.0.0`](https://togithub.com/primer/css/blob/HEAD/CHANGELOG.md#1800) [Compare Source](https://togithub.com/primer/css/compare/f95cc976967e7b6502992cc19099708f68739d51...v18.0.0) ##### Major Changes - [#1599](https://togithub.com/primer/css/pull/1599) [`13de16c7`](https://togithub.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Removing the rem() mixin and usages. Placing the computed values in place.  - [#1615](https://togithub.com/primer/css/pull/1615) [`612841f1`](https://togithub.com/primer/css/commit/612841f1bdd695aad2368a9f6817e6e0ee2c7a17) Thanks [@simurai](https://togithub.com/simurai)! - Update v1 deprecations  - [#1599](https://togithub.com/primer/css/pull/1599) [`13de16c7`](https://togithub.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Rename `modes.scss` file to `color-modes.scss` and move from the `base/` folder to the `support/variables` folder.  - [#1599](https://togithub.com/primer/css/pull/1599) [`13de16c7`](https://togithub.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Moving color modes to their own bundle, `./color-modes/` and separates color mode themes into their own scss file.  - [#1602](https://togithub.com/primer/css/pull/1602) [`852da9d5`](https://togithub.com/primer/css/commit/852da9d5e34a0ac622f089f34d314913282bda67) Thanks [@simurai](https://togithub.com/simurai)! - Remove V1 color utilities  - [#1617](https://togithub.com/primer/css/pull/1617) [`e47324fa`](https://togithub.com/primer/css/commit/e47324faa436e892b8621a6dac1fcb2cbad3cdf1) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Removing `<kbd>` import from markdown package. Going forward you'll need to include `@primer/css/base/kbd.scss` directly.  - [#1630](https://togithub.com/primer/css/pull/1630) [`5f7bb45c`](https://togithub.com/primer/css/commit/5f7bb45c2172393b2f014442067d95b3145c7136) Thanks [@simurai](https://togithub.com/simurai)! - Update utilities  - [#1599](https://togithub.com/primer/css/pull/1599) [`13de16c7`](https://togithub.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://togithub.com/jonrohan)! - Remove break-word from utilities ##### Minor Changes - [#1601](https://togithub.com/primer/css/pul </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/trussworks/research-design-playbook).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

simurai added 3 commits November 16, 2022 01:12

Add Avatar + AvatarStack styles from PCSS

93eafeb

Convert .scss to .pcss

5a0fe66

Update previews

7c30a89

simurai had a problem deploying to review-pr-1607 November 16, 2022 04:10 Error

github-actions bot added the css Pull requests that update CSS code label Nov 16, 2022

Create perfect-jokes-switch.md

fe0d6d5

simurai temporarily deployed to review-pr-1607 November 16, 2022 04:10 Inactive

simurai commented Nov 16, 2022

View reviewed changes

simurai temporarily deployed to github-pages November 16, 2022 04:14 Inactive

Generating component snapshots

ab1e22a

simurai commented Nov 16, 2022

View reviewed changes

Only use 1 avatar as default

3fc0bd1

simurai deployed to review-pr-1607 November 16, 2022 04:53 View deployment

simurai temporarily deployed to github-pages November 16, 2022 04:57 Inactive

Generating component snapshots

fbfe4c8

simurai marked this pull request as ready for review November 16, 2022 05:49

simurai requested a review from a team as a code owner November 16, 2022 05:49

simurai requested review from a team and jonrohan November 16, 2022 05:49

jonrohan approved these changes Nov 17, 2022

View reviewed changes

jonrohan merged commit c97f7b7 into main Nov 17, 2022

jonrohan deleted the avatar-pcss branch November 17, 2022 17:54

primer-css mentioned this pull request Nov 17, 2022

Release Tracking #1603

Merged

jonrohan mentioned this pull request Nov 23, 2022

Importing more styles from Primer View Components primer/css#2326

Merged

1 task

primer-css mentioned this pull request Dec 2, 2022

Release Tracking primer/css#2324

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move `Avatar` + `AvatarStack` styles to PVC #1607

Move `Avatar` + `AvatarStack` styles to PVC #1607

simurai commented Nov 16, 2022

changeset-bot bot commented Nov 16, 2022 •

edited

Loading

simurai Nov 16, 2022

jonrohan Nov 16, 2022

simurai Nov 17, 2022

github-actions bot commented Nov 16, 2022 •

edited

Loading

simurai Nov 16, 2022

		# @param href [String] text
		def default(size: 24, shape: :circle, href: nil)

Move Avatar + AvatarStack styles to PVC #1607

Move Avatar + AvatarStack styles to PVC #1607

Conversation

simurai commented Nov 16, 2022

Description

Integration

Merge checklist

changeset-bot bot commented Nov 16, 2022 • edited Loading

🦋 Changeset detected

simurai Nov 16, 2022

Choose a reason for hiding this comment

jonrohan Nov 16, 2022

Choose a reason for hiding this comment

simurai Nov 17, 2022

Choose a reason for hiding this comment

github-actions bot commented Nov 16, 2022 • edited Loading

⚠️ Visual differences found

simurai Nov 16, 2022

Choose a reason for hiding this comment

Move `Avatar` + `AvatarStack` styles to PVC #1607

Move `Avatar` + `AvatarStack` styles to PVC #1607

changeset-bot bot commented Nov 16, 2022 •

edited

Loading

github-actions bot commented Nov 16, 2022 •

edited

Loading