diff --git a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md index 1979e50e66a..d4f44de7b0d 100644 --- a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md +++ b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md @@ -1,6 +1,7 @@ --- '@primer/react': major --- +
### ActionList diff --git a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md index 3fbec5cf4eb..d4f97523f19 100644 --- a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md +++ b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md @@ -2,6 +2,8 @@ '@primer/react': major --- +
+ ### ActionMenu ActionMenu has been rewritten with a composable API, design updates and accessibility fixes. diff --git a/.changeset/deprecate-dropdownmenu.md b/.changeset/deprecate-dropdownmenu.md index cc9e225639c..4afcd361ad7 100644 --- a/.changeset/deprecate-dropdownmenu.md +++ b/.changeset/deprecate-dropdownmenu.md @@ -2,6 +2,8 @@ '@primer/react': major --- +
+ ### DropdownMenu DropdownMenu has been deprecated in favor of ActionMenu with ActionList diff --git a/.changeset/odd-apes-guess.md b/.changeset/odd-apes-guess.md index e15f28b4809..c92e0bb1a46 100644 --- a/.changeset/odd-apes-guess.md +++ b/.changeset/odd-apes-guess.md @@ -2,6 +2,10 @@ "@primer/react": major --- +
+ +### PageLayout + `PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. To upgrade, rewrite your imports accordingly: diff --git a/.changeset/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md index f3d34b33be6..104059b6e77 100644 --- a/.changeset/smooth-cameras-prove.md +++ b/.changeset/smooth-cameras-prove.md @@ -2,6 +2,8 @@ '@primer/react': major --- +
+ ### SelectMenu ⚠️ `SelectMenu` has been deprecated. Please use `ActionMenu` instead. diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 108f538eb0a..49dde14435c 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,12 +4,23 @@ on: push: branches: - main - - 'next/**' + - next-major jobs: - release: - name: Release + release-main: + if: github.ref_name == 'main' + name: Main uses: primer/.github/.github/workflows/release.yml@main secrets: gh_token: ${{ secrets.GPR_AUTH_TOKEN_SHARED }} npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }} + + release-next-major: + if: github.ref_name == 'next-major' + name: Next major + uses: primer/.github/.github/workflows/release.yml@main + with: + title: Release tracking (next major) + secrets: + gh_token: ${{ secrets.GPR_AUTH_TOKEN_SHARED }} + npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }} diff --git a/.github/workflows/release_canary.yml b/.github/workflows/release_canary.yml index 941886ac630..47b9452f590 100644 --- a/.github/workflows/release_canary.yml +++ b/.github/workflows/release_canary.yml @@ -3,7 +3,8 @@ on: push: branches-ignore: - 'main' - - 'changeset-release/main' + - 'next-major' + - 'changeset-release/**' jobs: release-canary: diff --git a/.github/workflows/release_candidate.yml b/.github/workflows/release_candidate.yml index 9d99e806f97..bb17978227a 100644 --- a/.github/workflows/release_candidate.yml +++ b/.github/workflows/release_candidate.yml @@ -4,11 +4,23 @@ on: push: branches: - 'changeset-release/main' + - 'changeset-release/next-major' jobs: release-candidate: - name: Candidate + if: github.ref_name == 'changeset-release/main' + name: Candidate (@next) uses: primer/.github/.github/workflows/release_candidate.yml@main secrets: gh_token: ${{ secrets.GITHUB_TOKEN }} npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }} + + release-candidate-next-major: + if: github.ref_name == 'changeset-release/next-major' + name: Candidate (@next-major) + uses: primer/.github/.github/workflows/release_candidate.yml@main + with: + tag: next-major + secrets: + gh_token: ${{ secrets.GITHUB_TOKEN }} + npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }} diff --git a/.storybook/preview.js b/.storybook/preview.js index 8f5eca7b9bd..7a45a2396fc 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -116,7 +116,7 @@ const withThemeProvider = (Story, context) => { export const decorators = [withThemeProvider, withPerformance] addons.setConfig({ - // Some stories may set up keyboard event handlers, which can can be interfered + // Some stories may set up keyboard event handlers, which can be interfered // with by these keyboard shortcuts. enableShortcuts: false }) diff --git a/CHANGELOG.md b/CHANGELOG.md index 217b77518a3..d1c66433df6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -83,7 +83,7 @@ * [#1814](https://github.com/primer/react/pull/1814) [`384c3756`](https://github.com/primer/react/commit/384c375649da0718cc66b088e3ec5928afbeaded) Thanks [@pksjce](https://github.com/pksjce)! - Upgrade @primer/behaviors -- [#1804](https://github.com/primer/react/pull/1804) [`aa09ed79`](https://github.com/primer/react/commit/aa09ed790ba9461a4516c546924a4673c0b21462) Thanks [@rezrah](https://github.com/rezrah)! - Fixes bug in PointerBox component where caret doesn't inherit correct styling. Backwards compataible with previous API. +- [#1804](https://github.com/primer/react/pull/1804) [`aa09ed79`](https://github.com/primer/react/commit/aa09ed790ba9461a4516c546924a4673c0b21462) Thanks [@rezrah](https://github.com/rezrah)! - Fixes bug in PointerBox component where caret doesn't inherit correct styling. Backwards compatible with previous API. ## 34.2.0 @@ -277,7 +277,7 @@ ### Patch Changes -- [#1598](https://github.com/primer/react/pull/1598) [`3bb895f1`](https://github.com/primer/react/commit/3bb895f1a2cbd36d509f005524878d14218acb39) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better semantics for accessibile ActionList.Group +- [#1598](https://github.com/primer/react/pull/1598) [`3bb895f1`](https://github.com/primer/react/commit/3bb895f1a2cbd36d509f005524878d14218acb39) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better semantics for accessible ActionList.Group * [#1601](https://github.com/primer/react/pull/1601) [`250e4b00`](https://github.com/primer/react/commit/250e4b00f4d996b6125d381bae2487b57156687c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Use icon instead of input for multiple selection in ActionList @@ -657,7 +657,7 @@ - [`d20a5996`](https://github.com/primer/react/commit/d20a5996aafdbc6446f13aaa7a489394926f083a) [#1209](https://github.com/primer/react/pull/1209) Thanks [@dgreif](https://github.com/dgreif)! - Allow Overlay height and width to be set through AnchoredOverlay Allow ActionList Items to supply an `id` instead of `key` - Performance imporvements when ActionList is not given any groups + Performance improvements when ActionList is not given any groups Enable focus zone as soon as AnchoredOverlay opens * [`d29741ca`](https://github.com/primer/react/commit/d29741cab4bfa4249000e5b2479e99f5aeea3189) [#1196](https://github.com/primer/react/pull/1196) Thanks [@dgreif](https://github.com/dgreif)! - Allow custom `children` in `ActionItem`. `text` and `description` can still be provided as a shortcut, but `children` is now available if you need more control over the rending of the item, without sacrificing benefits from `Item` by using `renderItem`. diff --git a/contributor-docs/adrs/adr-002-behavior-isolation.md b/contributor-docs/adrs/adr-002-behavior-isolation.md index 0f4b0ae48cc..2717fa4fbc5 100644 --- a/contributor-docs/adrs/adr-002-behavior-isolation.md +++ b/contributor-docs/adrs/adr-002-behavior-isolation.md @@ -59,12 +59,12 @@ Building behaviors in React Hooks gives us the ability to provide things like st #### Other -- The custom element and web component API progress slower than React due to changes needing to go through the whatwq standards process. +- The custom element and web component API progress slower than React due to changes needing to go through the whatwg standards process. #### Risks of not switching to custom elements for behaviors - We spend extra time building behaviors in React that have already been built in our [custom elements library](https://github.github.io/web-systems-documentation/#custom-elements). - - There are currently 19 behaviors/components listed on the custom elements documentation site. Several of these we have already implemented in React in either Priemr React, Doctocat, or other React applications at GitHub which can be upstreamed (details-dialog, details-menu, clipboard-copy, text-expander, autocomplete, task-list via drag and drop hooks, tab-container, text-expander). + - There are currently 19 behaviors/components listed on the custom elements documentation site. Several of these we have already implemented in React in either Primer React, Doctocat, or other React applications at GitHub which can be upstreamed (details-dialog, details-menu, clipboard-copy, text-expander, autocomplete, task-list via drag and drop hooks, tab-container, text-expander). - We decide not to invest further in React at GitHub and have wasted time we could have spent building more custom elements. - This seems unlikely as there seems to be clear consensus that we will continue to build more and more highly interactive products. - The React library is abandoned and becomes obsolete. diff --git a/docs/content/InputField.mdx b/docs/content/InputField.mdx index d72b7cd30c9..d92ce7cbb91 100644 --- a/docs/content/InputField.mdx +++ b/docs/content/InputField.mdx @@ -203,7 +203,7 @@ The container that handles the layout and passes the relevant IDs and ARIA attri /> diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index 64d439c49d3..cc062402fa2 100644 --- a/docs/content/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -111,7 +111,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### PageLayout - + {/* all menu list items are wrapped in the list*/} @@ -188,7 +188,7 @@ SelectMenu.Filter components receive all the props that the [TextInput](/TextInp ## SelectMenu.Tabs -Use `SelectMenu.Tabs` to wrap the the tab navigation and `SelectMenu.Tab` for each tab in the navigation. +Use `SelectMenu.Tabs` to wrap the tab navigation and `SelectMenu.Tab` for each tab in the navigation. `SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`. diff --git a/docs/content/linting.md b/docs/content/linting.md index 85474899665..6dd399a0a5b 100644 --- a/docs/content/linting.md +++ b/docs/content/linting.md @@ -32,4 +32,4 @@ description: Primer React offers an ESLint plugin to enforce best practices and } ``` -See the [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) respository for a list of included lint rules. +See the [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) repository for a list of included lint rules. diff --git a/docs/content/overriding-styles.mdx b/docs/content/overriding-styles.mdx index 64990acc5af..e361b0f99f2 100644 --- a/docs/content/overriding-styles.mdx +++ b/docs/content/overriding-styles.mdx @@ -55,7 +55,7 @@ Just like [values passed to system props](https://styled-system.com/responsive-s ## Nesting, pseudo-classes, and pseudo-elements -The `sx` prop also allows for declaring styles based on media queries, psueudo-classes, and pseudo-elements. This example, though contrived, demonstrates the ability: +The `sx` prop also allows for declaring styles based on media queries, pseudo-classes, and pseudo-elements. This example, though contrived, demonstrates the ability: ```jsx live []` | | Elements outside of the container to ignore clicks on. | | containerRef | `React.RefObject` | | Required. A ref for the containing element. | diff --git a/docs/content/useOpenAndCloseFocus.mdx b/docs/content/useOpenAndCloseFocus.mdx index 6391fe5ff1c..e415311fee4 100644 --- a/docs/content/useOpenAndCloseFocus.mdx +++ b/docs/content/useOpenAndCloseFocus.mdx @@ -4,7 +4,7 @@ title: useOpenAndCloseFocus `useOpenAndCloseFocus` is a utility Hook that manages focusing an element when a component is first mounted, and returns focus to an element on the page when that component unmounts. -If no ref is passed to `inititalFocusRef` , the hook focuses the first focusable element inside of the container. +If no ref is passed to `initialFocusRef` , the hook focuses the first focusable element inside of the container. ### Usage diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js index c82b6f5c181..8cdd0a135a9 100644 --- a/docs/gatsby-node.js +++ b/docs/gatsby-node.js @@ -41,7 +41,7 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => { exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => { const {createNode} = actions - // Extract compontent metadata from source files + // Extract component metadata from source files const files = globby.sync(['../src/**/*.tsx'], {absolute: true}) const data = docgen.parse(files, { savePropValueAsString: true, diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index 0107dd178ac..accfa7115eb 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -22,12 +22,12 @@ export type ActionMenuProps = { children: React.ReactElement[] | React.ReactElement /** - * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. + * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`. */ open?: boolean /** - * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`. + * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `open`. */ onOpenChange?: (s: boolean) => void } & Pick diff --git a/src/Autocomplete/AutocompleteInput.tsx b/src/Autocomplete/AutocompleteInput.tsx index 714e8a23261..b34eda1ffe6 100644 --- a/src/Autocomplete/AutocompleteInput.tsx +++ b/src/Autocomplete/AutocompleteInput.tsx @@ -132,7 +132,7 @@ const AutocompleteInput = React.forwardRef( // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text // is the same as what I'm typing - // e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered + // e.g.: typing 'tw' highlights 'two', but when I 'two', the text input change does not get triggered if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) { inputRef.current.value = autocompleteSuggestion @@ -141,7 +141,7 @@ const AutocompleteInput = React.forwardRef( } } - // calling this useEffeect when `highlightRemainingText` changes breaks backspace functionality + // calling this useEffect when `highlightRemainingText` changes breaks backspace functionality // eslint-disable-next-line react-hooks/exhaustive-deps }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]) diff --git a/src/Label.tsx b/src/Label.tsx index df48bcd44df..7309a6d5e74 100644 --- a/src/Label.tsx +++ b/src/Label.tsx @@ -68,11 +68,11 @@ export const variants: Record = { const sizes: Record = { small: { height: '20px', - padding: '0 7px' // hard-coded to align with Primer ViewCompnents and Primer CSS + padding: '0 7px' // hard-coded to align with Primer ViewComponents and Primer CSS }, large: { height: '24px', - padding: '0 10px' // hard-coded to align with Primer ViewCompnents and Primer CSS + padding: '0 10px' // hard-coded to align with Primer ViewComponents and Primer CSS } } diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index ca7f5737d39..9c57d1c81d1 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -308,7 +308,7 @@ const Pane: React.FC = ({ ) } > - {/* Show a horiztonal divider when viewport is narrow. Otherwise, show a vertical divider. */} + {/* Show a horizontal divider when viewport is narrow. Otherwise, show a vertical divider. */} const itemRef = forwardedRef ?? backupRef // close the menu when an item is clicked - // this can be overriden if the user provides a `onClick` prop and prevents default in it + // this can be overridden if the user provides a `onClick` prop and prevents default in it const handleClick = (e: React.MouseEvent) => { onClick && onClick(e) diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx index 70ff68de655..d3812497332 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens.tsx @@ -135,7 +135,7 @@ function TextInputWithTokensInnerComponent { onTokenRemove(tokenId) - // HACK: wait a tick for the the token node to be removed from the DOM + // HACK: wait a tick for the token node to be removed from the DOM setTimeout(() => { const nextElementToFocus = containerRef.current?.children[selectedTokenIndex || 0] as HTMLElement | undefined diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx index b1bd76846e7..2c56433ce89 100644 --- a/src/ThemeProvider.tsx +++ b/src/ThemeProvider.tsx @@ -51,7 +51,7 @@ export const ThemeProvider: React.FC = ({children, ...props} const resolvedColorModePassthrough = React.useRef( // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore This custom variable does not exist on window because we set it outselves + // @ts-ignore This custom variable does not exist on window because we set it ourselves typeof window !== 'undefined' ? window.__PRIMER_RESOLVED_SERVER_COLOR_MODE : undefined ) @@ -68,7 +68,7 @@ export const ThemeProvider: React.FC = ({children, ...props} // this effect will only run on client React.useEffect( - function updateColorModeAfterServerPassthorugh() { + function updateColorModeAfterServerPassthrough() { const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode) if (resolvedColorModePassthrough.current) { diff --git a/src/__tests__/Autocomplete.test.tsx b/src/__tests__/Autocomplete.test.tsx index 3e17f37dcb0..02007bb16c6 100644 --- a/src/__tests__/Autocomplete.test.tsx +++ b/src/__tests__/Autocomplete.test.tsx @@ -311,7 +311,7 @@ describe('Autocomplete', () => { expect(getByDisplayValue('zero')).toBeDefined() }) - it('clears the input value when when the user hits Escape', () => { + it('clears the input value when the user hits Escape', () => { const {container} = HTMLRender() const inputNode = container.querySelector('#autocompleteInput') diff --git a/src/__tests__/Link.test.tsx b/src/__tests__/Link.test.tsx index 6479ef6bec4..6955c0df153 100644 --- a/src/__tests__/Link.test.tsx +++ b/src/__tests__/Link.test.tsx @@ -37,11 +37,11 @@ describe('Link', () => { expect(render()).toMatchSnapshot() }) - it('respectes the "muted" prop', () => { + it('respects the "muted" prop', () => { expect(render()).toMatchSnapshot() }) - it('respectes the "sx" prop when "muted" prop is also passed', () => { + it('respects the "sx" prop when "muted" prop is also passed', () => { expect(render()).toMatchSnapshot() }) }) diff --git a/src/__tests__/ThemeProvider.test.tsx b/src/__tests__/ThemeProvider.test.tsx index ccce0126f70..9159d021b0b 100644 --- a/src/__tests__/ThemeProvider.test.tsx +++ b/src/__tests__/ThemeProvider.test.tsx @@ -3,7 +3,7 @@ import 'jest-styled-components' import React from 'react' import {Text, ThemeProvider, useColorSchemeVar, useTheme} from '..' -// window.matchMedia() is not implmented by JSDOM so we have to create a mock: +// window.matchMedia() is not implemented by JSDOM so we have to create a mock: // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom Object.defineProperty(window, 'matchMedia', { writable: true, diff --git a/src/__tests__/__snapshots__/Link.test.tsx.snap b/src/__tests__/__snapshots__/Link.test.tsx.snap index 55288ca801c..f39404d15a1 100644 --- a/src/__tests__/__snapshots__/Link.test.tsx.snap +++ b/src/__tests__/__snapshots__/Link.test.tsx.snap @@ -103,7 +103,7 @@ exports[`Link renders consistently 1`] = ` /> `; -exports[`Link respectes the "sx" prop when "muted" prop is also passed 1`] = ` +exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = ` .c0 { color: #57606a; -webkit-text-decoration: none; @@ -140,7 +140,7 @@ exports[`Link respectes the "sx" prop when "muted" prop is also passed 1`] = ` /> `; -exports[`Link respectes the "muted" prop 1`] = ` +exports[`Link respects the "muted" prop 1`] = ` .c0 { color: #57606a; -webkit-text-decoration: none; diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap index cd3091a1bfc..a864464835e 100644 --- a/src/__tests__/__snapshots__/themePreval.test.ts.snap +++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap @@ -2,7 +2,7 @@ exports[`snapshot theme-preval.js 1`] = ` "// this file was prevaled -// This file needs to be a JavaScript file using CommonJS to be compatiable with preval +// This file needs to be a JavaScript file using CommonJS to be compatible with preval // Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) module.exports = { \\"theme\\": { diff --git a/src/__tests__/hooks/useMenuTypeaheadFocus.test.tsx b/src/__tests__/hooks/useMenuTypeaheadFocus.test.tsx index 51e33f50e8c..a6e0ee7ef17 100644 --- a/src/__tests__/hooks/useMenuTypeaheadFocus.test.tsx +++ b/src/__tests__/hooks/useMenuTypeaheadFocus.test.tsx @@ -50,7 +50,7 @@ describe('useTypeaheadFocus', () => { expect(getByText('third button')).toEqual(document.activeElement) }) - it('Case insinsitive: when B is pressed, it should move focus the "b"utton 1', () => { + it('Case insensitive: when B is pressed, it should move focus the "b"utton 1', () => { const {getByTestId, getByText} = render() const container = getByTestId('container') diff --git a/src/__tests__/themeGet.test.ts b/src/__tests__/themeGet.test.ts index 73e940f56e4..0d8b4d1eb78 100644 --- a/src/__tests__/themeGet.test.ts +++ b/src/__tests__/themeGet.test.ts @@ -1,7 +1,7 @@ import {themeGet} from '..' describe('themeGet', () => { - it('acccepts theme prop', () => { + it('accepts theme prop', () => { expect(themeGet('example')({theme: {example: 'test'}})).toBe('test') }) diff --git a/src/deprecated/DropdownMenu/DropdownMenu.tsx b/src/deprecated/DropdownMenu/DropdownMenu.tsx index 8431da3e522..74e79934fcf 100644 --- a/src/deprecated/DropdownMenu/DropdownMenu.tsx +++ b/src/deprecated/DropdownMenu/DropdownMenu.tsx @@ -32,12 +32,12 @@ interface DropdownMenuBaseProps extends Partial void } diff --git a/src/hooks/useTypeaheadFocus.ts b/src/hooks/useTypeaheadFocus.ts index ec7454e771b..727e077861c 100644 --- a/src/hooks/useTypeaheadFocus.ts +++ b/src/hooks/useTypeaheadFocus.ts @@ -65,17 +65,17 @@ export const useTypeaheadFocus = (open: boolean, providedRef?: React.RefObject 1 charachters in query + // More > 1 characters in query // If active element satisfies the query stay there, if (activeElement.textContent?.toLowerCase().startsWith(query)) return // otherwise move to the next one that does. diff --git a/src/stories/useAnchoredPosition.stories.tsx b/src/stories/useAnchoredPosition.stories.tsx index 234ec8dbeb4..093bf801efa 100644 --- a/src/stories/useAnchoredPosition.stories.tsx +++ b/src/stories/useAnchoredPosition.stories.tsx @@ -48,7 +48,7 @@ export default { description: 'note' }, anchorAlignment: { - control: {type: 'inline-radio', options: ['first', 'center', 'last']} + control: {type: 'inline-radio', options: ['start', 'center', 'end']} }, anchorOffset: { control: {type: 'range', min: -100, max: 100} @@ -300,7 +300,7 @@ export const WithPortal = () => {

