diff --git a/docs/content/Overlay.mdx b/docs/content/Overlay.mdx index 37c3f95416a..44f920ebe4a 100644 --- a/docs/content/Overlay.mdx +++ b/docs/content/Overlay.mdx @@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/Overlay.tsx storybook: '/react/storybook?path=/story/private-components-overlay--dropdown-overlay' --- -import data from '../../src/Overlay.docs.json' +import data from '../../src/Overlay/Overlay.docs.json' ```js import {Overlay} from '@primer/react' diff --git a/generated/components.json b/generated/components.json index 5b0b4a5f931..9d9ceb0a30f 100644 --- a/generated/components.json +++ b/generated/components.json @@ -55,117 +55,6 @@ } ] }, - "overlay": { - "id": "overlay", - "name": "Overlay", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "returnFocusRef", - "type": "React.RefObject", - "defaultValue": "", - "required": true, - "description": "Ref for the element to focus when the `Overlay` is closed." - }, - { - "name": "onClickOutside", - "type": "function", - "defaultValue": "", - "required": true, - "description": "Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`." - }, - { - "name": "onEscape", - "type": "function", - "defaultValue": "", - "required": true, - "description": "Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`." - }, - { - "name": "ignoreClickRefs", - "type": "React.RefObject []", - "defaultValue": "", - "description": "An array of ref objects to ignore clicks on in the onOutsideClick behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the Overlay to prevent the Overlay from being toggled twice." - }, - { - "name": "initialFocusRef", - "type": "React.RefObject", - "defaultValue": "", - "description": "Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused." - }, - { - "name": "width", - "type": "| 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'auto'", - "defaultValue": "'auto'", - "description": "Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`." - }, - { - "name": "height", - "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'auto'", - "defaultValue": "'auto'", - "description": "Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`." - }, - { - "name": "maxHeight", - "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'", - "defaultValue": "", - "description": "Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`." - }, - { - "name": "visibility", - "type": "| 'visible' | 'hidden'", - "defaultValue": "'visible'", - "description": "Sets the visibility of the `Overlay`." - }, - { - "name": "anchorSide", - "type": "| 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right'", - "defaultValue": "", - "description": "If provided, the Overlay will slide into position from the side of the anchor with a brief animation" - }, - { - "name": "top", - "type": "number", - "defaultValue": "0", - "description": "The top CSS property of the Overlay — affects the vertical position." - }, - { - "name": "left", - "type": "number", - "defaultValue": "0", - "description": "The left CSS property of the Overlay — affects the horizontal position." - }, - { - "name": "right", - "type": "number", - "description": "The right CSS property of the Overlay — affects the horizontal position." - }, - { - "name": "bottom", - "type": "number", - "description": "The bottom CSS property of the Overlay — affects the vertical position." - }, - { - "name": "position", - "type": "| 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'", - "defaultValue": "absolute", - "description": "The position CSS property of the Overlay — sets how the Overlay is positioned relative to its Portal" - }, - { - "name": "portalContainerName", - "type": "string", - "defaultValue": "", - "description": "If defined, Overlays will be rendered in the named portal. See also `Portal`." - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [] - }, "styled_octicon": { "id": "styled_octicon", "name": "StyledOcticon", @@ -2435,6 +2324,117 @@ } ] }, + "overlay": { + "id": "overlay", + "name": "Overlay", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "returnFocusRef", + "type": "React.RefObject", + "defaultValue": "", + "required": true, + "description": "Ref for the element to focus when the `Overlay` is closed." + }, + { + "name": "onClickOutside", + "type": "function", + "defaultValue": "", + "required": true, + "description": "Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`." + }, + { + "name": "onEscape", + "type": "function", + "defaultValue": "", + "required": true, + "description": "Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`." + }, + { + "name": "ignoreClickRefs", + "type": "React.RefObject []", + "defaultValue": "", + "description": "An array of ref objects to ignore clicks on in the onOutsideClick behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the Overlay to prevent the Overlay from being toggled twice." + }, + { + "name": "initialFocusRef", + "type": "React.RefObject", + "defaultValue": "", + "description": "Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused." + }, + { + "name": "width", + "type": "| 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'auto'", + "defaultValue": "'auto'", + "description": "Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`." + }, + { + "name": "height", + "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'auto'", + "defaultValue": "'auto'", + "description": "Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`." + }, + { + "name": "maxHeight", + "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'", + "defaultValue": "", + "description": "Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`." + }, + { + "name": "visibility", + "type": "| 'visible' | 'hidden'", + "defaultValue": "'visible'", + "description": "Sets the visibility of the `Overlay`." + }, + { + "name": "anchorSide", + "type": "| 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right'", + "defaultValue": "", + "description": "If provided, the Overlay will slide into position from the side of the anchor with a brief animation" + }, + { + "name": "top", + "type": "number", + "defaultValue": "0", + "description": "The top CSS property of the Overlay — affects the vertical position." + }, + { + "name": "left", + "type": "number", + "defaultValue": "0", + "description": "The left CSS property of the Overlay — affects the horizontal position." + }, + { + "name": "right", + "type": "number", + "description": "The right CSS property of the Overlay — affects the horizontal position." + }, + { + "name": "bottom", + "type": "number", + "description": "The bottom CSS property of the Overlay — affects the vertical position." + }, + { + "name": "position", + "type": "| 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'", + "defaultValue": "absolute", + "description": "The position CSS property of the Overlay — sets how the Overlay is positioned relative to its Portal" + }, + { + "name": "portalContainerName", + "type": "string", + "defaultValue": "", + "description": "If defined, Overlays will be rendered in the named portal. See also `Portal`." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, "drafts_page_header": { "id": "drafts_page_header", "name": "PageHeader", 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/stories/Overlay.stories.tsx b/src/Overlay/Overlay.features.stories.tsx similarity index 100% rename from src/stories/Overlay.stories.tsx rename to src/Overlay/Overlay.features.stories.tsx diff --git a/src/__tests__/Overlay.test.tsx b/src/Overlay/Overlay.test.tsx similarity index 99% rename from src/__tests__/Overlay.test.tsx rename to src/Overlay/Overlay.test.tsx index c51044d00ea..2808aeb0f9e 100644 --- a/src/__tests__/Overlay.test.tsx +++ b/src/Overlay/Overlay.test.tsx @@ -7,7 +7,7 @@ import {axe} from 'jest-axe' import theme from '../theme' import BaseStyles from '../BaseStyles' import {ThemeProvider} from '../ThemeProvider' -import {NestedOverlays, MemexNestedOverlays, MemexIssueOverlay, PositionedOverlays} from '../stories/Overlay.stories' +import {NestedOverlays, MemexNestedOverlays, MemexIssueOverlay, PositionedOverlays} from './Overlay.features.stories' type TestComponentSettings = { initialFocus?: 'button' 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..a5e3693f2d2 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' +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/Overlay/index.ts b/src/Overlay/index.ts new file mode 100644 index 00000000000..646e337036d --- /dev/null +++ b/src/Overlay/index.ts @@ -0,0 +1 @@ +export {default, OverlayProps} from './Overlay'