diff --git a/.changeset/little-pillows-tell.md b/.changeset/little-pillows-tell.md new file mode 100644 index 00000000000..b88485a6edc --- /dev/null +++ b/.changeset/little-pillows-tell.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Refactores stories and tests into folders diff --git a/docs/content/drafts/InlineAutocomplete.mdx b/docs/content/drafts/InlineAutocomplete.mdx index ed7b6c957ae..d34f20b252c 100644 --- a/docs/content/drafts/InlineAutocomplete.mdx +++ b/docs/content/drafts/InlineAutocomplete.mdx @@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/components-forms-inlineautocomplete--de import data from '../../../src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json' ```js -import {InlineAutocomplete} from '@primer/react/drafts' +import {InlineAutocomplete} from '@primer/react/src/drafts' ``` The `InlineAutocomplete` component extends an `Input` or `Textarea` component to provide inline suggestions, similar to those provided by a code editor. diff --git a/docs/content/drafts/MarkdownEditor.mdx b/docs/content/drafts/MarkdownEditor.mdx index f6ab8e86543..ba52f7071eb 100644 --- a/docs/content/drafts/MarkdownEditor.mdx +++ b/docs/content/drafts/MarkdownEditor.mdx @@ -9,7 +9,7 @@ storybook: '/react/storybook?path=/story/components-forms-markdowneditor--defaul import data from '../../../src/drafts/MarkdownEditor/MarkdownEditor.docs.json' ```js -import {MarkdownEditor} from '@primer/react/drafts' +import {MarkdownEditor} from '@primer/react/src/drafts' ``` `MarkdownEditor` is a full-featured editor for GitHub Flavored Markdown, with support for: diff --git a/docs/content/drafts/MarkdownViewer.mdx b/docs/content/drafts/MarkdownViewer.mdx index 879de803192..969785e699d 100644 --- a/docs/content/drafts/MarkdownViewer.mdx +++ b/docs/content/drafts/MarkdownViewer.mdx @@ -8,7 +8,7 @@ description: Displays rendered Markdown and facilitates interaction. import data from '../../../src/drafts/MarkdownViewer/MarkdownViewer.docs.json' ```js -import {MarkdownViewer} from '@primer/react/drafts' +import {MarkdownViewer} from '@primer/react/src/drafts' ``` The `MarkdownViewer` displays rendered Markdown and handles interaction (link clicking and checkbox checking/unchecking) with that content. diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx index b16684f384f..1c7c3a13afb 100644 --- a/docs/content/drafts/PageHeader.mdx +++ b/docs/content/drafts/PageHeader.mdx @@ -7,10 +7,10 @@ source: https://github.com/primer/react/tree/main/src/PageHeader storybook: '/react/storybook/?path=/story/drafts-components-pageheader--playground' --- -import data from '../../../src/PageHeader/PageHeader.docs.json' +import data from '@primer/react/src/PageHeader/PageHeader.docs.json' ```js -import {PageHeader} from '@primer/react/drafts' +import {PageHeader} from '@primer/react/src/PageHeader' ``` ## Examples diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx index 55bebf4b798..31c9f32f68d 100644 --- a/docs/content/drafts/UnderlineNav2.mdx +++ b/docs/content/drafts/UnderlineNav2.mdx @@ -8,10 +8,10 @@ source: https://github.com/primer/react/tree/main/src/UnderlineNav2 storybook: '/react/storybook/?path=/story/drafts-components-underlinenav--playground' --- -import data from '../../../src/UnderlineNav2/UnderlineNav2.docs.json' +import data from '@primer/react/src/UnderlineNav2/UnderlineNav2.docs.json' ```js -import {UnderlineNav} from '@primer/react/drafts' +import {UnderlineNav} from '@@primer/react/src/UnderlineNav2' ``` ## Examples @@ -107,7 +107,7 @@ render() ```jsx import {Link, useMatch, useResolvedPath} from 'react-router-dom' -import {UnderlineNav} from '@primer/react/drafts' +import {UnderlineNav} from '@primer/react/src/UnderlineNav2' function UnderlineNavItem({to, children, ...rest}) { const resolved = useResolvedPath(to) @@ -139,7 +139,7 @@ const Navigation = () => { ```jsx import {useRouter} from 'next/router' import Link from 'next/link' -import {UnderlineNav} from '@primer/react/drafts' +import {UnderlineNav} from '@primer/react/src/UnderlineNav2' function UnderlineNavItem({href, children, ...rest}) { const router = useRouter() diff --git a/generated/components.json b/generated/components.json index add33745532..3aebf131668 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1,6 +1,239 @@ { "schemaVersion": 1, "components": { + "action_list": { + "id": "action_list", + "name": "ActionList", + "status": "beta", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "variant", + "type": "'inset' | 'full'", + "defaultValue": "'inset'", + "description": "`inset` children are offset (vertically and horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges" + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple'", + "defaultValue": "", + "description": "Whether multiple items or a single item can be selected." + }, + { + "name": "showDivider", + "type": "boolean", + "defaultValue": "false", + "description": "Display a divider above each item in this list when it does not follow a header or divider." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "ActionList.Item", + "props": [ + { + "name": "children", + "type": "React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "variant", + "type": "'default' | 'danger'", + "defaultValue": "'default'", + "description": "`danger` indicates that the item is destructive." + }, + { + "name": "onSelect", + "type": "(event: React.MouseEvent | React.KeyboardEvent) => void", + "defaultValue": "", + "description": "Callback that is called when the item is selected using either the mouse or keyboard." + }, + { + "name": "selected", + "type": "boolean", + "defaultValue": "false", + "description": "Indicate whether the item is selected. Only applies to items that can be selected." + }, + { + "name": "active", + "type": "boolean", + "defaultValue": "false", + "description": "Indicate whether the item is active. There should never be more than one active item." + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Items that are disabled can not be clicked, selected, or navigated to." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the item. `option` is a common value." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.LinkItem", + "props": [ + { + "name": "children", + "type": "React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "active", + "type": "boolean", + "defaultValue": "false", + "description": "Indicate whether the item is active. There should never be more than one active item." + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "passthrough": { + "element": "a", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" + } + }, + { + "name": "ActionList.LeadingVisual", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "Icon (or similar) positioned before item text." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.TrailingVisual", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "Visual positioned after item text." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.Description", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "variant", + "type": "'inline' | 'block'", + "defaultValue": "'inline'", + "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.Group", + "props": [ + { + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[]", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "title", + "type": "string", + "defaultValue": "", + "description": "Title of the group." + }, + { + "name": "auxiliaryText", + "type": "string", + "defaultValue": "", + "description": "Secondary text that provides additional information about the group." + }, + { + "name": "variant", + "type": "'filled' | 'subtle'", + "defaultValue": "'subtle'", + "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple' | false", + "defaultValue": "", + "description": "Set `selectionVariant` at the group level." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, "action_menu": { "id": "action_menu", "name": "ActionMenu", @@ -87,33 +320,227 @@ } ] }, - "avatar": { - "id": "avatar", - "name": "Avatar", + "anchored_overlay": { + "id": "anchored_overlay", + "name": "AnchoredOverlay", "status": "alpha", "a11yReviewed": false, "stories": [], "props": [ { - "name": "alt", - "type": "string", - "defaultValue": "''", - "description": "Provide alt text when the avatar is used without a name next to it." - }, - { - "name": "size", - "type": "number", - "defaultValue": "20", - "description": "The size of the avatar in pixels." - }, - { - "name": "square", + "name": "open", "type": "boolean", "defaultValue": "false", - "description": "If true, the avatar will be square instead of circular." + "description": "Determines whether the overlay portion of the component should be shown or not." }, { - "name": "sx", + "name": "onOpen", + "type": "(gesture: 'anchor-click' | 'anchor-key-press') => unknown", + "defaultValue": "", + "description": "A callback that is called whenever the overlay is currently closed and an \"open gesture\" is detected." + }, + { + "name": "onClose", + "type": "(gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown", + "defaultValue": "", + "description": "A callback that is called whenever the overlay is currently open and a \"close gesture\" is detected." + }, + { + "name": "renderAnchor", + "type": ">(props: T) => JSX.Element", + "defaultValue": "", + "description": "A custom function component used to render the anchor element. When renderAnchor is null, an anchorRef is required." + }, + { + "name": "anchorRef", + "type": "React.RefObject", + "defaultValue": "", + "description": "An override to the internal `renderAnchor` ref that will be used to position the overlay. When `renderAnchor` is `null`, this can be used to make an anchor that is detached from ` AnchoredOverlay `." + }, + { + "name": "anchorId", + "type": "string", + "defaultValue": "", + "description": "An override to the internal id that will be passed to the anchor." + }, + { + "name": "side", + "type": "| 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right'", + "defaultValue": "'outside-bottom'", + "description": "" + }, + { + "name": "align", + "type": "'start' | 'center' | 'end'", + "defaultValue": "'start'", + "description": "" + }, + { + "name": "overlayProps", + "type": "Partial", + "defaultValue": "", + "description": "Props to be spread on the internal `Overlay` component." + }, + { + "name": "focusTrapSettings", + "type": "Partial", + "defaultValue": "", + "description": "Settings to apply to the focus trap on the internal `Overlay` component." + }, + { + "name": "focusZoneSettings", + "type": "Partial", + "defaultValue": "", + "description": "Settings to apply to the focus zone on the internal `Overlay` component." + } + ] + }, + "autocomplete": { + "id": "autocomplete", + "name": "Autocomplete", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ], + "subcomponents": [ + { + "name": "Autocomplete.Input", + "props": [ + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "TextInput" + } + ], + "passthrough": { + "element": "TextInput", + "url": "/react/TextInput" + } + }, + { + "name": "Autocomplete.Overlay", + "props": [ + { + "name": "menuAnchorRef", + "type": "React.RefObject" + }, + { + "name": "children", + "type": "React.ReactNode" + }, + { + "name": "overlayProps", + "deprecated": true, + "type": "Partial", + "description": "Props to be spread on the internal `Overlay` component." + } + ], + "passthrough": { + "element": "Overlay", + "url": "/react/Overlay" + } + }, + { + "name": "Autocomplete.Menu", + "props": [ + { + "name": "items", + "required": true, + "type": "T[]", + "description": "The options for field values that are displayed in the dropdown menu. One or more may be selected depending on the value of the `selectionVariant` prop." + }, + { + "name": "selectedItemIds", + "required": true, + "type": "(string | number)[]", + "description": "The IDs of the selected items" + }, + { + "name": "aria-labelledby", + "required": true, + "type": "string" + }, + { + "name": "addNewItem", + "type": "Omit & { handleAddItem: (item: Omit) => void; }", + "description": "A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop. This menu item gets appended to the end of the list of options." + }, + { + "name": "emptyStateText", + "type": "React.ReactNode | false", + "description": "The text that appears in the menu when there are no options in the array passed to the `items` prop." + }, + { + "name": "filterFn", + "type": "(item: T, i: number) => boolean", + "description": "A custom function used to filter the options in the array passed to the `items` prop. By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive." + }, + { + "name": "loading", + "type": "boolean", + "description": "Whether the data is loading for the menu items" + }, + { + "name": "sortOnCloseFn", + "type": "(itemIdA: string | number, itemIdB: string | number) => number", + "description": "The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu. By default, selected items are sorted to the top after the user closes the menu." + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple'", + "description": "Whether there can be one item selected from the menu or multiple items selected from the menu" + }, + { + "name": "onOpenChange", + "type": "(open: boolean) => void", + "description": "Function that gets called when the menu is opened or closed" + }, + { + "name": "onSelectedChange", + "type": "(item: T | T[]) => void", + "description": "The function that is called when an item in the list is selected or deselected" + }, + { + "name": "customScrollContainerRef", + "type": "React.MutableRefObject", + "description": "If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component, pass the ref of that element to `customScrollContainerRef` to ensure the container automatically scrolls when the user highlights an item in the menu that is outside the scroll container" + } + ] + } + ] + }, + "avatar": { + "id": "avatar", + "name": "Avatar", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "alt", + "type": "string", + "defaultValue": "''", + "description": "Provide alt text when the avatar is used without a name next to it." + }, + { + "name": "size", + "type": "number", + "defaultValue": "20", + "description": "The size of the avatar in pixels." + }, + { + "name": "square", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the avatar will be square instead of circular." + }, + { + "name": "sx", "type": "SystemStyleObject" } ], @@ -254,51 +681,160 @@ } ] }, - "button_group": { - "id": "button_group", - "name": "ButtonGroup", + "button": { + "id": "button", + "name": "Button", "status": "alpha", "a11yReviewed": false, "stories": [], "props": [ { - "name": "sx", - "type": "SystemStyleObject" + "name": "children", + "required": true, + "type": "React.ReactNode", + "description": "The content of the button." }, { - "name": "ref", - "type": "React.RefObject" - } - ], - "subcomponents": [] - }, - "checkbox": { - "id": "checkbox", - "name": "Checkbox", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "checked", - "type": "boolean", - "defaultValue": "", - "description": "Modifies true/false value of the native checkbox" + "name": "variant", + "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'", + "defaultValue": "'default'", + "description": "Change the visual style of the button." }, { - "name": "defaultChecked", - "type": "boolean", - "defaultValue": "", - "description": "Checks the input by default in uncontrolled mode" + "name": "size", + "type": "| 'small'\n| 'medium'\n| 'large'", + "defaultValue": "'medium'" }, { - "name": "disabled", - "type": "boolean", - "defaultValue": "", - "description": "Modifies the native disabled state of the native checkbox" + "name": "leadingIcon", + "type": "React.ComponentType", + "description": "An icon to display before the button text." }, { - "name": "indeterminate", + "name": "trailingIcon", + "type": "React.ComponentType", + "description": "An icon to display after the button text." + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "'button'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "passthrough": { + "element": "button", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" + }, + "subcomponents": [ + { + "name": "Button.Counter", + "props": [ + { + "name": "children", + "required": true, + "type": "number", + "description": "The counter value." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "icon_button": { + "id": "icon_button", + "name": "IconButton", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "This will be the Button description." + }, + { + "name": "variant", + "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'", + "defaultValue": "", + "description": "Changes the look and feel of the button which is different for each variant" + }, + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "defaultValue": "", + "description": "Changes the size of the icon button component" + }, + { + "name": "icon", + "type": "Component", + "defaultValue": "", + "description": "provide an octicon. It will be placed in the center of the button" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "button_group": { + "id": "button_group", + "name": "ButtonGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "subcomponents": [] + }, + "checkbox": { + "id": "checkbox", + "name": "Checkbox", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "checked", + "type": "boolean", + "defaultValue": "", + "description": "Modifies true/false value of the native checkbox" + }, + { + "name": "defaultChecked", + "type": "boolean", + "defaultValue": "", + "description": "Checks the input by default in uncontrolled mode" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "", + "description": "Modifies the native disabled state of the native checkbox" + }, + { + "name": "indeterminate", "type": "boolean", "defaultValue": "false", "description": "Applies an [ indeterminate state ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) to the checkbox" @@ -521,6 +1057,64 @@ ], "subcomponents": [] }, + "drafts_dialog": { + "id": "drafts_dialog", + "name": "Dialog", + "status": "draft", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "title", + "type": "React.ReactNode", + "description": "Title of the Dialog. Also serves as the aria-label for this Dialog." + }, + { + "name": "subtitle", + "type": "React.ReactNode", + "description": "The Dialog's subtitle. Optional. Rendered below the title in smaller type with less contrast. Also serves as the aria-describedby for this Dialog." + }, + { + "name": "renderHeader", + "type": "React.FunctionComponent>", + "description": "Provide a custom renderer for the dialog header. This content is rendered directly into the dialog body area, full bleed from edge to edge, top to the start of the body element. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "renderBody", + "type": "React.FunctionComponent>", + "description": "Provide a custom render function for the dialog body. This content is rendered directly into the dialog body area, full bleed from edge to edge, header to footer. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "renderFooter", + "type": "React.FunctionComponent>", + "description": "Provide a custom render function for the dialog footer. This content is rendered directly into the dialog footer area, full bleed from edge to edge, end of the body element to bottom. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "footerButtons", + "type": "DialogButtonProps[]", + "description": "Specifies the buttons to be rendered in the Dialog footer." + }, + { + "name": "onClose", + "type": "(gesture: 'close-button' | 'escape') => void", + "description": "This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the 'X' in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape')." + }, + { + "name": "role", + "type": "'dialog' | 'alertdialog'", + "description": "The ARIA role to assign to this dialog." + }, + { + "name": "width", + "type": "'small' | 'medium' | 'large' | 'xlarge'" + }, + { + "name": "height", + "type": "'small' | 'large' | 'auto'" + } + ], + "subcomponents": [] + }, "counter_label": { "id": "counter_label", "name": "CounterLabel", @@ -704,27 +1298,71 @@ ], "subcomponents": [] }, - "header": { - "id": "header", - "name": "Header", + "form_control": { + "id": "form_control", + "name": "FormControl", "status": "alpha", "a11yReviewed": false, "stories": [], "props": [ + { + "name": "children", + "type": "FormControl.Label | FormControl.Caption | FormControl.Validation | Autocomplete | TextInput | TextInputWithTokens | Select", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the control allows user input" + }, + { + "name": "id", + "type": "string", + "defaultValue": "a generated string", + "description": "The unique identifier for this control. Used to associate the label, validation text, and caption text" + }, + { + "name": "required", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the user must specify a value for the input before the owning form can be submitted" + }, { "name": "sx", "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" } ], "subcomponents": [ { - "name": "Header.Item", + "name": "FormControl.Label", "props": [ { - "name": "full", - "type": "string", + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the label should be visually hidden" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.Caption", + "props": [ + { + "name": "children", + "type": "React.ReactNode", "defaultValue": "", - "description": "Stretches item to fill the available space" + "description": "The content (usually just text) that is rendered to give contextual info about the field" }, { "name": "sx", @@ -733,18 +1371,85 @@ ] }, { - "name": "Header.Link", + "name": "FormControl.Validation", "props": [ { - "name": "href", - "type": "string", + "name": "children", + "type": "React.ReactNode", "defaultValue": "", - "description": "URL to be used for the Link" + "description": "The content (usually just text) that is rendered to give contextual info about the validation result for the field" }, { - "name": "as", - "type": "React.ElementType", - "defaultValue": "\"a\"" + "name": "variant", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "required": true, + "description": "Changes the visual style to match the validation status" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.LeadingVisual", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The visual to render before the choice input's label" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "header": { + "id": "header", + "name": "Header", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Header.Item", + "props": [ + { + "name": "full", + "type": "string", + "defaultValue": "", + "description": "Stretches item to fill the available space" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "Header.Link", + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "URL to be used for the Link" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" }, { "name": "sx", @@ -776,6 +1481,44 @@ } ] }, + "drafts_hidden": { + "id": "drafts_hidden", + "name": "Hidden", + "status": "draft", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "on", + "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>", + "defaultValue": "", + "description": "In which viewport(s) the children are going to be hidden" + } + ], + "subcomponents": [] + }, + "label": { + "id": "label", + "name": "Label", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "variant", + "type": "| 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'sponsors'", + "defaultValue": "'default'", + "description": "The color of the label" + }, + { + "name": "size", + "type": "'small' | 'large'", + "defaultValue": "'small'", + "description": "How large the label is rendered" + } + ], + "subcomponents": [] + }, "label_group": { "id": "label_group", "name": "LabelGroup", @@ -837,6 +1580,141 @@ ], "subcomponents": [] }, + "nav_list": { + "id": "nav_list", + "name": "NavList", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "aria-label", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"nav\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "NavList.Item", + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "The URL that the item navigates to. `href` is passed to the underlying `` element. If `as` is specified, the component may need different props. If the item contains a sub-nav, the item is rendered as a ` diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 18e38f40df8..21fae0e1e12 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -1,8 +1,8 @@ import React, {ComponentPropsWithRef, forwardRef, useMemo} from 'react' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import Box from '../Box' +import Box from '../Box/Box' import {BetterSystemStyleObject, merge} from '../sx' -import {useTheme} from '../ThemeProvider' +import {useTheme} from '../ThemeProvider/ThemeProvider' import {ButtonProps, StyledButton} from './types' import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx index 24f43489423..ce8aa86ad6c 100644 --- a/src/Button/ButtonCounter.tsx +++ b/src/Button/ButtonCounter.tsx @@ -1,6 +1,6 @@ import React from 'react' import {SxProp} from '../sx' -import CounterLabel from '../CounterLabel' +import CounterLabel from '../CounterLabel/CounterLabel' import {defaultSxProp} from '../utils/defaultSxProp' export type CounterProps = { diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/Button/__snapshots__/Button.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Button.test.tsx.snap rename to src/Button/__snapshots__/Button.test.tsx.snap diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 605da445460..bc6803d2870 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -1,5 +1,5 @@ import {VariantType, AlignContent} from './types' -import {Theme} from '../ThemeProvider' +import {Theme} from '../ThemeProvider/ThemeProvider' export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => { const style = { diff --git a/src/Button/types.ts b/src/Button/types.ts index 68eade62b71..399f30a8a98 100644 --- a/src/Button/types.ts +++ b/src/Button/types.ts @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' import sx, {SxProp} from '../sx' -import getGlobalFocusStyles from '../_getGlobalFocusStyles' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' export const StyledButton = styled.button` ${getGlobalFocusStyles('-2px')}; diff --git a/src/ButtonGroup.docs.json b/src/ButtonGroup/ButtonGroup.docs.json similarity index 100% rename from src/ButtonGroup.docs.json rename to src/ButtonGroup/ButtonGroup.docs.json diff --git a/src/ButtonGroup.tsx b/src/ButtonGroup/ButtonGroup.tsx similarity index 89% rename from src/ButtonGroup.tsx rename to src/ButtonGroup/ButtonGroup.tsx index 569c7af1137..111ca8ad19e 100644 --- a/src/ButtonGroup.tsx +++ b/src/ButtonGroup/ButtonGroup.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' -import {get} from './constants' -import sx from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx from '../sx' +import {ComponentProps} from '../utils/types' const ButtonGroup = styled.div` display: inline-flex; diff --git a/src/ButtonGroup/index.ts b/src/ButtonGroup/index.ts new file mode 100644 index 00000000000..33777d2c3bf --- /dev/null +++ b/src/ButtonGroup/index.ts @@ -0,0 +1 @@ +export {default, ButtonGroupProps} from './ButtonGroup' diff --git a/src/__tests__/Caret.test.tsx b/src/Caret/Caret.test.tsx similarity index 96% rename from src/__tests__/Caret.test.tsx rename to src/Caret/Caret.test.tsx index c09e8829de5..0b5d6bbb3eb 100644 --- a/src/__tests__/Caret.test.tsx +++ b/src/Caret/Caret.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Caret, {CaretProps} from '../Caret' +import Caret, {CaretProps} from './Caret' import {render, checkExports} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/Caret.tsx b/src/Caret/Caret.tsx similarity index 98% rename from src/Caret.tsx rename to src/Caret/Caret.tsx index b4e0a4d446f..98fc85e1727 100644 --- a/src/Caret.tsx +++ b/src/Caret/Caret.tsx @@ -1,7 +1,7 @@ import React from 'react' import {ThemeContext} from 'styled-components' import {style} from 'styled-system' -import {Theme} from './ThemeProvider' +import {Theme} from '../ThemeProvider/ThemeProvider' type Location = | 'top' diff --git a/src/__tests__/__snapshots__/Caret.test.tsx.snap b/src/Caret/__snapshots__/Caret.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Caret.test.tsx.snap rename to src/Caret/__snapshots__/Caret.test.tsx.snap diff --git a/src/Caret/index.ts b/src/Caret/index.ts new file mode 100644 index 00000000000..332c5ab5d76 --- /dev/null +++ b/src/Caret/index.ts @@ -0,0 +1 @@ +export {default, CaretProps} from './Caret' diff --git a/src/Checkbox.docs.json b/src/Checkbox/Checkbox.docs.json similarity index 100% rename from src/Checkbox.docs.json rename to src/Checkbox/Checkbox.docs.json diff --git a/src/__tests__/Checkbox.test.tsx b/src/Checkbox/Checkbox.test.tsx similarity index 100% rename from src/__tests__/Checkbox.test.tsx rename to src/Checkbox/Checkbox.test.tsx diff --git a/src/Checkbox.tsx b/src/Checkbox/Checkbox.tsx similarity index 92% rename from src/Checkbox.tsx rename to src/Checkbox/Checkbox.tsx index 711b6e78d1b..36bb7e2a827 100644 --- a/src/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -1,13 +1,13 @@ import styled from 'styled-components' -import {useProvidedRefOrCreate} from './hooks' +import {useProvidedRefOrCreate} from '../hooks' import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext} from 'react' -import sx, {SxProp} from './sx' -import useLayoutEffect from './utils/useIsomorphicLayoutEffect' -import {FormValidationStatus} from './utils/types/FormValidationStatus' -import {CheckboxGroupContext} from './CheckboxGroupContext' -import getGlobalFocusStyles from './_getGlobalFocusStyles' -import {get} from './constants' -import {sharedCheckboxAndRadioStyles} from './_sharedCheckboxAndRadioStyles' +import sx, {SxProp} from '../sx' +import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' +import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' +import {get} from '../constants' +import {sharedCheckboxAndRadioStyles} from '../private/_sharedCheckboxAndRadioStyles' export type CheckboxProps = { /** diff --git a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Checkbox.test.tsx.snap rename to src/Checkbox/__snapshots__/Checkbox.test.tsx.snap diff --git a/src/Checkbox/index.ts b/src/Checkbox/index.ts new file mode 100644 index 00000000000..2c5614cd6a3 --- /dev/null +++ b/src/Checkbox/index.ts @@ -0,0 +1 @@ +export {default, CheckboxProps} from './Checkbox' diff --git a/src/CheckboxGroup.docs.json b/src/CheckboxGroup/CheckboxGroup.docs.json similarity index 100% rename from src/CheckboxGroup.docs.json rename to src/CheckboxGroup/CheckboxGroup.docs.json diff --git a/src/__tests__/CheckboxGroup.test.tsx b/src/CheckboxGroup/CheckboxGroup.test.tsx similarity index 96% rename from src/__tests__/CheckboxGroup.test.tsx rename to src/CheckboxGroup/CheckboxGroup.test.tsx index 69de58f1d4f..aa546e6d379 100644 --- a/src/__tests__/CheckboxGroup.test.tsx +++ b/src/CheckboxGroup/CheckboxGroup.test.tsx @@ -4,7 +4,7 @@ import {render} from '@testing-library/react' import {Checkbox, CheckboxGroup, FormControl, SSRProvider} from '..' import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing' import userEvent from '@testing-library/user-event' -import {CheckboxGroupContext} from '../CheckboxGroup' +import {CheckboxGroupContext} from './CheckboxGroup' describe('CheckboxGroup', () => { const mockWarningFn = jest.fn() @@ -172,5 +172,5 @@ describe('CheckboxGroup', () => { }) }) -checkStoriesForAxeViolations('CheckboxGroup/fixtures') -checkStoriesForAxeViolations('CheckboxGroup/examples') +checkStoriesForAxeViolations('fixtures', '../CheckboxGroup/') +checkStoriesForAxeViolations('examples', '../CheckboxGroup/') diff --git a/src/CheckboxGroup.tsx b/src/CheckboxGroup/CheckboxGroup.tsx similarity index 82% rename from src/CheckboxGroup.tsx rename to src/CheckboxGroup/CheckboxGroup.tsx index 10361a3ba16..6d1cda9a5ee 100644 --- a/src/CheckboxGroup.tsx +++ b/src/CheckboxGroup/CheckboxGroup.tsx @@ -1,12 +1,12 @@ import React, {ChangeEvent, ChangeEventHandler, FC} from 'react' -import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from './_CheckboxOrRadioGroup' -import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' -import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' -import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' -import {useRenderForcingRef} from './hooks' -import {SxProp} from './sx' -import FormControl from './FormControl' -import Checkbox from './Checkbox' +import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from '../_CheckboxOrRadioGroup' +import CheckboxOrRadioGroupCaption from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' +import CheckboxOrRadioGroupLabel from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' +import CheckboxOrRadioGroupValidation from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' +import {useRenderForcingRef} from '../hooks' +import {SxProp} from '../sx' +import FormControl from '../FormControl' +import Checkbox from '../Checkbox/Checkbox' import {CheckboxGroupContext} from './CheckboxGroupContext' type CheckboxGroupProps = { diff --git a/src/CheckboxGroupContext.ts b/src/CheckboxGroup/CheckboxGroupContext.ts similarity index 100% rename from src/CheckboxGroupContext.ts rename to src/CheckboxGroup/CheckboxGroupContext.ts diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap rename to src/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap diff --git a/src/stories/CheckboxGroup/examples.stories.tsx b/src/CheckboxGroup/examples.stories.tsx similarity index 96% rename from src/stories/CheckboxGroup/examples.stories.tsx rename to src/CheckboxGroup/examples.stories.tsx index d7593416764..d6cafbcb015 100644 --- a/src/stories/CheckboxGroup/examples.stories.tsx +++ b/src/CheckboxGroup/examples.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' +import {BaseStyles, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' export default { title: 'Components/Forms/CheckboxGroup/examples', diff --git a/src/stories/CheckboxGroup/fixtures.stories.tsx b/src/CheckboxGroup/fixtures.stories.tsx similarity index 97% rename from src/stories/CheckboxGroup/fixtures.stories.tsx rename to src/CheckboxGroup/fixtures.stories.tsx index 621a7d3ddfe..cafe85a3d9c 100644 --- a/src/stories/CheckboxGroup/fixtures.stories.tsx +++ b/src/CheckboxGroup/fixtures.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' +import {BaseStyles, Box, Checkbox, CheckboxGroup, FormControl, ThemeProvider} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' const excludedControlKeys = ['aria-labelledby', 'id', 'onChange', 'sx', 'visuallyHidden'] diff --git a/src/CheckboxGroup/index.ts b/src/CheckboxGroup/index.ts new file mode 100644 index 00000000000..4977110e742 --- /dev/null +++ b/src/CheckboxGroup/index.ts @@ -0,0 +1 @@ +export {default, CheckboxGroupContext} from './CheckboxGroup' diff --git a/src/CircleBadge.docs.json b/src/CircleBadge/CircleBadge.docs.json similarity index 100% rename from src/CircleBadge.docs.json rename to src/CircleBadge/CircleBadge.docs.json diff --git a/src/__tests__/CircleBadge.test.tsx b/src/CircleBadge/CircleBadge.test.tsx similarity index 100% rename from src/__tests__/CircleBadge.test.tsx rename to src/CircleBadge/CircleBadge.test.tsx diff --git a/src/CircleBadge.tsx b/src/CircleBadge/CircleBadge.tsx similarity index 83% rename from src/CircleBadge.tsx rename to src/CircleBadge/CircleBadge.tsx index f2e6e27cc35..94de1055e2b 100644 --- a/src/CircleBadge.tsx +++ b/src/CircleBadge/CircleBadge.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components' -import {get} from './constants' -import StyledOcticon from './StyledOcticon' -import sx, {SxProp} from './sx' -import isNumeric from './utils/isNumeric' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import StyledOcticon from '../StyledOcticon/StyledOcticon' +import sx, {SxProp} from '../sx' +import isNumeric from '../utils/isNumeric' +import {ComponentProps} from '../utils/types' const variantSizes = { small: 56, diff --git a/src/__tests__/CircleBadge.types.test.tsx b/src/CircleBadge/CircleBadge.types.test.tsx similarity index 86% rename from src/__tests__/CircleBadge.types.test.tsx rename to src/CircleBadge/CircleBadge.types.test.tsx index c34c539833a..b89f13787be 100644 --- a/src/__tests__/CircleBadge.types.test.tsx +++ b/src/CircleBadge/CircleBadge.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import CircleBadge from '../CircleBadge' +import CircleBadge from './CircleBadge' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/CircleBadge.test.tsx.snap b/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/CircleBadge.test.tsx.snap rename to src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap diff --git a/src/CircleBadge/index.ts b/src/CircleBadge/index.ts new file mode 100644 index 00000000000..753cffb95c2 --- /dev/null +++ b/src/CircleBadge/index.ts @@ -0,0 +1,2 @@ +export {default} from './CircleBadge' +export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge' diff --git a/src/CircleOcticon.docs.json b/src/CircleOcticon/CircleOcticon.docs.json similarity index 100% rename from src/CircleOcticon.docs.json rename to src/CircleOcticon/CircleOcticon.docs.json diff --git a/src/__tests__/CircleOcticon.test.tsx b/src/CircleOcticon/CircleOcticon.test.tsx similarity index 100% rename from src/__tests__/CircleOcticon.test.tsx rename to src/CircleOcticon/CircleOcticon.test.tsx diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon/CircleOcticon.tsx similarity index 94% rename from src/CircleOcticon.tsx rename to src/CircleOcticon/CircleOcticon.tsx index 4e4f10f516c..b98f395386d 100644 --- a/src/CircleOcticon.tsx +++ b/src/CircleOcticon/CircleOcticon.tsx @@ -1,6 +1,6 @@ import {IconProps} from '@primer/octicons-react' import React from 'react' -import Box, {BoxProps} from './Box' +import Box, {BoxProps} from '../Box/Box' export type CircleOcticonProps = { as?: React.ElementType diff --git a/src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap b/src/CircleOcticon/__snapshots__/CircleOcticon.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/CircleOcticon.test.tsx.snap rename to src/CircleOcticon/__snapshots__/CircleOcticon.test.tsx.snap diff --git a/src/CircleOcticon/index.ts b/src/CircleOcticon/index.ts new file mode 100644 index 00000000000..493e588157e --- /dev/null +++ b/src/CircleOcticon/index.ts @@ -0,0 +1 @@ +export {default, CircleOcticonProps} from './CircleOcticon' diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/ConfirmationDialog/ConfirmationDialog.test.tsx similarity index 92% rename from src/__tests__/ConfirmationDialog.test.tsx rename to src/ConfirmationDialog/ConfirmationDialog.test.tsx index 715614d4ba0..4cf5a287734 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/ConfirmationDialog/ConfirmationDialog.test.tsx @@ -3,12 +3,12 @@ import {axe} from 'jest-axe' import React, {useCallback, useRef, useState} from 'react' import {ActionMenu} from '../deprecated/ActionMenu' -import BaseStyles from '../BaseStyles' -import Box from '../Box' +import BaseStyles from '../BaseStyles/BaseStyles' +import Box from '../Box/Box' import Button from '../deprecated/Button/Button' -import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog' +import {ConfirmationDialog, useConfirm} from './ConfirmationDialog' import theme from '../theme' -import {ThemeProvider} from '../ThemeProvider' +import {ThemeProvider} from '../ThemeProvider/ThemeProvider' import {SSRProvider} from '../utils/ssr' import {behavesAsComponent, checkExports} from '../utils/testing' @@ -80,7 +80,7 @@ describe('ConfirmationDialog', () => { options: {skipAs: true, skipSx: true}, }) - checkExports('Dialog/ConfirmationDialog', { + checkExports('ConfirmationDialog/', { default: undefined, useConfirm, ConfirmationDialog, @@ -140,9 +140,7 @@ describe('ConfirmationDialog', () => { // REACT_VERSION_LATEST should be treated as a constant for the test // environment if (REACT_VERSION_LATEST) { - // eslint-disable-next-line jest/no-conditional-expect expect(spy).toHaveBeenCalledTimes(1) - // eslint-disable-next-line jest/no-conditional-expect expect(spy).toHaveBeenCalledWith( expect.stringContaining('Warning: ReactDOM.render is no longer supported in React 18'), ) diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/ConfirmationDialog/ConfirmationDialog.tsx similarity index 98% rename from src/Dialog/ConfirmationDialog.tsx rename to src/ConfirmationDialog/ConfirmationDialog.tsx index 2fa2259849e..06f7e6ba162 100644 --- a/src/Dialog/ConfirmationDialog.tsx +++ b/src/ConfirmationDialog/ConfirmationDialog.tsx @@ -1,11 +1,11 @@ import React, {useCallback} from 'react' import ReactDOM from 'react-dom' import styled from 'styled-components' -import Box from '../Box' -import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider' +import Box from '../Box/Box' +import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider/ThemeProvider' import {FocusKeys} from '@primer/behaviors' import {get} from '../constants' -import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog' +import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from './Dialog' import {useFocusZone} from '../hooks/useFocusZone' /** diff --git a/src/__tests__/Dialog2.types.test.tsx b/src/ConfirmationDialog/ConfirmationDialog.types.test.tsx similarity index 87% rename from src/__tests__/Dialog2.types.test.tsx rename to src/ConfirmationDialog/ConfirmationDialog.types.test.tsx index a5774427458..452c211b9ca 100644 --- a/src/__tests__/Dialog2.types.test.tsx +++ b/src/ConfirmationDialog/ConfirmationDialog.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Dialog} from '../Dialog/Dialog' +import {Dialog} from './Dialog' export function shouldAcceptCallWithNoProps() { return null} /> diff --git a/src/ConfirmationDialog/Dialog.docs.json b/src/ConfirmationDialog/Dialog.docs.json new file mode 100644 index 00000000000..5b803588341 --- /dev/null +++ b/src/ConfirmationDialog/Dialog.docs.json @@ -0,0 +1,58 @@ +{ + "id": "drafts_dialog", + "name": "Dialog", + "status": "draft", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "title", + "type": "React.ReactNode", + "description": "Title of the Dialog. Also serves as the aria-label for this Dialog." + }, + { + "name": "subtitle", + "type": "React.ReactNode", + "description": "The Dialog's subtitle. Optional. Rendered below the title in smaller type with less contrast. Also serves as the aria-describedby for this Dialog." + }, + { + "name": "renderHeader", + "type": "React.FunctionComponent>", + "description": "Provide a custom renderer for the dialog header. This content is rendered directly into the dialog body area, full bleed from edge to edge, top to the start of the body element. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "renderBody", + "type": "React.FunctionComponent>", + "description": "Provide a custom render function for the dialog body. This content is rendered directly into the dialog body area, full bleed from edge to edge, header to footer. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "renderFooter", + "type": "React.FunctionComponent>", + "description": "Provide a custom render function for the dialog footer. This content is rendered directly into the dialog footer area, full bleed from edge to edge, end of the body element to bottom. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "footerButtons", + "type": "DialogButtonProps[]", + "description": "Specifies the buttons to be rendered in the Dialog footer." + }, + { + "name": "onClose", + "type": "(gesture: 'close-button' | 'escape') => void", + "description": "This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the 'X' in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape')." + }, + { + "name": "role", + "type": "'dialog' | 'alertdialog'", + "description": "The ARIA role to assign to this dialog." + }, + { + "name": "width", + "type": "'small' | 'medium' | 'large' | 'xlarge'" + }, + { + "name": "height", + "type": "'small' | 'large' | 'auto'" + } + ], + "subcomponents": [] +} diff --git a/src/ConfirmationDialog/Dialog.tsx b/src/ConfirmationDialog/Dialog.tsx new file mode 100644 index 00000000000..f3502b59ecc --- /dev/null +++ b/src/ConfirmationDialog/Dialog.tsx @@ -0,0 +1,453 @@ +import React, {useCallback, useEffect, useRef, useState} from 'react' +import styled from 'styled-components' +import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button' +import Box from '../Box/Box' +import {get} from '../constants' +import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks' +import {useFocusTrap} from '../hooks/useFocusTrap' +import sx, {SxProp} from '../sx' +import StyledOcticon from '../StyledOcticon/StyledOcticon' +import {XIcon} from '@primer/octicons-react' +import {useFocusZone} from '../hooks/useFocusZone' +import {FocusKeys} from '@primer/behaviors' +import Portal from '../Portal' +import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' +import {useId} from '../hooks/useId' + +const ANIMATION_DURATION = '200ms' + +/** + * Props that characterize a button to be rendered into the footer of + * a Dialog. + */ +export type DialogButtonProps = ButtonProps & { + /** + * The type of Button element to use + */ + buttonType?: 'normal' | 'primary' | 'danger' + + /** + * The Button's inner text + */ + content: React.ReactNode + + /** + * If true, and if this is the only button with autoFocus set to true, + * focus this button automatically when the dialog appears. + */ + autoFocus?: boolean + + /** + * A reference to the rendered Button’s DOM node, used together with + * `autoFocus` for `focusTrap`’s `initialFocus`. + */ + ref?: React.RefObject +} + +/** + * Props to customize the rendering of the Dialog. + */ +export interface DialogProps extends SxProp { + /** + * Title of the Dialog. Also serves as the aria-label for this Dialog. + */ + title?: React.ReactNode + + /** + * The Dialog's subtitle. Optional. Rendered below the title in smaller + * type with less contrast. Also serves as the aria-describedby for this + * Dialog. + */ + subtitle?: React.ReactNode + + /** + * Provide a custom renderer for the dialog header. This content is + * rendered directly into the dialog body area, full bleed from edge + * to edge, top to the start of the body element. + * + * Warning: using a custom renderer may violate Primer UX principles. + */ + renderHeader?: React.FunctionComponent> + + /** + * Provide a custom render function for the dialog body. This content is + * rendered directly into the dialog body area, full bleed from edge to + * edge, header to footer. + * + * Warning: using a custom renderer may violate Primer UX principles. + */ + renderBody?: React.FunctionComponent> + + /** + * Provide a custom render function for the dialog footer. This content is + * rendered directly into the dialog footer area, full bleed from edge to + * edge, end of the body element to bottom. + * + * Warning: using a custom renderer may violate Primer UX principles. + */ + renderFooter?: React.FunctionComponent> + + /** + * Specifies the buttons to be rendered in the Dialog footer. + */ + footerButtons?: DialogButtonProps[] + + /** + * This method is invoked when a gesture to close the dialog is used (either + * an Escape key press or clicking the "X" in the top-right corner). The + * gesture argument indicates the gesture that was used to close the dialog + * (either 'close-button' or 'escape'). + */ + onClose: (gesture: 'close-button' | 'escape') => void + + /** + * Default: "dialog". The ARIA role to assign to this dialog. + * @see https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal + * @see https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog + */ + role?: 'dialog' | 'alertdialog' + + /** + * The width of the dialog. + * small: 296px + * medium: 320px + * large: 480px + * xlarge: 640px + */ + width?: DialogWidth + + /** + * The height of the dialog. + * small: 296x480 + * large: 480x640 + * auto: variable based on contents + */ + height?: DialogHeight +} + +/** + * Props that are passed to a component that serves as a dialog header + */ +export interface DialogHeaderProps extends DialogProps { + /** + * ID of the element that will be used as the `aria-labelledby` attribute on the + * dialog. This ID should be set to the element that renders the dialog's title. + */ + dialogLabelId: string + + /** + * ID of the element that will be used as the `aria-describedby` attribute on the + * dialog. This ID should be set to the element that renders the dialog's subtitle. + */ + dialogDescriptionId: string +} + +const Backdrop = styled('div')` + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.4); + animation: dialog-backdrop-appear ${ANIMATION_DURATION} ${get('animation.easeOutCubic')}; + + @keyframes dialog-backdrop-appear { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } +` + +const heightMap = { + small: '480px', + large: '640px', + auto: 'auto', +} as const + +const widthMap = { + small: '296px', + medium: '320px', + large: '480px', + xlarge: '640px', +} as const + +export type DialogWidth = keyof typeof widthMap +export type DialogHeight = keyof typeof heightMap + +type StyledDialogProps = { + width?: DialogWidth + height?: DialogHeight +} & SxProp + +const StyledDialog = styled.div` + display: flex; + flex-direction: column; + background-color: ${get('colors.canvas.overlay')}; + box-shadow: ${get('shadows.overlay.shadow')}; + min-width: 296px; + max-width: calc(100vw - 64px); + max-height: calc(100vh - 64px); + width: ${props => widthMap[props.width ?? ('xlarge' as const)]}; + height: ${props => heightMap[props.height ?? ('auto' as const)]}; + border-radius: 12px; + opacity: 1; + animation: overlay--dialog-appear ${ANIMATION_DURATION} ${get('animation.easeOutCubic')}; + + @keyframes overlay--dialog-appear { + 0% { + opacity: 0; + transform: scale(0.5); + } + 100% { + opacity: 1; + transform: scale(1); + } + } + + ${sx}; +` + +const DefaultHeader: React.FC> = ({ + dialogLabelId, + title, + subtitle, + dialogDescriptionId, + onClose, +}) => { + const onCloseClick = useCallback(() => { + onClose('close-button') + }, [onClose]) + return ( + + + + {title ?? 'Dialog'} + {subtitle && {subtitle}} + + + + + ) +} +const DefaultBody: React.FC> = ({children}) => { + return {children} +} +const DefaultFooter: React.FC> = ({footerButtons}) => { + const {containerRef: footerRef} = useFocusZone({ + bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab, + focusInStrategy: 'closest', + }) + return footerButtons ? ( + }> + + + ) : null +} + +const _Dialog = React.forwardRef>((props, forwardedRef) => { + const { + title = 'Dialog', + subtitle = '', + renderHeader, + renderBody, + renderFooter, + onClose, + role = 'dialog', + width = 'xlarge', + height = 'auto', + footerButtons = [], + sx, + } = props + const dialogLabelId = useId() + const dialogDescriptionId = useId() + const autoFocusedFooterButtonRef = useRef(null) + for (const footerButton of footerButtons) { + if (footerButton.autoFocus) { + footerButton.ref = autoFocusedFooterButtonRef + } + } + const defaultedProps = {...props, title, subtitle, role, dialogLabelId, dialogDescriptionId} + + const dialogRef = useRef(null) + useRefObjectAsForwardedRef(forwardedRef, dialogRef) + const backdropRef = useRef(null) + useFocusTrap({containerRef: dialogRef, restoreFocusOnCleanUp: true, initialFocusRef: autoFocusedFooterButtonRef}) + + useOnEscapePress( + (event: KeyboardEvent) => { + onClose('escape') + event.preventDefault() + }, + [onClose], + ) + + const header = (renderHeader ?? DefaultHeader)(defaultedProps) + const body = (renderBody ?? DefaultBody)(defaultedProps) + const footer = (renderFooter ?? DefaultFooter)(defaultedProps) + + return ( + <> + + + + {header} + {body} + {footer} + + + + + ) +}) +_Dialog.displayName = 'Dialog' + +const Header = styled.div` + box-shadow: 0 1px 0 ${get('colors.border.default')}; + padding: ${get('space.2')}; + z-index: 1; + flex-shrink: 0; +` + +const Title = styled.h1` + font-size: ${get('fontSizes.1')}; + font-weight: ${get('fontWeights.bold')}; + margin: 0; /* override default margin */ + ${sx}; +` + +const Subtitle = styled.h2` + font-size: ${get('fontSizes.0')}; + color: ${get('colors.fg.muted')}; + margin: 0; /* override default margin */ + margin-top: ${get('space.1')}; + + ${sx}; +` + +const Body = styled.div` + flex-grow: 1; + overflow: auto; + padding: ${get('space.3')}; + + ${sx}; +` + +const Footer = styled.div` + box-shadow: 0 -1px 0 ${get('colors.border.default')}; + padding: ${get('space.3')}; + display: flex; + flex-flow: wrap; + justify-content: flex-end; + z-index: 1; + flex-shrink: 0; + + button { + margin-left: ${get('space.1')}; + &:first-child { + margin-left: 0; + } + } + + ${sx}; +` + +const buttonTypes = { + normal: Button, + primary: ButtonPrimary, + danger: ButtonDanger, +} +const Buttons: React.FC> = ({buttons}) => { + const autoFocusRef = useProvidedRefOrCreate(buttons.find(button => button.autoFocus)?.ref) + let autoFocusCount = 0 + const [hasRendered, setHasRendered] = useState(0) + useEffect(() => { + // hack to work around dialogs originating from other focus traps. + if (hasRendered === 1) { + autoFocusRef.current?.focus() + } else { + setHasRendered(hasRendered + 1) + } + }, [autoFocusRef, hasRendered]) + + return ( + <> + {buttons.map((dialogButtonProps, index) => { + const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps + const ButtonElement = buttonTypes[buttonType] + return ( + + {content} + + ) + })} + + ) +} +const DialogCloseButton = styled(Button)` + border-radius: 4px; + background: transparent; + border: 0; + vertical-align: middle; + color: ${get('colors.fg.muted')}; + padding: ${get('space.2')}; + align-self: flex-start; + line-height: normal; + box-shadow: none; +` +const CloseButton: React.FC void}>> = ({onClose}) => { + return ( + + + + ) +} + +/** + * A dialog is a type of overlay that can be used for confirming actions, asking + * for disambiguation, and presenting small forms. They generally allow the user + * to focus on a quick task without having to navigate to a different page. + * + * Dialogs appear in the page after a direct user interaction. Don't show dialogs + * on page load or as system alerts. + * + * Dialogs appear centered in the page, with a visible backdrop that dims the rest + * of the window for focus. + * + * All dialogs have a title and a close button. + * + * Dialogs are modal. Dialogs can be dismissed by clicking on the close button, + * pressing the escape key, or by interacting with another button in the dialog. + * To avoid losing information and missing important messages, clicking outside + * of the dialog will not close it. + * + * The sub components provided (e.g. Header, Title, etc.) are available for custom + * renderers only. They are not intended to be used otherwise. + */ +export const Dialog = Object.assign(_Dialog, { + Header, + Title, + Subtitle, + Body, + Footer, + Buttons, + CloseButton, +}) diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap rename to src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap diff --git a/src/ConfirmationDialog/index.ts b/src/ConfirmationDialog/index.ts new file mode 100644 index 00000000000..af5147af4c6 --- /dev/null +++ b/src/ConfirmationDialog/index.ts @@ -0,0 +1 @@ +export {useConfirm, ConfirmationDialog, ConfirmationDialogProps, ConfirmOptions} from './ConfirmationDialog' diff --git a/src/CounterLabel.docs.json b/src/CounterLabel/CounterLabel.docs.json similarity index 100% rename from src/CounterLabel.docs.json rename to src/CounterLabel/CounterLabel.docs.json diff --git a/src/__tests__/CounterLabel.test.tsx b/src/CounterLabel/CounterLabel.test.tsx similarity index 100% rename from src/__tests__/CounterLabel.test.tsx rename to src/CounterLabel/CounterLabel.test.tsx diff --git a/src/CounterLabel.tsx b/src/CounterLabel/CounterLabel.tsx similarity index 87% rename from src/CounterLabel.tsx rename to src/CounterLabel/CounterLabel.tsx index 794c56d985a..8d175eca11b 100644 --- a/src/CounterLabel.tsx +++ b/src/CounterLabel/CounterLabel.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box from './Box' -import {BetterSystemStyleObject, SxProp, merge} from './sx' -import VisuallyHidden from './_VisuallyHidden' +import Box from '../Box/Box' +import {BetterSystemStyleObject, SxProp, merge} from '../sx' +import VisuallyHidden from '../private/_VisuallyHidden' export type CounterLabelProps = { scheme?: 'primary' | 'secondary' diff --git a/src/__tests__/CounterLabel.types.test.tsx b/src/CounterLabel/CounterLabel.types.test.tsx similarity index 86% rename from src/__tests__/CounterLabel.types.test.tsx rename to src/CounterLabel/CounterLabel.types.test.tsx index 076a29514a4..9a4eb60fd9f 100644 --- a/src/__tests__/CounterLabel.types.test.tsx +++ b/src/CounterLabel/CounterLabel.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import CounterLabel from '../CounterLabel' +import CounterLabel from './CounterLabel' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/CounterLabel.test.tsx.snap b/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/CounterLabel.test.tsx.snap rename to src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap diff --git a/src/CounterLabel/index.ts b/src/CounterLabel/index.ts new file mode 100644 index 00000000000..0d6b5cef6e6 --- /dev/null +++ b/src/CounterLabel/index.ts @@ -0,0 +1 @@ +export {default, CounterLabelProps} from './CounterLabel' diff --git a/src/Details.docs.json b/src/Details/Details.docs.json similarity index 100% rename from src/Details.docs.json rename to src/Details/Details.docs.json diff --git a/src/__tests__/Details.test.tsx b/src/Details/Details.test.tsx similarity index 100% rename from src/__tests__/Details.test.tsx rename to src/Details/Details.test.tsx diff --git a/src/Details.tsx b/src/Details/Details.tsx similarity index 79% rename from src/Details.tsx rename to src/Details/Details.tsx index 7ce7be56f4a..4ef57bed69a 100644 --- a/src/Details.tsx +++ b/src/Details/Details.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const Details = styled.details` & > summary { diff --git a/src/__tests__/Details.types.test.tsx b/src/Details/Details.types.test.tsx similarity index 88% rename from src/__tests__/Details.types.test.tsx rename to src/Details/Details.types.test.tsx index a8a0ed9a536..ce91fffda7a 100644 --- a/src/__tests__/Details.types.test.tsx +++ b/src/Details/Details.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Details from '../Details' +import Details from './Details' export function shouldAcceptCallWithNoProps() { return
diff --git a/src/__tests__/__snapshots__/Details.test.tsx.snap b/src/Details/__snapshots__/Details.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Details.test.tsx.snap rename to src/Details/__snapshots__/Details.test.tsx.snap diff --git a/src/Details/index.ts b/src/Details/index.ts new file mode 100644 index 00000000000..942b90c1340 --- /dev/null +++ b/src/Details/index.ts @@ -0,0 +1 @@ +export {default, DetailsProps} from './Details' diff --git a/src/Dialog.docs.json b/src/Dialog.docs.json deleted file mode 100644 index 593f3688b3f..00000000000 --- a/src/Dialog.docs.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "id": "dialog", - "name": "Dialog", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "isOpen", - "type": "boolean", - "description": "Whether or not the dialog is open" - }, - { - "name": "onDismiss", - "type": "() => void", - "description": "Function that will be called when the dialog is closed" - }, - { - "name": "returnFocusRef", - "type": " React.RefObject", - "description": "The element to restore focus back to after the `Dialog` is closed" - }, - { - "name": "initialFocusRef", - "type": " React.RefObject", - "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused." - }, - { - "name": "aria-labelledby", - "type": "string", - "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both." - }, - { - "name": "aria-label", - "type": "string", - "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both." - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [ - { - "name": "Dialog.Header", - "props": [ - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - } - ] -} diff --git a/src/Dialog.tsx b/src/Dialog.tsx deleted file mode 100644 index 2df90952959..00000000000 --- a/src/Dialog.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import React, {forwardRef, useRef} from 'react' -import styled from 'styled-components' -import ButtonClose from './deprecated/Button/ButtonClose' -import {get} from './constants' -import Box from './Box' -import useDialog from './hooks/useDialog' -import sx, {SxProp} from './sx' -import Text from './Text' -import {ComponentProps} from './utils/types' -import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef' - -const noop = () => null - -type StyledDialogBaseProps = { - narrow?: boolean - wide?: boolean -} & SxProp - -const DialogBase = styled.div` - box-shadow: ${get('shadows.shadow.large')}; - border-radius: ${get('radii.2')}; - position: fixed; - top: 0; - left: 50%; - transform: translateX(-50%); - max-height: 80vh; - z-index: 999; - margin: 10vh auto; - background-color: ${get('colors.canvas.default')}; - width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')}; - outline: none; - - @media screen and (max-width: 750px) { - width: 100vw; - margin: 0; - border-radius: 0; - height: 100vh; - } - - ${sx}; -` - -const DialogHeaderBase = styled(Box)` - border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px; - border-bottom: 1px solid ${get('colors.border.default')}; - display: flex; - - @media screen and (max-width: 750px) { - border-radius: 0px; - } - - ${sx}; -` -export type DialogHeaderProps = ComponentProps - -function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...rest}: DialogHeaderProps) { - if (React.Children.toArray(children).every(ch => typeof ch === 'string')) { - children = ( - - {children} - - ) - } - - return ( - - {children} - - ) -} - -const Overlay = styled.span` - &:before { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - cursor: default; - content: ' '; - background: transparent; - z-index: 99; - background: ${get('colors.primer.canvas.backdrop')}; - } -` - -type InternalDialogProps = { - isOpen?: boolean - onDismiss?: () => void - initialFocusRef?: React.RefObject - returnFocusRef?: React.RefObject -} & ComponentProps - -const Dialog = forwardRef( - ({children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, ...props}, forwardedRef) => { - const overlayRef = useRef(null) - const modalRef = useRef(null) - useRefObjectAsForwardedRef(forwardedRef, modalRef) - const closeButtonRef = useRef(null) - - const onCloseClick = () => { - onDismiss() - if (returnFocusRef && returnFocusRef.current) { - returnFocusRef.current.focus() - } - } - - const {getDialogProps} = useDialog({ - modalRef, - onDismiss: onCloseClick, - isOpen, - initialFocusRef, - closeButtonRef, - returnFocusRef, - overlayRef, - }) - return isOpen ? ( - <> - - - - {children} - - - ) : null - }, -) - -DialogHeader.propTypes = { - ...Box.propTypes, -} - -DialogHeader.displayName = 'Dialog.Header' -Dialog.displayName = 'Dialog' - -export type DialogProps = ComponentProps -export default Object.assign(Dialog, {Header: DialogHeader}) diff --git a/src/Dialog/Dialog.docs.json b/src/Dialog/Dialog.docs.json index 5b803588341..593f3688b3f 100644 --- a/src/Dialog/Dialog.docs.json +++ b/src/Dialog/Dialog.docs.json @@ -1,58 +1,54 @@ { - "id": "drafts_dialog", + "id": "dialog", "name": "Dialog", - "status": "draft", + "status": "alpha", "a11yReviewed": false, "stories": [], "props": [ { - "name": "title", - "type": "React.ReactNode", - "description": "Title of the Dialog. Also serves as the aria-label for this Dialog." + "name": "isOpen", + "type": "boolean", + "description": "Whether or not the dialog is open" }, { - "name": "subtitle", - "type": "React.ReactNode", - "description": "The Dialog's subtitle. Optional. Rendered below the title in smaller type with less contrast. Also serves as the aria-describedby for this Dialog." + "name": "onDismiss", + "type": "() => void", + "description": "Function that will be called when the dialog is closed" }, { - "name": "renderHeader", - "type": "React.FunctionComponent>", - "description": "Provide a custom renderer for the dialog header. This content is rendered directly into the dialog body area, full bleed from edge to edge, top to the start of the body element. Warning: using a custom renderer may violate Primer UX principles." + "name": "returnFocusRef", + "type": " React.RefObject", + "description": "The element to restore focus back to after the `Dialog` is closed" }, { - "name": "renderBody", - "type": "React.FunctionComponent>", - "description": "Provide a custom render function for the dialog body. This content is rendered directly into the dialog body area, full bleed from edge to edge, header to footer. Warning: using a custom renderer may violate Primer UX principles." + "name": "initialFocusRef", + "type": " React.RefObject", + "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused." }, { - "name": "renderFooter", - "type": "React.FunctionComponent>", - "description": "Provide a custom render function for the dialog footer. This content is rendered directly into the dialog footer area, full bleed from edge to edge, end of the body element to bottom. Warning: using a custom renderer may violate Primer UX principles." + "name": "aria-labelledby", + "type": "string", + "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both." }, { - "name": "footerButtons", - "type": "DialogButtonProps[]", - "description": "Specifies the buttons to be rendered in the Dialog footer." + "name": "aria-label", + "type": "string", + "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both." }, { - "name": "onClose", - "type": "(gesture: 'close-button' | 'escape') => void", - "description": "This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the 'X' in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape')." - }, - { - "name": "role", - "type": "'dialog' | 'alertdialog'", - "description": "The ARIA role to assign to this dialog." - }, - { - "name": "width", - "type": "'small' | 'medium' | 'large' | 'xlarge'" - }, - { - "name": "height", - "type": "'small' | 'large' | 'auto'" + "name": "sx", + "type": "SystemStyleObject" } ], - "subcomponents": [] + "subcomponents": [ + { + "name": "Dialog.Header", + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] } diff --git a/src/__tests__/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx similarity index 100% rename from src/__tests__/Dialog.test.tsx rename to src/Dialog/Dialog.test.tsx diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index 37354b6452b..db03a902329 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -1,453 +1,142 @@ -import React, {useCallback, useEffect, useRef, useState} from 'react' +import React, {forwardRef, useRef} from 'react' import styled from 'styled-components' -import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button' -import Box from '../Box' +import ButtonClose from '../deprecated/Button/ButtonClose' import {get} from '../constants' -import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks' -import {useFocusTrap} from '../hooks/useFocusTrap' +import Box from '../Box/Box' +import useDialog from '../hooks/useDialog' import sx, {SxProp} from '../sx' -import StyledOcticon from '../StyledOcticon' -import {XIcon} from '@primer/octicons-react' -import {useFocusZone} from '../hooks/useFocusZone' -import {FocusKeys} from '@primer/behaviors' -import Portal from '../Portal' +import Text from '../Text/Text' +import {ComponentProps} from '../utils/types' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' -import {useId} from '../hooks/useId' -const ANIMATION_DURATION = '200ms' +const noop = () => null -/** - * Props that characterize a button to be rendered into the footer of - * a Dialog. - */ -export type DialogButtonProps = ButtonProps & { - /** - * The type of Button element to use - */ - buttonType?: 'normal' | 'primary' | 'danger' - - /** - * The Button's inner text - */ - content: React.ReactNode - - /** - * If true, and if this is the only button with autoFocus set to true, - * focus this button automatically when the dialog appears. - */ - autoFocus?: boolean - - /** - * A reference to the rendered Button’s DOM node, used together with - * `autoFocus` for `focusTrap`’s `initialFocus`. - */ - ref?: React.RefObject -} - -/** - * Props to customize the rendering of the Dialog. - */ -export interface DialogProps extends SxProp { - /** - * Title of the Dialog. Also serves as the aria-label for this Dialog. - */ - title?: React.ReactNode - - /** - * The Dialog's subtitle. Optional. Rendered below the title in smaller - * type with less contrast. Also serves as the aria-describedby for this - * Dialog. - */ - subtitle?: React.ReactNode - - /** - * Provide a custom renderer for the dialog header. This content is - * rendered directly into the dialog body area, full bleed from edge - * to edge, top to the start of the body element. - * - * Warning: using a custom renderer may violate Primer UX principles. - */ - renderHeader?: React.FunctionComponent> - - /** - * Provide a custom render function for the dialog body. This content is - * rendered directly into the dialog body area, full bleed from edge to - * edge, header to footer. - * - * Warning: using a custom renderer may violate Primer UX principles. - */ - renderBody?: React.FunctionComponent> - - /** - * Provide a custom render function for the dialog footer. This content is - * rendered directly into the dialog footer area, full bleed from edge to - * edge, end of the body element to bottom. - * - * Warning: using a custom renderer may violate Primer UX principles. - */ - renderFooter?: React.FunctionComponent> - - /** - * Specifies the buttons to be rendered in the Dialog footer. - */ - footerButtons?: DialogButtonProps[] - - /** - * This method is invoked when a gesture to close the dialog is used (either - * an Escape key press or clicking the "X" in the top-right corner). The - * gesture argument indicates the gesture that was used to close the dialog - * (either 'close-button' or 'escape'). - */ - onClose: (gesture: 'close-button' | 'escape') => void - - /** - * Default: "dialog". The ARIA role to assign to this dialog. - * @see https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal - * @see https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog - */ - role?: 'dialog' | 'alertdialog' - - /** - * The width of the dialog. - * small: 296px - * medium: 320px - * large: 480px - * xlarge: 640px - */ - width?: DialogWidth - - /** - * The height of the dialog. - * small: 296x480 - * large: 480x640 - * auto: variable based on contents - */ - height?: DialogHeight -} - -/** - * Props that are passed to a component that serves as a dialog header - */ -export interface DialogHeaderProps extends DialogProps { - /** - * ID of the element that will be used as the `aria-labelledby` attribute on the - * dialog. This ID should be set to the element that renders the dialog's title. - */ - dialogLabelId: string - - /** - * ID of the element that will be used as the `aria-describedby` attribute on the - * dialog. This ID should be set to the element that renders the dialog's subtitle. - */ - dialogDescriptionId: string -} +type StyledDialogBaseProps = { + narrow?: boolean + wide?: boolean +} & SxProp -const Backdrop = styled('div')` +const DialogBase = styled.div` + box-shadow: ${get('shadows.shadow.large')}; + border-radius: ${get('radii.2')}; position: fixed; top: 0; - left: 0; - bottom: 0; - right: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: rgba(0, 0, 0, 0.4); - animation: dialog-backdrop-appear ${ANIMATION_DURATION} ${get('animation.easeOutCubic')}; - - @keyframes dialog-backdrop-appear { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } + left: 50%; + transform: translateX(-50%); + max-height: 80vh; + z-index: 999; + margin: 10vh auto; + background-color: ${get('colors.canvas.default')}; + width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')}; + outline: none; + + @media screen and (max-width: 750px) { + width: 100vw; + margin: 0; + border-radius: 0; + height: 100vh; } -` - -const heightMap = { - small: '480px', - large: '640px', - auto: 'auto', -} as const - -const widthMap = { - small: '296px', - medium: '320px', - large: '480px', - xlarge: '640px', -} as const - -export type DialogWidth = keyof typeof widthMap -export type DialogHeight = keyof typeof heightMap -type StyledDialogProps = { - width?: DialogWidth - height?: DialogHeight -} & SxProp + ${sx}; +` -const StyledDialog = styled.div` +const DialogHeaderBase = styled(Box)` + border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px; + border-bottom: 1px solid ${get('colors.border.default')}; display: flex; - flex-direction: column; - background-color: ${get('colors.canvas.overlay')}; - box-shadow: ${get('shadows.overlay.shadow')}; - min-width: 296px; - max-width: calc(100vw - 64px); - max-height: calc(100vh - 64px); - width: ${props => widthMap[props.width ?? ('xlarge' as const)]}; - height: ${props => heightMap[props.height ?? ('auto' as const)]}; - border-radius: 12px; - opacity: 1; - animation: overlay--dialog-appear ${ANIMATION_DURATION} ${get('animation.easeOutCubic')}; - @keyframes overlay--dialog-appear { - 0% { - opacity: 0; - transform: scale(0.5); - } - 100% { - opacity: 1; - transform: scale(1); - } + @media screen and (max-width: 750px) { + border-radius: 0px; } ${sx}; ` +export type DialogHeaderProps = ComponentProps + +function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...rest}: DialogHeaderProps) { + if (React.Children.toArray(children).every(ch => typeof ch === 'string')) { + children = ( + + {children} + + ) + } -const DefaultHeader: React.FC> = ({ - dialogLabelId, - title, - subtitle, - dialogDescriptionId, - onClose, -}) => { - const onCloseClick = useCallback(() => { - onClose('close-button') - }, [onClose]) return ( - - - - {title ?? 'Dialog'} - {subtitle && {subtitle}} - - - - + + {children} + ) } -const DefaultBody: React.FC> = ({children}) => { - return {children} -} -const DefaultFooter: React.FC> = ({footerButtons}) => { - const {containerRef: footerRef} = useFocusZone({ - bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab, - focusInStrategy: 'closest', - }) - return footerButtons ? ( - }> - - - ) : null -} -const _Dialog = React.forwardRef>((props, forwardedRef) => { - const { - title = 'Dialog', - subtitle = '', - renderHeader, - renderBody, - renderFooter, - onClose, - role = 'dialog', - width = 'xlarge', - height = 'auto', - footerButtons = [], - sx, - } = props - const dialogLabelId = useId() - const dialogDescriptionId = useId() - const autoFocusedFooterButtonRef = useRef(null) - for (const footerButton of footerButtons) { - if (footerButton.autoFocus) { - footerButton.ref = autoFocusedFooterButtonRef - } +const Overlay = styled.span` + &:before { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + cursor: default; + content: ' '; + background: transparent; + z-index: 99; + background: ${get('colors.primer.canvas.backdrop')}; } - const defaultedProps = {...props, title, subtitle, role, dialogLabelId, dialogDescriptionId} - - const dialogRef = useRef(null) - useRefObjectAsForwardedRef(forwardedRef, dialogRef) - const backdropRef = useRef(null) - useFocusTrap({containerRef: dialogRef, restoreFocusOnCleanUp: true, initialFocusRef: autoFocusedFooterButtonRef}) - - useOnEscapePress( - (event: KeyboardEvent) => { - onClose('escape') - event.preventDefault() - }, - [onClose], - ) - - const header = (renderHeader ?? DefaultHeader)(defaultedProps) - const body = (renderBody ?? DefaultBody)(defaultedProps) - const footer = (renderFooter ?? DefaultFooter)(defaultedProps) - - return ( - <> - - - - {header} - {body} - {footer} - - - - - ) -}) -_Dialog.displayName = 'Dialog' - -const Header = styled.div` - box-shadow: 0 1px 0 ${get('colors.border.default')}; - padding: ${get('space.2')}; - z-index: 1; - flex-shrink: 0; -` - -const Title = styled.h1` - font-size: ${get('fontSizes.1')}; - font-weight: ${get('fontWeights.bold')}; - margin: 0; /* override default margin */ - ${sx}; -` - -const Subtitle = styled.h2` - font-size: ${get('fontSizes.0')}; - color: ${get('colors.fg.muted')}; - margin: 0; /* override default margin */ - margin-top: ${get('space.1')}; - - ${sx}; -` - -const Body = styled.div` - flex-grow: 1; - overflow: auto; - padding: ${get('space.3')}; - - ${sx}; ` -const Footer = styled.div` - box-shadow: 0 -1px 0 ${get('colors.border.default')}; - padding: ${get('space.3')}; - display: flex; - flex-flow: wrap; - justify-content: flex-end; - z-index: 1; - flex-shrink: 0; - - button { - margin-left: ${get('space.1')}; - &:first-child { - margin-left: 0; +type InternalDialogProps = { + isOpen?: boolean + onDismiss?: () => void + initialFocusRef?: React.RefObject + returnFocusRef?: React.RefObject +} & ComponentProps + +const Dialog = forwardRef( + ({children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, ...props}, forwardedRef) => { + const overlayRef = useRef(null) + const modalRef = useRef(null) + useRefObjectAsForwardedRef(forwardedRef, modalRef) + const closeButtonRef = useRef(null) + + const onCloseClick = () => { + onDismiss() + if (returnFocusRef && returnFocusRef.current) { + returnFocusRef.current.focus() + } } - } - - ${sx}; -` -const buttonTypes = { - normal: Button, - primary: ButtonPrimary, - danger: ButtonDanger, + const {getDialogProps} = useDialog({ + modalRef, + onDismiss: onCloseClick, + isOpen, + initialFocusRef, + closeButtonRef, + returnFocusRef, + overlayRef, + }) + return isOpen ? ( + <> + + + + {children} + + + ) : null + }, +) + +DialogHeader.propTypes = { + ...Box.propTypes, } -const Buttons: React.FC> = ({buttons}) => { - const autoFocusRef = useProvidedRefOrCreate(buttons.find(button => button.autoFocus)?.ref) - let autoFocusCount = 0 - const [hasRendered, setHasRendered] = useState(0) - useEffect(() => { - // hack to work around dialogs originating from other focus traps. - if (hasRendered === 1) { - autoFocusRef.current?.focus() - } else { - setHasRendered(hasRendered + 1) - } - }, [autoFocusRef, hasRendered]) - return ( - <> - {buttons.map((dialogButtonProps, index) => { - const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps - const ButtonElement = buttonTypes[buttonType] - return ( - - {content} - - ) - })} - - ) -} -const DialogCloseButton = styled(Button)` - border-radius: 4px; - background: transparent; - border: 0; - vertical-align: middle; - color: ${get('colors.fg.muted')}; - padding: ${get('space.2')}; - align-self: flex-start; - line-height: normal; - box-shadow: none; -` -const CloseButton: React.FC void}>> = ({onClose}) => { - return ( - - - - ) -} +DialogHeader.displayName = 'Dialog.Header' +Dialog.displayName = 'Dialog' -/** - * A dialog is a type of overlay that can be used for confirming actions, asking - * for disambiguation, and presenting small forms. They generally allow the user - * to focus on a quick task without having to navigate to a different page. - * - * Dialogs appear in the page after a direct user interaction. Don't show dialogs - * on page load or as system alerts. - * - * Dialogs appear centered in the page, with a visible backdrop that dims the rest - * of the window for focus. - * - * All dialogs have a title and a close button. - * - * Dialogs are modal. Dialogs can be dismissed by clicking on the close button, - * pressing the escape key, or by interacting with another button in the dialog. - * To avoid losing information and missing important messages, clicking outside - * of the dialog will not close it. - * - * The sub components provided (e.g. Header, Title, etc.) are available for custom - * renderers only. They are not intended to be used otherwise. - */ -export const Dialog = Object.assign(_Dialog, { - Header, - Title, - Subtitle, - Body, - Footer, - Buttons, - CloseButton, -}) +export type DialogProps = ComponentProps +export default Object.assign(Dialog, {Header: DialogHeader}) diff --git a/src/__tests__/Dialog.types.test.tsx b/src/Dialog/Dialog.types.test.tsx similarity index 89% rename from src/__tests__/Dialog.types.test.tsx rename to src/Dialog/Dialog.types.test.tsx index de6b44c65ea..b9cfd9301e3 100644 --- a/src/__tests__/Dialog.types.test.tsx +++ b/src/Dialog/Dialog.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Dialog from '../Dialog' +import Dialog from './Dialog' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Dialog.test.tsx.snap rename to src/Dialog/__snapshots__/Dialog.test.tsx.snap diff --git a/src/Dialog/index.ts b/src/Dialog/index.ts new file mode 100644 index 00000000000..0728e01038a --- /dev/null +++ b/src/Dialog/index.ts @@ -0,0 +1,2 @@ +export {default} from './Dialog' +export type {DialogProps, DialogHeaderProps} from './Dialog' diff --git a/src/FilterList.docs.json b/src/FilterList/FilterList.docs.json similarity index 100% rename from src/FilterList.docs.json rename to src/FilterList/FilterList.docs.json diff --git a/src/__tests__/FilterList.test.tsx b/src/FilterList/FilterList.test.tsx similarity index 100% rename from src/__tests__/FilterList.test.tsx rename to src/FilterList/FilterList.test.tsx diff --git a/src/FilterList.tsx b/src/FilterList/FilterList.tsx similarity index 94% rename from src/FilterList.tsx rename to src/FilterList/FilterList.tsx index 99979f92e1d..79fd741ea65 100644 --- a/src/FilterList.tsx +++ b/src/FilterList/FilterList.tsx @@ -1,8 +1,8 @@ import React from 'react' import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const FilterListBase = styled.ul` list-style-type: none; diff --git a/src/__tests__/FilterList.types.test.tsx b/src/FilterList/FilterList.types.test.tsx similarity index 91% rename from src/__tests__/FilterList.types.test.tsx rename to src/FilterList/FilterList.types.test.tsx index 778d518b843..c08867f9b8b 100644 --- a/src/__tests__/FilterList.types.test.tsx +++ b/src/FilterList/FilterList.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import FilterList from '../FilterList' +import FilterList from './FilterList' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/FilterListItem.test.tsx b/src/FilterList/FilterListItem.test.tsx similarity index 100% rename from src/__tests__/FilterListItem.test.tsx rename to src/FilterList/FilterListItem.test.tsx diff --git a/src/__tests__/__snapshots__/FilterList.test.tsx.snap b/src/FilterList/__snapshots__/FilterList.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FilterList.test.tsx.snap rename to src/FilterList/__snapshots__/FilterList.test.tsx.snap diff --git a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap b/src/FilterList/__snapshots__/FilterListItem.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FilterListItem.test.tsx.snap rename to src/FilterList/__snapshots__/FilterListItem.test.tsx.snap diff --git a/src/FilterList/index.ts b/src/FilterList/index.ts new file mode 100644 index 00000000000..4788f9e25ab --- /dev/null +++ b/src/FilterList/index.ts @@ -0,0 +1,2 @@ +export {default} from './FilterList' +export type {FilterListProps, FilterListItemProps} from './FilterList' diff --git a/src/FilteredActionList/FilteredActionList.stories.tsx b/src/FilteredActionList/FilteredActionList.stories.tsx index 1b8d938c500..5235ad15fa5 100644 --- a/src/FilteredActionList/FilteredActionList.stories.tsx +++ b/src/FilteredActionList/FilteredActionList.stories.tsx @@ -2,8 +2,8 @@ import {Meta} from '@storybook/react' import React from 'react' import {ThemeProvider} from '..' import {FilteredActionList} from '../FilteredActionList' -import BaseStyles from '../BaseStyles' -import Box from '../Box' +import BaseStyles from '../BaseStyles/BaseStyles' +import Box from '../Box/Box' const meta: Meta = { title: 'Components/FilteredActionList', diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx index 7a6cf8ef007..0ebe9077cca 100644 --- a/src/FilteredActionList/FilteredActionList.tsx +++ b/src/FilteredActionList/FilteredActionList.tsx @@ -1,9 +1,9 @@ import React, {KeyboardEventHandler, useCallback, useEffect, useRef} from 'react' import {GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List' -import TextInput, {TextInputProps} from '../TextInput' -import Box from '../Box' +import TextInput, {TextInputProps} from '../TextInput/TextInput' +import Box from '../Box/Box' import {ActionList} from '../deprecated/ActionList' -import Spinner from '../Spinner' +import Spinner from '../Spinner/Spinner' import {useFocusZone} from '../hooks/useFocusZone' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' import styled from 'styled-components' diff --git a/src/FilteredSearch.docs.json b/src/FilteredSearch/FilteredSearch.docs.json similarity index 100% rename from src/FilteredSearch.docs.json rename to src/FilteredSearch/FilteredSearch.docs.json diff --git a/src/__tests__/FilteredSearch.test.tsx b/src/FilteredSearch/FilteredSearch.test.tsx similarity index 100% rename from src/__tests__/FilteredSearch.test.tsx rename to src/FilteredSearch/FilteredSearch.test.tsx diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch/FilteredSearch.tsx similarity index 83% rename from src/FilteredSearch.tsx rename to src/FilteredSearch/FilteredSearch.tsx index 73d3c280ffd..ba0172cdc78 100644 --- a/src/FilteredSearch.tsx +++ b/src/FilteredSearch/FilteredSearch.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const FilteredSearch = styled.div` display: flex; diff --git a/src/__tests__/FilteredSearch.types.test.tsx b/src/FilteredSearch/FilteredSearch.types.test.tsx similarity index 85% rename from src/__tests__/FilteredSearch.types.test.tsx rename to src/FilteredSearch/FilteredSearch.types.test.tsx index 43057cab3af..f9e792857fc 100644 --- a/src/__tests__/FilteredSearch.types.test.tsx +++ b/src/FilteredSearch/FilteredSearch.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import FilteredSearch from '../FilteredSearch' +import FilteredSearch from './FilteredSearch' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap b/src/FilteredSearch/__snapshots__/FilteredSearch.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap rename to src/FilteredSearch/__snapshots__/FilteredSearch.test.tsx.snap diff --git a/src/FilteredSearch/index.ts b/src/FilteredSearch/index.ts new file mode 100644 index 00000000000..759088b2fe8 --- /dev/null +++ b/src/FilteredSearch/index.ts @@ -0,0 +1 @@ +export {default, FilteredSearchProps} from './FilteredSearch' diff --git a/src/Flash.docs.json b/src/Flash/Flash.docs.json similarity index 100% rename from src/Flash.docs.json rename to src/Flash/Flash.docs.json diff --git a/src/__tests__/Flash.test.tsx b/src/Flash/Flash.test.tsx similarity index 100% rename from src/__tests__/Flash.test.tsx rename to src/Flash/Flash.test.tsx diff --git a/src/Flash.tsx b/src/Flash/Flash.tsx similarity index 93% rename from src/Flash.tsx rename to src/Flash/Flash.tsx index 75450124fe1..15145a0ee43 100644 --- a/src/Flash.tsx +++ b/src/Flash/Flash.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components' import {variant} from 'styled-system' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const variants = variant({ variants: { diff --git a/src/__tests__/Flash.types.test.tsx b/src/Flash/Flash.types.test.tsx similarity index 89% rename from src/__tests__/Flash.types.test.tsx rename to src/Flash/Flash.types.test.tsx index fc66023384c..641fc23aa54 100644 --- a/src/__tests__/Flash.types.test.tsx +++ b/src/Flash/Flash.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Flash from '../Flash' +import Flash from './Flash' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Flash.test.tsx.snap b/src/Flash/__snapshots__/Flash.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Flash.test.tsx.snap rename to src/Flash/__snapshots__/Flash.test.tsx.snap diff --git a/src/Flash/index.ts b/src/Flash/index.ts new file mode 100644 index 00000000000..a577be81af0 --- /dev/null +++ b/src/Flash/index.ts @@ -0,0 +1 @@ +export {default, FlashProps} from './Flash' diff --git a/src/__tests__/FormControl.test.tsx b/src/FormControl/FormControl.test.tsx similarity index 100% rename from src/__tests__/FormControl.test.tsx rename to src/FormControl/FormControl.test.tsx diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx index 41c2056ecf9..fb57a294de1 100644 --- a/src/FormControl/FormControl.tsx +++ b/src/FormControl/FormControl.tsx @@ -1,18 +1,18 @@ import React, {useContext} from 'react' import Autocomplete from '../Autocomplete' -import Box from '../Box' -import Checkbox from '../Checkbox' -import Radio from '../Radio' -import Select from '../Select' -import Textarea from '../Textarea' -import TextInput from '../TextInput' -import TextInputWithTokens from '../TextInputWithTokens' +import Box from '../Box/Box' +import Checkbox from '../Checkbox/Checkbox' +import Radio from '../Radio/Radio' +import Select from '../Select/Select' +import Textarea from '../Textarea/Textarea' +import TextInput from '../TextInput/TextInput' +import TextInputWithTokens from '../TextInputWithTokens/TextInputWithTokens' import {useSSRSafeId} from '../utils/ssr' import FormControlCaption from './_FormControlCaption' import FormControlLabel, {Props as FormControlLabelProps} from './_FormControlLabel' import FormControlValidation from './_FormControlValidation' import {Slots} from './slots' -import ValidationAnimationContainer from '../_ValidationAnimationContainer' +import ValidationAnimationContainer from '../private/_ValidationAnimationContainer' import {get} from '../constants' import FormControlLeadingVisual from './_FormControlLeadingVisual' import {SxProp} from '../sx' diff --git a/src/FormControl/_FormControlCaption.tsx b/src/FormControl/_FormControlCaption.tsx index e26b95cd5cc..a9083bfecb6 100644 --- a/src/FormControl/_FormControlCaption.tsx +++ b/src/FormControl/_FormControlCaption.tsx @@ -1,6 +1,6 @@ import React from 'react' import {SxProp} from '../sx' -import InputCaption from '../_InputCaption' +import InputCaption from '../private/_InputCaption' import {FormControlContext} from './FormControl' import {Slot} from './slots' diff --git a/src/FormControl/_FormControlLabel.tsx b/src/FormControl/_FormControlLabel.tsx index 323b1081248..f1597a4dcc3 100644 --- a/src/FormControl/_FormControlLabel.tsx +++ b/src/FormControl/_FormControlLabel.tsx @@ -1,6 +1,6 @@ import React from 'react' import {SxProp} from '../sx' -import InputLabel from '../_InputLabel' +import InputLabel from '../private/_InputLabel' import {FormControlContext} from './FormControl' import {Slot} from './slots' diff --git a/src/FormControl/_FormControlLeadingVisual.tsx b/src/FormControl/_FormControlLeadingVisual.tsx index 806a31d3e92..485068c4d24 100644 --- a/src/FormControl/_FormControlLeadingVisual.tsx +++ b/src/FormControl/_FormControlLeadingVisual.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Box from '../Box' +import Box from '../Box/Box' import {get} from '../constants' import {SxProp} from '../sx' import {FormControlContext} from './FormControl' diff --git a/src/FormControl/_FormControlValidation.tsx b/src/FormControl/_FormControlValidation.tsx index d834cf5d9a3..bef81d66fec 100644 --- a/src/FormControl/_FormControlValidation.tsx +++ b/src/FormControl/_FormControlValidation.tsx @@ -1,7 +1,7 @@ import React from 'react' import {SxProp} from '../sx' import {FormValidationStatus} from '../utils/types/FormValidationStatus' -import InputValidation from '../_InputValidation' +import InputValidation from '../private/_InputValidation' import {FormControlContext} from './FormControl' import {Slot} from './slots' diff --git a/src/Header.docs.json b/src/Header/Header.docs.json similarity index 100% rename from src/Header.docs.json rename to src/Header/Header.docs.json diff --git a/src/__tests__/Header.test.tsx b/src/Header/Header.test.tsx similarity index 100% rename from src/__tests__/Header.test.tsx rename to src/Header/Header.test.tsx diff --git a/src/Header.tsx b/src/Header/Header.tsx similarity index 94% rename from src/Header.tsx rename to src/Header/Header.tsx index 895e9f11cdd..b85a1406c68 100644 --- a/src/Header.tsx +++ b/src/Header/Header.tsx @@ -1,8 +1,8 @@ import {Location, Pathname} from 'history' import styled, {css} from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' type StyledHeaderItemProps = {full?: boolean} & SxProp type StyledHeaderProps = SxProp diff --git a/src/__tests__/Header.types.test.tsx b/src/Header/Header.types.test.tsx similarity index 94% rename from src/__tests__/Header.types.test.tsx rename to src/Header/Header.types.test.tsx index 65da425b161..a595abedac2 100644 --- a/src/__tests__/Header.types.test.tsx +++ b/src/Header/Header.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Header from '../Header' +import Header from './Header' export function shouldAcceptCallWithNoProps() { return
diff --git a/src/__tests__/__snapshots__/Header.test.tsx.snap b/src/Header/__snapshots__/Header.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Header.test.tsx.snap rename to src/Header/__snapshots__/Header.test.tsx.snap diff --git a/src/Header/index.ts b/src/Header/index.ts new file mode 100644 index 00000000000..dcaa240dcf3 --- /dev/null +++ b/src/Header/index.ts @@ -0,0 +1 @@ +export {default, HeaderProps} from './Header' diff --git a/src/Heading.docs.json b/src/Heading/Heading.docs.json similarity index 100% rename from src/Heading.docs.json rename to src/Heading/Heading.docs.json diff --git a/src/__tests__/Heading.test.tsx b/src/Heading/Heading.test.tsx similarity index 98% rename from src/__tests__/Heading.test.tsx rename to src/Heading/Heading.test.tsx index f9cb751ac0f..05608a00758 100644 --- a/src/__tests__/Heading.test.tsx +++ b/src/Heading/Heading.test.tsx @@ -3,7 +3,7 @@ import {Heading} from '..' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' -import ThemeProvider from '../ThemeProvider' +import ThemeProvider from '../ThemeProvider/ThemeProvider' expect.extend(toHaveNoViolations) const theme = { diff --git a/src/Heading.tsx b/src/Heading/Heading.tsx similarity index 89% rename from src/Heading.tsx rename to src/Heading/Heading.tsx index 2a2dbf578f3..25a224aca34 100644 --- a/src/Heading.tsx +++ b/src/Heading/Heading.tsx @@ -1,10 +1,10 @@ import React, {forwardRef, useEffect} from 'react' import styled from 'styled-components' -import {get} from './constants' -import {useRefObjectAsForwardedRef} from './hooks' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' +import {get} from '../constants' +import {useRefObjectAsForwardedRef} from '../hooks' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' type StyledHeadingProps = { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' diff --git a/src/__tests__/Heading.types.test.tsx b/src/Heading/Heading.types.test.tsx similarity index 92% rename from src/__tests__/Heading.types.test.tsx rename to src/Heading/Heading.types.test.tsx index 49d9db3b8f2..45a843eab0b 100644 --- a/src/__tests__/Heading.types.test.tsx +++ b/src/Heading/Heading.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Heading from '../Heading' +import Heading from './Heading' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Heading.test.tsx.snap b/src/Heading/__snapshots__/Heading.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Heading.test.tsx.snap rename to src/Heading/__snapshots__/Heading.test.tsx.snap diff --git a/src/Heading/index.ts b/src/Heading/index.ts new file mode 100644 index 00000000000..f8553b10256 --- /dev/null +++ b/src/Heading/index.ts @@ -0,0 +1 @@ +export {default, HeadingProps} from './Heading' diff --git a/src/Hidden/Hidden.tsx b/src/Hidden/Hidden.tsx index c2ea2731cdc..1d07b27a2b1 100644 --- a/src/Hidden/Hidden.tsx +++ b/src/Hidden/Hidden.tsx @@ -1,7 +1,7 @@ import React from 'react' import {ResponsiveValue} from '../hooks/useResponsiveValue' import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations' -import Box from '../Box' +import Box from '../Box/Box' type Viewport = 'narrow' | 'regular' | 'wide' diff --git a/src/__tests__/Label.test.tsx b/src/Label/Label.test.tsx similarity index 95% rename from src/__tests__/Label.test.tsx rename to src/Label/Label.test.tsx index 9087a7a2f8a..d873e8a97ae 100644 --- a/src/__tests__/Label.test.tsx +++ b/src/Label/Label.test.tsx @@ -1,7 +1,7 @@ import React from 'react' import {render} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' -import Label, {variants, LabelColorOptions} from '../Label' +import Label, {variants, LabelColorOptions} from '.' import {renderStyles} from '../utils/testing' expect.extend(toHaveNoViolations) diff --git a/src/LabelGroup.docs.json b/src/LabelGroup/LabelGroup.docs.json similarity index 100% rename from src/LabelGroup.docs.json rename to src/LabelGroup/LabelGroup.docs.json diff --git a/src/__tests__/LabelGroup.test.tsx b/src/LabelGroup/LabelGroup.test.tsx similarity index 100% rename from src/__tests__/LabelGroup.test.tsx rename to src/LabelGroup/LabelGroup.test.tsx diff --git a/src/LabelGroup.tsx b/src/LabelGroup/LabelGroup.tsx similarity index 71% rename from src/LabelGroup.tsx rename to src/LabelGroup/LabelGroup.tsx index 94e43d9b381..6d9618d2980 100644 --- a/src/LabelGroup.tsx +++ b/src/LabelGroup/LabelGroup.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const LabelGroup = styled.span` & * { diff --git a/src/__tests__/LabelGroup.types.test.tsx b/src/LabelGroup/LabelGroup.types.test.tsx similarity index 86% rename from src/__tests__/LabelGroup.types.test.tsx rename to src/LabelGroup/LabelGroup.types.test.tsx index 2087a28af20..1545453a7b7 100644 --- a/src/__tests__/LabelGroup.types.test.tsx +++ b/src/LabelGroup/LabelGroup.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import LabelGroup from '../LabelGroup' +import LabelGroup from './LabelGroup' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap b/src/LabelGroup/__snapshots__/LabelGroup.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/LabelGroup.test.tsx.snap rename to src/LabelGroup/__snapshots__/LabelGroup.test.tsx.snap diff --git a/src/LabelGroup/index.ts b/src/LabelGroup/index.ts new file mode 100644 index 00000000000..ce8583dc6be --- /dev/null +++ b/src/LabelGroup/index.ts @@ -0,0 +1 @@ +export {default, LabelGroupProps} from './LabelGroup' diff --git a/src/Link.docs.json b/src/Link/Link.docs.json similarity index 100% rename from src/Link.docs.json rename to src/Link/Link.docs.json diff --git a/src/__tests__/Link.test.tsx b/src/Link/Link.test.tsx similarity index 100% rename from src/__tests__/Link.test.tsx rename to src/Link/Link.test.tsx diff --git a/src/Link.tsx b/src/Link/Link.tsx similarity index 92% rename from src/Link.tsx rename to src/Link/Link.tsx index 6ab769874b1..735c1674466 100644 --- a/src/Link.tsx +++ b/src/Link/Link.tsx @@ -1,11 +1,11 @@ import React, {forwardRef, useEffect} from 'react' import styled from 'styled-components' import {system} from 'styled-system' -import {get} from './constants' -import {useRefObjectAsForwardedRef} from './hooks' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' +import {get} from '../constants' +import {useRefObjectAsForwardedRef} from '../hooks' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' type StyledLinkProps = { hoverColor?: string diff --git a/src/__tests__/Link.types.test.tsx b/src/Link/Link.types.test.tsx similarity index 90% rename from src/__tests__/Link.types.test.tsx rename to src/Link/Link.types.test.tsx index 1fc8a41fdd4..ccd5fff90f3 100644 --- a/src/__tests__/Link.types.test.tsx +++ b/src/Link/Link.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Link from '../Link' +import Link from './Link' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__snapshots__/Link.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Link.test.tsx.snap rename to src/Link/__snapshots__/Link.test.tsx.snap index f39404d15a1..1f8d25ac1e7 100644 --- a/src/__tests__/__snapshots__/Link.test.tsx.snap +++ b/src/Link/__snapshots__/Link.test.tsx.snap @@ -103,17 +103,16 @@ exports[`Link renders consistently 1`] = ` /> `; -exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = ` +exports[`Link respects hoverColor prop 1`] = ` .c0 { - color: #57606a; + color: #0969da; -webkit-text-decoration: none; text-decoration: none; - color: #ffffff; } .c0:hover { - -webkit-text-decoration: none; - text-decoration: none; + -webkit-text-decoration: underline; + text-decoration: underline; color: #0969da; } @@ -136,15 +135,15 @@ exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = ` `; -exports[`Link respects the "muted" prop 1`] = ` +exports[`Link respects the "sx" prop when "muted" prop is also passed 1`] = ` .c0 { color: #57606a; -webkit-text-decoration: none; text-decoration: none; + color: #ffffff; } .c0:hover { @@ -176,16 +175,16 @@ exports[`Link respects the "muted" prop 1`] = ` /> `; -exports[`Link respects hoverColor prop 1`] = ` +exports[`Link respects the "muted" prop 1`] = ` .c0 { - color: #0969da; + color: #57606a; -webkit-text-decoration: none; text-decoration: none; } .c0:hover { - -webkit-text-decoration: underline; - text-decoration: underline; + -webkit-text-decoration: none; + text-decoration: none; color: #0969da; } @@ -208,5 +207,6 @@ exports[`Link respects hoverColor prop 1`] = ` `; diff --git a/src/Link/index.ts b/src/Link/index.ts new file mode 100644 index 00000000000..39f54021c87 --- /dev/null +++ b/src/Link/index.ts @@ -0,0 +1 @@ +export {default, LinkProps} from './Link' diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index cd06a1db8b9..d092a3de861 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -8,8 +8,8 @@ import { ActionListLeadingVisualProps, ActionListTrailingVisualProps, } from '../ActionList' -import Box from '../Box' -import StyledOcticon from '../StyledOcticon' +import Box from '../Box/Box' +import StyledOcticon from '../StyledOcticon/StyledOcticon' import sx, {merge, SxProp} from '../sx' import {defaultSxProp} from '../utils/defaultSxProp' import {useId} from '../hooks/useId' diff --git a/src/Overlay.docs.json b/src/Overlay/Overlay.docs.json similarity index 100% rename from src/Overlay.docs.json rename to src/Overlay/Overlay.docs.json diff --git a/src/__tests__/Overlay.test.tsx b/src/Overlay/Overlay.test.tsx similarity index 98% rename from src/__tests__/Overlay.test.tsx rename to src/Overlay/Overlay.test.tsx index 6df1e3bf329..e64bcd86754 100644 --- a/src/__tests__/Overlay.test.tsx +++ b/src/Overlay/Overlay.test.tsx @@ -5,8 +5,8 @@ import {render, waitFor, fireEvent} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {axe} from 'jest-axe' import theme from '../theme' -import BaseStyles from '../BaseStyles' -import {ThemeProvider} from '../ThemeProvider' +import BaseStyles from '../BaseStyles/BaseStyles' +import {ThemeProvider} from '../ThemeProvider/ThemeProvider' import {NestedOverlays, MemexNestedOverlays, MemexIssueOverlay, PositionedOverlays} from '../stories/Overlay.stories' type TestComponentSettings = { @@ -244,7 +244,6 @@ describe('Overlay', () => { }) // https://github.com/primer/react/issues/1802 - // eslint-disable-next-line jest/no-disabled-tests it.skip('memex repro: should not leak overlay events to the document', async () => { const user = userEvent.setup() const mockHandler = jest.fn() diff --git a/src/Overlay.tsx b/src/Overlay/Overlay.tsx similarity index 95% rename from src/Overlay.tsx rename to src/Overlay/Overlay.tsx index 3a51a5cc011..862b14a127f 100644 --- a/src/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -1,15 +1,15 @@ import styled from 'styled-components' import React, {ComponentPropsWithRef, ReactElement, useEffect, useRef} from 'react' -import useLayoutEffect from './utils/useIsomorphicLayoutEffect' -import {get} from './constants' -import {AriaRole, Merge} from './utils/types' -import {useOverlay, TouchOrMouseEvent} from './hooks' -import Portal from './Portal' -import sx, {SxProp} from './sx' -import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef' +import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' +import {get} from '../constants' +import {AriaRole, Merge} from '../utils/types' +import {useOverlay, TouchOrMouseEvent} from '../hooks' +import Portal from '../Portal' +import sx, {SxProp} from '../sx' +import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import type {AnchorSide} from '@primer/behaviors' -import {useTheme} from './ThemeProvider' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' +import {useTheme} from '../ThemeProvider/ThemeProvider' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' type StyledOverlayProps = { width?: keyof typeof widthMap diff --git a/src/__tests__/Overlay.types.test.tsx b/src/Overlay/Overlay.types.test.tsx similarity index 97% rename from src/__tests__/Overlay.types.test.tsx rename to src/Overlay/Overlay.types.test.tsx index 4fb0f04fa85..9cbcee2068e 100644 --- a/src/__tests__/Overlay.types.test.tsx +++ b/src/Overlay/Overlay.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Overlay from '../Overlay' +import Overlay from './Overlay' export function shouldAcceptCallWithNoProps(ref: React.RefObject) { return null} onEscape={() => null} /> diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx index 7dba207d30a..af621119323 100644 --- a/src/PageHeader/PageHeader.tsx +++ b/src/PageHeader/PageHeader.tsx @@ -2,9 +2,9 @@ import React from 'react' import {Box} from '..' import {useResponsiveValue, ResponsiveValue} from '../hooks/useResponsiveValue' import {SxProp, merge, BetterSystemStyleObject} from '../sx' -import Heading from '../Heading' +import Heading from '../Heading/Heading' import {ArrowLeftIcon} from '@primer/octicons-react' -import Link, {LinkProps as BaseLinkProps} from '../Link' +import Link, {LinkProps as BaseLinkProps} from '../Link/Link' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations' diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index 2e1b252614f..ab7a24c5826 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Meta, Story} from '@storybook/react' import {Box, BranchName, Heading, Link, StateLabel, TabNav, Text} from '..' -import {Placeholder} from '../Placeholder' +import {Placeholder} from '../Placeholder/Placeholder' import {PageLayout} from './PageLayout' const meta: Meta = { diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx index 1ab69e8a5c1..52f31f7863f 100644 --- a/src/PageLayout/PageLayout.test.tsx +++ b/src/PageLayout/PageLayout.test.tsx @@ -5,7 +5,7 @@ import 'react-intersection-observer/test-utils' import {ThemeProvider} from '..' import {viewportRanges} from '../hooks/useResponsiveValue' import {PageLayout} from './PageLayout' -import {Placeholder} from '../Placeholder' +import {Placeholder} from '../Placeholder/Placeholder' let matchMedia: MatchMediaMock diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 54bd7f9e285..46603f7b20b 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -1,14 +1,14 @@ import React from 'react' import {createGlobalStyle} from 'styled-components' -import Box from '../Box' +import Box from '../Box/Box' import {useId} from '../hooks/useId' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' import {BetterSystemStyleObject, merge, SxProp} from '../sx' -import {Theme} from '../ThemeProvider' +import {Theme} from '../ThemeProvider/ThemeProvider' import createSlots from '../utils/create-slots' import {canUseDOM} from '../utils/environment' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {useStickyPaneHeight} from './useStickyPaneHeight' const {Slots, Slot} = createSlots(['Header', 'Footer']) diff --git a/src/Pagehead.docs.json b/src/Pagehead/Pagehead.docs.json similarity index 100% rename from src/Pagehead.docs.json rename to src/Pagehead/Pagehead.docs.json diff --git a/src/__tests__/Pagehead.test.tsx b/src/Pagehead/Pagehead.test.tsx similarity index 100% rename from src/__tests__/Pagehead.test.tsx rename to src/Pagehead/Pagehead.test.tsx diff --git a/src/Pagehead.tsx b/src/Pagehead/Pagehead.tsx similarity index 76% rename from src/Pagehead.tsx rename to src/Pagehead/Pagehead.tsx index 3ea6425535e..e29a4fecf87 100644 --- a/src/Pagehead.tsx +++ b/src/Pagehead/Pagehead.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const Pagehead = styled.div` position: relative; diff --git a/src/__tests__/Pagehead.types.test.tsx b/src/Pagehead/Pagehead.types.test.tsx similarity index 87% rename from src/__tests__/Pagehead.types.test.tsx rename to src/Pagehead/Pagehead.types.test.tsx index eb6593c2afd..8eb37bf35c3 100644 --- a/src/__tests__/Pagehead.types.test.tsx +++ b/src/Pagehead/Pagehead.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Pagehead from '../Pagehead' +import Pagehead from './Pagehead' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Pagehead.test.tsx.snap b/src/Pagehead/__snapshots__/Pagehead.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Pagehead.test.tsx.snap rename to src/Pagehead/__snapshots__/Pagehead.test.tsx.snap diff --git a/src/Pagehead/index.ts b/src/Pagehead/index.ts new file mode 100644 index 00000000000..4f297d4d26d --- /dev/null +++ b/src/Pagehead/index.ts @@ -0,0 +1 @@ +export {default, PageheadProps} from './Pagehead' diff --git a/src/__tests__/Pagination/Pagination.test.tsx b/src/Pagination/Pagination.test.tsx similarity index 89% rename from src/__tests__/Pagination/Pagination.test.tsx rename to src/Pagination/Pagination.test.tsx index f71785d165b..f56f80d4385 100644 --- a/src/__tests__/Pagination/Pagination.test.tsx +++ b/src/Pagination/Pagination.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import Pagination from '../../Pagination' -import {behavesAsComponent} from '../../utils/testing' +import Pagination from '.' +import {behavesAsComponent} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index beeb2d58eac..d8a2aa1abec 100644 --- a/src/Pagination/Pagination.tsx +++ b/src/Pagination/Pagination.tsx @@ -1,9 +1,9 @@ import React from 'react' import styled from 'styled-components' -import Box from '../Box' +import Box from '../Box/Box' import {get} from '../constants' import sx, {SxProp} from '../sx' -import getGlobalFocusStyles from '../_getGlobalFocusStyles' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' import {buildComponentData, buildPaginationModel} from './model' const Page = styled.a` diff --git a/src/__tests__/Pagination.types.test.tsx b/src/Pagination/Pagination.types.test.tsx similarity index 89% rename from src/__tests__/Pagination.types.test.tsx rename to src/Pagination/Pagination.types.test.tsx index fc3228e3c2c..801baca2fd5 100644 --- a/src/__tests__/Pagination.types.test.tsx +++ b/src/Pagination/Pagination.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Pagination from '../Pagination' +import Pagination from '.' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/Pagination/PaginationModel.test.tsx b/src/Pagination/PaginationModel.test.tsx similarity index 98% rename from src/__tests__/Pagination/PaginationModel.test.tsx rename to src/Pagination/PaginationModel.test.tsx index a119873f346..e059ed1fe4b 100644 --- a/src/__tests__/Pagination/PaginationModel.test.tsx +++ b/src/Pagination/PaginationModel.test.tsx @@ -1,4 +1,4 @@ -import {buildPaginationModel} from '../../Pagination/model' +import {buildPaginationModel} from './model' // eslint-disable-next-line @typescript-eslint/no-explicit-any function first(array: Array, count = 1) { diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/Pagination/__snapshots__/Pagination.test.tsx.snap similarity index 100% rename from src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap rename to src/Pagination/__snapshots__/Pagination.test.tsx.snap diff --git a/src/Placeholder.tsx b/src/Placeholder/Placeholder.tsx similarity index 96% rename from src/Placeholder.tsx rename to src/Placeholder/Placeholder.tsx index a2616629f4a..b4aa27e4541 100644 --- a/src/Placeholder.tsx +++ b/src/Placeholder/Placeholder.tsx @@ -1,4 +1,4 @@ -import {Box} from '.' +import {Box} from '..' import React from 'react' /** Private component used to render placeholders in storybook and documentation examples */ diff --git a/src/PointerBox.docs.json b/src/PointerBox/PointerBox.docs.json similarity index 100% rename from src/PointerBox.docs.json rename to src/PointerBox/PointerBox.docs.json diff --git a/src/__tests__/PointerBox.test.tsx b/src/PointerBox/PointerBox.test.tsx similarity index 100% rename from src/__tests__/PointerBox.test.tsx rename to src/PointerBox/PointerBox.test.tsx diff --git a/src/PointerBox.tsx b/src/PointerBox/PointerBox.tsx similarity index 90% rename from src/PointerBox.tsx rename to src/PointerBox/PointerBox.tsx index 45ebf065171..7f0e6cd321a 100644 --- a/src/PointerBox.tsx +++ b/src/PointerBox/PointerBox.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box, {BoxProps} from './Box' -import Caret, {CaretProps} from './Caret' -import {SxProp} from './sx' +import Box, {BoxProps} from '../Box/Box' +import Caret, {CaretProps} from '../Caret/Caret' +import {SxProp} from '../sx' // FIXME: Make this work with BetterStyledSystem types type MutatedSxProps = { diff --git a/src/__tests__/__snapshots__/PointerBox.test.tsx.snap b/src/PointerBox/__snapshots__/PointerBox.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/PointerBox.test.tsx.snap rename to src/PointerBox/__snapshots__/PointerBox.test.tsx.snap diff --git a/src/PointerBox/index.ts b/src/PointerBox/index.ts new file mode 100644 index 00000000000..2fe24d0940f --- /dev/null +++ b/src/PointerBox/index.ts @@ -0,0 +1 @@ +export {default, PointerBoxProps} from './PointerBox' diff --git a/src/Popover.docs.json b/src/Popover/Popover.docs.json similarity index 100% rename from src/Popover.docs.json rename to src/Popover/Popover.docs.json diff --git a/src/__tests__/Popover.test.tsx b/src/Popover/Popover.test.tsx similarity index 97% rename from src/__tests__/Popover.test.tsx rename to src/Popover/Popover.test.tsx index 4cf993c450b..d2857854338 100644 --- a/src/__tests__/Popover.test.tsx +++ b/src/Popover/Popover.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Popover, {PopoverProps} from '../Popover' +import Popover, {PopoverProps} from './Popover' import {render, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/Popover.tsx b/src/Popover/Popover.tsx similarity index 97% rename from src/Popover.tsx rename to src/Popover/Popover.tsx index 4fcc53d8524..3048627c793 100644 --- a/src/Popover.tsx +++ b/src/Popover/Popover.tsx @@ -1,8 +1,8 @@ import classnames from 'classnames' import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' type CaretPosition = | 'top' diff --git a/src/__tests__/Popover.types.test.tsx b/src/Popover/Popover.types.test.tsx similarity index 92% rename from src/__tests__/Popover.types.test.tsx rename to src/Popover/Popover.types.test.tsx index da739e146e8..1acae73f3e6 100644 --- a/src/__tests__/Popover.types.test.tsx +++ b/src/Popover/Popover.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Popover from '../Popover' +import Popover from './Popover' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Popover.test.tsx.snap b/src/Popover/__snapshots__/Popover.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Popover.test.tsx.snap rename to src/Popover/__snapshots__/Popover.test.tsx.snap diff --git a/src/Popover/index.ts b/src/Popover/index.ts new file mode 100644 index 00000000000..de28c059aba --- /dev/null +++ b/src/Popover/index.ts @@ -0,0 +1 @@ +export {default, PopoverProps} from './Popover' diff --git a/src/__tests__/Portal.test.tsx b/src/Portal/Portal.test.tsx similarity index 97% rename from src/__tests__/Portal.test.tsx rename to src/Portal/Portal.test.tsx index dfc8161a79b..ec5173f08e3 100644 --- a/src/__tests__/Portal.test.tsx +++ b/src/Portal/Portal.test.tsx @@ -1,8 +1,8 @@ -import Portal, {registerPortalRoot} from '../Portal/index' +import Portal, {registerPortalRoot} from './index' import {render} from '@testing-library/react' import React from 'react' -import BaseStyles from '../BaseStyles' +import BaseStyles from '../BaseStyles/BaseStyles' describe('Portal', () => { it('renders a default portal into document.body (no BaseStyles present)', () => { diff --git a/src/ProgressBar.docs.json b/src/ProgressBar/ProgressBar.docs.json similarity index 100% rename from src/ProgressBar.docs.json rename to src/ProgressBar/ProgressBar.docs.json diff --git a/src/__tests__/ProgressBar.test.tsx b/src/ProgressBar/ProgressBar.test.tsx similarity index 100% rename from src/__tests__/ProgressBar.test.tsx rename to src/ProgressBar/ProgressBar.test.tsx diff --git a/src/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx similarity index 94% rename from src/ProgressBar.tsx rename to src/ProgressBar/ProgressBar.tsx index 407f80dac10..1bc9b183b07 100644 --- a/src/ProgressBar.tsx +++ b/src/ProgressBar/ProgressBar.tsx @@ -1,8 +1,8 @@ import React from 'react' import styled from 'styled-components' import {width, WidthProps} from 'styled-system' -import {get} from './constants' -import sx, {SxProp} from './sx' +import {get} from '../constants' +import sx, {SxProp} from '../sx' type ProgressProp = {progress?: string | number} diff --git a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/ProgressBar.test.tsx.snap rename to src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap diff --git a/src/ProgressBar/index.ts b/src/ProgressBar/index.ts new file mode 100644 index 00000000000..77528695eef --- /dev/null +++ b/src/ProgressBar/index.ts @@ -0,0 +1 @@ +export {default, ProgressBarProps} from './ProgressBar' diff --git a/src/Radio.docs.json b/src/Radio/Radio.docs.json similarity index 100% rename from src/Radio.docs.json rename to src/Radio/Radio.docs.json diff --git a/src/__tests__/Radio.test.tsx b/src/Radio/Radio.test.tsx similarity index 100% rename from src/__tests__/Radio.test.tsx rename to src/Radio/Radio.test.tsx diff --git a/src/Radio.tsx b/src/Radio/Radio.tsx similarity index 89% rename from src/Radio.tsx rename to src/Radio/Radio.tsx index a22d9f15a89..6fb61308947 100644 --- a/src/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -1,11 +1,11 @@ import styled from 'styled-components' import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext} from 'react' -import sx, {SxProp} from './sx' -import {FormValidationStatus} from './utils/types/FormValidationStatus' -import {RadioGroupContext} from './RadioGroup' -import getGlobalFocusStyles from './_getGlobalFocusStyles' -import {get} from './constants' -import {sharedCheckboxAndRadioStyles} from './_sharedCheckboxAndRadioStyles' +import sx, {SxProp} from '../sx' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' +import {RadioGroupContext} from '../RadioGroup/RadioGroup' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' +import {get} from '../constants' +import {sharedCheckboxAndRadioStyles} from '../private/_sharedCheckboxAndRadioStyles' export type RadioProps = { /** diff --git a/src/__tests__/__snapshots__/Radio.test.tsx.snap b/src/Radio/__snapshots__/Radio.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Radio.test.tsx.snap rename to src/Radio/__snapshots__/Radio.test.tsx.snap diff --git a/src/Radio/index.ts b/src/Radio/index.ts new file mode 100644 index 00000000000..66e5e106320 --- /dev/null +++ b/src/Radio/index.ts @@ -0,0 +1 @@ +export {default, RadioProps} from './Radio' diff --git a/src/RadioGroup.docs.json b/src/RadioGroup/RadioGroup.docs.json similarity index 100% rename from src/RadioGroup.docs.json rename to src/RadioGroup/RadioGroup.docs.json diff --git a/src/__tests__/RadioGroup.test.tsx b/src/RadioGroup/RadioGroup.test.tsx similarity index 96% rename from src/__tests__/RadioGroup.test.tsx rename to src/RadioGroup/RadioGroup.test.tsx index ad08d558594..fa29ccbff0c 100644 --- a/src/__tests__/RadioGroup.test.tsx +++ b/src/RadioGroup/RadioGroup.test.tsx @@ -3,7 +3,7 @@ import {render} from '@testing-library/react' import {RadioGroup, FormControl, Radio, SSRProvider} from '..' import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing' import userEvent from '@testing-library/user-event' -import {RadioGroupContext} from '../RadioGroup' +import {RadioGroupContext} from '../RadioGroup/RadioGroup' describe('RadioGroup', () => { const mockWarningFn = jest.fn() @@ -162,5 +162,5 @@ describe('RadioGroup', () => { }) }) -checkStoriesForAxeViolations('RadioGroup/fixtures') -checkStoriesForAxeViolations('RadioGroup/examples') +checkStoriesForAxeViolations('fixtures', '../RadioGroup/') +checkStoriesForAxeViolations('examples', '../RadioGroup/') diff --git a/src/RadioGroup.tsx b/src/RadioGroup/RadioGroup.tsx similarity index 80% rename from src/RadioGroup.tsx rename to src/RadioGroup/RadioGroup.tsx index 0b04974ee0a..297a4e28b36 100644 --- a/src/RadioGroup.tsx +++ b/src/RadioGroup/RadioGroup.tsx @@ -1,10 +1,10 @@ import React, {ChangeEvent, ChangeEventHandler, createContext, FC} from 'react' -import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from './_CheckboxOrRadioGroup' -import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' -import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' -import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' -import {useRenderForcingRef} from './hooks' -import {SxProp} from './sx' +import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from '../_CheckboxOrRadioGroup' +import CheckboxOrRadioGroupCaption from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption' +import CheckboxOrRadioGroupLabel from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel' +import CheckboxOrRadioGroupValidation from '../_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation' +import {useRenderForcingRef} from '../hooks' +import {SxProp} from '../sx' type RadioGroupProps = { /** diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/RadioGroup.test.tsx.snap rename to src/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap diff --git a/src/stories/RadioGroup/examples.stories.tsx b/src/RadioGroup/examples.stories.tsx similarity index 96% rename from src/stories/RadioGroup/examples.stories.tsx rename to src/RadioGroup/examples.stories.tsx index a841eaa378e..2e40dda3489 100644 --- a/src/stories/RadioGroup/examples.stories.tsx +++ b/src/RadioGroup/examples.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, RadioGroup, FormControl, ThemeProvider} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' -import Radio from '../../Radio' +import {BaseStyles, RadioGroup, FormControl, ThemeProvider} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' +import Radio from '../Radio/Radio' export default { title: 'Components/Forms/RadioGroup/examples', diff --git a/src/stories/RadioGroup/fixtures.stories.tsx b/src/RadioGroup/fixtures.stories.tsx similarity index 97% rename from src/stories/RadioGroup/fixtures.stories.tsx rename to src/RadioGroup/fixtures.stories.tsx index 5b0be1c9dbe..9b093e5037a 100644 --- a/src/stories/RadioGroup/fixtures.stories.tsx +++ b/src/RadioGroup/fixtures.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, RadioGroup, FormControl, ThemeProvider, Radio} from '../../' -import {CheckboxOrRadioGroupArgs} from '../../utils/story-helpers' +import {BaseStyles, Box, RadioGroup, FormControl, ThemeProvider, Radio} from '..' +import {CheckboxOrRadioGroupArgs} from '../utils/story-helpers' const excludedControlKeys = ['aria-labelledby', 'id', 'name', 'onChange', 'sx', 'visuallyHidden'] diff --git a/src/RadioGroup/index.ts b/src/RadioGroup/index.ts new file mode 100644 index 00000000000..d29db1c955a --- /dev/null +++ b/src/RadioGroup/index.ts @@ -0,0 +1 @@ +export {default, RadioGroupContext} from './RadioGroup' diff --git a/src/__tests__/RelativeTime.test.tsx b/src/RelativeTime/RelativeTime.test.tsx similarity index 100% rename from src/__tests__/RelativeTime.test.tsx rename to src/RelativeTime/RelativeTime.test.tsx diff --git a/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap b/src/RelativeTime/__snapshots__/RelativeTime.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/RelativeTime.test.tsx.snap rename to src/RelativeTime/__snapshots__/RelativeTime.test.tsx.snap diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index c22d3d2cd4f..c9e1b73b1e3 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/src/SegmentedControl/SegmentedControl.tsx @@ -2,8 +2,8 @@ import React, {useRef, useState} from 'react' import Button, {SegmentedControlButtonProps} from './SegmentedControlButton' import SegmentedControlIconButton, {SegmentedControlIconButtonProps} from './SegmentedControlIconButton' import {ActionList} from '../ActionList' -import {ActionMenu} from '../ActionMenu' -import {useTheme} from '../ThemeProvider' +import {ActionMenu} from '../ActionMenu/ActionMenu' +import {useTheme} from '../ThemeProvider/ThemeProvider' import sx, {merge, SxProp} from '../sx' import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' import {ViewportRangeKeys} from '../utils/types/ViewportRangeKeys' diff --git a/src/SegmentedControl/SegmentedControlButton.tsx b/src/SegmentedControl/SegmentedControlButton.tsx index 263b03edb97..304350f83ff 100644 --- a/src/SegmentedControl/SegmentedControlButton.tsx +++ b/src/SegmentedControl/SegmentedControlButton.tsx @@ -1,7 +1,7 @@ import React, {ButtonHTMLAttributes} from 'react' import {IconProps} from '@primer/octicons-react' import styled from 'styled-components' -import Box from '../Box' +import Box from '../Box/Box' import sx, {merge, SxProp} from '../sx' import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles' import {defaultSxProp} from '../utils/defaultSxProp' diff --git a/src/SegmentedControl/SegmentedControlIconButton.tsx b/src/SegmentedControl/SegmentedControlIconButton.tsx index 3ba844b6f67..c30d4499f2a 100644 --- a/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/src/SegmentedControl/SegmentedControlIconButton.tsx @@ -3,8 +3,8 @@ import {IconProps} from '@primer/octicons-react' import styled from 'styled-components' import sx, {merge, SxProp} from '../sx' import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles' -import Tooltip from '../Tooltip' -import Box from '../Box' +import Tooltip from '../Tooltip/Tooltip' +import Box from '../Box/Box' import {defaultSxProp} from '../utils/defaultSxProp' export type SegmentedControlIconButtonProps = { diff --git a/src/Select.docs.json b/src/Select/Select.docs.json similarity index 100% rename from src/Select.docs.json rename to src/Select/Select.docs.json diff --git a/src/__tests__/Select.test.tsx b/src/Select/Select.test.tsx similarity index 100% rename from src/__tests__/Select.test.tsx rename to src/Select/Select.test.tsx diff --git a/src/Select.tsx b/src/Select/Select.tsx similarity index 96% rename from src/Select.tsx rename to src/Select/Select.tsx index 3c569a302cb..503a01954f1 100644 --- a/src/Select.tsx +++ b/src/Select/Select.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper' +import TextInputWrapper, {StyledWrapperProps} from '../private/_TextInputWrapper' export type SelectProps = Omit< Omit, 'size'> & Omit, @@ -21,7 +21,7 @@ const StyledSelect = styled.select` /* Firefox hacks: */ /* 1. Makes Firefox's native dropdown menu's background match the theme. - background-color should be 'transparent', but Firefox uses the background-color on + background-color should be 'transparent', but Firefox uses the background-color on so the background color doesn't hide the focus outline created with an inset box-shadow. @@ -32,7 +32,7 @@ const StyledSelect = styled.select` margin-bottom: 1px; /* 2. Prevents visible overlap of partially transparent background colors. - + 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a transparent background-color on a disabled 's background color white when setting 'background-color: transparent;' */ @media screen and (forced-colors: active) { &:disabled { diff --git a/src/__tests__/SelectPanel.test.tsx b/src/SelectPanel/SelectPanel.test.tsx similarity index 97% rename from src/__tests__/SelectPanel.test.tsx rename to src/SelectPanel/SelectPanel.test.tsx index 05332623326..2df4e00a795 100644 --- a/src/__tests__/SelectPanel.test.tsx +++ b/src/SelectPanel/SelectPanel.test.tsx @@ -2,7 +2,7 @@ import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import React from 'react' import theme from '../theme' -import {SelectPanel} from '../SelectPanel' +import {SelectPanel} from '.' import {behavesAsComponent, checkExports} from '../utils/testing' import {BaseStyles, SSRProvider, ThemeProvider} from '..' import {ItemInput} from '../deprecated/ActionList/List' diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx index b0d53fc760c..ecd8abf45ef 100644 --- a/src/SelectPanel/SelectPanel.tsx +++ b/src/SelectPanel/SelectPanel.tsx @@ -1,12 +1,12 @@ import React, {useCallback, useMemo} from 'react' import {FilteredActionList, FilteredActionListProps} from '../FilteredActionList' -import {OverlayProps} from '../Overlay' +import {OverlayProps} from '../Overlay/Overlay' import {ItemInput} from '../deprecated/ActionList/List' import {FocusZoneHookSettings} from '../hooks/useFocusZone' import {DropdownButton} from '../deprecated/DropdownMenu' import {ItemProps} from '../deprecated/ActionList' import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay' -import {TextInputProps} from '../TextInput' +import {TextInputProps} from '../TextInput/TextInput' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay' import {useProvidedRefOrCreate} from '../hooks' diff --git a/src/__tests__/SelectPanel.types.test.tsx b/src/SelectPanel/SelectPanel.types.test.tsx similarity index 93% rename from src/__tests__/SelectPanel.types.test.tsx rename to src/SelectPanel/SelectPanel.types.test.tsx index d290d0dc28b..458869afabf 100644 --- a/src/__tests__/SelectPanel.types.test.tsx +++ b/src/SelectPanel/SelectPanel.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {SelectPanel} from '../SelectPanel' +import {SelectPanel} from '.' export function shouldAcceptCallWithNoProps() { return ( diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/SelectPanel.test.tsx.snap rename to src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap diff --git a/src/__tests__/SideNav.test.tsx b/src/SideNav/SideNav.test.tsx similarity index 100% rename from src/__tests__/SideNav.test.tsx rename to src/SideNav/SideNav.test.tsx diff --git a/src/SideNav.tsx b/src/SideNav/SideNav.tsx similarity index 96% rename from src/SideNav.tsx rename to src/SideNav/SideNav.tsx index 93d43d2cbef..a3bcf930e1f 100644 --- a/src/SideNav.tsx +++ b/src/SideNav/SideNav.tsx @@ -1,14 +1,14 @@ import {To} from 'history' -import {get} from './constants' +import {get} from '../constants' import styled, {css} from 'styled-components' -import Box from './Box' -import {ComponentProps} from './utils/types' -import Link from './Link' +import Box from '../Box/Box' +import {ComponentProps} from '../utils/types' +import Link from '../Link/Link' import React from 'react' import classnames from 'classnames' -import sx, {SxProp} from './sx' +import sx, {SxProp} from '../sx' type SideNavBaseProps = { variant?: 'lightweight' | 'normal' diff --git a/src/__tests__/SideNav.types.test.tsx b/src/SideNav/SideNav.types.test.tsx similarity index 88% rename from src/__tests__/SideNav.types.test.tsx rename to src/SideNav/SideNav.types.test.tsx index 241db94624e..23d67f381d2 100644 --- a/src/__tests__/SideNav.types.test.tsx +++ b/src/SideNav/SideNav.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import SideNav from '../SideNav' +import SideNav from './SideNav' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/SideNav/__snapshots__/SideNav.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/SideNav.test.tsx.snap rename to src/SideNav/__snapshots__/SideNav.test.tsx.snap diff --git a/src/SideNav/index.ts b/src/SideNav/index.ts new file mode 100644 index 00000000000..9bb4f2efe03 --- /dev/null +++ b/src/SideNav/index.ts @@ -0,0 +1,2 @@ +export {default} from './SideNav' +export type {SideNavLinkProps, SideNavProps} from './SideNav' diff --git a/src/Spinner.docs.json b/src/Spinner/Spinner.docs.json similarity index 100% rename from src/Spinner.docs.json rename to src/Spinner/Spinner.docs.json diff --git a/src/__tests__/Spinner.test.tsx b/src/Spinner/Spinner.test.tsx similarity index 100% rename from src/__tests__/Spinner.test.tsx rename to src/Spinner/Spinner.test.tsx diff --git a/src/Spinner.tsx b/src/Spinner/Spinner.tsx similarity index 93% rename from src/Spinner.tsx rename to src/Spinner/Spinner.tsx index 3771d752d11..e3adf1c2537 100644 --- a/src/Spinner.tsx +++ b/src/Spinner/Spinner.tsx @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const sizeMap = { small: '16px', diff --git a/src/__tests__/__snapshots__/Spinner.test.tsx.snap b/src/Spinner/__snapshots__/Spinner.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Spinner.test.tsx.snap rename to src/Spinner/__snapshots__/Spinner.test.tsx.snap diff --git a/src/Spinner/index.ts b/src/Spinner/index.ts new file mode 100644 index 00000000000..c39a87bf72a --- /dev/null +++ b/src/Spinner/index.ts @@ -0,0 +1 @@ +export {default, SpinnerProps} from './Spinner' diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx index d3efd979e45..4f33491b96c 100644 --- a/src/SplitPageLayout/SplitPageLayout.stories.tsx +++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Meta, Story} from '@storybook/react' import {Box, Button, Heading, Text} from '..' import {NavList} from '../NavList' -import {Placeholder} from '../Placeholder' +import {Placeholder} from '../Placeholder/Placeholder' import {SplitPageLayout} from '../SplitPageLayout' const meta: Meta = { diff --git a/src/StateLabel.docs.json b/src/StateLabel/StateLabel.docs.json similarity index 100% rename from src/StateLabel.docs.json rename to src/StateLabel/StateLabel.docs.json diff --git a/src/__tests__/StateLabel.test.tsx b/src/StateLabel/StateLabel.test.tsx similarity index 100% rename from src/__tests__/StateLabel.test.tsx rename to src/StateLabel/StateLabel.test.tsx diff --git a/src/StateLabel.tsx b/src/StateLabel/StateLabel.tsx similarity index 93% rename from src/StateLabel.tsx rename to src/StateLabel/StateLabel.tsx index 4755e4cd55e..3938168a58e 100644 --- a/src/StateLabel.tsx +++ b/src/StateLabel/StateLabel.tsx @@ -10,10 +10,10 @@ import { import React from 'react' import styled from 'styled-components' import {variant} from 'styled-system' -import {get} from './constants' -import StyledOcticon from './StyledOcticon' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import StyledOcticon from '../StyledOcticon/StyledOcticon' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const octiconMap = { issueOpened: IssueOpenedIcon, diff --git a/src/__tests__/StateLabel.types.test.tsx b/src/StateLabel/StateLabel.types.test.tsx similarity index 86% rename from src/__tests__/StateLabel.types.test.tsx rename to src/StateLabel/StateLabel.types.test.tsx index 6fe880fff19..2d5947b0cb8 100644 --- a/src/__tests__/StateLabel.types.test.tsx +++ b/src/StateLabel/StateLabel.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import StateLabel from '../StateLabel' +import StateLabel from './StateLabel' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/StateLabel/__snapshots__/StateLabel.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/StateLabel.test.tsx.snap rename to src/StateLabel/__snapshots__/StateLabel.test.tsx.snap diff --git a/src/StateLabel/index.ts b/src/StateLabel/index.ts new file mode 100644 index 00000000000..5b4064d2e61 --- /dev/null +++ b/src/StateLabel/index.ts @@ -0,0 +1 @@ +export {default, StateLabelProps} from './StateLabel' diff --git a/src/StyledOcticon.docs.json b/src/StyledOcticon/StyledOcticon.docs.json similarity index 100% rename from src/StyledOcticon.docs.json rename to src/StyledOcticon/StyledOcticon.docs.json diff --git a/src/__tests__/StyledOcticon.test.tsx b/src/StyledOcticon/StyledOcticon.test.tsx similarity index 100% rename from src/__tests__/StyledOcticon.test.tsx rename to src/StyledOcticon/StyledOcticon.test.tsx diff --git a/src/StyledOcticon.tsx b/src/StyledOcticon/StyledOcticon.tsx similarity index 86% rename from src/StyledOcticon.tsx rename to src/StyledOcticon/StyledOcticon.tsx index 40625f23df1..e3d3949213b 100644 --- a/src/StyledOcticon.tsx +++ b/src/StyledOcticon/StyledOcticon.tsx @@ -1,8 +1,8 @@ import {IconProps} from '@primer/octicons-react' import React from 'react' import styled from 'styled-components' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' type OcticonProps = {icon: React.ElementType; color?: string} & IconProps diff --git a/src/__tests__/StyledOcticon.types.test.tsx b/src/StyledOcticon/StyledOcticon.types.test.tsx similarity index 87% rename from src/__tests__/StyledOcticon.types.test.tsx rename to src/StyledOcticon/StyledOcticon.types.test.tsx index 3429f62b7cb..4a7ceb3370c 100644 --- a/src/__tests__/StyledOcticon.types.test.tsx +++ b/src/StyledOcticon/StyledOcticon.types.test.tsx @@ -1,6 +1,6 @@ import {MoonIcon} from '@primer/octicons-react' import React from 'react' -import StyledOcticon from '../StyledOcticon' +import StyledOcticon from './StyledOcticon' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap b/src/StyledOcticon/__snapshots__/StyledOcticon.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap rename to src/StyledOcticon/__snapshots__/StyledOcticon.test.tsx.snap diff --git a/src/StyledOcticon/index.ts b/src/StyledOcticon/index.ts new file mode 100644 index 00000000000..3cd35a50124 --- /dev/null +++ b/src/StyledOcticon/index.ts @@ -0,0 +1 @@ +export {default, StyledOcticonProps} from './StyledOcticon' diff --git a/src/SubNav.docs.json b/src/SubNav/SubNav.docs.json similarity index 100% rename from src/SubNav.docs.json rename to src/SubNav/SubNav.docs.json diff --git a/src/__tests__/SubNav.test.tsx b/src/SubNav/SubNav.test.tsx similarity index 100% rename from src/__tests__/SubNav.test.tsx rename to src/SubNav/SubNav.test.tsx diff --git a/src/SubNav.tsx b/src/SubNav/SubNav.tsx similarity index 96% rename from src/SubNav.tsx rename to src/SubNav/SubNav.tsx index 7c38bbc2c53..0f72e479a46 100644 --- a/src/SubNav.tsx +++ b/src/SubNav/SubNav.tsx @@ -2,9 +2,9 @@ import classnames from 'classnames' import {To} from 'history' import React from 'react' import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const ITEM_CLASS = 'SubNav-item' const SELECTED_CLASS = 'selected' diff --git a/src/__tests__/SubNav.types.test.tsx b/src/SubNav/SubNav.types.test.tsx similarity index 95% rename from src/__tests__/SubNav.types.test.tsx rename to src/SubNav/SubNav.types.test.tsx index 23f4397fd6d..1a897245d18 100644 --- a/src/__tests__/SubNav.types.test.tsx +++ b/src/SubNav/SubNav.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import SubNav from '../SubNav' +import SubNav from './SubNav' export function shouldAcceptCallWithNoProps() { return ( diff --git a/src/__tests__/SubNavLink.test.tsx b/src/SubNav/SubNavLink.test.tsx similarity index 100% rename from src/__tests__/SubNavLink.test.tsx rename to src/SubNav/SubNavLink.test.tsx diff --git a/src/__tests__/__snapshots__/SubNav.test.tsx.snap b/src/SubNav/__snapshots__/SubNav.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/SubNav.test.tsx.snap rename to src/SubNav/__snapshots__/SubNav.test.tsx.snap diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/SubNav/__snapshots__/SubNavLink.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/SubNavLink.test.tsx.snap rename to src/SubNav/__snapshots__/SubNavLink.test.tsx.snap diff --git a/src/SubNav/index.ts b/src/SubNav/index.ts new file mode 100644 index 00000000000..4cf1d8d9fc4 --- /dev/null +++ b/src/SubNav/index.ts @@ -0,0 +1,2 @@ +export {default} from './SubNav' +export type {SubNavLinkProps, SubNavProps, SubNavLinksProps} from './SubNav' diff --git a/src/TabNav.docs.json b/src/TabNav/TabNav.docs.json similarity index 100% rename from src/TabNav.docs.json rename to src/TabNav/TabNav.docs.json diff --git a/src/__tests__/TabNav.test.tsx b/src/TabNav/TabNav.test.tsx similarity index 99% rename from src/__tests__/TabNav.test.tsx rename to src/TabNav/TabNav.test.tsx index a5279b52597..f51c4379da5 100644 --- a/src/__tests__/TabNav.test.tsx +++ b/src/TabNav/TabNav.test.tsx @@ -5,7 +5,7 @@ import {fireEvent, render as HTMLRender} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {axe} from 'jest-axe' import {Button} from '../Button' -import Box from '../Box' +import Box from '../Box/Box' describe('TabNav', () => { const tabNavMarkup = ( diff --git a/src/TabNav.tsx b/src/TabNav/TabNav.tsx similarity index 92% rename from src/TabNav.tsx rename to src/TabNav/TabNav.tsx index d77f2aa4123..ec5be86c713 100644 --- a/src/TabNav.tsx +++ b/src/TabNav/TabNav.tsx @@ -1,13 +1,13 @@ -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import classnames from 'classnames' import {To} from 'history' import React, {useRef, useState} from 'react' import styled from 'styled-components' -import {get} from './constants' -import {FocusKeys, useFocusZone} from './hooks/useFocusZone' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' -import getGlobalFocusStyles from './_getGlobalFocusStyles' +import {get} from '../constants' +import {FocusKeys, useFocusZone} from '../hooks/useFocusZone' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' const ITEM_CLASS = 'TabNav-item' const SELECTED_CLASS = 'selected' diff --git a/src/__tests__/TabNav.types.test.tsx b/src/TabNav/TabNav.types.test.tsx similarity index 95% rename from src/__tests__/TabNav.types.test.tsx rename to src/TabNav/TabNav.types.test.tsx index f1f14d83fb4..5754b0da334 100644 --- a/src/__tests__/TabNav.types.test.tsx +++ b/src/TabNav/TabNav.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import TabNav from '../TabNav' +import TabNav from './TabNav' import {Button} from '../Button' export function shouldAcceptCallWithNoProps() { diff --git a/src/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/TabNav/__snapshots__/TabNav.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/TabNav.test.tsx.snap rename to src/TabNav/__snapshots__/TabNav.test.tsx.snap diff --git a/src/TabNav/index.ts b/src/TabNav/index.ts new file mode 100644 index 00000000000..d5cb749bd91 --- /dev/null +++ b/src/TabNav/index.ts @@ -0,0 +1,2 @@ +export {default, TabNavProps} from './TabNav' +// export type {TabNavLinkProps} from './TabNav' diff --git a/src/Text.docs.json b/src/Text/Text.docs.json similarity index 100% rename from src/Text.docs.json rename to src/Text/Text.docs.json diff --git a/src/__tests__/Text.test.tsx b/src/Text/Text.test.tsx similarity index 100% rename from src/__tests__/Text.test.tsx rename to src/Text/Text.test.tsx diff --git a/src/Text.tsx b/src/Text/Text.tsx similarity index 73% rename from src/Text.tsx rename to src/Text/Text.tsx index 4ee4f7959be..6ff501ce4ae 100644 --- a/src/Text.tsx +++ b/src/Text/Text.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' -import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const Text = styled.span` ${TYPOGRAPHY}; diff --git a/src/__tests__/__snapshots__/Text.test.tsx.snap b/src/Text/__snapshots__/Text.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Text.test.tsx.snap rename to src/Text/__snapshots__/Text.test.tsx.snap diff --git a/src/Text/index.ts b/src/Text/index.ts new file mode 100644 index 00000000000..e92da1782f9 --- /dev/null +++ b/src/Text/index.ts @@ -0,0 +1 @@ +export {default, TextProps} from './Text' diff --git a/src/TextInput.docs.json b/src/TextInput/TextInput.docs.json similarity index 100% rename from src/TextInput.docs.json rename to src/TextInput/TextInput.docs.json diff --git a/src/__tests__/TextInput.test.tsx b/src/TextInput/TextInput.test.tsx similarity index 100% rename from src/__tests__/TextInput.test.tsx rename to src/TextInput/TextInput.test.tsx diff --git a/src/TextInput.tsx b/src/TextInput/TextInput.tsx similarity index 93% rename from src/TextInput.tsx rename to src/TextInput/TextInput.tsx index 5c22a65008f..38799af2d22 100644 --- a/src/TextInput.tsx +++ b/src/TextInput/TextInput.tsx @@ -1,13 +1,13 @@ import React, {MouseEventHandler, useCallback, useState} from 'react' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import classnames from 'classnames' -import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot' -import {useProvidedRefOrCreate} from './hooks' -import {Merge} from './utils/types' -import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper' -import UnstyledTextInput from './_UnstyledTextInput' -import TextInputAction from './_TextInputInnerAction' +import TextInputInnerVisualSlot from '../private/_TextInputInnerVisualSlot' +import {useProvidedRefOrCreate} from '../hooks' +import {Merge} from '../utils/types' +import TextInputWrapper, {StyledWrapperProps} from '../private/_TextInputWrapper' +import UnstyledTextInput from '../private/_UnstyledTextInput' +import TextInputAction from '../private/_TextInputInnerAction' export type TextInputNonPassthroughProps = { /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */ diff --git a/src/__tests__/TextInput.types.test.tsx b/src/TextInput/TextInput.types.test.tsx similarity index 100% rename from src/__tests__/TextInput.types.test.tsx rename to src/TextInput/TextInput.types.test.tsx diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/TextInput/__snapshots__/TextInput.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/TextInput.test.tsx.snap rename to src/TextInput/__snapshots__/TextInput.test.tsx.snap diff --git a/src/TextInput/index.ts b/src/TextInput/index.ts new file mode 100644 index 00000000000..a8a228a5d75 --- /dev/null +++ b/src/TextInput/index.ts @@ -0,0 +1 @@ +export {default, TextInputProps} from './TextInput' diff --git a/src/TextInputWithTokens.docs.json b/src/TextInputWithTokens/TextInputWithTokens.docs.json similarity index 100% rename from src/TextInputWithTokens.docs.json rename to src/TextInputWithTokens/TextInputWithTokens.docs.json diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/TextInputWithTokens/TextInputWithTokens.test.tsx similarity index 98% rename from src/__tests__/TextInputWithTokens.test.tsx rename to src/TextInputWithTokens/TextInputWithTokens.test.tsx index e77344986f5..f79dfce21b7 100644 --- a/src/__tests__/TextInputWithTokens.test.tsx +++ b/src/TextInputWithTokens/TextInputWithTokens.test.tsx @@ -4,7 +4,7 @@ import {render as HTMLRender, fireEvent, act} from '@testing-library/react' import {axe} from 'jest-axe' import {TokenSizeKeys, tokenSizes} from '../Token/TokenBase' import {IssueLabelToken} from '../Token' -import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens' +import TextInputWithTokens, {TextInputWithTokensProps} from './TextInputWithTokens' import {MarkGithubIcon} from '@primer/octicons-react' const mockTokens = [ @@ -350,10 +350,8 @@ describe('TextInputWithTokens', () => { for (const tokenLabel of allTokenLabels) { const tokenNode = getByText(tokenLabel) if (allTokenLabels.indexOf(tokenLabel) > visibleTokenCount) { - // eslint-disable-next-line jest/no-conditional-expect expect(tokenNode).toBeDefined() } else { - // eslint-disable-next-line jest/no-conditional-expect expect(tokenNode).not.toBeDefined() } } diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens/TextInputWithTokens.tsx similarity index 95% rename from src/TextInputWithTokens.tsx rename to src/TextInputWithTokens/TextInputWithTokens.tsx index b102160777a..d1c851256d2 100644 --- a/src/TextInputWithTokens.tsx +++ b/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -2,16 +2,16 @@ import {FocusKeys} from '@primer/behaviors' import {isFocusable} from '@primer/behaviors/utils' import {omit} from '@styled-system/props' import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react' -import Box from './Box' -import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef' -import {useFocusZone} from './hooks/useFocusZone' -import Text from './Text' -import {TextInputProps} from './TextInput' -import Token from './Token/Token' -import {TokenSizeKeys} from './Token/TokenBase' -import TextInputInnerVisualSlot from './_TextInputInnerVisualSlot' -import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextInputWrapper' -import UnstyledTextInput from './_UnstyledTextInput' +import Box from '../Box/Box' +import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' +import {useFocusZone} from '../hooks/useFocusZone' +import Text from '../Text/Text' +import {TextInputProps} from '../TextInput/TextInput' +import Token from '../Token/Token' +import {TokenSizeKeys} from '../Token/TokenBase' +import TextInputInnerVisualSlot from '../private/_TextInputInnerVisualSlot' +import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from '../private/_TextInputWrapper' +import UnstyledTextInput from '../private/_UnstyledTextInput' // eslint-disable-next-line @typescript-eslint/no-explicit-any type AnyReactComponent = React.ComponentType> diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap rename to src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap diff --git a/src/TextInputWithTokens/index.ts b/src/TextInputWithTokens/index.ts new file mode 100644 index 00000000000..946e55a4578 --- /dev/null +++ b/src/TextInputWithTokens/index.ts @@ -0,0 +1 @@ +export {default, TextInputWithTokensProps} from './TextInputWithTokens' diff --git a/src/Textarea.docs.json b/src/Textarea/Textarea.docs.json similarity index 100% rename from src/Textarea.docs.json rename to src/Textarea/Textarea.docs.json diff --git a/src/__tests__/Textarea.test.tsx b/src/Textarea/Textarea.test.tsx similarity index 99% rename from src/__tests__/Textarea.test.tsx rename to src/Textarea/Textarea.test.tsx index 6ae9f51a118..50b57aec9ff 100644 --- a/src/__tests__/Textarea.test.tsx +++ b/src/Textarea/Textarea.test.tsx @@ -4,7 +4,7 @@ import {behavesAsComponent, checkExports, renderStyles} from '../utils/testing' import {render} from '@testing-library/react' import {toHaveNoViolations} from 'jest-axe' import userEvent from '@testing-library/user-event' -import {DEFAULT_TEXTAREA_ROWS, DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE} from '../Textarea' +import {DEFAULT_TEXTAREA_ROWS, DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE} from './Textarea' expect.extend(toHaveNoViolations) diff --git a/src/Textarea.tsx b/src/Textarea/Textarea.tsx similarity index 92% rename from src/Textarea.tsx rename to src/Textarea/Textarea.tsx index 2f397e459c9..3b6a3489caf 100644 --- a/src/Textarea.tsx +++ b/src/Textarea/Textarea.tsx @@ -1,8 +1,8 @@ import styled, {css} from 'styled-components' import React, {TextareaHTMLAttributes, ReactElement} from 'react' -import {TextInputBaseWrapper} from './_TextInputWrapper' -import {FormValidationStatus} from './utils/types/FormValidationStatus' -import sx, {SxProp} from './sx' +import {TextInputBaseWrapper} from '../private/_TextInputWrapper' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' +import sx, {SxProp} from '../sx' export const DEFAULT_TEXTAREA_ROWS = 7 export const DEFAULT_TEXTAREA_COLS = 30 diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/Textarea/__snapshots__/Textarea.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Textarea.test.tsx.snap rename to src/Textarea/__snapshots__/Textarea.test.tsx.snap diff --git a/src/Textarea/index.ts b/src/Textarea/index.ts new file mode 100644 index 00000000000..10e4f8ba283 --- /dev/null +++ b/src/Textarea/index.ts @@ -0,0 +1 @@ +export {default, TextareaProps, DEFAULT_TEXTAREA_ROWS, DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE} from './Textarea' diff --git a/src/__tests__/ThemeProvider.test.tsx b/src/ThemeProvider/ThemeProvider.test.tsx similarity index 100% rename from src/__tests__/ThemeProvider.test.tsx rename to src/ThemeProvider/ThemeProvider.test.tsx diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider/ThemeProvider.tsx similarity index 99% rename from src/ThemeProvider.tsx rename to src/ThemeProvider/ThemeProvider.tsx index 235e309fe1e..413ed4cb739 100644 --- a/src/ThemeProvider.tsx +++ b/src/ThemeProvider/ThemeProvider.tsx @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom' import {ThemeProvider as SCThemeProvider} from 'styled-components' -import defaultTheme from './theme' +import defaultTheme from '../theme' import deepmerge from 'deepmerge' const defaultColorMode = 'day' diff --git a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/src/ThemeProvider/__snapshots__/ThemeProvider.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap rename to src/ThemeProvider/__snapshots__/ThemeProvider.test.tsx.snap diff --git a/src/Timeline.docs.json b/src/Timeline/Timeline.docs.json similarity index 100% rename from src/Timeline.docs.json rename to src/Timeline/Timeline.docs.json diff --git a/src/__tests__/Timeline.test.tsx b/src/Timeline/Timeline.test.tsx similarity index 100% rename from src/__tests__/Timeline.test.tsx rename to src/Timeline/Timeline.test.tsx diff --git a/src/Timeline.tsx b/src/Timeline/Timeline.tsx similarity index 95% rename from src/Timeline.tsx rename to src/Timeline/Timeline.tsx index 48f79627244..46ba423fe41 100644 --- a/src/Timeline.tsx +++ b/src/Timeline/Timeline.tsx @@ -1,10 +1,10 @@ import classnames from 'classnames' import React from 'react' import styled, {css} from 'styled-components' -import Box from './Box' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import Box from '../Box/Box' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>` display: flex; diff --git a/src/__tests__/Timeline.types.test.tsx b/src/Timeline/Timeline.types.test.tsx similarity index 96% rename from src/__tests__/Timeline.types.test.tsx rename to src/Timeline/Timeline.types.test.tsx index c86ca5e2b9a..9e15eb9b69f 100644 --- a/src/__tests__/Timeline.types.test.tsx +++ b/src/Timeline/Timeline.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Timeline from '../Timeline' +import Timeline from './Timeline' export function shouldAcceptCallWithNoProps() { return ( diff --git a/src/__tests__/__snapshots__/Timeline.test.tsx.snap b/src/Timeline/__snapshots__/Timeline.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Timeline.test.tsx.snap rename to src/Timeline/__snapshots__/Timeline.test.tsx.snap diff --git a/src/Timeline/index.ts b/src/Timeline/index.ts new file mode 100644 index 00000000000..7a173ec0503 --- /dev/null +++ b/src/Timeline/index.ts @@ -0,0 +1 @@ +export {default, TimelineProps} from './Timeline' diff --git a/src/ToggleSwitch.docs.json b/src/ToggleSwitch/ToggleSwitch.docs.json similarity index 100% rename from src/ToggleSwitch.docs.json rename to src/ToggleSwitch/ToggleSwitch.docs.json diff --git a/src/__tests__/ToggleSwitch.test.tsx b/src/ToggleSwitch/ToggleSwitch.test.tsx similarity index 97% rename from src/__tests__/ToggleSwitch.test.tsx rename to src/ToggleSwitch/ToggleSwitch.test.tsx index d114c67ca00..4f8eb2e8e81 100644 --- a/src/__tests__/ToggleSwitch.test.tsx +++ b/src/ToggleSwitch/ToggleSwitch.test.tsx @@ -129,5 +129,5 @@ it('calls onChange when the switch is toggled', async () => { expect(handleChange).toHaveBeenCalledWith(true) }) -checkStoriesForAxeViolations('Switch/fixtures') -checkStoriesForAxeViolations('Switch/examples') +checkStoriesForAxeViolations('fixtures', '../ToggleSwitch/') +checkStoriesForAxeViolations('examples', '../ToggleSwitch/') diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx similarity index 92% rename from src/ToggleSwitch.tsx rename to src/ToggleSwitch/ToggleSwitch.tsx index 51b84878408..6f2300ff5c1 100644 --- a/src/ToggleSwitch.tsx +++ b/src/ToggleSwitch/ToggleSwitch.tsx @@ -1,18 +1,18 @@ import React, {MouseEventHandler, useCallback, useEffect} from 'react' import styled, {css} from 'styled-components' import {variant} from 'styled-system' -import Box from './Box' -import Spinner from './Spinner' -import Text from './Text' -import {get} from './constants' -import {useProvidedStateOrCreate} from './hooks' -import sx, {BetterSystemStyleObject, SxProp} from './sx' -import VisuallyHidden from './_VisuallyHidden' +import Box from '../Box/Box' +import Spinner from '../Spinner/Spinner' +import Text from '../Text/Text' +import {get} from '../constants' +import {useProvidedStateOrCreate} from '../hooks' +import sx, {BetterSystemStyleObject, SxProp} from '../sx' +import VisuallyHidden from '../private/_VisuallyHidden' const TRANSITION_DURATION = '80ms' const EASE_OUT_QUAD_CURVE = 'cubic-bezier(0.5, 1, 0.89, 1)' -type SwitchProps = { +type ToggleSwitchProps = { /** The id of the DOM node that describes the switch */ ['aria-describedby']?: string /** The id of the DOM node that labels the switch */ @@ -47,13 +47,13 @@ const sizeVariants = variant({ }, }) -type SwitchButtonProps = { +type ToggleSwitchButtonProps = { disabled?: boolean checked?: boolean - size?: SwitchProps['size'] + size?: ToggleSwitchProps['size'] } & SxProp -type InnerIconProps = {size?: SwitchProps['size']} +type InnerIconProps = {size?: ToggleSwitchProps['size']} const CircleIcon: React.FC> = ({size}) => ( > = ({size}) => ) -const SwitchButton = styled.button` +const ToggleSwitchButton = styled.button` vertical-align: middle; cursor: pointer; user-select: none; @@ -211,7 +211,7 @@ const hiddenTextStyles: BetterSystemStyleObject = { height: 0, } -const Switch: React.FC> = ({ +const ToggleSwitch: React.FC> = ({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, defaultChecked, @@ -265,7 +265,7 @@ const Switch: React.FC> = ({ Off - > = ({ + ) } -export default Switch +export default ToggleSwitch diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap rename to src/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap diff --git a/src/stories/Switch/examples.stories.tsx b/src/ToggleSwitch/examples.stories.tsx similarity index 95% rename from src/stories/Switch/examples.stories.tsx rename to src/ToggleSwitch/examples.stories.tsx index 1a00dadd00b..0096ed29522 100644 --- a/src/stories/Switch/examples.stories.tsx +++ b/src/ToggleSwitch/examples.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, ToggleSwitch, Text, ThemeProvider} from '../../' -import {ComponentProps} from '../../utils/types' +import {BaseStyles, Box, Text, ThemeProvider, ToggleSwitch} from '..' +import {ComponentProps} from '../utils/types' import {action} from '@storybook/addon-actions' type Args = ComponentProps diff --git a/src/stories/Switch/fixtures.stories.tsx b/src/ToggleSwitch/fixtures.stories.tsx similarity index 96% rename from src/stories/Switch/fixtures.stories.tsx rename to src/ToggleSwitch/fixtures.stories.tsx index 8ef5ff93918..3ca9f122dab 100644 --- a/src/stories/Switch/fixtures.stories.tsx +++ b/src/ToggleSwitch/fixtures.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, ToggleSwitch, Text, ThemeProvider} from '../../' -import {ComponentProps} from '../../utils/types' +import {BaseStyles, Box, ToggleSwitch, Text, ThemeProvider} from '..' +import {ComponentProps} from '../utils/types' type Args = ComponentProps diff --git a/src/ToggleSwitch/index.ts b/src/ToggleSwitch/index.ts new file mode 100644 index 00000000000..317ae02efae --- /dev/null +++ b/src/ToggleSwitch/index.ts @@ -0,0 +1,3 @@ +import Switch from './ToggleSwitch' + +export default Switch diff --git a/src/Token/AvatarToken.tsx b/src/Token/AvatarToken.tsx index 24581926d92..81d823f8bbf 100644 --- a/src/Token/AvatarToken.tsx +++ b/src/Token/AvatarToken.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import {get} from '../constants' import {TokenBaseProps, defaultTokenSize, tokenSizes, TokenSizeKeys} from './TokenBase' import Token from './Token' -import Avatar from '../Avatar' +import Avatar from '../Avatar/Avatar' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' // TODO: update props to only accept 'large' and 'xlarge' on the next breaking change diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx index e433dcb233c..b1499699fe1 100644 --- a/src/Token/IssueLabelToken.tsx +++ b/src/Token/IssueLabelToken.tsx @@ -3,7 +3,7 @@ import {CSSObject} from '@styled-system/css' import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase' import RemoveTokenButton from './_RemoveTokenButton' import {parseToHsla, parseToRgba} from 'color2k' -import {useTheme} from '../ThemeProvider' +import {useTheme} from '../ThemeProvider/ThemeProvider' import TokenTextContainer from './_TokenTextContainer' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' diff --git a/src/__tests__/Token.test.tsx b/src/Token/Token.test.tsx similarity index 95% rename from src/__tests__/Token.test.tsx rename to src/Token/Token.test.tsx index 02422dc31ea..7beb642513c 100644 --- a/src/__tests__/Token.test.tsx +++ b/src/Token/Token.test.tsx @@ -1,12 +1,12 @@ import {render as HTMLRender, fireEvent} from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' -import Token from '../Token/Token' +import Token from './Token' import {render, behavesAsComponent} from '../utils/testing' import {axe} from 'jest-axe' -import {TokenSizeKeys, tokenSizes} from '../Token/TokenBase' -import {IssueLabelToken, AvatarToken} from '../Token' -import {AvatarTokenProps} from '../Token/AvatarToken' +import {TokenSizeKeys, tokenSizes} from './TokenBase' +import {IssueLabelToken, AvatarToken} from '.' +import {AvatarTokenProps} from './AvatarToken' // eslint-disable-next-line @typescript-eslint/no-explicit-any const testTokenComponent = (Component: React.ComponentType>) => { diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx index d4f4af8fae0..32e7ae3d652 100644 --- a/src/Token/Token.tsx +++ b/src/Token/Token.tsx @@ -1,5 +1,5 @@ import React, {forwardRef, MouseEventHandler} from 'react' -import Box from '../Box' +import Box from '../Box/Box' import {BetterSystemStyleObject, merge, SxProp} from '../sx' import {defaultSxProp} from '../utils/defaultSxProp' import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase' diff --git a/src/__tests__/Token.types.test.tsx b/src/Token/Token.types.test.tsx similarity index 96% rename from src/__tests__/Token.types.test.tsx rename to src/Token/Token.types.test.tsx index 5034546bd6c..b9206f721ab 100644 --- a/src/__tests__/Token.types.test.tsx +++ b/src/Token/Token.types.test.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Token from '../Token' -import AvatarToken from '../Token/AvatarToken' -import IssueLabelToken from '../Token/IssueLabelToken' +import Token from '.' +import AvatarToken from './AvatarToken' +import IssueLabelToken from './IssueLabelToken' import {CheckIcon} from '@primer/octicons-react' export function requiresAtLeastaTextProp() { diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__snapshots__/Token.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Token.test.tsx.snap rename to src/Token/__snapshots__/Token.test.tsx.snap diff --git a/src/Tooltip.docs.json b/src/Tooltip/Tooltip.docs.json similarity index 100% rename from src/Tooltip.docs.json rename to src/Tooltip/Tooltip.docs.json diff --git a/src/__tests__/Tooltip.test.tsx b/src/Tooltip/Tooltip.test.tsx similarity index 97% rename from src/__tests__/Tooltip.test.tsx rename to src/Tooltip/Tooltip.test.tsx index 2f96bfb1728..f4e5ef89973 100644 --- a/src/__tests__/Tooltip.test.tsx +++ b/src/Tooltip/Tooltip.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Tooltip, {TooltipProps} from '../Tooltip' +import Tooltip, {TooltipProps} from './Tooltip' import {render, renderClasses, rendersClass, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/Tooltip.tsx b/src/Tooltip/Tooltip.tsx similarity index 97% rename from src/Tooltip.tsx rename to src/Tooltip/Tooltip.tsx index 28fb1c8645f..abc4d994ba4 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip/Tooltip.tsx @@ -1,9 +1,9 @@ import classnames from 'classnames' import React from 'react' import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' const TooltipBase = styled.span` position: relative; diff --git a/src/__tests__/Tooltip.types.test.tsx b/src/Tooltip/Tooltip.types.test.tsx similarity index 88% rename from src/__tests__/Tooltip.types.test.tsx rename to src/Tooltip/Tooltip.types.test.tsx index c9280121588..c904cf030b5 100644 --- a/src/__tests__/Tooltip.types.test.tsx +++ b/src/Tooltip/Tooltip.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Tooltip from '../Tooltip' +import Tooltip from './Tooltip' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Tooltip.test.tsx.snap b/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Tooltip.test.tsx.snap rename to src/Tooltip/__snapshots__/Tooltip.test.tsx.snap diff --git a/src/Tooltip/index.ts b/src/Tooltip/index.ts new file mode 100644 index 00000000000..33cf36a4813 --- /dev/null +++ b/src/Tooltip/index.ts @@ -0,0 +1 @@ +export {default, TooltipProps} from './Tooltip' diff --git a/src/TreeView/TreeView.features.stories.tsx b/src/TreeView/TreeView.features.stories.tsx index bf19cdd7b0f..48d931ee105 100644 --- a/src/TreeView/TreeView.features.stories.tsx +++ b/src/TreeView/TreeView.features.stories.tsx @@ -1,9 +1,9 @@ import {DiffAddedIcon, DiffModifiedIcon, DiffRemovedIcon, DiffRenamedIcon, FileIcon} from '@primer/octicons-react' import {Meta, Story} from '@storybook/react' import React from 'react' -import Box from '../Box' +import Box from '../Box/Box' import {Button} from '../Button' -import StyledOcticon from '../StyledOcticon' +import StyledOcticon from '../StyledOcticon/StyledOcticon' import {SubTreeState, TreeView} from './TreeView' const meta: Meta = { diff --git a/src/TreeView/TreeView.stories.tsx b/src/TreeView/TreeView.stories.tsx index 70d67a95413..22fd49866a4 100644 --- a/src/TreeView/TreeView.stories.tsx +++ b/src/TreeView/TreeView.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {DiffAddedIcon, DiffModifiedIcon, FileIcon} from '@primer/octicons-react' import {Meta, Story} from '@storybook/react' -import Box from '../Box' -import StyledOcticon from '../StyledOcticon' +import Box from '../Box/Box' +import StyledOcticon from '../StyledOcticon/StyledOcticon' import {TreeView} from './TreeView' const meta: Meta = { diff --git a/src/TreeView/TreeView.test.tsx b/src/TreeView/TreeView.test.tsx index 8ad4f28df92..44c6c844ee1 100644 --- a/src/TreeView/TreeView.test.tsx +++ b/src/TreeView/TreeView.test.tsx @@ -2,7 +2,7 @@ import {fireEvent, render, waitFor} from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' import {act} from 'react-dom/test-utils' -import {ThemeProvider} from '../ThemeProvider' +import {ThemeProvider} from '../ThemeProvider/ThemeProvider' import {SubTreeState, TreeView} from './TreeView' jest.useFakeTimers() diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index 0e44e0ff776..bf31619101f 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -8,15 +8,15 @@ import classnames from 'classnames' import React from 'react' import styled, {keyframes} from 'styled-components' import {get} from '../constants' -import {ConfirmationDialog} from '../Dialog/ConfirmationDialog' +import {ConfirmationDialog} from '../ConfirmationDialog/ConfirmationDialog' import {useControllableState} from '../hooks/useControllableState' import useSafeTimeout from '../hooks/useSafeTimeout' import {useId} from '../hooks/useId' -import Spinner from '../Spinner' +import Spinner from '../Spinner/Spinner' import sx, {SxProp} from '../sx' -import Text from '../Text' +import Text from '../Text/Text' import createSlots from '../utils/create-slots' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {getAccessibleName} from './shared' import {getFirstChildElement, useRovingTabIndex} from './useRovingTabIndex' import {useTypeahead} from './useTypeahead' diff --git a/src/Truncate.docs.json b/src/Truncate/Truncate.docs.json similarity index 100% rename from src/Truncate.docs.json rename to src/Truncate/Truncate.docs.json diff --git a/src/__tests__/Truncate.test.tsx b/src/Truncate/Truncate.test.tsx similarity index 100% rename from src/__tests__/Truncate.test.tsx rename to src/Truncate/Truncate.test.tsx diff --git a/src/Truncate.tsx b/src/Truncate/Truncate.tsx similarity index 91% rename from src/Truncate.tsx rename to src/Truncate/Truncate.tsx index 5da330d26c7..224e4b7b7dc 100644 --- a/src/Truncate.tsx +++ b/src/Truncate/Truncate.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' import {maxWidth, MaxWidthProps} from 'styled-system' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' type StyledTruncateProps = { title: string diff --git a/src/__tests__/Truncate.types.test.tsx b/src/Truncate/Truncate.types.test.tsx similarity index 88% rename from src/__tests__/Truncate.types.test.tsx rename to src/Truncate/Truncate.types.test.tsx index 59e92ff650f..a7b89e8e3dc 100644 --- a/src/__tests__/Truncate.types.test.tsx +++ b/src/Truncate/Truncate.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Truncate from '../Truncate' +import Truncate from './Truncate' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Truncate.test.tsx.snap b/src/Truncate/__snapshots__/Truncate.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Truncate.test.tsx.snap rename to src/Truncate/__snapshots__/Truncate.test.tsx.snap diff --git a/src/Truncate/index.ts b/src/Truncate/index.ts new file mode 100644 index 00000000000..ac7af06f7ea --- /dev/null +++ b/src/Truncate/index.ts @@ -0,0 +1 @@ +export {default, TruncateProps} from './Truncate' diff --git a/src/UnderlineNav.docs.json b/src/UnderlineNav/UnderlineNav.docs.json similarity index 100% rename from src/UnderlineNav.docs.json rename to src/UnderlineNav/UnderlineNav.docs.json diff --git a/src/__tests__/UnderlineNav.test.tsx b/src/UnderlineNav/UnderlineNav.test.tsx similarity index 100% rename from src/__tests__/UnderlineNav.test.tsx rename to src/UnderlineNav/UnderlineNav.test.tsx diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav/UnderlineNav.tsx similarity index 94% rename from src/UnderlineNav.tsx rename to src/UnderlineNav/UnderlineNav.tsx index d7efdfec27d..4e186b0ef3f 100644 --- a/src/UnderlineNav.tsx +++ b/src/UnderlineNav/UnderlineNav.tsx @@ -2,10 +2,10 @@ import classnames from 'classnames' import {To} from 'history' import React from 'react' import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' -import getGlobalFocusStyles from './_getGlobalFocusStyles' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' +import getGlobalFocusStyles from '../private/_getGlobalFocusStyles' const ITEM_CLASS = 'PRC-UnderlineNav-item' const SELECTED_CLASS = 'PRC-selected' diff --git a/src/__tests__/UnderlineNav.types.test.tsx b/src/UnderlineNav/UnderlineNav.types.test.tsx similarity index 91% rename from src/__tests__/UnderlineNav.types.test.tsx rename to src/UnderlineNav/UnderlineNav.types.test.tsx index 6e984372067..52f3c0030f0 100644 --- a/src/__tests__/UnderlineNav.types.test.tsx +++ b/src/UnderlineNav/UnderlineNav.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import UnderlineNav from '../UnderlineNav' +import UnderlineNav from './UnderlineNav' export function shouldAcceptCallWithNoProps() { return ( diff --git a/src/__tests__/UnderlineNavLink.test.tsx b/src/UnderlineNav/UnderlineNavLink.test.tsx similarity index 100% rename from src/__tests__/UnderlineNavLink.test.tsx rename to src/UnderlineNav/UnderlineNavLink.test.tsx diff --git a/src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav/__snapshots__/UnderlineNav.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/UnderlineNav.test.tsx.snap rename to src/UnderlineNav/__snapshots__/UnderlineNav.test.tsx.snap diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/UnderlineNav/__snapshots__/UnderlineNavLink.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap rename to src/UnderlineNav/__snapshots__/UnderlineNavLink.test.tsx.snap diff --git a/src/UnderlineNav/index.ts b/src/UnderlineNav/index.ts new file mode 100644 index 00000000000..b396c2f521c --- /dev/null +++ b/src/UnderlineNav/index.ts @@ -0,0 +1,2 @@ +export {default} from './UnderlineNav' +export type {UnderlineNavLinkProps, UnderlineNavProps} from './UnderlineNav' diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index 1f03aaf1e99..2255e59d351 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -1,12 +1,12 @@ import React, {useRef, forwardRef, useCallback, useState, MutableRefObject, RefObject, useEffect} from 'react' -import Box from '../Box' +import Box from '../Box/Box' import sx, {merge, BetterSystemStyleObject, SxProp} from '../sx' import {UnderlineNavContext} from './UnderlineNavContext' import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver' -import CounterLabel from '../CounterLabel' -import {useTheme} from '../ThemeProvider' +import CounterLabel from '../CounterLabel/CounterLabel' +import {useTheme} from '../ThemeProvider/ThemeProvider' import {ChildWidthArray, ResponsiveProps, ChildSize} from './types' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {moreBtnStyles, getDividerStyle, getNavStyles, ulStyles, menuStyles, menuItemStyles, GAP} from './styles' import styled from 'styled-components' import {LoadingCounter} from './LoadingCounter' diff --git a/src/UnderlineNav2/UnderlineNavContext.tsx b/src/UnderlineNav2/UnderlineNavContext.tsx index 1dbd84b73cc..235b44378fc 100644 --- a/src/UnderlineNav2/UnderlineNavContext.tsx +++ b/src/UnderlineNav2/UnderlineNavContext.tsx @@ -1,5 +1,5 @@ import React, {createContext, RefObject} from 'react' -import {Theme} from '../ThemeProvider' +import {Theme} from '../ThemeProvider/ThemeProvider' export const UnderlineNavContext = createContext<{ theme: Theme | undefined diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx index 66b596ab211..06ce03ffa4c 100644 --- a/src/UnderlineNav2/UnderlineNavItem.tsx +++ b/src/UnderlineNav2/UnderlineNavItem.tsx @@ -1,10 +1,10 @@ import React, {forwardRef, useRef, useContext, MutableRefObject, RefObject} from 'react' -import Box from '../Box' +import Box from '../Box/Box' import {merge, SxProp} from '../sx' import {IconProps} from '@primer/octicons-react' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import {UnderlineNavContext} from './UnderlineNavContext' -import CounterLabel from '../CounterLabel' +import CounterLabel from '../CounterLabel/CounterLabel' import {getLinkStyles, wrapperStyles, iconWrapStyles, counterStyles} from './styles' import {LoadingCounter} from './LoadingCounter' import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts index dd14ce0d0a5..0d54acde084 100644 --- a/src/UnderlineNav2/styles.ts +++ b/src/UnderlineNav2/styles.ts @@ -1,4 +1,4 @@ -import {Theme} from '../ThemeProvider' +import {Theme} from '../ThemeProvider/ThemeProvider' import {UnderlineNavProps} from './UnderlineNav' // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container. diff --git a/src/__tests__/CheckboxOrRadioGroup.test.tsx b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.test.tsx similarity index 99% rename from src/__tests__/CheckboxOrRadioGroup.test.tsx rename to src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.test.tsx index 3532377ee07..eeb988a3c19 100644 --- a/src/__tests__/CheckboxOrRadioGroup.test.tsx +++ b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.test.tsx @@ -3,7 +3,7 @@ import '@testing-library/jest-dom/extend-expect' import {render, within} from '@testing-library/react' import {Checkbox, FormControl, Radio, SSRProvider, TextInput} from '..' import {behavesAsComponent, checkExports} from '../utils/testing' -import CheckboxOrRadioGroup from '../_CheckboxOrRadioGroup' +import CheckboxOrRadioGroup from '.' const INPUT_GROUP_LABEL = 'Choices' diff --git a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx index f08a88c93dd..e8ddc4bf98b 100644 --- a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx +++ b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box from '../Box' +import Box from '../Box/Box' import {useSSRSafeId} from '../utils/ssr' -import ValidationAnimationContainer from '../_ValidationAnimationContainer' +import ValidationAnimationContainer from '../private/_ValidationAnimationContainer' import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroupCaption' import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroupLabel' import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroupValidation' @@ -9,7 +9,7 @@ import {Slots} from './slots' import styled from 'styled-components' import {get} from '../constants' import CheckboxOrRadioGroupContext from './_CheckboxOrRadioGroupContext' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {SxProp} from '../sx' export type CheckboxOrRadioGroupProps = { diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx index cbae8c9c3ed..1bf4c246b49 100644 --- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx +++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Text from '../Text' +import Text from '../Text/Text' import {SxProp} from '../sx' import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup' import {Slot} from './slots' diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx index a95b8cac167..cac7591716c 100644 --- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx +++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box from '../Box' +import Box from '../Box/Box' import {SxProp} from '../sx' -import VisuallyHidden from '../_VisuallyHidden' +import VisuallyHidden from '../private/_VisuallyHidden' import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup' import {Slot} from './slots' diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx index b4ac8604b94..b4d082d4ca8 100644 --- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx +++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputValidation from '../_InputValidation' +import InputValidation from '../private/_InputValidation' import {SxProp} from '../sx' import {FormValidationStatus} from '../utils/types/FormValidationStatus' import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup' diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/_CheckboxOrRadioGroup/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap rename to src/_CheckboxOrRadioGroup/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap diff --git a/src/__tests__/BorderBox.test.tsx b/src/__tests__/deprecated/BorderBox.test.tsx similarity index 89% rename from src/__tests__/BorderBox.test.tsx rename to src/__tests__/deprecated/BorderBox.test.tsx index 01909c4da22..9670a0421f8 100644 --- a/src/__tests__/BorderBox.test.tsx +++ b/src/__tests__/deprecated/BorderBox.test.tsx @@ -1,7 +1,7 @@ import React from 'react' -import theme from '../theme' -import {BorderBox} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' +import theme from '../../theme' +import {BorderBox} from '../../deprecated' +import {render, behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Dropdown.test.tsx b/src/__tests__/deprecated/Dropdown.test.tsx similarity index 91% rename from src/__tests__/Dropdown.test.tsx rename to src/__tests__/deprecated/Dropdown.test.tsx index 08af8c9fa43..2c6cda6a56c 100644 --- a/src/__tests__/Dropdown.test.tsx +++ b/src/__tests__/deprecated/Dropdown.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Dropdown} from '../deprecated' -import {behavesAsComponent, checkExports} from '../utils/testing' +import {Dropdown} from '../../deprecated' +import {behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Dropdown.types.test.tsx b/src/__tests__/deprecated/Dropdown.types.test.tsx similarity index 92% rename from src/__tests__/Dropdown.types.test.tsx rename to src/__tests__/deprecated/Dropdown.types.test.tsx index 06402f96573..e23f1bc9868 100644 --- a/src/__tests__/Dropdown.types.test.tsx +++ b/src/__tests__/deprecated/Dropdown.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Dropdown from '../deprecated/Dropdown' +import Dropdown from '../../deprecated/Dropdown' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/Flex.test.tsx b/src/__tests__/deprecated/Flex.test.tsx similarity index 92% rename from src/__tests__/Flex.test.tsx rename to src/__tests__/deprecated/Flex.test.tsx index 750eeb44c89..4f43fdb6758 100644 --- a/src/__tests__/Flex.test.tsx +++ b/src/__tests__/deprecated/Flex.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Flex} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' +import {Flex} from '../../deprecated' +import {render, behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/FormGroup.types.test.tsx b/src/__tests__/deprecated/FormGroup.types.test.tsx similarity index 83% rename from src/__tests__/FormGroup.types.test.tsx rename to src/__tests__/deprecated/FormGroup.types.test.tsx index c35f16d3bd1..7c5a9f9e964 100644 --- a/src/__tests__/FormGroup.types.test.tsx +++ b/src/__tests__/deprecated/FormGroup.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import FormGroup from '../deprecated/FormGroup' +import FormGroup from '../../deprecated/FormGroup' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/Grid.test.tsx b/src/__tests__/deprecated/Grid.test.tsx similarity index 94% rename from src/__tests__/Grid.test.tsx rename to src/__tests__/deprecated/Grid.test.tsx index aa227cef5d5..c9ab56cdefb 100644 --- a/src/__tests__/Grid.test.tsx +++ b/src/__tests__/deprecated/Grid.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Grid} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' +import {Grid} from '../../deprecated' +import {render, behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Position.test.tsx b/src/__tests__/deprecated/Position.test.tsx similarity index 95% rename from src/__tests__/Position.test.tsx rename to src/__tests__/deprecated/Position.test.tsx index 304f0a45170..7e64caf54be 100644 --- a/src/__tests__/Position.test.tsx +++ b/src/__tests__/deprecated/Position.test.tsx @@ -1,7 +1,7 @@ import React from 'react' -import {Box} from '..' -import {Position, Absolute, Fixed, Relative, Sticky} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' +import {Box} from '../..' +import {Position, Absolute, Fixed, Relative, Sticky} from '../../deprecated' +import {render, behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/SelectMenu.test.tsx b/src/__tests__/deprecated/SelectMenu.test.tsx similarity index 97% rename from src/__tests__/SelectMenu.test.tsx rename to src/__tests__/deprecated/SelectMenu.test.tsx index a95032d5f67..377707c3ec2 100644 --- a/src/__tests__/SelectMenu.test.tsx +++ b/src/__tests__/deprecated/SelectMenu.test.tsx @@ -1,10 +1,10 @@ import {render as HTMLRender} from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' -import {SelectMenu, Button} from '../deprecated' -import {render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing' +import {SelectMenu, Button} from '../../deprecated' +import {render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../../utils/testing' import {axe} from 'jest-axe' -import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../deprecated/SelectMenu' +import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../../deprecated/SelectMenu' const BasicSelectMenu = ({ onClick, diff --git a/src/__tests__/SelectMenu.types.test.tsx b/src/__tests__/deprecated/SelectMenu.types.test.tsx similarity index 96% rename from src/__tests__/SelectMenu.types.test.tsx rename to src/__tests__/deprecated/SelectMenu.types.test.tsx index 66e57ddef0b..bf68d57a48b 100644 --- a/src/__tests__/SelectMenu.types.test.tsx +++ b/src/__tests__/deprecated/SelectMenu.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import SelectMenu from '../deprecated/SelectMenu' +import SelectMenu from '../../deprecated/SelectMenu' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/BorderBox.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/BorderBox.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/BorderBox.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/BorderBox.test.tsx.snap diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Dropdown.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Dropdown.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/Dropdown.test.tsx.snap diff --git a/src/__tests__/__snapshots__/Flex.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Flex.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Flex.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/Flex.test.tsx.snap diff --git a/src/__tests__/__snapshots__/Grid.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Grid.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Grid.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/Grid.test.tsx.snap diff --git a/src/__tests__/__snapshots__/Position.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Position.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Position.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/Position.test.tsx.snap diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/SelectMenu.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/SelectMenu.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/SelectMenu.test.tsx.snap diff --git a/src/__tests__/useSafeTimeout.test.tsx b/src/__tests__/hooks/useSafeTimeout.test.tsx similarity index 95% rename from src/__tests__/useSafeTimeout.test.tsx rename to src/__tests__/hooks/useSafeTimeout.test.tsx index d881cf0525b..5ade0e4ee66 100644 --- a/src/__tests__/useSafeTimeout.test.tsx +++ b/src/__tests__/hooks/useSafeTimeout.test.tsx @@ -1,5 +1,5 @@ import {renderHook} from '@testing-library/react-hooks' -import useSafeTimeout from '../hooks/useSafeTimeout' +import useSafeTimeout from '../../hooks/useSafeTimeout' afterEach(() => { jest.useRealTimers() diff --git a/src/__tests__/KeyPaths.types.test.ts b/src/__tests__/utils/KeyPaths.types.test.ts similarity index 82% rename from src/__tests__/KeyPaths.types.test.ts rename to src/__tests__/utils/KeyPaths.types.test.ts index 19ac52e4040..c291f58013d 100644 --- a/src/__tests__/KeyPaths.types.test.ts +++ b/src/__tests__/utils/KeyPaths.types.test.ts @@ -1,5 +1,5 @@ import {Union} from 'ts-toolbelt' -import {KeyPaths} from '../utils/types/KeyPaths' +import {KeyPaths} from '../../utils/types/KeyPaths' type NestedObject = { a: string diff --git a/src/__tests__/filterObject.test.ts b/src/__tests__/utils/filterObject.test.ts similarity index 93% rename from src/__tests__/filterObject.test.ts rename to src/__tests__/utils/filterObject.test.ts index 89aeabc5c48..07651f3ea27 100644 --- a/src/__tests__/filterObject.test.ts +++ b/src/__tests__/utils/filterObject.test.ts @@ -1,4 +1,4 @@ -import {isColorValue, isShadowValue, filterObject} from '../utils/theme' +import {isColorValue, isShadowValue, filterObject} from '../../utils/theme' describe('filterObject', () => { const colors = { diff --git a/src/__tests__/theme.test.ts b/src/__tests__/utils/theme.test.ts similarity index 95% rename from src/__tests__/theme.test.ts rename to src/__tests__/utils/theme.test.ts index 0f5033bf4e6..e4c9a44278c 100644 --- a/src/__tests__/theme.test.ts +++ b/src/__tests__/utils/theme.test.ts @@ -1,4 +1,4 @@ -import {isShadowValue} from '../utils/theme' +import {isShadowValue} from '../../utils/theme' describe('isShadowValue', () => { it('accepts transparent', () => { diff --git a/src/deprecated/ActionList/Item.tsx b/src/deprecated/ActionList/Item.tsx index 755a78be028..3abce61bfd4 100644 --- a/src/deprecated/ActionList/Item.tsx +++ b/src/deprecated/ActionList/Item.tsx @@ -2,12 +2,12 @@ import {CheckIcon, IconProps} from '@primer/octicons-react' import React, {useCallback} from 'react' import {get} from '../../constants' import sx, {SxProp} from '../../sx' -import Truncate from '../../Truncate' +import Truncate from '../../Truncate/Truncate' import {ItemInput} from './List' import styled from 'styled-components' import {StyledHeader} from './Header' import {StyledDivider} from './Divider' -import {useTheme} from '../../ThemeProvider' +import {useTheme} from '../../ThemeProvider/ThemeProvider' import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, diff --git a/src/deprecated/ActionMenu.tsx b/src/deprecated/ActionMenu.tsx index ce40334fc0b..c38eeef766c 100644 --- a/src/deprecated/ActionMenu.tsx +++ b/src/deprecated/ActionMenu.tsx @@ -5,7 +5,7 @@ import Button, {ButtonProps} from './Button' import React, {useCallback, useMemo} from 'react' import {AnchoredOverlay} from '../AnchoredOverlay' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' -import {OverlayProps} from '../Overlay' +import {OverlayProps} from '../Overlay/Overlay' import {useProvidedRefOrCreate} from '../hooks' import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay' diff --git a/src/deprecated/BorderBox.tsx b/src/deprecated/BorderBox.tsx index ba41a444910..fb1058eb122 100644 --- a/src/deprecated/BorderBox.tsx +++ b/src/deprecated/BorderBox.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import Box, {BoxProps} from '../Box' +import Box, {BoxProps} from '../Box/Box' export type BorderBoxProps = BoxProps diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx index 3496a198091..f4308b300d4 100644 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx @@ -2,8 +2,8 @@ import React from 'react' import {Box, useSSRSafeId} from '../..' import createSlots from '../../utils/create-slots' import {FormValidationStatus} from '../../utils/types/FormValidationStatus' -import ValidationAnimationContainer from '../../_ValidationAnimationContainer' -import InputValidation from '../../_InputValidation' +import ValidationAnimationContainer from '../../private/_ValidationAnimationContainer' +import InputValidation from '../../private/_InputValidation' import ChoiceFieldsetListItem from './ChoiceFieldsetListItem' import ChoiceFieldsetDescription from './ChoiceFieldsetDescription' import ChoiceFieldsetLegend from './ChoiceFieldsetLegend' diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx index ace09f02cb9..d916f2340fb 100644 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx @@ -1,6 +1,6 @@ import React from 'react' import {Box} from '../..' -import VisuallyHidden from '../../_VisuallyHidden' +import VisuallyHidden from '../../private/_VisuallyHidden' import {ChoiceFieldsetContext, Slot} from './ChoiceFieldset' export interface ChoiceFieldsetLegendProps { diff --git a/src/deprecated/Dropdown.tsx b/src/deprecated/Dropdown.tsx index 985adb69b25..a82d451249a 100644 --- a/src/deprecated/Dropdown.tsx +++ b/src/deprecated/Dropdown.tsx @@ -2,8 +2,8 @@ import React from 'react' import styled from 'styled-components' import Button, {ButtonProps} from './Button' import {get} from '../constants' -import Details, {DetailsProps} from '../Details' -import getDirectionStyles from '../DropdownStyles' +import Details, {DetailsProps} from '../Details/Details' +import getDirectionStyles from './DropdownStyles' import useDetails from '../hooks/useDetails' import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' diff --git a/src/deprecated/DropdownMenu/DropdownButton.tsx b/src/deprecated/DropdownMenu/DropdownButton.tsx index bef4ec1a761..03bb8369a96 100644 --- a/src/deprecated/DropdownMenu/DropdownButton.tsx +++ b/src/deprecated/DropdownMenu/DropdownButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import {TriangleDownIcon} from '@primer/octicons-react' import Button, {ButtonProps} from '../Button/Button' -import StyledOcticon from '../../StyledOcticon' +import StyledOcticon from '../../StyledOcticon/StyledOcticon' export type DropdownButtonProps = ButtonProps diff --git a/src/deprecated/DropdownMenu/DropdownMenu.tsx b/src/deprecated/DropdownMenu/DropdownMenu.tsx index 8fd6fd4dc73..8af7aec8e66 100644 --- a/src/deprecated/DropdownMenu/DropdownMenu.tsx +++ b/src/deprecated/DropdownMenu/DropdownMenu.tsx @@ -3,7 +3,7 @@ import {List, GroupedListProps, ListPropsBase, ItemInput} from '../ActionList/Li import {DropdownButton, DropdownButtonProps} from './DropdownButton' import {ItemProps} from '../ActionList/Item' import {AnchoredOverlay} from '../../AnchoredOverlay' -import {OverlayProps} from '../../Overlay' +import {OverlayProps} from '../../Overlay/Overlay' import {AnchoredOverlayWrapperAnchorProps} from '../../AnchoredOverlay/AnchoredOverlay' import {useProvidedRefOrCreate} from '../../hooks/useProvidedRefOrCreate' import {useProvidedStateOrCreate} from '../../hooks/useProvidedStateOrCreate' diff --git a/src/DropdownStyles.ts b/src/deprecated/DropdownStyles.ts similarity index 96% rename from src/DropdownStyles.ts rename to src/deprecated/DropdownStyles.ts index 39c01f7db7f..8d9b1fb5edf 100644 --- a/src/DropdownStyles.ts +++ b/src/deprecated/DropdownStyles.ts @@ -1,5 +1,5 @@ -import {get} from './constants' -import {Theme} from './ThemeProvider' +import {get} from '../constants' +import {Theme} from '../ThemeProvider/ThemeProvider' const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w') => { const map = { diff --git a/src/deprecated/Flex.tsx b/src/deprecated/Flex.tsx index 6bccea61a3c..8ddc13e7f4d 100644 --- a/src/deprecated/Flex.tsx +++ b/src/deprecated/Flex.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import Box, {BoxProps} from '../Box' +import Box, {BoxProps} from '../Box/Box' export type FlexProps = BoxProps diff --git a/src/deprecated/Grid.tsx b/src/deprecated/Grid.tsx index bd063c070de..e07735785f7 100644 --- a/src/deprecated/Grid.tsx +++ b/src/deprecated/Grid.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import Box, {BoxProps} from '../Box' +import Box, {BoxProps} from '../Box/Box' export type GridProps = BoxProps diff --git a/src/deprecated/InputField/InputField.tsx b/src/deprecated/InputField/InputField.tsx index 60f003a89a6..9d268b5fe90 100644 --- a/src/deprecated/InputField/InputField.tsx +++ b/src/deprecated/InputField/InputField.tsx @@ -1,13 +1,13 @@ import React from 'react' import {Autocomplete, Box, Select, TextInput, TextInputWithTokens, useSSRSafeId} from '../../' -import InputValidation from '../../_InputValidation' +import InputValidation from '../../private/_InputValidation' import {ComponentProps} from '../../utils/types' import {FormValidationStatus} from '../../utils/types/FormValidationStatus' import InputFieldCaption from './_InputFieldCaption' import InputFieldLabel from './_InputFieldLabel' import InputFieldValidation from './_InputFieldValidation' import {Slots} from './slots' -import ValidationAnimationContainer from '../../_ValidationAnimationContainer' +import ValidationAnimationContainer from '../../private/_ValidationAnimationContainer' export interface Props> { children?: React.ReactNode /** diff --git a/src/deprecated/InputField/_InputFieldCaption.tsx b/src/deprecated/InputField/_InputFieldCaption.tsx index 2bdb9951d1b..f3429a87ffd 100644 --- a/src/deprecated/InputField/_InputFieldCaption.tsx +++ b/src/deprecated/InputField/_InputFieldCaption.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputCaption from '../../_InputCaption' +import InputCaption from '../../private/_InputCaption' import {InputFieldContext} from './InputField' import {Slot} from './slots' diff --git a/src/deprecated/InputField/_InputFieldLabel.tsx b/src/deprecated/InputField/_InputFieldLabel.tsx index f63e71135c2..ecf5eb8dfc6 100644 --- a/src/deprecated/InputField/_InputFieldLabel.tsx +++ b/src/deprecated/InputField/_InputFieldLabel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputLabel from '../../_InputLabel' +import InputLabel from '../../private/_InputLabel' import {InputFieldContext} from './InputField' import {Slot} from './slots' diff --git a/src/deprecated/Position.tsx b/src/deprecated/Position.tsx index 2b3261e6f11..695eec23893 100644 --- a/src/deprecated/Position.tsx +++ b/src/deprecated/Position.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import Box from '../Box' +import Box from '../Box/Box' import {ComponentProps} from '../utils/types' type StyledPositionProps = {as?: React.ElementType} diff --git a/src/deprecated/SelectMenu/SelectMenuFilter.tsx b/src/deprecated/SelectMenu/SelectMenuFilter.tsx index 979ee43e920..c76c64bac57 100644 --- a/src/deprecated/SelectMenu/SelectMenuFilter.tsx +++ b/src/deprecated/SelectMenu/SelectMenuFilter.tsx @@ -2,7 +2,7 @@ import React, {forwardRef, useContext, useEffect, useRef} from 'react' import styled from 'styled-components' import {get} from '../../constants' import sx, {SxProp} from '../../sx' -import TextInput, {TextInputProps} from '../../TextInput' +import TextInput, {TextInputProps} from '../../TextInput/TextInput' import {ComponentProps} from '../../utils/types' import {MenuContext} from './SelectMenuContext' diff --git a/src/deprecated/SelectMenu/SelectMenuItem.tsx b/src/deprecated/SelectMenu/SelectMenuItem.tsx index 82d6f869096..b36e92b14e7 100644 --- a/src/deprecated/SelectMenu/SelectMenuItem.tsx +++ b/src/deprecated/SelectMenu/SelectMenuItem.tsx @@ -2,7 +2,7 @@ import {CheckIcon} from '@primer/octicons-react' import React, {forwardRef, useContext, useRef} from 'react' import styled, {css} from 'styled-components' import {get} from '../../constants' -import StyledOcticon from '../../StyledOcticon' +import StyledOcticon from '../../StyledOcticon/StyledOcticon' import sx, {SxProp} from '../../sx' import {ComponentProps} from '../../utils/types' import {MenuContext} from './SelectMenuContext' diff --git a/src/deprecated/SelectMenu/SelectMenuLoadingAnimation.tsx b/src/deprecated/SelectMenu/SelectMenuLoadingAnimation.tsx index b5efa3ce1cf..dfecf994bb3 100644 --- a/src/deprecated/SelectMenu/SelectMenuLoadingAnimation.tsx +++ b/src/deprecated/SelectMenu/SelectMenuLoadingAnimation.tsx @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' import {get} from '../../constants' -import Spinner from '../../Spinner' +import Spinner from '../../Spinner/Spinner' import sx, {SxProp} from '../../sx' import {ComponentProps} from '../../utils/types' diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx index 5b090e5eb5d..bc62e1ba181 100644 --- a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx +++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx @@ -4,8 +4,8 @@ import userEvent from '@testing-library/user-event' import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions, Trigger} from '.' import FormControl from '../../FormControl' import {ActionList} from '../../ActionList' -import Textarea from '../../Textarea' -import ThemeProvider from '../../ThemeProvider' +import Textarea from '../../Textarea/Textarea' +import ThemeProvider from '../../ThemeProvider/ThemeProvider' const label = 'Inline Autocomplete' diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx index ddc287d7a81..b98213097ef 100644 --- a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx +++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx @@ -1,5 +1,5 @@ import React, {cloneElement, useRef} from 'react' -import Box from '../../Box' +import Box from '../../Box/Box' import Portal from '../../Portal' import {BetterSystemStyleObject} from '../../sx' import {useSyntheticChange} from '../hooks/useSyntheticChange' diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx index 4483757ba15..3538f3edaa8 100644 --- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx +++ b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx @@ -1,9 +1,9 @@ import React, {useCallback, useState} from 'react' -import Spinner from '../../Spinner' +import Spinner from '../../Spinner/Spinner' import {ActionList, ActionListItemProps} from '../../ActionList' -import Box from '../../Box' +import Box from '../../Box/Box' import {ComboboxCommitEvent, useCombobox} from '../hooks/useCombobox' -import Overlay from '../../Overlay' +import Overlay from '../../Overlay/Overlay' import {Suggestion, Suggestions, TextInputElement} from './types' import {getSuggestionKey, getSuggestionValue} from './utils' diff --git a/src/drafts/MarkdownEditor/Label.tsx b/src/drafts/MarkdownEditor/Label.tsx index 5cc36a55485..0c9cf282f40 100644 --- a/src/drafts/MarkdownEditor/Label.tsx +++ b/src/drafts/MarkdownEditor/Label.tsx @@ -1,6 +1,6 @@ import React, {FC, useContext} from 'react' import {SxProp} from '../../sx' -import InputLabel from '../../_InputLabel' +import InputLabel from '../../private/_InputLabel' import {MarkdownEditorSlot} from './MarkdownEditor' import {MarkdownEditorContext} from './_MarkdownEditorContext' diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx index f140894d2c2..8d946023d1a 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx +++ b/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx @@ -1,10 +1,10 @@ import {DiffIcon} from '@primer/octicons-react' import React, {Meta} from '@storybook/react' import {useRef, useState} from 'react' -import BaseStyles from '../../BaseStyles' -import Box from '../../Box' +import BaseStyles from '../../BaseStyles/BaseStyles' +import Box from '../../Box/Box' import MarkdownEditor, {Emoji, Mentionable, Reference, SavedReply} from '.' -import ThemeProvider from '../../ThemeProvider' +import ThemeProvider from '../../ThemeProvider/ThemeProvider' const meta: Meta = { title: 'Drafts/Components/MarkdownEditor', diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx index b946c373b6c..d126e549631 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx +++ b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx @@ -5,7 +5,7 @@ import {UserEvent} from '@testing-library/user-event/dist/types/setup/setup' import React, {forwardRef, useRef, useState} from 'react' import {act} from 'react-dom/test-utils' import MarkdownEditor, {Emoji, MarkdownEditorHandle, MarkdownEditorProps, Mentionable, Reference, SavedReply} from '.' -import ThemeProvider from '../../ThemeProvider' +import ThemeProvider from '../../ThemeProvider/ThemeProvider' declare const REACT_VERSION_LATEST: boolean diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx index f077d1a1cb3..a2a70819b8a 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx +++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx @@ -8,7 +8,7 @@ import React, { useRef, useState, } from 'react' -import Box from '../../Box' +import Box from '../../Box/Box' import {FileType} from '../hooks/useUnifiedFileSelect' import {useId} from '../../hooks/useId' import {useIgnoreKeyboardActionsWhileComposing} from '../hooks/useIgnoreKeyboardActionsWhileComposing' @@ -17,7 +17,7 @@ import {useSyntheticChange} from '../hooks/useSyntheticChange' import MarkdownViewer from '../MarkdownViewer' import {SxProp} from '../../sx' import createSlots from '../../utils/create-slots' -import VisuallyHidden from '../../_VisuallyHidden' +import VisuallyHidden from '../../private/_VisuallyHidden' import {FormattingTools} from './_FormattingTools' import {MarkdownEditorContext} from './_MarkdownEditorContext' import {CoreToolbar, DefaultToolbarButtons} from './Toolbar' diff --git a/src/drafts/MarkdownEditor/Toolbar.tsx b/src/drafts/MarkdownEditor/Toolbar.tsx index ccf37a44ba0..09b23fd56b2 100644 --- a/src/drafts/MarkdownEditor/Toolbar.tsx +++ b/src/drafts/MarkdownEditor/Toolbar.tsx @@ -15,7 +15,7 @@ import { import React, {forwardRef, memo, useContext, useRef} from 'react' import {isMacOS} from '@primer/behaviors/utils' -import Box from '../../Box' +import Box from '../../Box/Box' import {IconButton, IconButtonProps} from '../../Button' import {useFocusZone} from '../../hooks/useFocusZone' import {MarkdownEditorSlot} from './MarkdownEditor' diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx index 14a9554b385..ceee5d4fb96 100644 --- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx +++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx @@ -2,7 +2,7 @@ import {subscribe as subscribeToMarkdownPasting} from '@github/paste-markdown' import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react' import {useDynamicTextareaHeight} from '../hooks/useDynamicTextareaHeight' import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '../InlineAutocomplete' -import Textarea, {TextareaProps} from '../../Textarea' +import Textarea, {TextareaProps} from '../../Textarea/Textarea' import {Emoji, useEmojiSuggestions} from './suggestions/_useEmojiSuggestions' import {Mentionable, useMentionSuggestions} from './suggestions/_useMentionSuggestions' import {Reference, useReferenceSuggestions} from './suggestions/_useReferenceSuggestions' diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx index 324f5c4673a..89a5f56c81c 100644 --- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx +++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx @@ -1,7 +1,7 @@ import React, {useContext} from 'react' import {EyeIcon, PencilIcon} from '@primer/octicons-react' -import Box from '../../Box' +import Box from '../../Box/Box' import {Button, IconButton} from '../../Button' import {MarkdownEditorContext} from './_MarkdownEditorContext' diff --git a/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx index b3ecb41ea4a..d14116a395b 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx +++ b/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx @@ -3,7 +3,7 @@ import React from 'react' import {suggestionsCalculator, UseSuggestionsHook} from '.' import {ActionList} from '../../../ActionList' import {Suggestion, Trigger} from '../../InlineAutocomplete' -import Text from '../../../Text' +import Text from '../../../Text/Text' /** Could be a user, team, or organization - anything that can be mentioned. */ export type Mentionable = { diff --git a/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx index 46f89269f52..decbfa4782c 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx +++ b/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx @@ -2,7 +2,7 @@ import React from 'react' import {suggestionsCalculator, UseSuggestionsHook} from '.' import {ActionList} from '../../../ActionList' import {Suggestion, Trigger} from '../../InlineAutocomplete' -import Text from '../../../Text' +import Text from '../../../Text/Text' import {score} from 'fzy.js' export type Reference = { diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx index 1d052f3d777..cfef2e2c452 100644 --- a/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx +++ b/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx @@ -1,9 +1,9 @@ import React, {Meta} from '@storybook/react' import {debounce} from 'lodash' import {useCallback, useMemo, useState} from 'react' -import BaseStyles from '../../BaseStyles' -import Box from '../../Box' -import ThemeProvider from '../../ThemeProvider' +import BaseStyles from '../../BaseStyles/BaseStyles' +import Box from '../../Box/Box' +import ThemeProvider from '../../ThemeProvider/ThemeProvider' import {useSafeAsyncCallback} from '../hooks/useSafeAsyncCallback' import MarkdownViewer from './MarkdownViewer' diff --git a/src/drafts/index.ts b/src/drafts/index.ts index 0bcc0a3b75f..6adbfa1808a 100644 --- a/src/drafts/index.ts +++ b/src/drafts/index.ts @@ -4,7 +4,7 @@ * But, they are published on npm and you can import them for experimentation/feedback. * example: import {ActionList} from '@primer/react/drafts */ -export * from '../Dialog/Dialog' +export * from '../ConfirmationDialog/Dialog' export * from '../Hidden' diff --git a/src/hooks/useMenuKeyboardNavigation.ts b/src/hooks/useMenuKeyboardNavigation.ts index 7b8f5b459bd..a438dca1c8d 100644 --- a/src/hooks/useMenuKeyboardNavigation.ts +++ b/src/hooks/useMenuKeyboardNavigation.ts @@ -2,7 +2,7 @@ import React from 'react' import {iterateFocusableElements} from '@primer/behaviors/utils' import {useMenuInitialFocus} from './useMenuInitialFocus' import {useMnemonics} from './useMnemonics' -import {MenuContextProps} from '../ActionMenu' +import {MenuContextProps} from '../ActionMenu/ActionMenu' /** * Keyboard navigation is a mix of 4 hooks diff --git a/src/index.ts b/src/index.ts index 0506d9dcf49..52ab92a4a01 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,13 @@ export {default as theme} from './theme' export {get as themeGet} from './constants' -export {default as BaseStyles} from './BaseStyles' -export type {BaseStylesProps} from './BaseStyles' -export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProvider' -export type {ThemeProviderProps} from './ThemeProvider' +export {default as BaseStyles} from './BaseStyles/BaseStyles' +export type {BaseStylesProps} from './BaseStyles/BaseStyles' +export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProvider/ThemeProvider' +export type {ThemeProviderProps} from './ThemeProvider/ThemeProvider' // Layout -export {default as Box} from './Box' -export type {BoxProps} from './Box' +export {default as Box} from './Box/Box' +export type {BoxProps} from './Box/Box' export * from './Button' export {PageLayout} from './PageLayout' export type { @@ -34,7 +34,7 @@ export type {TouchOrMouseEvent} from './hooks/useOnOutsideClick' export {useOpenAndCloseFocus} from './hooks/useOpenAndCloseFocus' export {useOnEscapePress} from './hooks/useOnEscapePress' export {useOverlay} from './hooks/useOverlay' -export {useConfirm} from './Dialog/ConfirmationDialog' +export {useConfirm} from './ConfirmationDialog/ConfirmationDialog' export {useFocusTrap} from './hooks/useFocusTrap' export type {FocusTrapHookSettings} from './hooks/useFocusTrap' export {useFocusZone} from './hooks/useFocusZone' @@ -42,8 +42,8 @@ export type {FocusZoneHookSettings} from './hooks/useFocusZone' export {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef' // Components -export {default as Radio} from './Radio' -export type {RadioProps} from './Radio' +export {default as Radio} from './Radio/Radio' +export type {RadioProps} from './Radio/Radio' export {ActionList} from './ActionList' export type { ActionListProps, @@ -55,56 +55,61 @@ export type { ActionListLeadingVisualProps, ActionListTrailingVisualProps, } from './ActionList' -export {ActionMenu} from './ActionMenu' -export type {ActionMenuProps, ActionMenuAnchorProps, ActionMenuButtonProps} from './ActionMenu' +export {ActionMenu} from './ActionMenu/ActionMenu' +export type {ActionMenuProps, ActionMenuAnchorProps, ActionMenuButtonProps} from './ActionMenu/ActionMenu' export {AnchoredOverlay} from './AnchoredOverlay' export type {AnchoredOverlayProps} from './AnchoredOverlay' export {default as Autocomplete} from './Autocomplete' export type {AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps} from './Autocomplete' -export {default as Avatar} from './Avatar' -export type {AvatarProps} from './Avatar' -export {default as AvatarPair} from './AvatarPair' -export type {AvatarPairProps} from './AvatarPair' +export {default as Avatar} from './Avatar/Avatar' +export type {AvatarProps} from './Avatar/Avatar' +export {default as AvatarPair} from './AvatarPair/AvatarPair' +export type {AvatarPairProps} from './AvatarPair/AvatarPair' export {default as AvatarStack} from './AvatarStack' export type {AvatarStackProps} from './AvatarStack' -export {default as BranchName} from './BranchName' -export type {BranchNameProps} from './BranchName' -export {default as Breadcrumbs, Breadcrumb} from './Breadcrumbs' -export type {BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps} from './Breadcrumbs' -export {default as ButtonGroup} from './ButtonGroup' -export type {ButtonGroupProps} from './ButtonGroup' -export {default as Caret} from './Caret' -export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge' -export {default as CircleOcticon} from './CircleOcticon' -export type {CircleOcticonProps} from './CircleOcticon' -export {default as CheckboxGroup} from './CheckboxGroup' -export type {CaretProps} from './Caret' -export {default as CircleBadge} from './CircleBadge' -export {default as CounterLabel} from './CounterLabel' -export type {CounterLabelProps} from './CounterLabel' -export {default as Details} from './Details' -export type {DetailsProps} from './Details' -export {default as Dialog} from './Dialog' -export type {DialogProps, DialogHeaderProps} from './Dialog' -export type {ConfirmationDialogProps} from './Dialog/ConfirmationDialog' -export {ConfirmationDialog} from './Dialog/ConfirmationDialog' -export {default as FilteredSearch} from './FilteredSearch' -export type {FilteredSearchProps} from './FilteredSearch' -export {default as FilterList} from './FilterList' -export type {FilterListProps, FilterListItemProps} from './FilterList' -export {default as Flash} from './Flash' -export type {FlashProps} from './Flash' +export {default as BranchName} from './BranchName/BranchName' +export type {BranchNameProps} from './BranchName/BranchName' +export {default as Breadcrumbs, Breadcrumb} from './Breadcrumbs/Breadcrumbs' +export type { + BreadcrumbsProps, + BreadcrumbsItemProps, + BreadcrumbProps, + BreadcrumbItemProps, +} from './Breadcrumbs/Breadcrumbs' +export {default as ButtonGroup} from './ButtonGroup/ButtonGroup' +export type {ButtonGroupProps} from './ButtonGroup/ButtonGroup' +export {default as Caret} from './Caret/Caret' +export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge/CircleBadge' +export {default as CircleOcticon} from './CircleOcticon/CircleOcticon' +export type {CircleOcticonProps} from './CircleOcticon/CircleOcticon' +export {default as CheckboxGroup} from './CheckboxGroup/CheckboxGroup' +export type {CaretProps} from './Caret/Caret' +export {default as CircleBadge} from './CircleBadge/CircleBadge' +export {default as CounterLabel} from './CounterLabel/CounterLabel' +export type {CounterLabelProps} from './CounterLabel/CounterLabel' +export {default as Details} from './Details/Details' +export type {DetailsProps} from './Details/Details' +export {default as Dialog} from './Dialog/Dialog' +export type {DialogProps, DialogHeaderProps} from './Dialog/Dialog' +export type {ConfirmationDialogProps} from './ConfirmationDialog/ConfirmationDialog' +export {ConfirmationDialog} from './ConfirmationDialog/ConfirmationDialog' +export {default as FilteredSearch} from './FilteredSearch/FilteredSearch' +export type {FilteredSearchProps} from './FilteredSearch/FilteredSearch' +export {default as FilterList} from './FilterList/FilterList' +export type {FilterListProps, FilterListItemProps} from './FilterList/FilterList' +export {default as Flash} from './Flash/Flash' +export type {FlashProps} from './Flash/Flash' export {default as FormControl} from './FormControl' -export {default as Header} from './Header' -export type {HeaderProps, HeaderItemProps, HeaderLinkProps} from './Header' -export {default as Heading} from './Heading' -export type {HeadingProps} from './Heading' +export {default as Header} from './Header/Header' +export type {HeaderProps, HeaderItemProps, HeaderLinkProps} from './Header/Header' +export {default as Heading} from './Heading/Heading' +export type {HeadingProps} from './Heading/Heading' export {default as Label} from './Label' export type {LabelProps} from './Label' -export {default as LabelGroup} from './LabelGroup' -export type {LabelGroupProps} from './LabelGroup' -export {default as Link} from './Link' -export type {LinkProps} from './Link' +export {default as LabelGroup} from './LabelGroup/LabelGroup' +export type {LabelGroupProps} from './LabelGroup/LabelGroup' +export {default as Link} from './Link/Link' +export type {LinkProps} from './Link/Link' export {NavList} from './NavList' export type { NavListProps, @@ -115,69 +120,69 @@ export type { NavListTrailingVisualProps, NavListDividerProps, } from './NavList' -export {default as Overlay} from './Overlay' -export type {OverlayProps} from './Overlay' -export {default as Pagehead} from './Pagehead' -export type {PageheadProps} from './Pagehead' +export {default as Overlay} from './Overlay/Overlay' +export type {OverlayProps} from './Overlay/Overlay' +export {default as Pagehead} from './Pagehead/Pagehead' +export type {PageheadProps} from './Pagehead/Pagehead' export {default as Pagination} from './Pagination' export type {PaginationProps} from './Pagination' -export {default as PointerBox} from './PointerBox' -export type {PointerBoxProps} from './PointerBox' -export {default as Popover} from './Popover' -export type {PopoverProps, PopoverContentProps} from './Popover' +export {default as PointerBox} from './PointerBox/PointerBox' +export type {PointerBoxProps} from './PointerBox/PointerBox' +export {default as Popover} from './Popover/Popover' +export type {PopoverProps, PopoverContentProps} from './Popover/Popover' export {default as Portal, registerPortalRoot} from './Portal' export type {PortalProps} from './Portal' -export {default as ProgressBar} from './ProgressBar' -export type {ProgressBarProps} from './ProgressBar' -export {default as RadioGroup} from './RadioGroup' +export {default as ProgressBar} from './ProgressBar/ProgressBar' +export type {ProgressBarProps} from './ProgressBar/ProgressBar' +export {default as RadioGroup} from './RadioGroup/RadioGroup' export type {RelativeTimeProps} from './RelativeTime' export {default as RelativeTime} from './RelativeTime' export {SegmentedControl} from './SegmentedControl' -export {default as Select} from './Select' -export type {SelectProps} from './Select' +export {default as Select} from './Select/Select' +export type {SelectProps} from './Select/Select' export {SelectPanel} from './SelectPanel' export type {SelectPanelProps} from './SelectPanel' -export {default as SideNav} from './SideNav' -export type {SideNavProps, SideNavLinkProps} from './SideNav' -export {default as Spinner} from './Spinner' -export type {SpinnerProps} from './Spinner' -export {default as StateLabel} from './StateLabel' -export type {StateLabelProps} from './StateLabel' -export {default as StyledOcticon} from './StyledOcticon' -export type {StyledOcticonProps} from './StyledOcticon' -export {default as SubNav} from './SubNav' -export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav' -export {default as ToggleSwitch} from './ToggleSwitch' -export {default as TabNav} from './TabNav' -export type {TabNavProps, TabNavLinkProps} from './TabNav' -export {default as TextInput} from './TextInput' -export type {TextInputProps} from './TextInput' -export {default as TextInputWithTokens} from './TextInputWithTokens' -export type {TextInputWithTokensProps} from './TextInputWithTokens' -export {default as Text} from './Text' -export type {TextProps} from './Text' -export {default as Timeline} from './Timeline' +export {default as SideNav} from './SideNav/SideNav' +export type {SideNavProps, SideNavLinkProps} from './SideNav/SideNav' +export {default as Spinner} from './Spinner/Spinner' +export type {SpinnerProps} from './Spinner/Spinner' +export {default as StateLabel} from './StateLabel/StateLabel' +export type {StateLabelProps} from './StateLabel/StateLabel' +export {default as StyledOcticon} from './StyledOcticon/StyledOcticon' +export type {StyledOcticonProps} from './StyledOcticon/StyledOcticon' +export {default as SubNav} from './SubNav/SubNav' +export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav/SubNav' +export {default as ToggleSwitch} from './ToggleSwitch/ToggleSwitch' +export {default as TabNav} from './TabNav/TabNav' +export type {TabNavProps, TabNavLinkProps} from './TabNav/TabNav' +export {default as TextInput} from './TextInput/TextInput' +export type {TextInputProps} from './TextInput/TextInput' +export {default as TextInputWithTokens} from './TextInputWithTokens/TextInputWithTokens' +export type {TextInputWithTokensProps} from './TextInputWithTokens/TextInputWithTokens' +export {default as Text} from './Text/Text' +export type {TextProps} from './Text/Text' +export {default as Timeline} from './Timeline/Timeline' export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps, -} from './Timeline' +} from './Timeline/Timeline' export {default as Token, IssueLabelToken, AvatarToken} from './Token' export type {TokenProps} from './Token' -export {default as Tooltip} from './Tooltip' -export type {TooltipProps} from './Tooltip' -export {default as Truncate} from './Truncate' -export type {TruncateProps} from './Truncate' -export {default as UnderlineNav} from './UnderlineNav' -export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav' +export {default as Tooltip} from './Tooltip/Tooltip' +export type {TooltipProps} from './Tooltip/Tooltip' +export {default as Truncate} from './Truncate/Truncate' +export type {TruncateProps} from './Truncate/Truncate' +export {default as UnderlineNav} from './UnderlineNav/UnderlineNav' +export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav/UnderlineNav' -export {default as Checkbox} from './Checkbox' -export type {CheckboxProps} from './Checkbox' +export {default as Checkbox} from './Checkbox/Checkbox' +export type {CheckboxProps} from './Checkbox/Checkbox' -export {default as Textarea} from './Textarea' -export type {TextareaProps} from './Textarea' +export {default as Textarea} from './Textarea/Textarea' +export type {TextareaProps} from './Textarea/Textarea' export {UnderlineNav as UnderlineNav2} from './UnderlineNav2' diff --git a/src/_InputCaption.tsx b/src/private/_InputCaption.tsx similarity index 89% rename from src/_InputCaption.tsx rename to src/private/_InputCaption.tsx index 54fab427c9d..c525f7f7518 100644 --- a/src/_InputCaption.tsx +++ b/src/private/_InputCaption.tsx @@ -1,6 +1,6 @@ import React from 'react' -import Text from './Text' -import {SxProp} from './sx' +import Text from '../Text/Text' +import {SxProp} from '../sx' type Props = { /** diff --git a/src/_InputLabel.tsx b/src/private/_InputLabel.tsx similarity index 91% rename from src/_InputLabel.tsx rename to src/private/_InputLabel.tsx index 3023b9c29c8..28c331857fa 100644 --- a/src/_InputLabel.tsx +++ b/src/private/_InputLabel.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box from './Box' -import {SxProp} from './sx' -import VisuallyHidden from './_VisuallyHidden' +import Box from '../Box/Box' +import {SxProp} from '../sx' +import VisuallyHidden from '../private/_VisuallyHidden' type BaseProps = SxProp & { disabled?: boolean diff --git a/src/_InputValidation.tsx b/src/private/_InputValidation.tsx similarity index 89% rename from src/_InputValidation.tsx rename to src/private/_InputValidation.tsx index 8db0185ccd7..20c90b0e535 100644 --- a/src/_InputValidation.tsx +++ b/src/private/_InputValidation.tsx @@ -1,9 +1,9 @@ import {AlertFillIcon, CheckCircleFillIcon, IconProps} from '@primer/octicons-react' import React from 'react' -import Box from './Box' -import Text from './Text' -import {SxProp} from './sx' -import {FormValidationStatus} from './utils/types/FormValidationStatus' +import Box from '../Box/Box' +import Text from '../Text/Text' +import {SxProp} from '../sx' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' type Props = { id: string diff --git a/src/_TextInputInnerAction.tsx b/src/private/_TextInputInnerAction.tsx similarity index 94% rename from src/_TextInputInnerAction.tsx rename to src/private/_TextInputInnerAction.tsx index fe2834eda8e..1a276de8a65 100644 --- a/src/_TextInputInnerAction.tsx +++ b/src/private/_TextInputInnerAction.tsx @@ -1,9 +1,9 @@ import React, {forwardRef} from 'react' import {IconProps} from '@primer/octicons-react' -import Box from './Box' -import {Button, IconButton, ButtonProps} from './Button' -import Tooltip from './Tooltip' -import {BetterSystemStyleObject, merge, SxProp} from './sx' +import Box from '../Box/Box' +import {Button, IconButton, ButtonProps} from '../Button' +import Tooltip from '../Tooltip/Tooltip' +import {BetterSystemStyleObject, merge, SxProp} from '../sx' type TextInputActionProps = Omit, 'aria-label' | 'size'> & { /** @deprecated Text input action buttons should only use icon buttons */ diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/private/_TextInputInnerVisualSlot.tsx similarity index 91% rename from src/_TextInputInnerVisualSlot.tsx rename to src/private/_TextInputInnerVisualSlot.tsx index 90c6635ac11..40476719d0f 100644 --- a/src/_TextInputInnerVisualSlot.tsx +++ b/src/private/_TextInputInnerVisualSlot.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box from './Box' -import Spinner from './Spinner' -import {TextInputNonPassthroughProps} from './TextInput' +import Box from '../Box/Box' +import Spinner from '../Spinner/Spinner' +import {TextInputNonPassthroughProps} from '../TextInput/TextInput' const TextInputInnerVisualSlot: React.FC< React.PropsWithChildren<{ diff --git a/src/_TextInputWrapper.tsx b/src/private/_TextInputWrapper.tsx similarity index 97% rename from src/_TextInputWrapper.tsx rename to src/private/_TextInputWrapper.tsx index 5af6ff7d396..bbeb4195bbe 100644 --- a/src/_TextInputWrapper.tsx +++ b/src/private/_TextInputWrapper.tsx @@ -1,8 +1,8 @@ import styled, {css} from 'styled-components' import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {FormValidationStatus} from './utils/types/FormValidationStatus' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' export type TextInputSizes = 'small' | 'medium' | 'large' diff --git a/src/_UnstyledTextInput.tsx b/src/private/_UnstyledTextInput.tsx similarity index 93% rename from src/_UnstyledTextInput.tsx rename to src/private/_UnstyledTextInput.tsx index f6819e44780..5c818505975 100644 --- a/src/_UnstyledTextInput.tsx +++ b/src/private/_UnstyledTextInput.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import sx from './sx' +import sx from '../sx' const UnstyledTextInput = styled.input` border: 0; diff --git a/src/_ValidationAnimationContainer.tsx b/src/private/_ValidationAnimationContainer.tsx similarity index 97% rename from src/_ValidationAnimationContainer.tsx rename to src/private/_ValidationAnimationContainer.tsx index c774600a57e..dd00cd564cf 100644 --- a/src/_ValidationAnimationContainer.tsx +++ b/src/private/_ValidationAnimationContainer.tsx @@ -1,6 +1,6 @@ import React, {HTMLProps, useEffect, useState} from 'react' import styled, {keyframes, css} from 'styled-components' -import Box from './Box' +import Box from '../Box/Box' interface Props extends HTMLProps { show?: boolean diff --git a/src/_VisuallyHidden.tsx b/src/private/_VisuallyHidden.tsx similarity index 93% rename from src/_VisuallyHidden.tsx rename to src/private/_VisuallyHidden.tsx index bc9dd624356..3b450745690 100644 --- a/src/_VisuallyHidden.tsx +++ b/src/private/_VisuallyHidden.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import sx, {SxProp} from './sx' +import sx, {SxProp} from '../sx' interface Props { isVisible?: boolean diff --git a/src/_getGlobalFocusStyles.ts b/src/private/_getGlobalFocusStyles.ts similarity index 95% rename from src/_getGlobalFocusStyles.ts rename to src/private/_getGlobalFocusStyles.ts index e3969bdd81d..59821b78772 100644 --- a/src/_getGlobalFocusStyles.ts +++ b/src/private/_getGlobalFocusStyles.ts @@ -1,6 +1,6 @@ import {CSSProperties} from 'react' import {css} from 'styled-components' -import {get} from './constants' +import {get} from '../constants' const globalFocusStyle = css` box-shadow: none; diff --git a/src/_sharedCheckboxAndRadioStyles.ts b/src/private/_sharedCheckboxAndRadioStyles.ts similarity index 94% rename from src/_sharedCheckboxAndRadioStyles.ts rename to src/private/_sharedCheckboxAndRadioStyles.ts index e461543a897..8de00e30d04 100644 --- a/src/_sharedCheckboxAndRadioStyles.ts +++ b/src/private/_sharedCheckboxAndRadioStyles.ts @@ -1,5 +1,5 @@ import {css} from 'styled-components' -import {get} from './constants' +import {get} from '../constants' export const sharedCheckboxAndRadioStyles = css` appearance: none; diff --git a/src/stories/ButtonGroup.stories.tsx b/src/stories/ButtonGroup.stories.tsx index 49441d55c37..9b84e390f93 100644 --- a/src/stories/ButtonGroup.stories.tsx +++ b/src/stories/ButtonGroup.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import {Story, Meta} from '@storybook/react' -import ButtonGroup from '../ButtonGroup' +import ButtonGroup from '../ButtonGroup/ButtonGroup' import {Button, ButtonProps} from '../Button' export default { diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/stories/ConfirmationDialog.stories.tsx index 6f5668a4b32..ac32a27d330 100644 --- a/src/stories/ConfirmationDialog.stories.tsx +++ b/src/stories/ConfirmationDialog.stories.tsx @@ -2,9 +2,9 @@ import React, {useState, useRef, useCallback} from 'react' import {Meta} from '@storybook/react' import {BaseStyles, Box, ThemeProvider, useTheme} from '..' import {Button} from '../Button' -import {ActionMenu} from '../ActionMenu' +import {ActionMenu} from '../ActionMenu/ActionMenu' import {ActionList} from '../ActionList' -import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog' +import {ConfirmationDialog, useConfirm} from '../ConfirmationDialog/ConfirmationDialog' export default { title: 'Components/ConfirmationDialog', diff --git a/src/stories/Dialog.stories.tsx b/src/stories/Dialog.stories.tsx index 9dab6838f5a..ba8a53c6c76 100644 --- a/src/stories/Dialog.stories.tsx +++ b/src/stories/Dialog.stories.tsx @@ -3,7 +3,7 @@ import {Meta} from '@storybook/react' import {BaseStyles, ThemeProvider, Box} from '..' import {Button} from '../Button' -import {Dialog, DialogProps, DialogWidth, DialogHeight} from '../Dialog/Dialog' +import {Dialog, DialogProps, DialogWidth, DialogHeight} from '../ConfirmationDialog/Dialog' export default { title: 'Components/Dialog', diff --git a/src/stories/IssueLabelToken.stories.tsx b/src/stories/IssueLabelToken.stories.tsx index e5f2d59cca7..39fd43b8f52 100644 --- a/src/stories/IssueLabelToken.stories.tsx +++ b/src/stories/IssueLabelToken.stories.tsx @@ -4,9 +4,9 @@ import {action} from '@storybook/addon-actions' import {get} from '../constants' import {BaseStyles, ThemeProvider} from '..' -import Box from '../Box' +import Box from '../Box/Box' import IssueLabelToken, {IssueLabelTokenProps} from '../Token/IssueLabelToken' -import Text from '../Text' +import Text from '../Text/Text' export default { title: 'Components/IssueLabelToken', diff --git a/src/stories/Link.stories.tsx b/src/stories/Link.stories.tsx index bd77ca668ff..a9ffbd049e7 100644 --- a/src/stories/Link.stories.tsx +++ b/src/stories/Link.stories.tsx @@ -1,4 +1,4 @@ -import Link from '../Link' +import Link from '../Link/Link' import {Meta} from '@storybook/react' import React from 'react' import {ThemeProvider} from '..' diff --git a/src/stories/ProfileToken.stories.tsx b/src/stories/ProfileToken.stories.tsx index 3153ed18c38..78341fe5d26 100644 --- a/src/stories/ProfileToken.stories.tsx +++ b/src/stories/ProfileToken.stories.tsx @@ -4,9 +4,9 @@ import {action} from '@storybook/addon-actions' import {get} from '../constants' import {BaseStyles, ThemeProvider} from '..' -import Box from '../Box' +import Box from '../Box/Box' import AvatarToken, {AvatarTokenProps} from '../Token/AvatarToken' -import Text from '../Text' +import Text from '../Text/Text' export default { title: 'Components/AvatarToken', diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx index 2dd637c1e50..8e60ac367b8 100644 --- a/src/stories/Select.stories.tsx +++ b/src/stories/Select.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Meta} from '@storybook/react' import {Select, FormControl, Box} from '..' -import {SelectProps} from '../Select' +import {SelectProps} from '../Select/Select' import { FormControlArgs, formControlArgs, diff --git a/src/stories/SelectPanel.stories.tsx b/src/stories/SelectPanel.stories.tsx index 9cbb97a008d..80674a0f481 100644 --- a/src/stories/SelectPanel.stories.tsx +++ b/src/stories/SelectPanel.stories.tsx @@ -1,13 +1,13 @@ -import type {OverlayProps} from '../Overlay' +import type {OverlayProps} from '../Overlay/Overlay' import {Meta} from '@storybook/react' import React, {useRef, useState} from 'react' import {theme, ThemeProvider} from '..' import {Button} from '../Button' import {TriangleDownIcon} from '@primer/octicons-react' import {ItemInput} from '../deprecated/ActionList/List' -import BaseStyles from '../BaseStyles' +import BaseStyles from '../BaseStyles/BaseStyles' import {SelectPanel} from '../SelectPanel' -import Box from '../Box' +import Box from '../Box/Box' const meta: Meta = { title: 'Components/SelectPanel', diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx index 60e3df51e22..4a9ba2c3f43 100644 --- a/src/stories/TextInput.stories.tsx +++ b/src/stories/TextInput.stories.tsx @@ -2,7 +2,7 @@ import React, {useState} from 'react' import {Meta} from '@storybook/react' import {BaseStyles, Box, ThemeProvider, FormControl} from '..' -import TextInput, {TextInputProps} from '../TextInput' +import TextInput, {TextInputProps} from '../TextInput/TextInput' import {CalendarIcon, CheckIcon, XCircleFillIcon} from '@primer/octicons-react' import { FormControlArgs, diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx index e0fd5bedac6..f80834b0591 100644 --- a/src/stories/TextInputWithTokens.stories.tsx +++ b/src/stories/TextInputWithTokens.stories.tsx @@ -3,7 +3,7 @@ import {Meta} from '@storybook/react' import {CheckIcon, NumberIcon} from '@primer/octicons-react' import {BaseStyles, Box, FormControl, ThemeProvider} from '..' -import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens' +import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens/TextInputWithTokens' import IssueLabelToken from '../Token/IssueLabelToken' import { FormControlArgs, diff --git a/src/stories/Textarea.stories.tsx b/src/stories/Textarea.stories.tsx index 2c71c08edcb..d00d03351fb 100644 --- a/src/stories/Textarea.stories.tsx +++ b/src/stories/Textarea.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Meta} from '@storybook/react' import {BaseStyles, Box, FormControl, Textarea, TextareaProps, ThemeProvider} from '..' -import {DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS} from '../Textarea' +import {DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS} from '../Textarea/Textarea' import { FormControlArgs, formControlArgTypes, diff --git a/src/stories/ThemeProvider.stories.tsx b/src/stories/ThemeProvider.stories.tsx index 96826200296..cd4863b20ff 100644 --- a/src/stories/ThemeProvider.stories.tsx +++ b/src/stories/ThemeProvider.stories.tsx @@ -2,7 +2,7 @@ import React from 'react' import {Meta, Story} from '@storybook/react' import {ThemeProvider, BaseStyles, Box, themeGet, useTheme} from '..' -import {ThemeProviderProps} from '../ThemeProvider' +import {ThemeProviderProps} from '../ThemeProvider/ThemeProvider' import {createGlobalStyle} from 'styled-components' export default { diff --git a/src/stories/Token.stories.tsx b/src/stories/Token.stories.tsx index aa37e66535f..f7ce840d57f 100644 --- a/src/stories/Token.stories.tsx +++ b/src/stories/Token.stories.tsx @@ -4,9 +4,9 @@ import {action} from '@storybook/addon-actions' import {get} from '../constants' import {BaseStyles, ThemeProvider} from '..' -import Box from '../Box' +import Box from '../Box/Box' import Token, {TokenProps} from '../Token/Token' -import Text from '../Text' +import Text from '../Text/Text' import {GitBranchIcon} from '@primer/octicons-react' export default { diff --git a/src/stories/Tooltip.stories.tsx b/src/stories/Tooltip.stories.tsx index 316b0f469b3..347070fd150 100644 --- a/src/stories/Tooltip.stories.tsx +++ b/src/stories/Tooltip.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta} from '@storybook/react' import {BaseStyles, ThemeProvider, IconButton} from '..' -import Box from '../Box' -import Tooltip from '../Tooltip' +import Box from '../Box/Box' +import Tooltip from '../Tooltip/Tooltip' import {SearchIcon} from '@primer/octicons-react' export default { diff --git a/src/stories/deprecated/ActionList.stories.tsx b/src/stories/deprecated/ActionList.stories.tsx index ac33aeff3ef..baaab6c762d 100644 --- a/src/stories/deprecated/ActionList.stories.tsx +++ b/src/stories/deprecated/ActionList.stories.tsx @@ -17,7 +17,7 @@ import styled from 'styled-components' import {Label, ThemeProvider} from '../..' import {ActionList as _ActionList} from '../../deprecated/ActionList' import {Header} from '../../deprecated/ActionList/Header' -import BaseStyles from '../../BaseStyles' +import BaseStyles from '../../BaseStyles/BaseStyles' import sx from '../../sx' const ActionList = Object.assign(_ActionList, { diff --git a/src/stories/deprecated/ActionMenu.stories.tsx b/src/stories/deprecated/ActionMenu.stories.tsx index f6ee3578781..9c4c6b92967 100644 --- a/src/stories/deprecated/ActionMenu.stories.tsx +++ b/src/stories/deprecated/ActionMenu.stories.tsx @@ -14,10 +14,10 @@ import {Meta} from '@storybook/react' import React, {useCallback, useState, useRef} from 'react' import styled from 'styled-components' import {ThemeProvider} from '../..' -import Link, {LinkProps} from '../../Link' +import Link, {LinkProps} from '../../Link/Link' import {ActionMenu, ActionMenuProps, ActionList, DropdownButton, Button} from '../../deprecated' import {ItemProps} from '../../deprecated/ActionList' -import BaseStyles from '../../BaseStyles' +import BaseStyles from '../../BaseStyles/BaseStyles' const meta: Meta = { title: 'Deprecated components/ActionMenu', diff --git a/src/stories/deprecated/DropdownMenu.stories.tsx b/src/stories/deprecated/DropdownMenu.stories.tsx index 2e59c64daba..48da46bf07e 100644 --- a/src/stories/deprecated/DropdownMenu.stories.tsx +++ b/src/stories/deprecated/DropdownMenu.stories.tsx @@ -2,10 +2,10 @@ import {Meta} from '@storybook/react' import React from 'react' import {theme, ThemeProvider} from '../..' import {ItemInput} from '../../deprecated/ActionList/List' -import BaseStyles from '../../BaseStyles' -import Box from '../../Box' +import BaseStyles from '../../BaseStyles/BaseStyles' +import Box from '../../Box/Box' import {DropdownMenu, DropdownButton} from '../../deprecated' -import TextInput from '../../TextInput' +import TextInput from '../../TextInput/TextInput' const meta: Meta = { title: 'Deprecated components/DropdownMenu', diff --git a/src/stories/useFocusZone.stories.tsx b/src/stories/useFocusZone.stories.tsx index b6fcd51077e..3c4c8c592f9 100644 --- a/src/stories/useFocusZone.stories.tsx +++ b/src/stories/useFocusZone.stories.tsx @@ -7,7 +7,7 @@ import {FocusKeys} from '@primer/behaviors' import type {Direction} from '@primer/behaviors' import {themeGet} from '@styled-system/theme-get' import {useFocusZone} from '../hooks/useFocusZone' -import {useTheme} from '../ThemeProvider' +import {useTheme} from '../ThemeProvider/ThemeProvider' export default { title: 'Hooks/useFocusZone',