remove higlight on target

primer · Aug 28, 2024 · fe9283d · fe9283d
2 parents 35117f0 + 24fc6d0
commit fe9283d
Show file tree

Hide file tree

Showing 52 changed files with 1,931 additions and 899 deletions.
diff --git a/.changeset/cold-items-try.md b/.changeset/cold-items-try.md
@@ -0,0 +1,12 @@
+---
+'@primer/react-brand': minor
+---
+
+Improved a11y labelling in various components.
+
+Please note these changes could affect any behavioral tests, which rely on accessible matchers such as `getByRole`.
+
+- `SubdomainNavBar` search button `aria-label` changed from 'search' to 'Toggle search bar'
+- `SubdomainNavBar` removal of unnecessary `aria-label` 'global breadcrumb'
+- `Checkbox` addition of new label for `checked` state icon as 'Checkmark'
+- `Checkbox` addition of new label for `indeterminate` state icon as 'Dash icon'
diff --git a/.changeset/lovely-timers-visit.md b/.changeset/lovely-timers-visit.md
@@ -0,0 +1,25 @@
+---
+'@primer/brand-primitives': minor
+---
+
+Change to `xxlarge` breakpoint and the addition of two new base scale size tokens.
+
+Outcome of an upgrade to Primer Primitives `v9` release.
+
+```diff
++ --base-size-2: 0.125rem;
+```
+
+```diff
++ --base-size-6: 0.375rem;
+```
+
+```diff
+- --brand-breakpoint-xxlarge: 90rem;
++ --brand-breakpoint-xxlarge: 87.5rem;
+```
+
+```diff
+- @custom-media --brand-viewportRange-wide-viewport (min-width: 90rem);
++ @custom-media --brand-viewportRange-wide-viewport (min-width: 87.5rem);
+```
diff --git a/.changeset/three-sloths-grin.md b/.changeset/three-sloths-grin.md
@@ -0,0 +1,11 @@
+---
+'@primer/react-brand': patch
+---
+
+Hide paged items in Pagination component on narrow viewports to prevent horizontal scrolling and offer improved accessibility by default.
+
+Use `showPages` to re-enable paged items if required:
+
+```jsx
+<Pagination showPages />
+```
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -58,7 +58,6 @@ module.exports = {
         allow: ['dark_dimmed'],
       },
     ],
-    'primer-react/no-deprecated-colors': ['warn', {checkAllStrings: true}],
   },
   overrides: [
     // rules which apply only to JS
@@ -170,6 +169,14 @@ module.exports = {
         '@typescript-eslint/no-unnecessary-condition': 0,
         '@typescript-eslint/no-unused-vars': 0,
         'no-redeclare': 0,
+        'github/a11y-svg-has-accessible-name': 0,
+      },
+    },
+    // rules which apply only to Figma code connect files
+    {
+      files: ['**/*.figma.tsx'],
+      rules: {
+        'github/unescaped-html-literal': 0,
       },
     },
   ],

diff --git a/.github/workflows/ui_test_primitives_diff.yml b/.github/workflows/ui_test_primitives_diff.yml
@@ -45,7 +45,7 @@ jobs:
 
       - name: Export diff
         run: |
-          diff -r -y --width=300 -B -I '*' -I 'Generated' --suppress-common-lines temp-main/packages/design-tokens/lib/design-tokens/css packages/design-tokens/lib/design-tokens/css  | tail -n +2 > diff.txt
+          diff -r -y --width=300 -B -I 'Generated' --suppress-common-lines temp-main/packages/design-tokens/lib/design-tokens/css packages/design-tokens/lib/design-tokens/css  | tail -n +2 > diff.txt
           npx ts-node ./packages/design-tokens/scripts/ci-check-diff.ts
 
       - name: Read raw diff

diff --git a/apps/docs/content/components/VideoPlayer.mdx b/apps/docs/content/components/VideoPlayer.mdx
@@ -18,38 +18,38 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer title="GitHub media player">
-  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
 ## With poster
 
 ```jsx live
 <VideoPlayer
-  poster="https://primer.github.io/brand/assets/example-poster.png"
+  poster="/brand/assets/example-poster.png"
   title="GitHub media player"
 >
-  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
 ## Without branding
 
 ```jsx live
 <VideoPlayer showBranding={false} title="GitHub media player">
