From 796d151bbb3629efef61a26c56de350ad8607cb0 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Mon, 28 Feb 2022 04:02:49 -0800 Subject: [PATCH 1/5] fix control value (#1902) Co-authored-by: Siddharth Kshetrapal --- src/stories/useAnchoredPosition.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/useAnchoredPosition.stories.tsx b/src/stories/useAnchoredPosition.stories.tsx index 234ec8dbeb4..227e9c83030 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} From 8384b2202ed37a57095147937173a03264d7256f Mon Sep 17 00:00:00 2001 From: Josh Soref <2119212+jsoref@users.noreply.github.com> Date: Mon, 28 Feb 2022 13:13:26 -0500 Subject: [PATCH 2/5] Spelling (#1905) * spelling: accepts Signed-off-by: Josh Soref * spelling: accessibility Signed-off-by: Josh Soref * spelling: accessible Signed-off-by: Josh Soref * spelling: can Signed-off-by: Josh Soref * spelling: character Signed-off-by: Josh Soref * spelling: compatible Signed-off-by: Josh Soref * spelling: component Signed-off-by: Josh Soref * spelling: components Signed-off-by: Josh Soref * spelling: conjunction Signed-off-by: Josh Soref * spelling: constraint Signed-off-by: Josh Soref * spelling: construct Signed-off-by: Josh Soref * spelling: convenient Signed-off-by: Josh Soref * spelling: depending Signed-off-by: Josh Soref * spelling: effect Signed-off-by: Josh Soref * spelling: highlights Signed-off-by: Josh Soref * spelling: horizontal Signed-off-by: Josh Soref * spelling: implemented Signed-off-by: Josh Soref * spelling: improvements Signed-off-by: Josh Soref * spelling: initial Signed-off-by: Josh Soref * spelling: insensitive Signed-off-by: Josh Soref * spelling: monolisa Signed-off-by: Josh Soref * spelling: ourselves Signed-off-by: Josh Soref * spelling: overridden Signed-off-by: Josh Soref * spelling: passthrough Signed-off-by: Josh Soref * spelling: primer Signed-off-by: Josh Soref * spelling: pseudo Signed-off-by: Josh Soref * spelling: repository Signed-off-by: Josh Soref * spelling: respects Signed-off-by: Josh Soref * spelling: responsive Signed-off-by: Josh Soref * spelling: success Signed-off-by: Josh Soref * spelling: the Signed-off-by: Josh Soref * spelling: visibility Signed-off-by: Josh Soref * spelling: whatwg Signed-off-by: Josh Soref * spelling: when Signed-off-by: Josh Soref Co-authored-by: Josh Soref Co-authored-by: Cole Bemis --- .storybook/preview.js | 2 +- CHANGELOG.md | 6 +++--- contributor-docs/adrs/adr-002-behavior-isolation.md | 4 ++-- docs/content/InputField.mdx | 2 +- docs/content/deprecated/SelectMenu.md | 4 ++-- docs/content/drafts/ActionMenu2.mdx | 6 +++--- docs/content/drafts/DropdownMenu2.mdx | 6 +++--- docs/content/drafts/PageLayout.mdx | 2 +- docs/content/linting.md | 2 +- docs/content/overriding-styles.mdx | 2 +- docs/content/theming.md | 4 ++-- docs/content/useOnOutsideClick.mdx | 2 +- docs/content/useOpenAndCloseFocus.mdx | 2 +- docs/gatsby-node.js | 2 +- src/ActionMenu.tsx | 4 ++-- src/ActionMenu2.tsx | 4 ++-- src/Autocomplete/AutocompleteInput.tsx | 4 ++-- src/DropdownMenu/DropdownMenu.tsx | 4 ++-- src/DropdownMenu2.tsx | 4 ++-- src/Label2.tsx | 4 ++-- src/PageLayout/PageLayout.tsx | 2 +- src/SelectMenu/SelectMenuItem.tsx | 2 +- src/TextInputWithTokens.tsx | 2 +- src/ThemeProvider.tsx | 4 ++-- src/__tests__/Autocomplete.test.tsx | 2 +- src/__tests__/Link.test.tsx | 4 ++-- src/__tests__/ThemeProvider.test.tsx | 2 +- src/__tests__/__snapshots__/Link.test.tsx.snap | 4 ++-- src/__tests__/__snapshots__/themePreval.test.ts.snap | 2 +- src/__tests__/hooks/useMenuTypeaheadFocus.test.tsx | 2 +- src/__tests__/themeGet.test.ts | 2 +- src/hooks/useTypeaheadFocus.ts | 6 +++--- src/stories/useAnchoredPosition.stories.tsx | 2 +- src/theme-preval.js | 2 +- src/utils/theme.js | 2 +- src/utils/types/Flatten.ts | 2 +- 36 files changed, 56 insertions(+), 56 deletions(-) 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/deprecated/SelectMenu.md b/docs/content/deprecated/SelectMenu.md index faea3452588..12db537bc78 100644 --- a/docs/content/deprecated/SelectMenu.md +++ b/docs/content/deprecated/SelectMenu.md @@ -118,7 +118,7 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl ## SelectMenu.List -Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. +Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessibility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. ```jsx {/* all menu list items are wrapped in the list*/} @@ -182,7 +182,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/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx index 4ccc9b3c5a3..ba7e2357b54 100644 --- a/docs/content/drafts/ActionMenu2.mdx +++ b/docs/content/drafts/ActionMenu2.mdx @@ -74,7 +74,7 @@ import {ActionMenu} from '@primer/react/drafts' ### With a custom anchor -You can choose to have a different _anchor_ for the Menu dependending on the application's context. +You can choose to have a different _anchor_ for the Menu depending on the application's context.   @@ -286,8 +286,8 @@ render( | Name | Type | Default | Description | | :----------- | :----------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- | | children\* | `React.ReactElement[]` | - | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay` | -| open | `boolean` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. | -| onOpenChange | `(open: boolean) => void` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`. | +| open | `boolean` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`. | +| onOpenChange | `(open: boolean) => void` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjunction with `open`. | | anchorRef | `React.RefObject` | - | Optional. Useful for defining an external anchor | ### ActionMenu.Button diff --git a/docs/content/drafts/DropdownMenu2.mdx b/docs/content/drafts/DropdownMenu2.mdx index 68cd522aa1e..cdd634c13ee 100644 --- a/docs/content/drafts/DropdownMenu2.mdx +++ b/docs/content/drafts/DropdownMenu2.mdx @@ -201,7 +201,7 @@ render() ### With a custom anchor -You can choose to have a different _anchor_ for the Menu dependending on the application's context. +You can choose to have a different _anchor_ for the Menu depending on the application's context.   @@ -251,7 +251,7 @@ Use `DropdownMenu` to select an option from a small list. If you’re looking fo type="boolean" description={ <> - If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '} + If defined, will control the open/closed state of the overlay. Must be used in conjunction with{' '} onOpenChange } @@ -261,7 +261,7 @@ Use `DropdownMenu` to select an option from a small list. If you’re looking fo type="(open: boolean) => void" description={ <> - If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '} + If defined, will control the open/closed state of the overlay. Must be used in conjunction with{' '} open } diff --git a/docs/content/drafts/PageLayout.mdx b/docs/content/drafts/PageLayout.mdx index a04cfc87307..ec119ba47cb 100644 --- a/docs/content/drafts/PageLayout.mdx +++ b/docs/content/drafts/PageLayout.mdx @@ -111,7 +111,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### PageLayout - + []` | | 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 dc080001083..aea50db32f7 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -21,12 +21,12 @@ interface ActionMenuBaseProps extends Partial | React.KeyboardEvent) => void /** - * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`. + * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `setOpen`. */ 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`. */ setOpen?: (s: boolean) => void diff --git a/src/ActionMenu2.tsx b/src/ActionMenu2.tsx index 1fab1223264..0bb31914d07 100644 --- a/src/ActionMenu2.tsx +++ b/src/ActionMenu2.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/DropdownMenu/DropdownMenu.tsx b/src/DropdownMenu/DropdownMenu.tsx index 37b2687449e..1fa70e13f9b 100644 --- a/src/DropdownMenu/DropdownMenu.tsx +++ b/src/DropdownMenu/DropdownMenu.tsx @@ -32,12 +32,12 @@ interface DropdownMenuBaseProps extends Partial void } diff --git a/src/DropdownMenu2.tsx b/src/DropdownMenu2.tsx index 1773eb8e85e..90aa43a656a 100644 --- a/src/DropdownMenu2.tsx +++ b/src/DropdownMenu2.tsx @@ -22,12 +22,12 @@ export type DropdownMenuProps = { 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/Label2.tsx b/src/Label2.tsx index 34ea8357750..a90e6f74d46 100644 --- a/src/Label2.tsx +++ b/src/Label2.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 8c2b89d046c..70cc3239a3d 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/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 227e9c83030..093bf801efa 100644 --- a/src/stories/useAnchoredPosition.stories.tsx +++ b/src/stories/useAnchoredPosition.stories.tsx @@ -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 From 851085dfa1ba5fbbefbf2527301e8c7bb0b781be Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 28 Feb 2022 13:35:41 -0800 Subject: [PATCH 3/5] Add next major to release workflow (#1909) * Add next major to release workflow * Update release_candidate script * Ignore next major branches in canary workflow --- .github/workflows/release.yml | 17 ++++++++++++++--- .github/workflows/release_canary.yml | 3 ++- .github/workflows/release_candidate.yml | 14 +++++++++++++- 3 files changed, 29 insertions(+), 5 deletions(-) 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 }} From b51ea3b6e911181e2a50b74a40404cdaa1bbb4e9 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 28 Feb 2022 14:04:12 -0800 Subject: [PATCH 4/5] Update .changeset/deprecate-actionlistv1-promote-actionlistv2.md --- .changeset/deprecate-actionlistv1-promote-actionlistv2.md | 1 + 1 file changed, 1 insertion(+) 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 From a8a3de110afc7edaf088f0773e76ce3edcf5c65d Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 28 Feb 2022 14:22:21 -0800 Subject: [PATCH 5/5] Add linebreaks to changesets --- .changeset/deprecate-actionmenuv1-promote-actionmenuv2.md | 2 ++ .changeset/deprecate-dropdownmenu.md | 2 ++ .changeset/odd-apes-guess.md | 4 ++++ .changeset/smooth-cameras-prove.md | 2 ++ 4 files changed, 10 insertions(+) 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.