Merge branch 'main' into aja/high-contrast-windows

primer · Jan 20, 2022 · 341dec4 · 341dec4
2 parents f17f2f9 + d1adf59
commit 341dec4
Show file tree

Hide file tree

Showing 19 changed files with 1,699 additions and 1,757 deletions.
diff --git a/.changeset/seven-steaks-wait.md b/.changeset/seven-steaks-wait.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix layout gutter none styles
diff --git a/.changeset/swift-actors-drum.md b/.changeset/swift-actors-drum.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Make `pagination` responsive by default
diff --git a/.npmrc b/.npmrc
@@ -1,3 +1,2 @@
 git-tag-version=false
-save-exact=true
 package-lock=false
diff --git a/docs/.storybook/preview.js b/docs/.storybook/preview.js
@@ -101,7 +101,19 @@ export const parameters = {
   html: {
     root: '#story' // target id for html tab (should be direct parent of <Story /> for easy copy/paste)
   },
-  viewport: {viewports: customViewports}
+  viewport: {viewports: customViewports},
+  options: {
+    storySort: (storyA, storyB) => {
+      if (storyA[1].title.includes('Examples')) {
+        // if both are stories, sort alphabetically
+        if (storyB[1].title.includes('Examples')) return -1
+        // if only 1 is a story, push the examples story down
+        else return 1
+      }
+      // sort as usual = alphabetical
+      return -1
+    }
+  }
 }
 
 const themes = [
@@ -131,9 +143,10 @@ export const decorators = [
   (Story, context) => {
     return (
       <div class="theme-wrap">
-        { themes.map((theme) => {
-            if (context.globals.theme === theme || context.globals.theme === 'all') {
-              return <div
+        {themes.map(theme => {
+          if (context.globals.theme === theme || context.globals.theme === 'all') {
+            return (
+              <div
                 id="story"
                 className="story-wrap"
                 data-color-mode={theme.startsWith('dark') ? 'dark' : 'light'}
@@ -142,8 +155,9 @@ export const decorators = [
               >
                 <Story {...context} />
               </div>
-            }
-          })}
+            )
+          }
+        })}
       </div>
     )
   }

diff --git a/docs/package.json b/docs/package.json
@@ -49,16 +49,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-a11y": "6.4.12",
+    "@storybook/addon-actions": "^6.4.12",
+    "@storybook/addon-essentials": "^6.4.12",
+    "@storybook/addon-links": "^6.4.12",
     "@storybook/addon-postcss": "2.0.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "6.4.9",
+    "@storybook/react": "6.4.12",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-loader": "^8.2.3",
-    "storybook-addon-designs": "6.2.0",
-    "storybook-color-picker": "2.1.5"
+    "storybook-addon-designs": "6.2.1",
+    "storybook-color-picker": "2.3.0"
   }
 }
diff --git a/docs/src/stories/components/ActionList/Accessibility.stories.mdx b/docs/src/stories/components/ActionList/Accessibility.stories.mdx
@@ -44,12 +44,6 @@ The `menu` role should be reserved for dropdown menu scenarios
 | `li`    | has child link `role="none"`    |
 | `a`     | `role="menuitem"`               |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--menu-with-section-divider" />
-</Canvas>
-
 ### Navigational list of links
 
 [Navigation spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/landmarks/navigation.html)
@@ -58,12 +52,6 @@ Wrap `ActionList` in a `nav` element for site or page navigation, like a sidebar
 
 No roles needed
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--nav-with-sub-items" />
-</Canvas>
-
 ### Multi select dropdown menu
 
 [Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
@@ -74,12 +62,6 @@ No roles needed
 | `li`    | `role="menuitemcheckbox"`   |
 | `li`    | `aria-checked="true/false"` |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--menu-multi-select" />
-</Canvas>
-
 ### Single select dropdown menu
 
 [Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
@@ -90,12 +72,6 @@ No roles needed
 | `li`    | `role="menuitemradio"`      |
 | `li`    | `aria-checked="true/false"` |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--menu-single-select" />
-</Canvas>
-
 ### Multi select listbox
 
 [Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
@@ -107,12 +83,6 @@ No roles needed
 | `li`    | `role="option"`               |
 | `li`    | `aria-selected="true/false"`  |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--list-multi-select" />
-</Canvas>
-
 ### Single select listbox
 
 [Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
@@ -125,42 +95,14 @@ Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wa
 | `li`    | `role="option"`              |
 | `li`    | `aria-selected="true/false"` |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--list-single-select" />
-</Canvas>
-
-### List of links
-
-No roles needed
-
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--list" />
-</Canvas>
-
 ### Dividers
 
 | Element | Role               |
 | :------ | :----------------- |
 | `li`    | `role="separator"` |
 
-#### Empty example
-
-<Canvas>
-  <Story id="components-actionlist-actionlistitem-features--divider-empty" />
-</Canvas>
-
 | Element | Role                                        |
 | :------ | :------------------------------------------ |
 | `li`    | `role="presentation"`                       |
 | `li`    | id for nested group `id="group-id"`         |
 | `li`    | if it has id for group `aria-hidden="true"` |
-
-#### With title example
-
-<Canvas>
-  <Story id="components-actionlist-actionlistitem-features--divider-text" />
-</Canvas>
diff --git a/docs/src/stories/components/ActionList/ActionList.stories.jsx b/docs/src/stories/components/ActionList/ActionList.stories.jsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import {ListItemTemplate} from './ActionListItem.stories'
 
 export default {
-  title: 'Components/ActionList',
+  title: 'Components/ActionList/ActionList',
   excludeStories: ['ListTemplate'],
   parameters: {
     design: {

diff --git a/docs/src/stories/components/ActionList/ActionListDividerFeatures.stories.jsx b/docs/src/stories/components/ActionList/ActionListDividerFeatures.stories.jsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ListTemplate} from './ActionList.stories'
+import {ListItemTemplate} from './ActionListItem.stories'
+import {DividerTemplate} from './ActionListDivider.stories'
+
+export default {
+  title: 'Components/ActionList/ActionListDivider/Features',
+  decorators: [
+    Story => (
+      <ul className="ActionList" role="menu">
+        <Story />
+      </ul>
+    )
+  ]
+}
+
+export const WithTitle = DividerTemplate.bind({})
+WithTitle.args = {
+  title: 'List group title'
+}
+
+export const Subtle = DividerTemplate.bind({})
+Subtle.args = {
+  variant: 'subtle',
+  title: 'List group title'
+}
+
+export const Filled = DividerTemplate.bind({})
+Filled.args = {
+  variant: 'ActionList-sectionDivider--filled',
+  title: 'List group title'
+}
+
+export const WithDescription = DividerTemplate.bind({})
+WithDescription.args = {
+  title: 'List group title',
+  description: 'Group description'
+}
+
+export const RolePresentation = DividerTemplate.bind({})
+RolePresentation.storyName = '[role="presentation"]'
+RolePresentation.args = {
+  title: 'List group title'
+}
+
+export const RoleSeparator = DividerTemplate.bind({})
+RoleSeparator.storyName = '[role="separator"]'
+RoleSeparator.args = {}
+
+export const Empty = DividerTemplate.bind({})