This “nav bar” has a width of 300px and is position:relative with{' '} overflow:hidden, meaning that its children cannot overflow this container. Using <Portal> - with useAnchoredPosition, we can break out of this contraint. + with useAnchoredPosition, we can break out of this constraint.

}> diff --git a/src/theme-preval.js b/src/theme-preval.js index d7e959ee9ef..12632717ea0 100644 --- a/src/theme-preval.js +++ b/src/theme-preval.js @@ -1,5 +1,5 @@ // @preval -// This file needs to be a JavaScript file using CommonJS to be compatiable with preval +// This file needs to be a JavaScript file using CommonJS to be compatible with preval // Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) const {default: primitives} = require('@primer/primitives') diff --git a/src/utils/theme.js b/src/utils/theme.js index 4b6a54afe92..51f285beb4e 100644 --- a/src/utils/theme.js +++ b/src/utils/theme.js @@ -1,5 +1,5 @@ // Utility functions used in theme-preval.js -// This file needs to be a JavaScript file using CommonJS to be compatiable with preval +// This file needs to be a JavaScript file using CommonJS to be compatible with preval const isEmpty = require('lodash.isempty') const isObject = require('lodash.isobject') diff --git a/src/utils/types/Flatten.ts b/src/utils/types/Flatten.ts index 4e715248a73..486bcde3eba 100644 --- a/src/utils/types/Flatten.ts +++ b/src/utils/types/Flatten.ts @@ -1,4 +1,4 @@ /** - * Contruct a type describing the items in `T`, if `T` is an array. + * Construct a type describing the items in `T`, if `T` is an array. */ export type Flatten = T extends (infer U)[] ? U : never