Merge branch 'main' into next_major

primer · Dec 6, 2021 · 4d75a10 · 4d75a10
2 parents 95e606c + 4a00387
commit 4d75a10
Show file tree

Hide file tree

Showing 100 changed files with 9,687 additions and 3,282 deletions.
diff --git a/.changeset/fresh-schools-pull.md b/.changeset/fresh-schools-pull.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+ActionList followup
diff --git a/.changeset/long-panthers-provide.md b/.changeset/long-panthers-provide.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix local dev (revert webpack 5.5.0 → 6.0.0)
diff --git a/.changeset/nasty-bananas-drive.md b/.changeset/nasty-bananas-drive.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Reformat `rgba()` colors for `.btn-mktg`
diff --git a/.changeset/neat-cheetahs-rescue.md b/.changeset/neat-cheetahs-rescue.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Remove `popover` responsive hack
diff --git a/.changeset/orange-camels-heal.md b/.changeset/orange-camels-heal.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Marketing: Add disabled states for buttons (and tweak hover)
diff --git a/.changeset/short-pugs-press.md b/.changeset/short-pugs-press.md
@@ -0,0 +1,7 @@
+---
+"@primer/css": minor
+---
+
+Marketing: Add link components
+Marketing: Add animated arrow utility
+Marketing: Document button components with arrows
diff --git a/.changeset/shy-vans-draw.md b/.changeset/shy-vans-draw.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add hover and active states to btn-invisible
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -8,7 +8,7 @@ updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/docs" # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: "monthly"
 
   # Maintain dependencies for GitHub Actions
   - package-ecosystem: "github-actions"

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -21,14 +21,23 @@ jobs:
       - name: Push up any fixes
         if: ${{ github.event_name == 'pull_request' }}
         run: |
-          git remote update
-          git fetch
-          git checkout --track origin/$GITHUB_HEAD_REF
-          git config --local user.email "[email protected]"
-          git config --local user.name "Actions Auto Build"
-          git add .
-          git commit -m "Stylelint auto-fixes" || true
-          git push
+          set +e
+          git status | grep modified
+          if [ $? -eq 0 ]
+          then
+              set -e
+              git remote update
+              git fetch
+              git checkout --track origin/$GITHUB_HEAD_REF
+              git config --local user.email "[email protected]"
+              git config --local user.name "Actions Auto Build"
+              git add src
+              git commit -m "Stylelint auto-fixes"
+              git push
+          else
+              set -e
+              echo "No changes since last run"
+          fi
 
   eslint:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/release_canary.yml b/.github/workflows/release_canary.yml
@@ -9,7 +9,6 @@ on:
     # It's not necessary because we don't ship them and it creates noise
     paths-ignore:
       - '.changeset/**'
-      - '.github/**'
       - 'docs/**'
       - 'lib/**'
       - '__tests__/**'
@@ -20,53 +19,9 @@ on:
 jobs:
   release-canary:
     name: Canary
-    if: ${{ github.repository == 'primer/css' }}
-
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
-          fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14.x
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Create .npmrc
-        run: |
-          cat << EOF > "$HOME/.npmrc"
-            //registry.npmjs.org/:_authToken=$NPM_TOKEN
-          EOF
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
-
-      - name: Publish canary version
-        run: |
-          echo "$( jq '.version = "0.0.0"' package.json )" > package.json
-          echo -e "---\n'@primer/css': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
-          rm -f .changeset/pre.json
-          yarn changeset version --snapshot
-          yarn changeset publish --tag canary
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Output canary version number
-        uses: actions/github-script@v5
-        with:
-          script: |
-            const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
-            github.rest.repos.createCommitStatus({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              sha: context.sha,
-              state: 'success',
-              context: `Published ${package.name}`,
-              description: package.version,
-              target_url: `https://unpkg.com/${package.name}@${package.version}/`
-            })
+    uses: primer/.github/.github/workflows/release_canary.yml@main
+    with:
+      install: yarn
+    secrets:
+      github_token: ${{ secrets.GITHUB_TOKEN }}
+      npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
diff --git a/.vscode/story-template.code-snippets b/.vscode/story-template.code-snippets
@@ -7,71 +7,70 @@
             "// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions",
             "",
             "export default {",