-  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
 ## With visually hidden title
 
 ```jsx live
 <VideoPlayer visuallyHiddenTitle title="GitHub media player">
-  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
@@ -65,23 +65,17 @@ import {VideoPlayer} from '@primer/react-brand'
   showVolumeControl={false}
   showFullScreenButton={false}
 >
-  <VideoPlayer.Source
-    src="https://primer.github.io/brand/assets/example.mp4"
-    type="video/mp4"
-  />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
 ## Hide controls when paused
 
 ```jsx live
 <VideoPlayer title="GitHub media player" showControlsWhenPaused={false}>
-  <VideoPlayer.Source
-    src="https://primer.github.io/brand/assets/example.mp4"
-    type="video/mp4"
-  />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
@@ -94,11 +88,8 @@ import {VideoPlayer} from '@primer/react-brand'
   showBranding={false}
   showControlsWhenPaused={false}
 >
-  <VideoPlayer.Source
-    src="https://primer.github.io/brand/assets/example.mp4"
-    type="video/mp4"
-  />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
@@ -109,11 +100,8 @@ import {VideoPlayer} from '@primer/react-brand'
   title="GitHub media player"
   playIcon={() => <PlayIcon size={96} />}
 >
-  <VideoPlayer.Source
-    src="https://primer.github.io/brand/assets/example.mp4"
-    type="video/mp4"
-  />
-  <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
 </VideoPlayer>
 ```
 
@@ -140,10 +128,10 @@ Full documentation for the `useVideo` hook can be found [below](#usevideo-contex
           showFullScreenButton={false}
         >
           <VideoPlayer.Source
-            src="https://primer.github.io/brand/assets/example.mp4"
+            src="/brand/assets/example.mp4"
             type="video/mp4"
           />
-          <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
+          <VideoPlayer.Track src="/brand/assets/example.vtt" default/>
         </VideoPlayer>
         <Stack direction="horizontal">
           <Button onClick={() => togglePlaying()}>
@@ -201,10 +189,8 @@ Below is a detailed description of each property and method available in the `us
 
 ## Component props
 
-
 ### VideoPlayer <Label>Required</Label>
 
-
 `VideoPlayer` provides a React alternative to the native HTML `<video />`.
 
 | Name                     | Type                                   | Default | Required | Description                                                     |
@@ -229,7 +215,6 @@ The component API supports all standard HTML attribute props, while providing so
 
 `VideoPlayer.Source` provides a React alternative to the native HTML `<source />`. The component API supports all standard HTML attribute props.
 
-
 ### VideoPlayer.Track <Label>Required</Label>
 
 `VideoPlayer.Track` provides a React alternative to the native HTML `<track />`.
@@ -240,6 +225,6 @@ The component API supports all standard HTML attribute props, while providing so
 
 The component API supports all standard HTML attribute props, while providing some additional behavior as described above.
 
-###  VideoPlayer.Provider
+### VideoPlayer.Provider
 
 `VideoPlayer.Provider` can be used in conjunction with the `useVideo` hook to enable programmatic access to features such as video playback, volume, closed captioning, and fullscreen mode.
diff --git a/apps/docs/gatsby-node.js b/apps/docs/gatsby-node.js
@@ -1,4 +1,6 @@
 const defines = require('./babel-defines')
+const path = require('path')
+const fs = require('fs').promises
 
 exports.onCreateWebpackConfig = ({actions, loaders, plugins, getConfig}) => {
   const config = getConfig()
@@ -28,3 +30,27 @@ exports.onCreateWebpackConfig = ({actions, loaders, plugins, getConfig}) => {
 
   actions.replaceWebpackConfig(config)
 }
+
+exports.onPostBootstrap = async ({reporter}) => {
+  // eslint-disable-next-line i18n-text/no-en
+  reporter.info('Running post-bootstrap tasks...')
+
+  if (process.env.NODE_ENV === 'production') {
+    // eslint-disable-next-line i18n-text/no-en
+    reporter.info('No post-bootstrap tasks to run in production environment.')
+    return
+  }
+
+  const srcDir = path.resolve(__dirname, 'static', 'assets')
+  const outDir = path.resolve(__dirname, 'public', 'brand', 'assets')
+
+  try {
+    // eslint-disable-next-line i18n-text/no-en
+    reporter.info(`Copying static assets from ${srcDir} to ${outDir}`)
+    await fs.mkdir(outDir, {recursive: true})
+
+    fs.cp(srcDir, outDir, {recursive: true, overwrite: true})
+  } catch (err) {
+    reporter.error('onPostBootstrap error:', err)
+  }
+}