diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index eb03329ee0..f24aa06f1d 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -10,8 +10,8 @@ -### Are additional changes needed? +### Can these changes ship as is? -- [ ] No, this PR should be ok to ship as is. đŸšĸ +- [ ] Yes, this PR does not depend on additional changes. đŸšĸ diff --git a/.github/workflows/axe.yml b/.github/workflows/axe.yml new file mode 100644 index 0000000000..36eb9b251e --- /dev/null +++ b/.github/workflows/axe.yml @@ -0,0 +1,45 @@ +name: axe +on: + push: + branches: + - main + pull_request: + branches: + - main +jobs: + axe: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + - name: Get changed files + id: changed-files + uses: tj-actions/changed-files@v19 + with: + files: | + docs/content/components/**/*.md + docs/content/utilities/**/*.md + files_ignore: | + docs/content/components/index.md + docs/content/utilities/index.md + - name: Save changed files + run: | + echo "STRING_OF_PATHS_WE_CARE_ABOUT=${{ steps.changed-files.outputs.all_changed_files }}" >> $GITHUB_ENV + - name: Use Node.js + if: steps.changed-files.outputs.any_changed == 'true' + uses: actions/setup-node@v3 + with: + node-version: 14 + - run: yarn + if: steps.changed-files.outputs.any_changed == 'true' + - run: yarn dist + if: steps.changed-files.outputs.any_changed == 'true' + - name: Run docs site + if: steps.changed-files.outputs.any_changed == 'true' + run: | + npm run dev & npx wait-on http://localhost:8000 + - name: Run axe script + if: steps.changed-files.outputs.any_changed == 'true' + run: | + script/axe-docs $STRING_OF_PATHS_WE_CARE_ABOUT diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 333eb0d3a9..2d8af39c84 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -8,8 +8,8 @@ jobs: stylelint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - run: yarn @@ -44,8 +44,8 @@ jobs: eslint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - run: yarn @@ -55,8 +55,8 @@ jobs: test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - run: yarn diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml new file mode 100644 index 0000000000..d00446fbf6 --- /dev/null +++ b/.github/workflows/codeql.yml @@ -0,0 +1,70 @@ +# For most projects, this workflow file will not need changing; you simply need +# to commit it to your repository. +# +# You may wish to alter this file to override the set of languages analyzed, +# or to provide custom queries or build logic. +# +# ******** NOTE ******** +# We have attempted to detect the languages in your repository. Please check +# the `language` matrix defined below to confirm you have the correct set of +# supported CodeQL languages. +# +name: "CodeQL" + +on: + push: + branches: [ main, next_major ] + pull_request: + # The branches below must be a subset of the branches above + branches: [ main ] + schedule: + - cron: '34 14 * * 0' + +jobs: + analyze: + name: Analyze + runs-on: ubuntu-latest + permissions: + actions: read + contents: read + security-events: write + + strategy: + fail-fast: false + matrix: + language: [ 'javascript' ] + # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] + # Learn more about CodeQL language support at https://git.io/codeql-language-support + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + # queries: ./path/to/local/query, your-org/your-repo/queries@main + + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v2 + + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl + + # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language + + #- run: | + # make bootstrap + # make release + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2 diff --git a/.github/workflows/deploy_preview.yml b/.github/workflows/deploy_preview.yml index 0b203a64d5..f033dea4ef 100644 --- a/.github/workflows/deploy_preview.yml +++ b/.github/workflows/deploy_preview.yml @@ -1,74 +1,57 @@ name: Deploy on: - push: - branches-ignore: - - 'main' - paths: - - 'src/**' - - 'docs/**' - - '.github/workflows/deploy*.yml' - - 'package.json' + pull_request: + +permissions: + contents: write + pages: write + id-token: write + deployments: write + issues: write + statuses: write + checks: write + jobs: - deploy-preview: + deploy: if: ${{ github.repository == 'primer/css' }} - name: Preview + uses: primer/.github/.github/workflows/deploy_preview.yml@main + name: Deploy preview + with: + node_version: 14 + install: yarn && cd docs && yarn && cd .. + build: yarn build:docs:preview + output_dir: docs/public + + deploy-storybook: + if: ${{ github.repository == 'primer/css' }} + name: Preview Storybook runs-on: ubuntu-latest + needs: deploy steps: - - uses: actions/checkout@v2 - - uses: chrnorm/deployment-action@v1.2.0 - name: Create GitHub deployment - id: deployment - with: - token: ${{ secrets.GITHUB_TOKEN }} - environment: Preview + - uses: actions/checkout@v3 + - uses: chrnorm/deployment-action@v1.2.0 name: Create GitHub deployment for storybook id: storybook with: token: ${{ secrets.GITHUB_TOKEN }} environment: Storybook Preview + target_url: '${{ needs.deploy.outputs.deployment_url }}/storybook' - - name: Vercel Action - uses: amondnet/vercel-action@v20 - id: vercel-action - with: - github-token: ${{ secrets.GITHUB_TOKEN }} - vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }} - github-comment: false - vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }} - vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} - - - name: Update deployment status (success) - if: success() - uses: chrnorm/deployment-status@v1.0.0 - with: - token: ${{ secrets.GITHUB_TOKEN }} - environment_url: ${{ steps.vercel-action.outputs.preview-url }} - state: "success" - deployment_id: ${{ steps.deployment.outputs.deployment_id }} - - name: Update storybook deployment status (success) if: success() uses: chrnorm/deployment-status@v1.0.0 with: token: ${{ secrets.GITHUB_TOKEN }} - environment_url: '${{ steps.vercel-action.outputs.preview-url }}/css/storybook' - state: "success" + environment_url: '${{ needs.deploy.outputs.deployment_url }}/storybook' + target_url: '${{ needs.deploy.outputs.deployment_url }}/storybook' + state: 'success' deployment_id: ${{ steps.storybook.outputs.deployment_id }} - - name: Update deployment status (failure) - if: failure() - uses: chrnorm/deployment-status@v1.0.0 - with: - token: ${{ secrets.GITHUB_TOKEN }} - state: "failure" - deployment_id: ${{ steps.deployment.outputs.deployment_id }} - - name: Update storybook deployment status (failure) if: failure() uses: chrnorm/deployment-status@v1.0.0 with: token: ${{ secrets.GITHUB_TOKEN }} - state: "failure" + state: 'failure' deployment_id: ${{ steps.storybook.outputs.deployment_id }} - diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml index b8e2d86818..f7cc04f863 100644 --- a/.github/workflows/deploy_production.yml +++ b/.github/workflows/deploy_production.yml @@ -3,31 +3,44 @@ on: push: branches: - 'main' - paths: - - 'src/**' - - 'docs/**' - - '.github/workflows/deploy*.yml' - - 'package.json' + +permissions: + contents: write + pages: write + id-token: write + deployments: write + issues: write + statuses: write + checks: write + jobs: - deploy: - if: ${{ github.repository == 'primer/css' }} - name: Production + guard: + name: Guard runs-on: ubuntu-latest + outputs: + # To avoid deploying documentation for unrelease changes, we check the number of changeset files. + # If it's 0, we deploy. + should_deploy: ${{ steps.changeset-count.outputs.change_count == 0 }} steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - # Check the number of changeset files, if it's 0 we deploy - id: changeset-count - run: echo "::set-output name=CHANGE_COUNT::$(ls .changeset/*.md | grep -v README | wc -l | xargs)" + run: echo "::set-output name=change_count::$(ls .changeset/*.md | grep -v README | wc -l | xargs)" - - if: ${{ steps.changeset-count.outputs.CHANGE_COUNT == 0 }} - name: Vercel Action - uses: amondnet/vercel-action@v20 - id: vercel-action - with: - github-token: ${{ secrets.GITHUB_TOKEN }} - vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }} - vercel-args: '--prod' - github-comment: false - vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }} - vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} + # Log changeset count for debugging purposes + - name: Log changeset count + run: echo ${{ steps.changeset-count.outputs.change_count }} + + # Log guard output for debugging purposes + - name: Log guard output + run: echo ${{ needs.guard.outputs.should_deploy }} + deploy: + if: ${{ github.repository == 'primer/css' }} + name: Production + needs: [guard] + uses: primer/.github/.github/workflows/deploy.yml@main + with: + node_version: 14 + install: yarn && cd docs && yarn && cd .. + build: yarn build:docs + output_dir: docs/public diff --git a/.github/workflows/next_major.yml b/.github/workflows/next_major.yml new file mode 100644 index 0000000000..7270404858 --- /dev/null +++ b/.github/workflows/next_major.yml @@ -0,0 +1,14 @@ +name: Next Major Pull Request +on: + push: + branches: + - 'changeset-release/next_major' + +jobs: + next_major_pr: + runs-on: ubuntu-latest + steps: + - name: Don't Merge + run: | + echo "Don't merge the next_major, changeset pr into next_major. Instead when you're ready to release a new major version, change the base of this pr to main, and merge." + exit 1 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b9a7ae03fb..4e88ab9475 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -12,14 +12,14 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout repository - uses: actions/checkout@v2 + uses: actions/checkout@v3 with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 persist-credentials: false - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: node-version: 14.x diff --git a/.github/workflows/release_candidate.yml b/.github/workflows/release_candidate.yml index 2f2665c4a4..d8f70069c6 100644 --- a/.github/workflows/release_candidate.yml +++ b/.github/workflows/release_candidate.yml @@ -12,13 +12,13 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout repository - uses: actions/checkout@v2 + uses: actions/checkout@v3 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 + uses: actions/setup-node@v3 with: node-version: 14.x @@ -42,7 +42,7 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Output candidate version number - uses: actions/github-script@v5 + uses: actions/github-script@v6 with: script: | const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`) diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml index c406c690cd..4fc120dfa3 100644 --- a/.github/workflows/stale.yml +++ b/.github/workflows/stale.yml @@ -7,7 +7,7 @@ jobs: stale: runs-on: ubuntu-latest steps: - - uses: actions/stale@v4 + - uses: actions/stale@v5 with: # General settings diff --git a/.github/workflows/welcome.yml b/.github/workflows/welcome.yml index 036cf1fd6f..939121c7a4 100644 --- a/.github/workflows/welcome.yml +++ b/.github/workflows/welcome.yml @@ -8,15 +8,15 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout repository - uses: actions/checkout@v2 + uses: actions/checkout@v3 - name: Set up Node.js - uses: actions/setup-node@v2 + uses: actions/setup-node@v3 with: node-version: 14.x - name: Get or Create Comment - uses: actions/github-script@v5 + uses: actions/github-script@v6 with: github-token: ${{ secrets.GITHUB_TOKEN }} script: | @@ -42,8 +42,8 @@ jobs: needs: release-template runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 14 - run: yarn @@ -85,7 +85,7 @@ jobs: name: Semantic Version Label runs-on: ubuntu-latest steps: - - uses: actions/github-script@v5 + - uses: actions/github-script@v6 id: version-result with: github-token: "${{ secrets.GITHUB_TOKEN }}" @@ -93,12 +93,12 @@ jobs: script: | const diff_url = context.payload.pull_request.diff_url const result = await github.request(diff_url) - const match = [...result.data.matchAll(/^\+['"]@primer\/css['"]:\s(patch|minor|major)/m)] + const match = [...result.data.matchAll(/^\+['"]@primer\/css['"]:\s(patch|minor|major)/mg)] if (match && match[0]) { return match[0][1] } - - uses: actions/github-script@v5 + - uses: actions/github-script@v6 env: RELEASE: ${{ steps.version-result.outputs.result }} with: diff --git a/CHANGELOG.md b/CHANGELOG.md index 6391761ac3..44f9d21c83 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,153 @@ # @primer/css +## 20.2.2 + +### Patch Changes + +- [#2075](https://github.com/primer/css/pull/2075) [`9f576a3c`](https://github.com/primer/css/commit/9f576a3c33479fa0beb5ef4fe9b794f67a58070c) Thanks [@langermank](https://github.com/langermank)! - FormControl + Autocomplete component updates + +## 20.2.1 + +### Patch Changes + +- [#2094](https://github.com/primer/css/pull/2094) [`33f799f1`](https://github.com/primer/css/commit/33f799f13edad2e7434425913a8d445aa27213de) Thanks [@camertron](https://github.com/camertron)! - Add missing ToggleSwitch--checked styles + +* [#2091](https://github.com/primer/css/pull/2091) [`f740d008`](https://github.com/primer/css/commit/f740d00827fa854062f6ce3449ca6745fae9bea8) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Bump font size of large buttons + +## 20.2.0 + +### Minor Changes + +- [#2087](https://github.com/primer/css/pull/2087) [`8354de5c`](https://github.com/primer/css/commit/8354de5c5eeb60e447712c04e25c2ef370206488) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`. + +* [#2074](https://github.com/primer/css/pull/2074) [`5cfae2c2`](https://github.com/primer/css/commit/5cfae2c2193885c34af97dd61da201c400bc8549) Thanks [@camertron](https://github.com/camertron)! - Add styles for the ToggleSwitch component + +## 20.1.1 + +### Patch Changes + +- [#2078](https://github.com/primer/css/pull/2078) [`92ac0e39`](https://github.com/primer/css/commit/92ac0e39e6f5aae0314397890c8f78227a6c6ba0) Thanks [@langermank](https://github.com/langermank)! - Setup new `primer-primitive` bundle + +## 20.1.0 + +### Minor Changes + +- [#2072](https://github.com/primer/css/pull/2072) [`ab6f0840`](https://github.com/primer/css/commit/ab6f0840f0131b370fb8871551720afa20fb466e) Thanks [@JasonEtco](https://github.com/JasonEtco)! - Add `.text-capitalize` utility class + +* [#1998](https://github.com/primer/css/pull/1998) [`51e087aa`](https://github.com/primer/css/commit/51e087aa31f049c1cb148df6f04fdbc6de434cf0) Thanks [@bolonio](https://github.com/bolonio)! - Styles for the new Dialog Component + +## 20.0.0 + +### Major Changes + +- [#2049](https://github.com/primer/css/pull/2049) [`f4dba96e`](https://github.com/primer/css/commit/f4dba96e0cb78d3d451226cf60b01187678ced45) Thanks [@langermank](https://github.com/langermank)! - Comment box upload focus border-radius + +* [#1744](https://github.com/primer/css/pull/1744) [`942f65a4`](https://github.com/primer/css/commit/942f65a45a18b7042ba1ce2703688b62d874cf18) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles + +- [#1767](https://github.com/primer/css/pull/1767) [`7e01db97`](https://github.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Remove unused pullquote selector + +* [#1821](https://github.com/primer/css/pull/1821) [`daa2685c`](https://github.com/primer/css/commit/daa2685c596d894b3bae1896bf97c3319cd9816c) Thanks [@jonrohan](https://github.com/jonrohan)! - UnderlineNav `:focus` styles + Refactor selected state and spacing + Add selected bold state override from github/github + +- [#2047](https://github.com/primer/css/pull/2047) [`553d72cc`](https://github.com/primer/css/commit/553d72cc1baaf43a4c743c50cc8881f3811123e9) Thanks [@langermank](https://github.com/langermank)! - UnderlineNav bug fix + +* [#2046](https://github.com/primer/css/pull/2046) [`55e2b069`](https://github.com/primer/css/commit/55e2b069a4cbd225af676bef918bbbe2e6cd73b7) Thanks [@langermank](https://github.com/langermank)! - Global focus style CSS from feature flag (next major) + +### Patch Changes + +- [#2048](https://github.com/primer/css/pull/2048) [`dc529e31`](https://github.com/primer/css/commit/dc529e3102788d5caa136a9d30c58e56721427a7) Thanks [@simurai](https://github.com/simurai)! - Fix headings with an anchor in a summary + +* [#2041](https://github.com/primer/css/pull/2041) [`20550bbf`](https://github.com/primer/css/commit/20550bbfaa236ac197ca58805542eaab0bf38fd4) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading to stylelint-config-12.4.0 + +## 19.8.2 + +### Patch Changes + +- [#2019](https://github.com/primer/css/pull/2019) [`57be2d50`](https://github.com/primer/css/commit/57be2d50212b71f87ce612039375bcd5273eca53) Thanks [@langermank](https://github.com/langermank)! - [Bug] TreeView animation and padding fix + +## 19.8.1 + +### Patch Changes + +- [#1996](https://github.com/primer/css/pull/1996) [`a4293bf9`](https://github.com/primer/css/commit/a4293bf921ebcb74c6973e3f50f07e470f495bd0) Thanks [@langermank](https://github.com/langermank)! - TreeView: remove bold active items + markup changes + +## 19.8.0 + +### Minor Changes + +- [#1997](https://github.com/primer/css/pull/1997) [`9806b54b`](https://github.com/primer/css/commit/9806b54b3829219c9ad141efd2fcd99fc5c08751) Thanks [@simurai](https://github.com/simurai)! - Add Tritanopia theme + +### Patch Changes + +- [#2002](https://github.com/primer/css/pull/2002) [`a3bc51f6`](https://github.com/primer/css/commit/a3bc51f6c4af0d45a9ce39f00c3cf3297b090067) Thanks [@simurai](https://github.com/simurai)! - Always break long `branch-name`s + +## 19.7.1 + +### Patch Changes + +- [#2001](https://github.com/primer/css/pull/2001) [`47cec404`](https://github.com/primer/css/commit/47cec40472173b412df59e6990c0ac1b1ed43d04) Thanks [@jdanyow](https://github.com/jdanyow)! - Remove IE11 support in tooltip + +* [#1995](https://github.com/primer/css/pull/1995) [`557b100a`](https://github.com/primer/css/commit/557b100a77a4befe6d07fac14cb48b08bed18356) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add narrow/regular/wide viewport range utilities + +- [#2000](https://github.com/primer/css/pull/2000) [`264a89a5`](https://github.com/primer/css/commit/264a89a51a75eefa6a371e6ad11518519cd98b36) Thanks [@khiga8](https://github.com/khiga8)! - More CSS updates to `Autocomplete` + +## 19.7.0 + +### Minor Changes + +- [#1994](https://github.com/primer/css/pull/1994) [`69fe8c65`](https://github.com/primer/css/commit/69fe8c6512a3f0bbdbfdf7080b916a39173c2df9) Thanks [@khiga8](https://github.com/khiga8)! - Add support for inline, stack label in autocomplete + +### Patch Changes + +- [#1991](https://github.com/primer/css/pull/1991) [`5e87effa`](https://github.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://github.com/simurai)! - Fix `btn-primary` in flash alerts + +## 19.6.0 + +### Minor Changes + +- [#1989](https://github.com/primer/css/pull/1989) [`f544ef85`](https://github.com/primer/css/commit/f544ef8574a4d6e12cccf94d534ad66df3e9249a) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Make `pane` an optional region for PageLayout component + +### Patch Changes + +- [#1988](https://github.com/primer/css/pull/1988) [`e3443f1a`](https://github.com/primer/css/commit/e3443f1a69ba5a23d3e3804bf4e22d384783c443) Thanks [@simurai](https://github.com/simurai)! - Fix color-fg utilities in links + +* [#1985](https://github.com/primer/css/pull/1985) [`c2bd6bc9`](https://github.com/primer/css/commit/c2bd6bc9bf90686f258af11c102097d7da000a5b) Thanks [@cheshire137](https://github.com/cheshire137)! - Adding .color-bg-transparent utility class + +## 19.5.1 + +### Patch Changes + +- [#1983](https://github.com/primer/css/pull/1983) [`07bc069e`](https://github.com/primer/css/commit/07bc069ec0faae9c0e4530e5171e3346fa643a10) Thanks [@simurai](https://github.com/simurai)! - Bump `primer/primitives` to `^7.5.1` + +## 19.5.0 + +### Minor Changes + +- [#1948](https://github.com/primer/css/pull/1948) [`6a83a92b`](https://github.com/primer/css/commit/6a83a92b4332d577cdd72eee084e3f2c41b588ee) Thanks [@simurai](https://github.com/simurai)! - Add `open` and `closed` color roles + +* [#1961](https://github.com/primer/css/pull/1961) [`a35a8bdc`](https://github.com/primer/css/commit/a35a8bdcc17906848fcb486842d2345db0441c7c) Thanks [@jonrohan](https://github.com/jonrohan)! - Default .PageLayout to display block + +### Patch Changes + +- [#1954](https://github.com/primer/css/pull/1954) [`30f29d38`](https://github.com/primer/css/commit/30f29d383256a7d4023a859fdeee44471307159d) Thanks [@simurai](https://github.com/simurai)! - Fix `input-block` in `form-group` + +* [#1956](https://github.com/primer/css/pull/1956) [`39063461`](https://github.com/primer/css/commit/3906346182ed983d9725fd95da41b21424378b3e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.2 + +- [#1931](https://github.com/primer/css/pull/1931) [`e5c5312e`](https://github.com/primer/css/commit/e5c5312ec8bf139f6c94d2f70ceecd4b3cd9fd82) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Page layout api updates renaming spacing options in storybook + +* [#1950](https://github.com/primer/css/pull/1950) [`7c85c500`](https://github.com/primer/css/commit/7c85c500569fe6e1b29665c2eed37d58625ab06f) Thanks [@hectahertz](https://github.com/hectahertz)! - Fix sequence of content in Subhead + +- [#1942](https://github.com/primer/css/pull/1942) [`0450ccbb`](https://github.com/primer/css/commit/0450ccbb86104564c7d4038eb68989f370014fa1) Thanks [@reeceatkinson](https://github.com/reeceatkinson)! - Added line break to docs + +* [#1953](https://github.com/primer/css/pull/1953) [`3a91a29a`](https://github.com/primer/css/commit/3a91a29a822a28ea9679fbbb90250fc039057f23) Thanks [@hectahertz](https://github.com/hectahertz)! - Use `