-            "    title: 'Components/ComponentName',",
-            "    excludeStories: ['ComponentTemplateName'],",
-            "    argTypes: {",
-            "        booleanExample: {",
-            "            control: { type: 'boolean' },",
-            "            description: 'true/false toggle to controls',",
-            "            table: {",
-            "                category: 'Pick one: CSS, HTML, Interactive'",
-            "            }",
-            "        },",
-            "        selectExample: {",
-            "            options: [0, 1, 2, 3], // iterator",
-            "            mapping: ['string1', 'string2', 'string3', 'string4'], // values",
-            "            control: {",
-            "                type: 'select',",
-            "                labels: ['string1-label', 'string2-label', 'string3-label', 'string4-label'] // public labels",
-            "            },",
-            "            description: 'select menu mapping to strings (example: use for variant class names)',",
-            "            table: {",
-            "                category: 'Pick one: CSS, HTML, Interactive'",
-            "            }",
-            "        },",
-            "        stringExample: {",
-            "            name: 'stringExample',",
-            "            type: 'string',",
-            "            description: 'text box control',",
-            "            table: {",
-            "                category: 'Pick one: CSS, HTML, Interactive'",
-            "            }",
-            "        },",
-            "        children: {",
-            "            description: 'creates a slot for children',",
-            "            table: {",
-            "                category: 'HTML'",
-            "            }",
-            "        },",
+            "  title: 'Components/ComponentName',",
+            "  excludeStories: ['ComponentTemplateName'],",
+            "  layout: 'padded',",
+            "  argTypes: {",
+            "    booleanExample: {",
+            "      control: {type: 'boolean'},",
+            "      description: 'true/false toggle to controls',",
+            "      table: {",
+            "        category: 'Pick one: CSS, HTML, Interactive'",
+            "      }",
+            "    },",
+            "    radioExample: {",
+            "      options: ['string1', 'string2', 'string3', 'string4'],",
+            "      control: {",
+            "        type: 'inline-radio',",
+            "      },",
+            "      description: 'radio buttons mapping to strings (example: use for variant class names)',",
+            "      table: {",
+            "        category: 'Pick one: CSS, HTML, Interactive'",
+            "      }",
+            "    },",
+            "    stringExample: {",
+            "      name: 'stringExample',",
+            "      type: 'string',",
+            "      description: 'text box control',",
+            "      table: {",
+            "        category: 'Pick one: CSS, HTML, Interactive'",
+            "      }",
+            "    },",
+            "    children: {",
+            "      description: 'creates a slot for children',",
+            "      table: {",
+            "        category: 'HTML'",
+            "      }",
             "    }",
+            "  }",
             "}",
             "",
             "// build every component case here in the template (private api)",
-            "export const ComponentTemplateName = ({ booleanExample, selectExample, stringExample, children }) => (",
-            "    <div",
-            "        // use clsx for multiple classnames",
-            "        className={clsx('defaultClass', selectExample && `${selectExample}`, booleanExample && 'defaultClass--modifier')}",
-            "        // use undefined for values that shouldn't be set if false",
-            "        aria-hidden={booleanExample ? 'true' : undefined}",
-            "    >",
-            "        {/* use {children} for wrapper component templates */}",
-            "        <>",
-            "        {stringExample}",
-            "        {children}",
-            "        </>",
-            "    </div>",
+            "export const ComponentTemplateName = ({booleanExample, radioExample, stringExample, children}) => (",
+            "  <div",
+            "    // use clsx for multiple classnames",
+            "    className={clsx('defaultClass', radioExample && `radioExample`, booleanExample && 'defaultClass--modifier')}",
+            "    // use undefined for values that shouldn't be set if false",
+            "    // aria-hidden={booleanExample ? 'true' : undefined}",
+            "  >",
+            "    {/* use {children} for wrapper component templates */}",
+            "    <>",
+            "      {stringExample}",
+            "      {children}",
+            "    </>",
+            "  </div>",
             ")",
             "",
             "// create a \"playground\" demo page that may set some defaults and allow story to access component controls",
             "export const Playground = ComponentTemplateName.bind({})",
             "Playground.args = {",
-            "    stringExample: 'Default text',",
-            "    booleanExample: false,",
-            "    children: (",
-            "        <>",
-            "            <StoryTemplateName someProp=\"Use props from other stories\" />",
-            "        </>",
-            "    )",
+            "  stringExample: 'Default text',",
+            "  booleanExample: false",
+            "  //   children: (",
+            "  //     <>",
+            "  //       <StoryTemplateName {...StoryTemplateName.args} />",
+            "  //     </>",
+            "  //   )",
             "}",
             ""
         ],

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,35 @@
 # @primer/css
 
+## 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/[email protected] 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

diff --git a/DEVELOP.md b/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.
 

diff --git a/docs/.storybook/main.js b/docs/.storybook/main.js
@@ -6,6 +6,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/preset-scss',
     '@whitespace/storybook-addon-html',
-    'storybook-addon-designs'
+    'storybook-addon-designs',
+    'storybook-color-picker'
   ]
 }
diff --git a/docs/.storybook/manager-head.html b/docs/.storybook/manager-head.html
@@ -0,0 +1,10 @@
+<style>
+{# storybook ui overrides #}
+#color-picker {
+    max-width: 40vw;
+}
+
+.css-10x86lf-Colors {
+    width: 20ch !important;
+}
+</style>
diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
@@ -4,12 +4,26 @@
       Helvetica Neue, sans-serif;
     color: var(--color-fg-default);
     background-color: var(--color-canvas-default);
-    padding: 1rem;
+    height: 100vh;
   }
 
   .theme-wrap {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     height: 100vh;
   }
+
+  .theme-wrap .story-wrap {
+    padding: 1rem;
+    height: unset;
+  }
+
+  .sb-main-padded .theme-wrap {
+    margin: -1rem;
+  }
+
+  .sb-main-padded div:not(.theme-wrap) > [data-dark-theme] {
+    margin: -1rem;
+    padding: 1rem;
+  }
 </style>