@primer/css 0.0.0-2021986475 → 0.0.0-20220107003629

package/CHANGELOG.md

@@ -1,6 +1,127 @@
 # @primer/css
 
-## 0.0.0-2021986475
+## 0.0.0-20220107003629
+
+### Minor Changes
+
+- [#1737](https://github.com/primer/css/pull/1737) [`6b4089d8`](https://github.com/primer/css/commit/6b4089d8b37174ca061762c56b5e4134a54cf4ef) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Adds new PageLayout component CSS with Storybook documentation
+
+### Patch Changes
+
+- [#1855](https://github.com/primer/css/pull/1855) [`8f2e7534`](https://github.com/primer/css/commit/8f2e7534ecbdb3d0e773d60c725b55dc4bb263e2) Thanks [@simurai](https://github.com/simurai)! - Bump primer/primitives to `7.4.0`
+
+* [#1869](https://github.com/primer/css/pull/1869) [`868f61a1`](https://github.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://github.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.
+
+- Fake entry to force publishing
+
+## 19.1.1
+
+### Patch Changes
+
+- [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for `max-width` media queries
+
+* [#1803](https://github.com/primer/css/pull/1803) [`c46fe918`](https://github.com/primer/css/commit/c46fe9186efbcf6e4a482685529bdb0bda28aa9f) Thanks [@langermank](https://github.com/langermank)! - - Adds ActionList tree-view specific CSS
+  - Minor bug fixes for ActionList default
+
+- [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for the `hide` utilities
+
+## 19.1.0
+
+### Minor Changes
+
+- [#1759](https://github.com/primer/css/pull/1759) [`74724ce7`](https://github.com/primer/css/commit/74724ce7c72b1cb540a9ef3d845169f1df17b55e) Thanks [@langermank](https://github.com/langermank)! - Remove `popover` responsive hack
+
+* [#1807](https://github.com/primer/css/pull/1807) [`13a4654f`](https://github.com/primer/css/commit/13a4654fa0854accfaabbbd2f21d2e0a1c90442d) Thanks [@enstyled](https://github.com/enstyled)! - Marketing: Add link components
+  Marketing: Add animated arrow utility
+  Marketing: Document button components with arrows
+
+### Patch Changes
+
+- [#1780](https://github.com/primer/css/pull/1780) [`8e9ba62d`](https://github.com/primer/css/commit/8e9ba62d30ed10c012b99dd998751df01ad6aa99) Thanks [@langermank](https://github.com/langermank)! - ActionList followup
+
+* [#1805](https://github.com/primer/css/pull/1805) [`99537d31`](https://github.com/primer/css/commit/99537d317f04ff5474a076ab96d3ea315b2181e2) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Fix local dev (revert webpack 5.5.0 → 6.0.0)
+
+- [#1781](https://github.com/primer/css/pull/1781) [`4d8dcf24`](https://github.com/primer/css/commit/4d8dcf24bc9e0732a9a2f34c94f6bcad7d3382dd) Thanks [@simurai](https://github.com/simurai)! - Reformat `rgba()` colors for `.btn-mktg`
+
+* [#1768](https://github.com/primer/css/pull/1768) [`4abb1af9`](https://github.com/primer/css/commit/4abb1af95b9b3c8c38512fa5e1e4fae9e7d01f4f) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Add disabled states for buttons (and tweak hover)
+
+- [#1792](https://github.com/primer/css/pull/1792) [`b1c43f1f`](https://github.com/primer/css/commit/b1c43f1f8d9b07b58b275665ca69abd5d4f7a5fc) Thanks [@simurai](https://github.com/simurai)! - Use `counter-border` for LHC
+
+* [#1808](https://github.com/primer/css/pull/1808) [`ee27583f`](https://github.com/primer/css/commit/ee27583f594248bd44122ea5dc81b12382c02b09) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Add hover and active states to btn-invisible
+
+- [#1818](https://github.com/primer/css/pull/1818) [`22c29e7a`](https://github.com/primer/css/commit/22c29e7a8b1b6a0df1dd61d400cc0dd132e0c909) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [Layout component] Avoid resizing `main` while loading
+
+## 19.0.0
+
+### Major Changes
+
+- [#1716](https://github.com/primer/css/pull/1716) [`9b97dc8f`](https://github.com/primer/css/commit/9b97dc8fec28e44d8619aff6da636ecd8e48daf9) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Update marketing buttons (including color mode support)
+
+### Minor Changes
+
+- [#1756](https://github.com/primer/css/pull/1756) [`ece7a3e6`](https://github.com/primer/css/commit/ece7a3e68c65252960b41d6df1b8ff64cb33c93f) Thanks [@heiskr](https://github.com/heiskr)! - Update mark tag to use background-color: var(--color-attention-subtle);
+
+* [#1754](https://github.com/primer/css/pull/1754) [`3838e174`](https://github.com/primer/css/commit/3838e1743aa63bacf0ca241c2a3c4983ba92c5e6) Thanks [@simurai](https://github.com/simurai)! - Add `Box--overlay` styles
+
+- [#1755](https://github.com/primer/css/pull/1755) [`1714778a`](https://github.com/primer/css/commit/1714778af72f5647894fca9561c56dfbccac62df) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating primer/primitives@7.1.0 and adding Light High Contrast theme
+
+### Patch Changes
+
+- [#1746](https://github.com/primer/css/pull/1746) [`9e6b5f56`](https://github.com/primer/css/commit/9e6b5f5671ab60e3a9d452f516fb7b38173f0135) Thanks [@simurai](https://github.com/simurai)! - Remove `Label` bg hack
+
+## 18.2.0
+
+### Minor Changes
+
+- [#1738](https://github.com/primer/css/pull/1738) [`dfe73db1`](https://github.com/primer/css/commit/dfe73db19556c4de8f57c9e610705af0a4d9f0f5) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Update `Layout`'s sidebar width values.
+
+* [#1657](https://github.com/primer/css/pull/1657) [`e7543009`](https://github.com/primer/css/commit/e754300989a4e762091a957edd324b26682b104a) Thanks [@langermank](https://github.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](https://primer.style/css/components/action-list).
+
+### Patch Changes
+
+- [#1731](https://github.com/primer/css/pull/1731) [`832e9988`](https://github.com/primer/css/commit/832e99886df66ea5860d725517aeb9d5f178dd58) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/primitives@6.1.0
+
+## 18.1.0
+
+### Minor Changes
+
+- [#1694](https://github.com/primer/css/pull/1694) [`b0e1687a`](https://github.com/primer/css/commit/b0e1687a562a194ed178fd2dd35588ff5da40847) Thanks [@simurai](https://github.com/simurai)! - Add more Octicon icon support to components
+
+* [#1711](https://github.com/primer/css/pull/1711) [`bc3b94d2`](https://github.com/primer/css/commit/bc3b94d26f08f65d3a4938bafa1b988585f35764) Thanks [@simurai](https://github.com/simurai)! - Add new color `Label`s
+
+### Patch Changes
+
+- [#1710](https://github.com/primer/css/pull/1710) [`6a058ecb`](https://github.com/primer/css/commit/6a058ecbaf7edac6fce4a0d56b4aca46ac6cd4fa) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating [@primer/primitives@6.0.0](https://github.com/primer/primitives/releases/tag/v6.0.0)
+
+* [#1712](https://github.com/primer/css/pull/1712) [`bc502033`](https://github.com/primer/css/commit/bc50203324ba03d4ece7ec6182c185a695626ffb) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config to 12.1.0
+
+- [#1708](https://github.com/primer/css/pull/1708) [`f7c44c35`](https://github.com/primer/css/commit/f7c44c35f8085f2b793581a901ecb22c5174ef6a) Thanks [@langermank](https://github.com/langermank)! - Storybook: add Label stories
+
+* [#1690](https://github.com/primer/css/pull/1690) [`af5a3ae8`](https://github.com/primer/css/commit/af5a3ae82668d6d04af8c3465302980dcf062cc4) Thanks [@simurai](https://github.com/simurai)! - Update `Subhead` actions
+
+- [#1707](https://github.com/primer/css/pull/1707) [`a997790b`](https://github.com/primer/css/commit/a997790b69f0f3bb5c7a2dfc97c5d5c743bb6a38) Thanks [@maximedegreve](https://github.com/maximedegreve)! - Fix for disabled Safari inputs
+
+* [#1693](https://github.com/primer/css/pull/1693) [`c1ca19d4`](https://github.com/primer/css/commit/c1ca19d4f071a9b12172e4a13bdb96c52a200d47) Thanks [@jasonmacgowan](https://github.com/jasonmacgowan)! - Fix light-theme attr reference in theme docs
+
+- [#1689](https://github.com/primer/css/pull/1689) [`257f68f6`](https://github.com/primer/css/commit/257f68f6539539ab809fbdb4351aefa57173e044) Thanks [@adityatheoctocatdev](https://github.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)`
+
+## 18.0.2
+
+### Patch Changes
+
+- [#1680](https://github.com/primer/css/pull/1680) [`f013be66`](https://github.com/primer/css/commit/f013be66db59d21d7e2315303b5582169c59c479) Thanks [@privatenumber](https://github.com/privatenumber)! - Fixing broken close span tag in the docs.
+
+* [#1677](https://github.com/primer/css/pull/1677) [`cdb0faa6`](https://github.com/primer/css/commit/cdb0faa606e6fb35ea4a85dd3866bbb33131b76c) Thanks [@simurai](https://github.com/simurai)! - Lower contrast for disabled text
+
+## 18.0.1
+
+### Patch Changes
+
+- [#1663](https://github.com/primer/css/pull/1663) [`87b0b1d4`](https://github.com/primer/css/commit/87b0b1d4c91959c284bd53a2009a182dc9ef9b6e) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing the duplicate deprecation backgrounds
+
+## 18.0.0
 
 ### Major Changes
 
@@ -16,7 +137,7 @@
 
 * [#1617](https://github.com/primer/css/pull/1617) [`e47324fa`](https://github.com/primer/css/commit/e47324faa436e892b8621a6dac1fcb2cbad3cdf1) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing `<kbd>` import from markdown package. Going forward you'll need to include `@primer/css/base/kbd.scss` directly.
 
-- [#1630](https://github.com/primer/css/pull/1630) [`ab3897cb`](https://github.com/primer/css/commit/ab3897cba89f390bf2a9488c642995f28c27bde1) Thanks [@simurai](https://github.com/simurai)! - Update utilities
+- [#1630](https://github.com/primer/css/pull/1630) [`5f7bb45c`](https://github.com/primer/css/commit/5f7bb45c2172393b2f014442067d95b3145c7136) Thanks [@simurai](https://github.com/simurai)! - Update utilities
 
 * [#1599](https://github.com/primer/css/pull/1599) [`13de16c7`](https://github.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove break-word from utilities
 
@@ -34,17 +155,17 @@
 
 ### Patch Changes
 
-- Fake entry to force publishing
+- [#1628](https://github.com/primer/css/pull/1628) [`ce197c9f`](https://github.com/primer/css/commit/ce197c9ff18cedd842893186953b68805eed637d) Thanks [@edokoa](https://github.com/edokoa)! - Update flash alert icons
 
-* [#1628](https://github.com/primer/css/pull/1628) [`ce197c9f`](https://github.com/primer/css/commit/ce197c9ff18cedd842893186953b68805eed637d) Thanks [@edokoa](https://github.com/edokoa)! - Update flash alert icons
+* [#1629](https://github.com/primer/css/pull/1629) [`54d3068b`](https://github.com/primer/css/commit/54d3068bd628f771aacae6b1ce269a5a2cc2d8a1) Thanks [@jdanyow](https://github.com/jdanyow)! - remove remaining color-border-primary refs
 
-- [#1629](https://github.com/primer/css/pull/1629) [`54d3068b`](https://github.com/primer/css/commit/54d3068bd628f771aacae6b1ce269a5a2cc2d8a1) Thanks [@jdanyow](https://github.com/jdanyow)! - remove remaining color-border-primary refs
+- [#1631](https://github.com/primer/css/pull/1631) [`5f3689b9`](https://github.com/primer/css/commit/5f3689b907163f7be9e78abb9fc762978beda06d) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config and @primer/primitives to 5.0
 
-* [#1631](https://github.com/primer/css/pull/1631) [`5f3689b9`](https://github.com/primer/css/commit/5f3689b907163f7be9e78abb9fc762978beda06d) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config and @primer/primitives to 5.0
+* [#1659](https://github.com/primer/css/pull/1659) [`d32e42f9`](https://github.com/primer/css/commit/d32e42f9ca0ca4eef546d190171cd9e5b4ec8f3d) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename protanopia themes to colorblind.
 
-- [#1659](https://github.com/primer/css/pull/1659) [`d32e42f9`](https://github.com/primer/css/commit/d32e42f9ca0ca4eef546d190171cd9e5b4ec8f3d) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename protanopia themes to colorblind.
+- [#1658](https://github.com/primer/css/pull/1658) [`0ed0307b`](https://github.com/primer/css/commit/0ed0307b7b79ae59a898c3e8b5e1c9bd2dcd4a7d) Thanks [@koddsson](https://github.com/koddsson)! - Increase the z-index value for the details dialog overlay.
 
-* [#1658](https://github.com/primer/css/pull/1658) [`0ed0307b`](https://github.com/primer/css/commit/0ed0307b7b79ae59a898c3e8b5e1c9bd2dcd4a7d) Thanks [@koddsson](https://github.com/koddsson)! - Increase the z-index value for the details dialog overlay.
+* [#1661](https://github.com/primer/css/pull/1661) [`ebb573ff`](https://github.com/primer/css/commit/ebb573ff09a5ea4eef01e0ccbb7213defaa95321) Thanks [@simurai](https://github.com/simurai)! - Update bg deprecations
 
 ## 17.11.0
 

package/DEVELOP.md

@@ -41,6 +41,20 @@ The [docs directory](../docs/) contains all of the documentation files in our do
 ### Code blocks
 All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
 
+## Storybook
+
+Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic. 
+
+```sh
+npm run storybook
+```
+
+### The Storybook directory
+Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
+
+### Stories
+Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
+
 ## Scripts
 Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
 
@@ -51,6 +65,7 @@ Our [`package.json`](package.json) houses a collection of [run-scripts] that we
 * `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
 * `start` runs the documentation site locally (alias: `dev`).
 * `test` runs our test suite.
+* `storybook` runs storybook local development server.
 
 The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
 

package/actionlist/action-list-item-divider.scss

@@ -0,0 +1,42 @@
+// emtpy divider
+
+.ActionList-sectionDivider {
+  // has children
+  &:not(:empty) {
+    display: flex;
+    // stylelint-disable-next-line primer/spacing
+    padding: ($spacer-1 * 1.5) $spacer-2;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: var(--color-fg-muted);
+    flex-direction: column;
+  }
+
+  // no children
+  &:empty {
+    height: 1px;
+    padding: 0;
+    // stylelint-disable-next-line primer/spacing
+    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
+    list-style: none;
+    background: var(--color-action-list-item-inline-divider);
+    border: 0;
+  }
+}
+
+.ActionList-sectionDivider--filled {
+  margin: $spacer-2 ($spacer-2 * -1);
+  background: var(--color-canvas-subtle);
+  border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
+  border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
+
+  // if no children, treat as divider
+  &:empty {
+    height: $spacer-2;
+    box-sizing: border-box;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+}