` instead of `
` on Subhead-heading docs + +- [#1949](https://github.com/primer/css/pull/1949) [`dab83198`](https://github.com/primer/css/commit/dab83198c3bf1c7e03826b8cd498b8c48c9a2869) Thanks [@heiskr](https://github.com/heiskr)! - Render headings inline when in a `` + +* [#1978](https://github.com/primer/css/pull/1978) [`a00e6bce`](https://github.com/primer/css/commit/a00e6bce01b368d9cb6da5ec2af1d833f4d785c1) Thanks [@langermank](https://github.com/langermank)! - Handle pointer-events on ActionList visuals + +- [#1977](https://github.com/primer/css/pull/1977) [`80bf9d9d`](https://github.com/primer/css/commit/80bf9d9dea6fe7fbb0837fea265ec95cbbbd75d6) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug Fix] Adding white-space nowrap to Labels + ## 19.4.0 ### Minor Changes @@ -289,7 +437,7 @@ ### Patch Changes -- [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecyle milestones for statuses. +- [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecycle milestones for statuses. * [#1528](https://github.com/primer/css/pull/1528) [`303cacae`](https://github.com/primer/css/commit/303cacae77244a9e0de02b4caee2a8c01097aced) Thanks [@koddsson](https://github.com/koddsson)! - Convert package to a ES module diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8ca7b44ae8..b1425fcd6a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -58,13 +58,15 @@ Anyone can open a pull request on Primer CSS. You do not need to work at GitHub 2. Configure and install the dependencies: `npm install` 3. Create a new branch from main `git checkout -b my-branch-name` 4. Make your changes and commit them. -5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`. -6. Wait for CI tests to finish. +5. Create a changeset for your changes: `npx changeset` + - See [changesets/changesets](https://github.com/changesets/changesets) for more information. +6. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`. +7. Wait for CI tests to finish. - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects. - If the tests fail, review the logs and address any issues. - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted. -7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff. -8. Pat yourself on the back and wait for your pull request to be reviewed. +8. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff. +9. Pat yourself on the back and wait for your pull request to be reviewed. Here are a few things you can do that will increase the likelihood of your pull request being accepted: diff --git a/DEVELOP.md b/DEVELOP.md index 308d215a4f..ce4a34ddb6 100644 --- a/DEVELOP.md +++ b/DEVELOP.md @@ -3,29 +3,32 @@ If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new). ## Structure + Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes: -* **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc. -* **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators. -* **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales. +- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc. +- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators. +- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales. ### Paths -Here's what you need to know about how the files are structured in both git and in the published npm module: -* In git, all of the SCSS source files live in the `src/` directory. -* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with: +Here's what you need to know about how the files are structured in both git and in the published npm module: - ```scss - @import "@primer/css/utilities/index.scss"; - ``` +- In git, all of the SCSS source files live in the `src/` directory. +- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with: -* All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`). + ```scss + @import '@primer/css/utilities/index.scss'; + ``` +- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`). ## Install + Run `npm install` to install the npm dependencies. ## Docs site + The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with: ```sh @@ -35,41 +38,43 @@ npm start Then visit http://localhost:8000 to view the site. ### The docs directory -The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder. +The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder. ### 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. +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