diff --git a/.changeset/swift-jokes-punch.md b/.changeset/swift-jokes-punch.md new file mode 100644 index 00000000000..993b5c103cc --- /dev/null +++ b/.changeset/swift-jokes-punch.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': minor +'polaris.shopify.com': minor +--- + +Added `LegacyCard` component diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss new file mode 100644 index 00000000000..9948a2a1ee7 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/LegacyCard.scss @@ -0,0 +1,160 @@ +@import '../../styles/common'; + +.LegacyCard { + background-color: var(--p-surface); + box-shadow: var(--p-shadow-card); + outline: var(--p-border-width-1) solid transparent; + + + .LegacyCard { + margin-top: var(--p-space-4); + + @media print { + margin-top: calc(-1 * var(--p-space-2)); + } + } + + @media #{$p-breakpoints-sm-up} { + border-radius: var(--p-border-radius-2); + } + + @media print { + box-shadow: none; + } +} + +.subdued { + background-color: var(--p-surface-subdued); +} + +.Section-hideOnPrint, +.hideOnPrint { + @media print { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY + display: none !important; + } +} + +.Header { + padding: var(--p-space-4) var(--p-space-4) 0; + + @media #{$p-breakpoints-sm-up} { + padding: var(--p-space-5) var(--p-space-5) 0; + } + + @media print and #{$p-breakpoints-sm-up} { + padding: var(--p-space-2) var(--p-space-4) var(--p-space-0); + } +} + +.Section { + padding: var(--p-space-4); + + @media #{$p-breakpoints-sm-up} { + padding: var(--p-space-5); + } + + + .Section { + border-top: var(--p-border-divider); + + @media print { + border-top: 0; + } + } + + @media print { + padding-top: var(--p-space-1); + padding-bottom: var(--p-space-1); + } +} + +.Section:first-child { + border-top-left-radius: var(--p-border-radius-2); + border-top-right-radius: var(--p-border-radius-2); +} + +.Section:last-child { + border-bottom-left-radius: var(--p-border-radius-2); + border-bottom-right-radius: var(--p-border-radius-2); +} + +.Section-fullWidth { + padding: var(--p-space-4) var(--p-space-0); + + @media #{$p-breakpoints-sm-up} { + padding: var(--p-space-5) var(--p-space-0); + } +} + +.Section-flush { + padding: var(--p-space-0); + + @media #{$p-breakpoints-sm-up} { + padding: var(--p-space-0); + } +} + +.Section-subdued { + background-color: var(--p-surface-subdued); + + @media (-ms-high-contrast: active) { + background-color: transparent; + } + + .Header + & { + border-top: var(--p-border-divider); + margin-top: var(--p-space-5); + } +} + +.SectionHeader { + padding-bottom: var(--p-space-2); + + .Section-fullWidth & { + padding-left: var(--p-space-4); + padding-right: var(--p-space-4); + + @media #{$p-breakpoints-sm-up} { + padding-left: var(--p-space-5); + padding-right: var(--p-space-5); + } + } +} + +.Subsection { + + .Subsection { + margin-top: var(--p-space-4); + padding-top: var(--p-space-4); + border-top: var(--p-border-divider); + + @media print { + border-top: 0; + } + } + + @media print { + padding-top: var(--p-space-1); + padding-bottom: var(--p-space-1); + } +} + +.Footer { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY + display: flex; + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY + justify-content: flex-end; + padding: 0 var(--p-space-4) var(--p-space-4); + + @media #{$p-breakpoints-sm-up} { + padding: 0 var(--p-space-5) var(--p-space-5); + } + + &.LeftJustified { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY + justify-content: flex-start; + } + + .Section-subdued + & { + border-top: var(--p-border-divider); + padding: var(--p-space-5); + } +} diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.stories.tsx b/polaris-react/src/components/LegacyCard/LegacyCard.stories.tsx new file mode 100644 index 00000000000..6e11ea18ad9 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/LegacyCard.stories.tsx @@ -0,0 +1,401 @@ +import React from 'react'; +import type {ComponentMeta} from '@storybook/react'; +import { + ActionList, + Button, + ButtonGroup, + LegacyCard, + Icon, + Image, + List, + Popover, + ResourceList, + Stack, + Text, + TextContainer, +} from '@shopify/polaris'; +import {ProductsMajor} from '@shopify/polaris-icons'; + +export default { + component: LegacyCard, +} as ComponentMeta; + +export function Default() { + return ( + +

View a summary of your online store’s performance.

+ + ); +} + +export function WithHeaderActions() { + return ( + +

+ Add variants if this product comes in multiple versions, like different + sizes or colors. +

+ + ); +} + +export function WithFooterActions() { + return ( + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + ); +} + +export function WithMultipleFooterActions() { + return ( + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + ); +} + +export function WithCustomFooterActions() { + return ( + + + +

+ Two-step authentication adds an extra layer of security when logging + in to your account. A special code will be required each time you + log in, ensuring only you can access your account. +

+ + + + + + + + + + ); +} + +export function WithDestructiveFooterAction() { + return ( + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + ); +} + +export function WithMultipleSections() { + return ( + + +

View a summary of your online store’s performance.

+ + + +

+ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +

+ + + ); +} + +export function WithMultipleTitledSections() { + return ( + + +

View a summary of your online store’s performance.

+ + + +

+ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +

+ + + ); +} + +export function WithSectionsAndActions() { + return ( + + +

John Smith

+ + +

john.smith@example.com

+ + + ); +} + +export function WithSubsection() { + return ( + + +

John Smith

+ + + + 123 First St +
+ Somewhere +
+ The Universe + + + 123 Second St +
+ Somewhere +
+ The Universe + + + + + A single subsection without a sibling has no visual appearance + + + + ); +} + +export function WithDestructiveAction() { + return ( + + +

John Smith

+ + +

john.smith@example.com

+ + + ); +} + +export function WithASubduedSection() { + return ( + + + + Felix Crafford + Ezequiel Manno + + + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export function WithSubduedForSecondaryContent() { + return ( + + + Felix Crafford + Ezequiel Manno + + + ); +} + +export function WithSeparateHeader() { + return ( + + + + Add account + + } + onClose={() => {}} + > + + + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export function WithCustomReactNodeTitle() { + return ( + + + + + New Products + + + } + > + + Socks + Super Shoes + + + + ); +} + +export function WithAllElements() { + return ( + + + + View Sales + + } + onClose={() => {}} + > + + + + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + + { + const {sales, amount, url} = item; + return ( + + + {sales} + {amount} + + + ); + }} + /> + + + + Payouts + Total Sales By Channel + + + + + The sales reports are available only if your store is on the Shopify + plan or higher. + + + + ); +} + +export function WithFlushedSections() { + return ( + + + a sheet with purple and orange stripes + + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + + ); +} diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.tsx b/polaris-react/src/components/LegacyCard/LegacyCard.tsx new file mode 100644 index 00000000000..1901c90ccaa --- /dev/null +++ b/polaris-react/src/components/LegacyCard/LegacyCard.tsx @@ -0,0 +1,146 @@ +import React from 'react'; + +import {useI18n} from '../../utilities/i18n'; +import {classNames} from '../../utilities/css'; +import {useToggle} from '../../utilities/use-toggle'; +import {WithinContentContext} from '../../utilities/within-content-context'; +import {ButtonGroup} from '../ButtonGroup'; +import type {DisableableAction, ComplexAction} from '../../types'; +import {ActionList} from '../ActionList'; +import {Button, buttonFrom} from '../Button'; +import {Popover} from '../Popover'; + +import {Header, Section, Subsection} from './components'; +import styles from './LegacyCard.scss'; + +export type { + LegacyCardSectionProps, + LegacyCardHeaderProps, + LegacyCardSubsectionProps, +} from './components'; + +export interface LegacyCardProps { + /** Title content for the card */ + title?: React.ReactNode; + /** Inner content of the card */ + children?: React.ReactNode; + /** A less prominent card */ + subdued?: boolean; + /** Auto wrap content in section */ + sectioned?: boolean; + /** Card header actions */ + actions?: DisableableAction[]; + /** Primary action in the card footer */ + primaryFooterAction?: ComplexAction; + /** Secondary actions in the card footer */ + secondaryFooterActions?: ComplexAction[]; + /** The content of the disclosure button rendered when there is more than one secondary footer action */ + secondaryFooterActionsDisclosureText?: string; + /** Alignment of the footer actions on the card, defaults to right */ + footerActionAlignment?: 'right' | 'left'; + /** Allow the card to be hidden when printing */ + hideOnPrint?: boolean; +} + +// TypeScript can't generate types that correctly infer the typing of +// subcomponents so explicitly state the subcomponents in the type definition. +// Letting this be implicit works in this project but fails in projects that use +// generated *.d.ts files. + +export const LegacyCard: React.FunctionComponent & { + Header: typeof Header; + Section: typeof Section; + Subsection: typeof Subsection; +} = function LegacyCard({ + children, + hideOnPrint, + title, + subdued, + sectioned, + actions, + primaryFooterAction, + secondaryFooterActions, + secondaryFooterActionsDisclosureText, + footerActionAlignment = 'right', +}: LegacyCardProps) { + const i18n = useI18n(); + const { + value: secondaryActionsPopoverOpen, + toggle: toggleSecondaryActionsPopoverOpen, + } = useToggle(false); + + const className = classNames( + styles.LegacyCard, + subdued && styles.subdued, + hideOnPrint && styles.hideOnPrint, + ); + + const headerMarkup = + title || actions ?
: null; + + const content = sectioned ?
{children}
: children; + + const primaryFooterActionMarkup = primaryFooterAction + ? buttonFrom(primaryFooterAction, {primary: true}) + : null; + + let secondaryFooterActionsMarkup = null; + if (secondaryFooterActions && secondaryFooterActions.length) { + if (secondaryFooterActions.length === 1) { + secondaryFooterActionsMarkup = buttonFrom(secondaryFooterActions[0]); + } else { + secondaryFooterActionsMarkup = ( + <> + + {secondaryFooterActionsDisclosureText || + i18n.translate('Polaris.Common.more')} + + } + onClose={toggleSecondaryActionsPopoverOpen} + > + + + + ); + } + } + + const footerMarkup = + primaryFooterActionMarkup || secondaryFooterActionsMarkup ? ( +
+ {footerActionAlignment === 'right' ? ( + + {secondaryFooterActionsMarkup} + {primaryFooterActionMarkup} + + ) : ( + + {primaryFooterActionMarkup} + {secondaryFooterActionsMarkup} + + )} +
+ ) : null; + + return ( + +
+ {headerMarkup} + {content} + {footerMarkup} +
+ + ); +}; + +LegacyCard.Header = Header; +LegacyCard.Section = Section; +LegacyCard.Subsection = Subsection; diff --git a/polaris-react/src/components/LegacyCard/components/Header/Header.tsx b/polaris-react/src/components/LegacyCard/components/Header/Header.tsx new file mode 100644 index 00000000000..8a09b602467 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Header/Header.tsx @@ -0,0 +1,41 @@ +import React, {isValidElement} from 'react'; + +import type {DisableableAction} from '../../../../types'; +import {buttonsFrom} from '../../../Button'; +import {ButtonGroup} from '../../../ButtonGroup'; +import {Stack} from '../../../Stack'; +import {Text} from '../../../Text'; +import styles from '../../LegacyCard.scss'; + +export interface LegacyCardHeaderProps { + title?: React.ReactNode; + actions?: DisableableAction[]; + children?: React.ReactNode; +} + +export function Header({children, title, actions}: LegacyCardHeaderProps) { + const actionMarkup = actions ? ( + {buttonsFrom(actions, {plain: true})} + ) : null; + + const titleMarkup = isValidElement(title) ? ( + title + ) : ( + + {title} + + ); + + const headingMarkup = + actionMarkup || children ? ( + + {titleMarkup} + {actionMarkup} + {children} + + ) : ( + titleMarkup + ); + + return
{headingMarkup}
; +} diff --git a/polaris-react/src/components/LegacyCard/components/Header/index.ts b/polaris-react/src/components/LegacyCard/components/Header/index.ts new file mode 100644 index 00000000000..266dec8a1bc --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Header/index.ts @@ -0,0 +1 @@ +export * from './Header'; diff --git a/polaris-react/src/components/LegacyCard/components/Header/tests/Header.test.tsx b/polaris-react/src/components/LegacyCard/components/Header/tests/Header.test.tsx new file mode 100644 index 00000000000..6449674f507 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Header/tests/Header.test.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import {mountWithApp} from 'tests/utilities'; + +import {buttonsFrom} from '../../../../Button'; +import {ButtonGroup} from '../../../../ButtonGroup'; +import {Text} from '../../../../Text'; +import {Header} from '../Header'; + +jest.mock('../../../../Button', () => ({ + ...(jest.requireActual('../../../../Button') as any), + buttonsFrom: jest.fn(), +})); + +const buttonsFromMock = buttonsFrom as jest.Mock; + +describe('
', () => { + describe('title', () => { + it('renders a heading when defined', () => { + const header = mountWithApp(
); + expect(header).toContainReactComponent(Text, {variant: 'headingMd'}); + }); + + it('renders the title directly if its a valid React element', () => { + const title =
Staff accounts
; + const header = mountWithApp(
); + expect(header).not.toContainReactComponent(Text, {variant: 'headingLg'}); + expect(header).toContainReactComponent('div', { + children: 'Staff accounts', + }); + }); + + it('is used as the content for the heading', () => { + const title = 'Staff accounts'; + const header = mountWithApp(
); + expect(header.find(Text, {variant: 'headingMd'})).toContainReactText( + title, + ); + }); + }); + + describe('actions', () => { + const mockActions = [{content: 'Preview'}]; + + it('renders a button group when defined', () => { + const header = mountWithApp(
); + expect(header).toContainReactComponent(ButtonGroup); + }); + + it('renders buttons for each action', () => { + mountWithApp(
); + expect(buttonsFromMock).toHaveBeenCalledWith( + mockActions, + expect.anything(), + ); + }); + + it('does not render a button group when not defined', () => { + const header = mountWithApp(
); + expect(header).not.toContainReactComponent(ButtonGroup); + }); + }); + + describe('children', () => { + it('renders when defined', () => { + const Children = () =>
Hello!
; + const header = mountWithApp( +
+ +
, + ); + expect(header).toContainReactComponent(Children); + }); + }); +}); diff --git a/polaris-react/src/components/LegacyCard/components/Section/Section.tsx b/polaris-react/src/components/LegacyCard/components/Section/Section.tsx new file mode 100644 index 00000000000..426e3ca9e39 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Section/Section.tsx @@ -0,0 +1,72 @@ +import React from 'react'; + +import {classNames} from '../../../../utilities/css'; +import type {ComplexAction} from '../../../../types'; +import {buttonsFrom} from '../../../Button'; +import {Stack} from '../../../Stack'; +import {ButtonGroup} from '../../../ButtonGroup'; +import {Text} from '../../../Text'; +import styles from '../../LegacyCard.scss'; + +export interface LegacyCardSectionProps { + title?: React.ReactNode; + children?: React.ReactNode; + subdued?: boolean; + flush?: boolean; + fullWidth?: boolean; + /** Allow the card to be hidden when printing */ + hideOnPrint?: boolean; + actions?: ComplexAction[]; +} + +export function Section({ + children, + title, + subdued, + flush, + fullWidth, + actions, + hideOnPrint, +}: LegacyCardSectionProps) { + const className = classNames( + styles.Section, + flush && styles['Section-flush'], + subdued && styles['Section-subdued'], + fullWidth && styles['Section-fullWidth'], + hideOnPrint && styles['Section-hideOnPrint'], + ); + + const actionMarkup = actions ? ( + {buttonsFrom(actions, {plain: true})} + ) : null; + + const titleMarkup = + typeof title === 'string' ? ( + + {title} + + ) : ( + title + ); + + const titleAreaMarkup = + titleMarkup || actionMarkup ? ( +
+ {actionMarkup ? ( + + {titleMarkup} + {actionMarkup} + + ) : ( + titleMarkup + )} +
+ ) : null; + + return ( +
+ {titleAreaMarkup} + {children} +
+ ); +} diff --git a/polaris-react/src/components/LegacyCard/components/Section/index.ts b/polaris-react/src/components/LegacyCard/components/Section/index.ts new file mode 100644 index 00000000000..b524e0f3c49 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Section/index.ts @@ -0,0 +1 @@ +export * from './Section'; diff --git a/polaris-react/src/components/LegacyCard/components/Section/tests/Section.test.tsx b/polaris-react/src/components/LegacyCard/components/Section/tests/Section.test.tsx new file mode 100644 index 00000000000..be63f7cdfdd --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Section/tests/Section.test.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import {mountWithApp} from 'tests/utilities'; + +import {Badge} from '../../../../Badge'; +import {Button} from '../../../../Button'; +import {ButtonGroup} from '../../../../ButtonGroup'; +import {Text} from '../../../../Text'; +import {Section} from '../Section'; + +describe('', () => { + it('can have any valid react element as the card section title', () => { + const titleString = 'Online store'; + const badgeString = 'I am a badge'; + const titleMarkup = ( +

+ {titleString} + {badgeString} +

+ ); + + const section = mountWithApp(
); + const headerMarkup = section.find('h2')!; + + expect(headerMarkup).toContainReactText(titleString); + expect(headerMarkup.find(Badge)).toContainReactText(badgeString); + }); + + it('wraps plain string titles in a ', () => { + const titleString = 'Online store'; + const card = mountWithApp(
); + expect( + card.find(Text, {variant: 'headingSm', as: 'h3'}), + ).toContainReactText(titleString); + }); + + describe('hideWhenPrinting prop', () => { + it('renders classname "Section Section-hideOnPrint" when prop is passed', () => { + const card = mountWithApp(
); + + expect(card).toContainReactComponent('div', { + className: 'Section Section-hideOnPrint', + }); + }); + + it('does not render classname "Section Section-hideOnPrint" when prop is not passed', () => { + const card = mountWithApp(
); + + expect(card).not.toContainReactComponent('div', { + className: 'Section Section-hideOnPrint', + }); + }); + }); + + describe('actions', () => { + const mockActions = [{content: 'Preview'}, {content: 'Open'}]; + + it('renders a button group when defined', () => { + const section = mountWithApp(
); + expect(section).toContainReactComponent(ButtonGroup); + }); + + it('renders buttons for each action', () => { + const section = mountWithApp(
); + expect(section).toContainReactComponentTimes(Button, 2); + }); + + it('does not render a button group when not defined', () => { + const section = mountWithApp(
); + expect(section).not.toContainReactComponent(ButtonGroup); + }); + + it('renders both custom title markup and actions', () => { + const titleString = 'Online store'; + const badgeString = 'I am a badge'; + const titleMarkup = ( +

+ {titleString} + {badgeString} +

+ ); + const section = mountWithApp( +
, + ); + expect(section).toContainReactComponentTimes(Button, 2); + expect(section).toContainReactText(titleString); + expect(section.find(Badge)).toContainReactText(badgeString); + }); + }); +}); diff --git a/polaris-react/src/components/LegacyCard/components/Subsection/Subsection.tsx b/polaris-react/src/components/LegacyCard/components/Subsection/Subsection.tsx new file mode 100644 index 00000000000..c72f6b5ef35 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Subsection/Subsection.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import styles from '../../LegacyCard.scss'; + +export interface LegacyCardSubsectionProps { + children?: React.ReactNode; +} + +export function Subsection({children}: LegacyCardSubsectionProps) { + return
{children}
; +} diff --git a/polaris-react/src/components/LegacyCard/components/Subsection/index.ts b/polaris-react/src/components/LegacyCard/components/Subsection/index.ts new file mode 100644 index 00000000000..cddeba60629 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Subsection/index.ts @@ -0,0 +1 @@ +export * from './Subsection'; diff --git a/polaris-react/src/components/LegacyCard/components/Subsection/tests/Subsection.test.tsx b/polaris-react/src/components/LegacyCard/components/Subsection/tests/Subsection.test.tsx new file mode 100644 index 00000000000..36a1fb6e496 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/Subsection/tests/Subsection.test.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import {mountWithApp} from 'tests/utilities'; + +import {Subsection} from '../Subsection'; + +describe('', () => { + it('can have any valid react element for children', () => { + const childrenMarkup =

Some content

; + + const section = mountWithApp({childrenMarkup}); + + expect(section).toContainReactText('Some content'); + expect(section).toContainReactComponent('p'); + }); +}); diff --git a/polaris-react/src/components/LegacyCard/components/index.ts b/polaris-react/src/components/LegacyCard/components/index.ts new file mode 100644 index 00000000000..194aac47a90 --- /dev/null +++ b/polaris-react/src/components/LegacyCard/components/index.ts @@ -0,0 +1,5 @@ +export * from './Header'; + +export * from './Section'; + +export * from './Subsection'; diff --git a/polaris-react/src/components/LegacyCard/index.ts b/polaris-react/src/components/LegacyCard/index.ts new file mode 100644 index 00000000000..edb8c8e8f6d --- /dev/null +++ b/polaris-react/src/components/LegacyCard/index.ts @@ -0,0 +1 @@ +export * from './LegacyCard'; diff --git a/polaris-react/src/components/LegacyCard/tests/LegacyCard.test.tsx b/polaris-react/src/components/LegacyCard/tests/LegacyCard.test.tsx new file mode 100644 index 00000000000..e923f4b14ed --- /dev/null +++ b/polaris-react/src/components/LegacyCard/tests/LegacyCard.test.tsx @@ -0,0 +1,252 @@ +import React from 'react'; +import {mountWithApp} from 'tests/utilities'; + +import {Badge} from '../../Badge'; +import {Button} from '../../Button'; +import {Popover} from '../../Popover'; +import {ActionList} from '../../ActionList'; +import {WithinContentContext} from '../../../utilities/within-content-context'; +import {LegacyCard} from '../LegacyCard'; +import {Section} from '../components'; + +describe('', () => { + it('has a child with prop withinContentContainer set to true', () => { + function TestComponent(_: {withinContentContainer: any}) { + return null; + } + + const legacyCard = mountWithApp( + + + {(withinContentContext) => { + return ( + + ); + }} + + , + ); + expect(legacyCard).toContainReactComponent(TestComponent, { + withinContentContainer: true, + }); + }); + + it('has a header tag when the title is a string', () => { + const title = 'Online store'; + const legacyCard = mountWithApp(); + expect(legacyCard.find('h2')).toContainReactText(title); + }); + + it('can have any valid react element as the title', () => { + const titleString = 'Online store'; + const badgeString = 'I am a badge'; + const titleMarkup = ( +

+ {titleString} + {badgeString} +

+ ); + + const legacyCard = mountWithApp(); + const headerMarkup = legacyCard.find('h2')!; + + expect(headerMarkup).toContainReactText(titleString); + expect(headerMarkup.find(Badge)).toContainReactText(badgeString); + }); + + it('exposes the header component', () => { + const legacyCard = mountWithApp( + + + , + ); + expect(legacyCard).toContainReactComponent(LegacyCard.Header); + }); + + it('renders a
component with actions and no title', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + expect(legacyCard).toContainReactComponent(Button); + expect(legacyCard).toContainReactComponent(LegacyCard.Header); + }); + + describe('footerActionAlignment prop', () => { + it('renders right-aligned if not supplied', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + const buttons = legacyCard.findAll(Button); + expect(buttons[0].prop('children')).toBe('secondary action'); + expect(buttons[1].prop('children')).toBe('primary action'); + }); + + it('renders right-aligned if set to "right"', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + const buttons = legacyCard.findAll(Button); + expect(buttons[0].prop('children')).toBe('secondary action'); + expect(buttons[1].prop('children')).toBe('primary action'); + }); + + it('renders left-aligned if set to "left"', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + const buttons = legacyCard.findAll(Button); + expect(buttons[0].prop('children')).toBe('primary action'); + expect(buttons[1].prop('children')).toBe('secondary action'); + }); + }); + + describe('hideWhenPrinting prop', () => { + it('renders the classname "LegacyCard hideOnPrint" when passed', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + expect(legacyCard).toContainReactComponent('div', { + className: 'LegacyCard hideOnPrint', + }); + }); + + it('does not render the classname "LegacyCard hideOnPrint" when prop is not passed', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + expect(legacyCard).not.toContainReactComponent('div', { + className: 'LegacyCard hideOnPrint', + }); + }); + }); + + it('renders a primary footer action', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + expect(legacyCard).toContainReactComponent(Button, { + children: 'test action', + }); + }); + + describe('secondaryFooterActions', () => { + it('renders a single secondary footer action button when only 1 is supplied', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + expect(legacyCard).toContainReactComponent(Button, { + children: 'test action', + }); + expect(legacyCard).not.toContainReactComponent(Popover); + }); + + it('renders popover when >1 are supplied', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + expect(legacyCard).toContainReactComponent(Button, { + children: 'More', + }); + expect(legacyCard).toContainReactComponent(Popover); + }); + + it('activates popover when disclosure button is clicked', () => { + const footerActions = [ + {content: 'Most important action'}, + {content: 'Second most important action'}, + ]; + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + const disclosureButton = legacyCard.findAll(Button)[0]; + expect(disclosureButton).toContainReactText('More'); + + expect(legacyCard).toContainReactComponent(Popover, { + active: false, + }); + + disclosureButton.trigger('onClick'); + + expect(legacyCard).toContainReactComponent(Popover, { + active: true, + }); + + expect(legacyCard).toContainReactComponent(ActionList, { + items: footerActions, + }); + }); + + it('sets the disclosure button content to the value set on secondaryFooterActionsDisclosureText', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + expect(legacyCard).toContainReactComponent(Button, { + children: 'Show more', + }); + }); + }); + + it('renders a section when sectioned', () => { + const legacyCard = mountWithApp( + +

Some card content.

+ , + ); + + expect(legacyCard.find(Section)).toContainReactText('Some card content.'); + }); +}); diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts index b060ee2fb49..6232c86d92d 100644 --- a/polaris-react/src/index.ts +++ b/polaris-react/src/index.ts @@ -241,6 +241,14 @@ export type {LabelledProps} from './components/Labelled'; export {Layout} from './components/Layout'; export type {LayoutProps} from './components/Layout'; +export {LegacyCard} from './components/LegacyCard'; +export type { + LegacyCardProps, + LegacyCardSectionProps, + LegacyCardHeaderProps, + LegacyCardSubsectionProps, +} from './components/LegacyCard'; + export {Link} from './components/Link'; export type {LinkProps} from './components/Link'; diff --git a/polaris.shopify.com/content/components/legacy-card.md b/polaris.shopify.com/content/components/legacy-card.md new file mode 100644 index 00000000000..d3921c08089 --- /dev/null +++ b/polaris.shopify.com/content/components/legacy-card.md @@ -0,0 +1,233 @@ +--- +title: LegacyCard +description: This is the legacy version of the Card component which is in the process of being updated to a more flexible and composable API. Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to scan, read, and get things done. +category: Structure +keywords: + - layout + - container + - box + - grid + - panel + - card with call to action in the footer + - card with call to action in the heading + - card with call to action in a section + - card with button in the footer + - card with button in the heading + - card with multiple sections + - card with subsections + - sectioned card + - card with a subdued section + - subdued card for secondary content + - callout + - call out + - legacy card +examples: + - fileName: legacy-card-default.tsx + title: Default + description: Use when you have a simple message to communicate to merchants that doesn’t require any secondary steps. + - fileName: legacy-card-with-header-actions.tsx + title: With header actions + description: Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to add items to a card containing a long list, or enter a customer’s new address. + - fileName: legacy-card-with-footer-actions.tsx + title: With footer actions + description: Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card. For example, merchants should review the contents of a shipment before an important action like adding tracking information. Footer actions can be left or right aligned with the `footerActionAlignment` prop. + - fileName: legacy-card-with-multiple-footer-actions.tsx + title: With multiple footer actions + description: When multiple secondary footer actions are provided, they will render in an action list popover activated by a disclosure button. The disclosure button text can be customized with the `secondaryFooterActionsDisclosureText` prop. + - fileName: legacy-card-with-custom-footer-actions.tsx + title: With custom footer actions + description: Use to present actionable content that is optional or not the primary purpose of the page. + - fileName: legacy-card-with-destructive-footer-action.tsx + title: With destructive footer action + description: Use when a card action will delete merchant data or be otherwise difficult to recover from. + - fileName: legacy-card-with-multiple-sections.tsx + title: With multiple sections + description: Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand. + - fileName: legacy-card-with-multiple-titled-sections.tsx + title: With multiple titled sections + description: Use when you have two related but distinct pieces of information to communicate to merchants that are complex enough to require a title to introduce them. + - fileName: legacy-card-with-sections-and-actions.tsx + title: With sections and actions + description: Use when your card section has actions that apply only to that section. + - fileName: legacy-card-with-subsection.tsx + title: With subsection + description: Use when your card sections need further categorization. + - fileName: legacy-card-with-destructive-action.tsx + title: With destructive action + description: Use when a card action applies only to one section and will delete merchant data or be otherwise difficult to recover from. + - fileName: legacy-card-with-a-subdued-section.tsx + title: With a subdued section + description: Use to indicate when one of the sections in your card contains inactive or disabled content. + - fileName: legacy-card-with-subdued-for-secondary-content.tsx + title: With subdued for secondary content + description: Use for content that you want to deprioritize. Subdued cards don’t stand out as much as cards with white backgrounds so don’t use them for information or actions that are critical to merchants. + - fileName: legacy-card-with-separate-header.tsx + title: With separate header + description: Use to be able to use custom React elements as header content. + - fileName: legacy-card-with-custom-react-node-title.tsx + title: With custom React Node title + description: Use to render custom content such as icons, links, or buttons in a card section’s header. + - fileName: legacy-card-with-all-elements.tsx + title: With all elements + description: Use as a broad example that includes most props available to card. + - fileName: legacy-card-with-flushed-sections.tsx + title: With flushed sections + description: Use when you need further control over the spacing of your card sections. +--- + +## Best practices + +Cards should: + +- Use headings that set clear expectations about the card’s purpose +- Prioritize information so the content merchants most need to know comes first +- Stick to single user flows or break more complicated flows into multiple sections +- Avoid too many call-to-action buttons or links and only one primary call to action per card +- Use calls to action on the bottom of the card for next steps and use the space in the upper right corner of the card for persistent, optional actions (such as an Edit link) + +--- + +## Content guidelines + +### Title + +Card titles should follow the content guidelines for [headings and subheadings](https://polaris.shopify.com/content/actionable-language#headings-and-subheadings). + +### Body content + +Body content should be: + +- Actionable: start sentences with imperative verbs when telling merchants what actions are available to them (especially something new). Don’t use permissive language like “you can”. + + + +#### Do + +Get performance for all your sales channels. + +#### Don’t + +Now you can get performance data for all your sales channels. + + + +- Structured for merchant success: always put the most critical information first. +- Clear: use the verb “need” to help merchants understand when they’re required to do something. + + + +#### Do + +To buy a shipping label, you need to enter the total weight of your shipment, including packaging. + +#### Don’t + +To buy a shipping label, you must enter the total weight of your shipment, including packaging. + + + +### Call-to-action button + +Buttons should be: + +- Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive merchants by mislabeling a button. + + + +#### Do + +- Create order +- Buy shipping label + +#### Don’t + +- New order +- Buy + + + +Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK. + + + +#### Do + +- Activate Apple Pay +- View shipping settings + +#### Don’t + +- Try Apple Pay +- View your settings + + + +Scannable: Avoid unnecessary words and articles such as the, an, or a. + + + +#### Do + +Add menu item + +#### Don’t + +Add a menu item + + + +### Section titles + +Section titles should be: + +- Informative: they should label the type of content grouped in the body content below +- Like headings: follow the same content guidelines as when you’re writing headings + +### Action links + +Links should be: + +- Used for secondary or persistent actions: links should be used to represent lower priority actions than buttons, or persistent actions that merchants may take at any time (such as a persistent Edit link). +- Clearly labeled: merchants should not need to guess where they’ll end up if they click on an action link. Never use “click here” as a link because it doesn’t set expectations about what’s next. +- Similar to buttons: Follow the same content guidelines as when you’re writing text for buttons. + +--- + +## Related components + +- To create page-level layout, [use the layout component](https://polaris.shopify.com/components/layout) +- To highlight a Shopify feature, [use the callout card component](https://polaris.shopify.com/components/callout-card) + +--- + +## Accessibility + +The required `title` prop gives the card a level 2 heading (`

`). This helps with readability and provides structure to screen reader users. + +If you use the `subdued` prop on a card or section, make sure that the card or section `title` conveys the reason for using `subdued`. This ensures that merchants with low vision, including those who use screen readers, can identify that the content is inactive or less important. + + + +#### Do + +``` + + + Felix Crafford + Ezequiel Manno + + +``` + +#### Don’t + +``` + + + Felix Crafford + Ezequiel Manno + + +``` + + diff --git a/polaris.shopify.com/pages/examples/legacy-card-default.tsx b/polaris.shopify.com/pages/examples/legacy-card-default.tsx new file mode 100644 index 00000000000..8d632129846 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-default.tsx @@ -0,0 +1,13 @@ +import {LegacyCard} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + +

View a summary of your online store’s performance.

+ + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-a-subdued-section.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-a-subdued-section.tsx new file mode 100644 index 00000000000..9759cd52670 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-a-subdued-section.tsx @@ -0,0 +1,25 @@ +import {LegacyCard, List} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + + Felix Crafford + Ezequiel Manno + + + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx new file mode 100644 index 00000000000..143bbee421d --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-all-elements.tsx @@ -0,0 +1,96 @@ +import { + LegacyCard, + Popover, + Button, + ActionList, + TextContainer, + ResourceList, + Stack, + List, +} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + + View Sales + + } + onClose={() => {}} + > + + + + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + + { + const {sales, amount, url} = item; + return ( + + + {sales} + {amount} + + + ); + }} + /> + + + + Payouts + Total Sales By Channel + + + + + The sales reports are available only if your store is on the Shopify + plan or higher. + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx new file mode 100644 index 00000000000..14d366aab99 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-custom-footer-actions.tsx @@ -0,0 +1,27 @@ +import {LegacyCard, Stack, ButtonGroup, Button} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + +

+ Two-step authentication adds an extra layer of security when logging + in to your account. A special code will be required each time you + log in, ensuring only you can access your account. +

+ + + + + + + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx new file mode 100644 index 00000000000..581a1dc7b50 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx @@ -0,0 +1,28 @@ +import {LegacyCard, Stack, Icon, List, Text} from '@shopify/polaris'; +import {ProductsMajor} from '@shopify/polaris-icons'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + + + New Products + + + } + > + + Socks + Super Shoes + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-destructive-action.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-destructive-action.tsx new file mode 100644 index 00000000000..d9239f6f297 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-destructive-action.tsx @@ -0,0 +1,21 @@ +import {LegacyCard} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + +

John Smith

+ + +

john.smith@example.com

+ + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-destructive-footer-action.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-destructive-footer-action.tsx new file mode 100644 index 00000000000..e1764a43f36 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-destructive-footer-action.tsx @@ -0,0 +1,22 @@ +import {LegacyCard, List} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-flushed-sections.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-flushed-sections.tsx new file mode 100644 index 00000000000..41b9ac3fbfe --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-flushed-sections.tsx @@ -0,0 +1,25 @@ +import {LegacyCard, Image, TextContainer} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + a sheet with purple and orange stripes + + + + You can use sales reports to see information about your customers’ + orders based on criteria such as sales over time, by channel, or by + staff. + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-footer-actions.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-footer-actions.tsx new file mode 100644 index 00000000000..4a935327799 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-footer-actions.tsx @@ -0,0 +1,22 @@ +import {LegacyCard, List} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-header-actions.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-header-actions.tsx new file mode 100644 index 00000000000..d19843f0589 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-header-actions.tsx @@ -0,0 +1,16 @@ +import {LegacyCard} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + +

+ Add variants if this product comes in multiple versions, like different + sizes or colors. +

+ + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-footer-actions.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-multiple-footer-actions.tsx new file mode 100644 index 00000000000..f379d78d55d --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-multiple-footer-actions.tsx @@ -0,0 +1,25 @@ +import {LegacyCard, List} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + + 1 × Oasis Glass, 4-Pack + 1 × Anubis Cup, 2-Pack + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-sections.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-multiple-sections.tsx new file mode 100644 index 00000000000..48c9494a841 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-multiple-sections.tsx @@ -0,0 +1,22 @@ +import {LegacyCard} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + +

View a summary of your online store’s performance.

+ + + +

+ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +

+ + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-multiple-titled-sections.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-multiple-titled-sections.tsx new file mode 100644 index 00000000000..3bc34055d9d --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-multiple-titled-sections.tsx @@ -0,0 +1,22 @@ +import {LegacyCard} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + +

View a summary of your online store’s performance.

+ + + +

+ View a summary of your online store’s performance, including sales, + visitors, top products, and referrals. +

+ + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-sections-and-actions.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-sections-and-actions.tsx new file mode 100644 index 00000000000..f33837498db --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-sections-and-actions.tsx @@ -0,0 +1,21 @@ +import {LegacyCard} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + +

John Smith

+ + +

john.smith@example.com

+ + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-separate-header.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-separate-header.tsx new file mode 100644 index 00000000000..1459b333416 --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-separate-header.tsx @@ -0,0 +1,38 @@ +import {LegacyCard, Popover, Button, ActionList, List} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + + Add account + + } + onClose={() => {}} + > + + + + + + Felix Crafford + Ezequiel Manno + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-subdued-for-secondary-content.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-subdued-for-secondary-content.tsx new file mode 100644 index 00000000000..00f080e4f7b --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-subdued-for-secondary-content.tsx @@ -0,0 +1,16 @@ +import {LegacyCard, List} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + + Felix Crafford + Ezequiel Manno + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-subsection.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-subsection.tsx new file mode 100644 index 00000000000..39f201161bc --- /dev/null +++ b/polaris.shopify.com/pages/examples/legacy-card-with-subsection.tsx @@ -0,0 +1,36 @@ +import {LegacyCard} from '@shopify/polaris'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function LegacyCardExample() { + return ( + + +

John Smith

+ + + + 123 First St +
+ Somewhere +
+ The Universe + + + 123 Second St +
+ Somewhere +
+ The Universe + + + + + A single subsection without a sibling has no visual appearance + + + + ); +} + +export default withPolarisExample(LegacyCardExample); diff --git a/polaris.shopify.com/public/images/components/legacy-card.png b/polaris.shopify.com/public/images/components/legacy-card.png new file mode 100644 index 00000000000..131c0cffefe Binary files /dev/null and b/polaris.shopify.com/public/images/components/legacy-card.png differ diff --git a/polaris.shopify.com/src/data/props.json b/polaris.shopify.com/src/data/props.json index 4e11be9979f..c6957a71cc7 100644 --- a/polaris.shopify.com/src/data/props.json +++ b/polaris.shopify.com/src/data/props.json @@ -3822,41 +3822,6 @@ "value": "export interface Features {}" } }, - "IdGenerator": { - "polaris-react/src/utilities/unique-id/unique-id-factory.ts": { - "filePath": "polaris-react/src/utilities/unique-id/unique-id-factory.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IdGenerator", - "value": "() => string", - "description": "" - } - }, - "IdGeneratorFactory": { - "polaris-react/src/utilities/unique-id/unique-id-factory.ts": { - "filePath": "polaris-react/src/utilities/unique-id/unique-id-factory.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IdGeneratorFactory", - "value": "(prefix: string) => IdGenerator", - "description": "" - } - }, - "Options": { - "polaris-react/src/utilities/focus-manager/hooks.ts": { - "filePath": "polaris-react/src/utilities/focus-manager/hooks.ts", - "name": "Options", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/utilities/focus-manager/hooks.ts", - "syntaxKind": "PropertySignature", - "name": "trapping", - "value": "boolean", - "description": "" - } - ], - "value": "interface Options {\n trapping: boolean;\n}" - } - }, "Logo": { "polaris-react/src/utilities/frame/types.ts": { "filePath": "polaris-react/src/utilities/frame/types.ts", @@ -4303,6 +4268,41 @@ "description": "" } }, + "IdGenerator": { + "polaris-react/src/utilities/unique-id/unique-id-factory.ts": { + "filePath": "polaris-react/src/utilities/unique-id/unique-id-factory.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "IdGenerator", + "value": "() => string", + "description": "" + } + }, + "IdGeneratorFactory": { + "polaris-react/src/utilities/unique-id/unique-id-factory.ts": { + "filePath": "polaris-react/src/utilities/unique-id/unique-id-factory.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "IdGeneratorFactory", + "value": "(prefix: string) => IdGenerator", + "description": "" + } + }, + "Options": { + "polaris-react/src/utilities/focus-manager/hooks.ts": { + "filePath": "polaris-react/src/utilities/focus-manager/hooks.ts", + "name": "Options", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/utilities/focus-manager/hooks.ts", + "syntaxKind": "PropertySignature", + "name": "trapping", + "value": "boolean", + "description": "" + } + ], + "value": "interface Options {\n trapping: boolean;\n}" + } + }, "LinkLikeComponentProps": { "polaris-react/src/utilities/link/types.ts": { "filePath": "polaris-react/src/utilities/link/types.ts", @@ -7703,57 +7703,6 @@ "description": "" } }, - "ActionListProps": { - "polaris-react/src/components/ActionList/ActionList.tsx": { - "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", - "name": "ActionListProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "readonly ActionListItemDescriptor[]", - "description": "Collection of actions for list", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", - "syntaxKind": "PropertySignature", - "name": "sections", - "value": "readonly ActionListSection[]", - "description": "Collection of sectioned action items", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", - "syntaxKind": "PropertySignature", - "name": "actionRole", - "value": "string", - "description": "Defines a specific role attribute for each action in the list", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", - "syntaxKind": "PropertySignature", - "name": "onActionAnyItem", - "value": "() => void", - "description": "Callback when any item is clicked or keypressed", - "isOptional": true - } - ], - "value": "export interface ActionListProps {\n /** Collection of actions for list */\n items?: readonly ActionListItemDescriptor[];\n /** Collection of sectioned action items */\n sections?: readonly ActionListSection[];\n /** Defines a specific role attribute for each action in the list */\n actionRole?: 'menuitem' | string;\n /** Callback when any item is clicked or keypressed */\n onActionAnyItem?: ActionListItemDescriptor['onAction'];\n}" - } - }, - "ActionListItemProps": { - "polaris-react/src/components/ActionList/ActionList.tsx": { - "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionListItemProps", - "value": "ItemProps", - "description": "" - } - }, "ActionMenuProps": { "polaris-react/src/components/ActionMenu/ActionMenu.tsx": { "filePath": "polaris-react/src/components/ActionMenu/ActionMenu.tsx", @@ -7842,6 +7791,13 @@ "value": "'extraTight' | 'tight' | 'loose'", "description": "" }, + "polaris-react/src/components/List/List.tsx": { + "filePath": "polaris-react/src/components/List/List.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Spacing", + "value": "'extraTight' | 'loose'", + "description": "" + }, "polaris-react/src/components/Stack/Stack.tsx": { "filePath": "polaris-react/src/components/Stack/Stack.tsx", "syntaxKind": "TypeAliasDeclaration", @@ -8321,7 +8277,7 @@ "isOptional": true } ], - "value": "export interface AlphaStackProps extends React.AriaAttributes {\n children?: React.ReactNode;\n /** HTML Element type\n * @default 'div'\n */\n as?: Element;\n /** Vertical alignment of children\n * @default 'start'\n */\n align?: Align;\n /** Toggle children to be full width\n * @default false\n */\n fullWidth?: boolean;\n /** The spacing between children\n * @default '4'\n */\n gap?: Gap;\n /** HTML id attribute */\n id?: string;\n /** Toggle order of child items */\n reverseOrder?: boolean;\n}" + "value": "export interface AlphaStackProps extends React.AriaAttributes {\n children?: React.ReactNode;\n /** HTML Element type\n * @default 'div'\n */\n as?: Element;\n /** Horizontal alignment of children\n * @default 'start'\n */\n align?: Align;\n /** Toggle children to be full width\n * @default false\n */\n fullWidth?: boolean;\n /** The spacing between children\n * @default '4'\n */\n gap?: Gap;\n /** HTML id attribute */\n id?: string;\n /** Toggle order of child items */\n reverseOrder?: boolean;\n}" } }, "State": { @@ -9173,6 +9129,62 @@ ], "value": "export interface NonMutuallyExclusiveProps {\n keyCode: Key;\n handler(event: KeyboardEvent): void;\n keyEvent?: KeyEvent;\n}" }, + "polaris-react/src/components/Tag/Tag.tsx": { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "name": "NonMutuallyExclusiveProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "Content to display in the tag", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the tag", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "syntaxKind": "MethodSignature", + "name": "onClick", + "value": "() => void", + "description": "Callback when tag is clicked or keypressed. Renders without remove button or url when set.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "syntaxKind": "MethodSignature", + "name": "onRemove", + "value": "() => void", + "description": "Callback when remove button is clicked or keypressed.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "A string to use when tag has more than textual content", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "syntaxKind": "PropertySignature", + "name": "url", + "value": "string", + "description": "Url to navigate to when tag is clicked or keypressed.", + "isOptional": true + } + ], + "value": "export interface NonMutuallyExclusiveProps {\n /** Content to display in the tag */\n children?: React.ReactNode;\n /** Disables the tag */\n disabled?: boolean;\n /** Callback when tag is clicked or keypressed. Renders without remove button or url when set. */\n onClick?(): void;\n /** Callback when remove button is clicked or keypressed. */\n onRemove?(): void;\n /** A string to use when tag has more than textual content */\n accessibilityLabel?: string;\n /** Url to navigate to when tag is clicked or keypressed. */\n url?: string;\n}" + }, "polaris-react/src/components/TextField/TextField.tsx": { "filePath": "polaris-react/src/components/TextField/TextField.tsx", "name": "NonMutuallyExclusiveProps", @@ -9554,62 +9566,6 @@ } ], "value": "interface NonMutuallyExclusiveProps {\n /** Text to display before value */\n prefix?: React.ReactNode;\n /** Text to display after value */\n suffix?: React.ReactNode;\n /** Content to vertically display above the input value */\n verticalContent?: React.ReactNode;\n /** Hint text to display */\n placeholder?: string;\n /** Initial value for the input */\n value?: string;\n /** Additional hint text to display */\n helpText?: React.ReactNode;\n /** Label for the input */\n label: React.ReactNode;\n /** Adds an action to the label */\n labelAction?: LabelledProps['action'];\n /** Visually hide the label */\n labelHidden?: boolean;\n /** Disable the input */\n disabled?: boolean;\n /** Show a clear text button in the input */\n clearButton?: boolean;\n /** Indicates whether or not the entire value should be selected on focus. */\n selectTextOnFocus?: boolean;\n /** An inline autocomplete suggestion containing the input value. The characters that complete the input value are selected for ease of deletion on input change or keypress of Backspace/Delete. The selected substring is visually highlighted with subdued styling. */\n suggestion?: string;\n /** Disable editing of the input */\n readOnly?: boolean;\n /** Automatically focus the input */\n autoFocus?: boolean;\n /** Force the focus state on the input */\n focused?: boolean;\n /** Allow for multiple lines of input */\n multiline?: boolean | number;\n /** Error to display beneath the label */\n error?: Error | boolean;\n /** An element connected to the right of the input */\n connectedRight?: React.ReactNode;\n /** An element connected to the left of the input */\n connectedLeft?: React.ReactNode;\n /** Determine type of input */\n type?: Type;\n /** Name of the input */\n name?: string;\n /** ID for the input */\n id?: string;\n /** Defines a specific role attribute for the input */\n role?: string;\n /** Limit increment value for numeric and date-time inputs */\n step?: number;\n /** Enable automatic completion by the browser. Set to \"off\" when you do not want the browser to fill in info */\n autoComplete: string;\n /** Mimics the behavior of the native HTML attribute, limiting the maximum value */\n max?: number | string;\n /** Maximum character length for an input */\n maxLength?: number;\n /** Maximum height of the input element. Only applies when `multiline` is `true` */\n maxHeight?: number | string;\n /** Mimics the behavior of the native HTML attribute, limiting the minimum value */\n min?: number | string;\n /** Minimum character length for an input */\n minLength?: number;\n /** A regular expression to check the value against */\n pattern?: string;\n /** Choose the keyboard that should be used on mobile devices */\n inputMode?: InputMode;\n /** Indicate whether value should have spelling checked */\n spellCheck?: boolean;\n /** Indicates the id of a component owned by the input */\n ariaOwns?: string;\n /** Indicates whether or not a Popover is displayed */\n ariaExpanded?: boolean;\n /** Indicates the id of a component controlled by the input */\n ariaControls?: string;\n /** Indicates the id of a related component’s visually focused element to the input */\n ariaActiveDescendant?: string;\n /** Indicates what kind of user input completion suggestions are provided */\n ariaAutocomplete?: string;\n /** Indicates whether or not the character count should be displayed */\n showCharacterCount?: boolean;\n /** Determines the alignment of the text in the input */\n align?: Alignment;\n /** Visual required indicator, adds an asterisk to label */\n requiredIndicator?: boolean;\n /** Indicates whether or not a monospaced font should be used */\n monospaced?: boolean;\n /** Callback fired when clear button is clicked */\n onClearButtonClick?(id: string): void;\n /** Callback fired when value is changed */\n onChange?(value: string, id: string): void;\n /** Callback fired when input is focused */\n onFocus?: (event?: React.FocusEvent) => void;\n /** Callback fired when input is blurred */\n onBlur?(event?: React.FocusEvent): void;\n}" - }, - "polaris-react/src/components/Tag/Tag.tsx": { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "name": "NonMutuallyExclusiveProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "Content to display in the tag", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the tag", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "syntaxKind": "MethodSignature", - "name": "onClick", - "value": "() => void", - "description": "Callback when tag is clicked or keypressed. Renders without remove button or url when set.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "syntaxKind": "MethodSignature", - "name": "onRemove", - "value": "() => void", - "description": "Callback when remove button is clicked or keypressed.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A string to use when tag has more than textual content", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "syntaxKind": "PropertySignature", - "name": "url", - "value": "string", - "description": "Url to navigate to when tag is clicked or keypressed.", - "isOptional": true - } - ], - "value": "export interface NonMutuallyExclusiveProps {\n /** Content to display in the tag */\n children?: React.ReactNode;\n /** Disables the tag */\n disabled?: boolean;\n /** Callback when tag is clicked or keypressed. Renders without remove button or url when set. */\n onClick?(): void;\n /** Callback when remove button is clicked or keypressed. */\n onRemove?(): void;\n /** A string to use when tag has more than textual content */\n accessibilityLabel?: string;\n /** Url to navigate to when tag is clicked or keypressed. */\n url?: string;\n}" } }, "BadgeProps": { @@ -10265,23 +10221,6 @@ "value": "export interface BoxProps extends React.AriaAttributes {\n children?: React.ReactNode;\n /** HTML Element type\n * @default 'div'\n */\n as?: Element;\n /** Background color */\n background?: BackgroundColors;\n /** Border style */\n border?: BorderTokenAlias;\n /** Vertical end border style */\n borderBlockEnd?: BorderTokenAlias;\n /** Horizontal start border style */\n borderInlineStart?: BorderTokenAlias;\n /** Horizontal end border style */\n borderInlineEnd?: BorderTokenAlias;\n /** Vertical start border style */\n borderBlockStart?: BorderTokenAlias;\n /** Border radius */\n borderRadius?: BorderRadiusTokenScale;\n /** Vertical end horizontal start border radius */\n borderRadiusEndStart?: BorderRadiusTokenScale;\n /** Vertical end horizontal end border radius */\n borderRadiusEndEnd?: BorderRadiusTokenScale;\n /** Vertical start horizontal start border radius */\n borderRadiusStartStart?: BorderRadiusTokenScale;\n /** Vertical start horizontal end border radius */\n borderRadiusStartEnd?: BorderRadiusTokenScale;\n /** Border width */\n borderWidth?: ShapeBorderWidthScale;\n /** Vertical start border width */\n borderBlockStartWidth?: ShapeBorderWidthScale;\n /** Vertical end border width */\n borderBlockEndWidth?: ShapeBorderWidthScale;\n /** Horizontal start border width */\n borderInlineStartWidth?: ShapeBorderWidthScale;\n /** Horizontal end border width */\n borderInlineEndWidth?: ShapeBorderWidthScale;\n /** Color of children */\n color?: ColorTokenScale;\n /** HTML id attribute */\n id?: string;\n /** Minimum height of container */\n minHeight?: string;\n /** Minimum width of container */\n minWidth?: string;\n /** Maximum width of container */\n maxWidth?: string;\n /** Clip horizontal content of children */\n overflowX?: Overflow;\n /** Clip vertical content of children */\n overflowY?: Overflow;\n /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.\n * @example\n * padding='4'\n * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n padding?: Spacing;\n /** Vertical start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.\n * @example\n * paddingBlockStart='4'\n * paddingBlockStart={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n paddingBlockStart?: Spacing;\n /** Vertical end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.\n * @example\n * paddingBlockEnd='4'\n * paddingBlockEnd={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n paddingBlockEnd?: Spacing;\n /** Horizontal start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.\n * @example\n * paddingInlineStart='4'\n * paddingInlineStart={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n paddingInlineStart?: Spacing;\n /** Horizontal end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.\n * @example\n * paddingInlineEnd='4'\n * paddingInlineEnd={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n paddingInlineEnd?: Spacing;\n /** Aria role */\n role?: Extract<\n React.AriaRole,\n 'status' | 'presentation' | 'menu' | 'listbox' | 'combobox'\n >;\n /** Shadow on box */\n shadow?: DepthShadowAlias;\n /** Set tab order */\n tabIndex?: Extract['tabIndex'], number>;\n /** Width of container */\n width?: string;\n // These could be moved to new layout component(s) in the future\n /** Position of box */\n position?: Position;\n /** Top position of box */\n insetBlockStart?: Spacing;\n /** Bottom position of box */\n insetBlockEnd?: Spacing;\n /** Left position of box */\n insetInlineStart?: Spacing;\n /** Right position of box */\n insetInlineEnd?: Spacing;\n /** Opacity of box */\n opacity?: string;\n /** Outline style */\n outline?: BorderTokenAlias;\n /** Visually hide the contents during print */\n printHidden?: boolean;\n /** Visually hide the contents (still announced by screenreader) */\n visuallyHidden?: boolean;\n /** z-index of box */\n zIndex?: string;\n}" } }, - "BreadcrumbsProps": { - "polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx": { - "filePath": "polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx", - "name": "BreadcrumbsProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx", - "syntaxKind": "PropertySignature", - "name": "breadcrumbs", - "value": "(LinkAction | CallbackAction)[]", - "description": "Collection of breadcrumbs" - } - ], - "value": "export interface BreadcrumbsProps {\n /** Collection of breadcrumbs */\n breadcrumbs: (CallbackAction | LinkAction)[];\n}" - } - }, "BulkAction": { "polaris-react/src/components/BulkActions/BulkActions.tsx": { "filePath": "polaris-react/src/components/BulkActions/BulkActions.tsx", @@ -10496,8 +10435,83 @@ "description": "" } }, - "ButtonProps": { - "polaris-react/src/components/Button/Button.tsx": { + "BreadcrumbsProps": { + "polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx": { + "filePath": "polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx", + "name": "BreadcrumbsProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx", + "syntaxKind": "PropertySignature", + "name": "breadcrumbs", + "value": "LinkAction | CallbackAction | (LinkAction | CallbackAction)[]", + "description": "Collection of breadcrumbs" + } + ], + "value": "export interface BreadcrumbsProps {\n /** Collection of breadcrumbs */\n breadcrumbs: (CallbackAction | LinkAction) | (CallbackAction | LinkAction)[];\n}" + } + }, + "ButtonGroupProps": { + "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx": { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "name": "ButtonGroupProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "spacing", + "value": "Spacing", + "description": "Determines the space between button group items", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "segmented", + "value": "boolean", + "description": "Join buttons as segmented group", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "fullWidth", + "value": "boolean", + "description": "Buttons will stretch/shrink to occupy the full width", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "connectedTop", + "value": "boolean", + "description": "Remove top left and right border radius", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "noWrap", + "value": "boolean", + "description": "Prevent buttons in button group from wrapping to next line", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "Button components", + "isOptional": true + } + ], + "value": "export interface ButtonGroupProps {\n /** Determines the space between button group items */\n spacing?: Spacing;\n /** Join buttons as segmented group */\n segmented?: boolean;\n /** Buttons will stretch/shrink to occupy the full width */\n fullWidth?: boolean;\n /** Remove top left and right border radius */\n connectedTop?: boolean;\n /** Prevent buttons in button group from wrapping to next line */\n noWrap?: boolean;\n /** Button components */\n children?: React.ReactNode;\n}" + } + }, + "ButtonProps": { + "polaris-react/src/components/Button/Button.tsx": { "filePath": "polaris-react/src/components/Button/Button.tsx", "name": "ButtonProps", "description": "", @@ -10853,24 +10867,6 @@ "description": "" } }, - "CaptionProps": { - "polaris-react/src/components/Caption/Caption.tsx": { - "filePath": "polaris-react/src/components/Caption/Caption.tsx", - "name": "CaptionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Caption/Caption.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to use as a graph label or timestamp", - "isOptional": true - } - ], - "value": "export interface CaptionProps {\n /** The content to use as a graph label or timestamp */\n children?: React.ReactNode;\n}" - } - }, "CalloutCardProps": { "polaris-react/src/components/CalloutCard/CalloutCard.tsx": { "filePath": "polaris-react/src/components/CalloutCard/CalloutCard.tsx", @@ -10926,54 +10922,80 @@ "value": "export interface CalloutCardProps {\n /** The content to display inside the callout card. */\n children?: React.ReactNode;\n /** The title of the card */\n title: React.ReactNode;\n /** URL to the card illustration */\n illustration: string;\n /** Primary action for the card */\n primaryAction: Action;\n /** Secondary action for the card */\n secondaryAction?: Action;\n /** Callback when banner is dismissed */\n onDismiss?(): void;\n}" } }, - "ButtonGroupProps": { - "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx": { - "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", - "name": "ButtonGroupProps", + "CaptionProps": { + "polaris-react/src/components/Caption/Caption.tsx": { + "filePath": "polaris-react/src/components/Caption/Caption.tsx", + "name": "CaptionProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "filePath": "polaris-react/src/components/Caption/Caption.tsx", "syntaxKind": "PropertySignature", - "name": "spacing", - "value": "Spacing", - "description": "Determines the space between button group items", + "name": "children", + "value": "React.ReactNode", + "description": "The content to use as a graph label or timestamp", + "isOptional": true + } + ], + "value": "export interface CaptionProps {\n /** The content to use as a graph label or timestamp */\n children?: React.ReactNode;\n}" + } + }, + "CheckableButtonProps": { + "polaris-react/src/components/CheckableButton/CheckableButton.tsx": { + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "name": "CheckableButtonProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", - "name": "segmented", - "value": "boolean", - "description": "Join buttons as segmented group", + "name": "label", + "value": "string", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", - "name": "fullWidth", - "value": "boolean", - "description": "Buttons will stretch/shrink to occupy the full width", + "name": "selected", + "value": "boolean | \"indeterminate\"", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", - "name": "connectedTop", + "name": "disabled", "value": "boolean", - "description": "Remove top left and right border radius", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "syntaxKind": "MethodSignature", + "name": "onToggleAll", + "value": "() => void", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "Button components", + "name": "ariaLive", + "value": "\"off\" | \"polite\"", + "description": "", "isOptional": true } ], - "value": "export interface ButtonGroupProps {\n /** Determines the space between button group items */\n spacing?: Spacing;\n /** Join buttons as segmented group */\n segmented?: boolean;\n /** Buttons will stretch/shrink to occupy the full width */\n fullWidth?: boolean;\n /** Remove top left and right border radius */\n connectedTop?: boolean;\n /** Button components */\n children?: React.ReactNode;\n}" + "value": "export interface CheckableButtonProps {\n accessibilityLabel?: string;\n label?: string;\n selected?: boolean | 'indeterminate';\n disabled?: boolean;\n onToggleAll?(): void;\n ariaLive?: 'off' | 'polite';\n}" } }, "CardProps": { @@ -11066,44 +11088,46 @@ "value": "export interface CardProps {\n /** Title content for the card */\n title?: React.ReactNode;\n /** Inner content of the card */\n children?: React.ReactNode;\n /** A less prominent card */\n subdued?: boolean;\n /** Auto wrap content in section */\n sectioned?: boolean;\n /** Card header actions */\n actions?: DisableableAction[];\n /** Primary action in the card footer */\n primaryFooterAction?: ComplexAction;\n /** Secondary actions in the card footer */\n secondaryFooterActions?: ComplexAction[];\n /** The content of the disclosure button rendered when there is more than one secondary footer action */\n secondaryFooterActionsDisclosureText?: string;\n /** Alignment of the footer actions on the card, defaults to right */\n footerActionAlignment?: 'right' | 'left';\n /** Allow the card to be hidden when printing */\n hideOnPrint?: boolean;\n}" } }, - "ChoiceProps": { - "polaris-react/src/components/Choice/Choice.tsx": { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", - "name": "ChoiceProps", + "CheckboxState": { + "polaris-react/src/components/Checkbox/Checkbox.stories.tsx": { + "filePath": "polaris-react/src/components/Checkbox/Checkbox.stories.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "CheckboxState", + "value": "boolean | 'indeterminate'", + "description": "" + } + }, + "CheckboxProps": { + "polaris-react/src/components/Checkbox/Checkbox.tsx": { + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", + "name": "CheckboxProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", "syntaxKind": "PropertySignature", - "name": "id", + "name": "ariaControls", "value": "string", - "description": "A unique identifier for the choice" - }, - { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "React.ReactNode", - "description": "Label for the choice" + "description": "Indicates the ID of the element that is controlled by the checkbox", + "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the associated form control is disabled", + "name": "ariaDescribedBy", + "value": "string", + "description": "Indicates the ID of the element that describes the checkbox", "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", "syntaxKind": "PropertySignature", - "name": "error", - "value": "any", - "description": "Display an error message", - "isOptional": true + "name": "label", + "value": "React.ReactNode", + "description": "Label for the checkbox" }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", "syntaxKind": "PropertySignature", "name": "labelHidden", "value": "boolean", @@ -11111,15 +11135,15 @@ "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "Content to display inside the choice", + "name": "checked", + "value": "boolean | \"indeterminate\"", + "description": "Checkbox is selected. `indeterminate` shows a horizontal line in the checkbox", "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", "syntaxKind": "PropertySignature", "name": "helpText", "value": "React.ReactNode", @@ -11127,124 +11151,35 @@ "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", - "syntaxKind": "MethodSignature", - "name": "onClick", - "value": "() => void", - "description": "Callback when clicked", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disable input", "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", - "syntaxKind": "MethodSignature", - "name": "onMouseOver", - "value": "() => void", - "description": "Callback when mouse over", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "ID for form input", "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", - "syntaxKind": "MethodSignature", - "name": "onMouseOut", - "value": "() => void", - "description": "Callback when mouse out", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "Name for form input", "isOptional": true }, { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", "syntaxKind": "PropertySignature", - "name": "ariaLive", - "value": "\"off\" | \"polite\"", - "description": "", - "isOptional": true - } - ], - "value": "export interface ChoiceProps {\n /** A unique identifier for the choice */\n id: string;\n /**\tLabel for the choice */\n label: React.ReactNode;\n /** Whether the associated form control is disabled */\n disabled?: boolean;\n /** Display an error message */\n error?: Error | boolean;\n /** Visually hide the label */\n labelHidden?: boolean;\n /** Content to display inside the choice */\n children?: React.ReactNode;\n /** Additional text to aide in use */\n helpText?: React.ReactNode;\n /** Callback when clicked */\n onClick?(): void;\n /** Callback when mouse over */\n onMouseOver?(): void;\n /** Callback when mouse out */\n onMouseOut?(): void;\n}" - } - }, - "CheckboxProps": { - "polaris-react/src/components/Checkbox/Checkbox.tsx": { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "name": "CheckboxProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "ariaControls", - "value": "string", - "description": "Indicates the ID of the element that is controlled by the checkbox", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "ariaDescribedBy", - "value": "string", - "description": "Indicates the ID of the element that describes the checkbox", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "React.ReactNode", - "description": "Label for the checkbox" - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "labelHidden", - "value": "boolean", - "description": "Visually hide the label", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "checked", - "value": "boolean | \"indeterminate\"", - "description": "Checkbox is selected. `indeterminate` shows a horizontal line in the checkbox", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "helpText", - "value": "React.ReactNode", - "description": "Additional text to aide in use", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disable input", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "ID for form input", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "Name for form input", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Checkbox/Checkbox.tsx", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "Value for form input", + "name": "value", + "value": "string", + "description": "Value for form input", "isOptional": true }, { @@ -11354,62 +11289,92 @@ "value": "export interface CheckboxProps {\n checked?: boolean;\n disabled?: boolean;\n active?: boolean;\n id?: string;\n name?: string;\n value?: string;\n role?: string;\n onChange(): void;\n}" } }, - "CheckableButtonProps": { - "polaris-react/src/components/CheckableButton/CheckableButton.tsx": { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", - "name": "CheckableButtonProps", + "ChoiceProps": { + "polaris-react/src/components/Choice/Choice.tsx": { + "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "name": "ChoiceProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "filePath": "polaris-react/src/components/Choice/Choice.tsx", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", + "name": "id", "value": "string", - "description": "", - "isOptional": true + "description": "A unique identifier for the choice" }, { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "filePath": "polaris-react/src/components/Choice/Choice.tsx", "syntaxKind": "PropertySignature", "name": "label", - "value": "string", - "description": "", + "value": "React.ReactNode", + "description": "Label for the choice" + }, + { + "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Whether the associated form control is disabled", "isOptional": true }, { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "filePath": "polaris-react/src/components/Choice/Choice.tsx", "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean | \"indeterminate\"", - "description": "", + "name": "error", + "value": "any", + "description": "Display an error message", "isOptional": true }, { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "filePath": "polaris-react/src/components/Choice/Choice.tsx", "syntaxKind": "PropertySignature", - "name": "disabled", + "name": "labelHidden", "value": "boolean", - "description": "", + "description": "Visually hide the label", "isOptional": true }, { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", + "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "Content to display inside the choice", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "syntaxKind": "PropertySignature", + "name": "helpText", + "value": "React.ReactNode", + "description": "Additional text to aide in use", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Choice/Choice.tsx", "syntaxKind": "MethodSignature", - "name": "onToggleAll", + "name": "onClick", "value": "() => void", - "description": "", + "description": "Callback when clicked", "isOptional": true }, { - "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", - "syntaxKind": "PropertySignature", - "name": "ariaLive", - "value": "\"off\" | \"polite\"", - "description": "", + "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "syntaxKind": "MethodSignature", + "name": "onMouseOver", + "value": "() => void", + "description": "Callback when mouse over", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "syntaxKind": "MethodSignature", + "name": "onMouseOut", + "value": "() => void", + "description": "Callback when mouse out", "isOptional": true } ], - "value": "export interface CheckableButtonProps {\n accessibilityLabel?: string;\n label?: string;\n selected?: boolean | 'indeterminate';\n disabled?: boolean;\n onToggleAll?(): void;\n ariaLive?: 'off' | 'polite';\n}" + "value": "export interface ChoiceProps {\n /** A unique identifier for the choice */\n id: string;\n /**\tLabel for the choice */\n label: React.ReactNode;\n /** Whether the associated form control is disabled */\n disabled?: boolean;\n /** Display an error message */\n error?: Error | boolean;\n /** Visually hide the label */\n labelHidden?: boolean;\n /** Content to display inside the choice */\n children?: React.ReactNode;\n /** Additional text to aide in use */\n helpText?: React.ReactNode;\n /** Callback when clicked */\n onClick?(): void;\n /** Callback when mouse over */\n onMouseOver?(): void;\n /** Callback when mouse out */\n onMouseOut?(): void;\n}" } }, "Choice": { @@ -11627,6 +11592,14 @@ "isOptional": true, "deprecationMessage": "Re-measuring is no longer necessary on children update *" }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "MethodSignature", + "name": "onAnimationEnd", + "value": "() => void", + "description": "Callback when the animation completes.", + "isOptional": true + }, { "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", "syntaxKind": "PropertySignature", @@ -11636,7 +11609,7 @@ "isOptional": true } ], - "value": "export interface CollapsibleProps {\n /** Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop. */\n id: string;\n /** Option to show collapsible content when printing */\n expandOnPrint?: boolean;\n /** Toggle whether the collapsible is expanded or not. */\n open: boolean;\n /** Override transition properties. When set to false, disables transition completely.\n * @default transition={{duration: 'var(--p-duration-150)', timingFunction: 'var(--p-ease-in-out)'}}\n */\n transition?: boolean | Transition;\n /** @deprecated Re-measuring is no longer necessary on children update **/\n preventMeasuringOnChildrenUpdate?: boolean;\n /** The content to display inside the collapsible. */\n children?: React.ReactNode;\n}" + "value": "export interface CollapsibleProps {\n /** Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop. */\n id: string;\n /** Option to show collapsible content when printing */\n expandOnPrint?: boolean;\n /** Toggle whether the collapsible is expanded or not. */\n open: boolean;\n /** Override transition properties. When set to false, disables transition completely.\n * @default transition={{duration: 'var(--p-duration-150)', timingFunction: 'var(--p-ease-in-out)'}}\n */\n transition?: boolean | Transition;\n /** @deprecated Re-measuring is no longer necessary on children update **/\n preventMeasuringOnChildrenUpdate?: boolean;\n /** Callback when the animation completes. */\n onAnimationEnd?(): void;\n /** The content to display inside the collapsible. */\n children?: React.ReactNode;\n}" } }, "AnimationState": { @@ -11829,40 +11802,6 @@ "value": "export interface ComboboxProps {\n /** The text field component to activate the Popover */\n activator: React.ReactElement;\n /** Allows more than one option to be selected */\n allowMultiple?: boolean;\n /** The content to display inside the popover */\n children?: React.ReactElement | null;\n /** The preferred direction to open the popover */\n preferredPosition?: PopoverProps['preferredPosition'];\n /** Whether or not more options are available to lazy load when the bottom of the listbox reached. Use the hasMoreResults boolean provided by the GraphQL API of the paginated data. */\n willLoadMoreOptions?: boolean;\n /** Height to set on the Popover Pane. */\n height?: string;\n /** Callback fired when the bottom of the lisbox is reached. Use to lazy load when listbox option data is paginated. */\n onScrolledToBottom?(): void;\n /** Callback fired when the popover closes */\n onClose?(): void;\n}" } }, - "ConnectedProps": { - "polaris-react/src/components/Connected/Connected.tsx": { - "filePath": "polaris-react/src/components/Connected/Connected.tsx", - "name": "ConnectedProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Connected/Connected.tsx", - "syntaxKind": "PropertySignature", - "name": "left", - "value": "React.ReactNode", - "description": "Content to display on the left", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Connected/Connected.tsx", - "syntaxKind": "PropertySignature", - "name": "right", - "value": "React.ReactNode", - "description": "Content to display on the right", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Connected/Connected.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "Connected content", - "isOptional": true - } - ], - "value": "export interface ConnectedProps {\n /** Content to display on the left */\n left?: React.ReactNode;\n /** Content to display on the right */\n right?: React.ReactNode;\n /** Connected content */\n children?: React.ReactNode;\n}" - } - }, "Columns": { "polaris-react/src/components/Columns/Columns.tsx": { "filePath": "polaris-react/src/components/Columns/Columns.tsx", @@ -11911,7 +11850,7 @@ "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", "syntaxKind": "PropertySignature", "name": "lg", - "value": "2 | 5 | 1 | 4 | 10 | 3 | 6 | 7 | 8 | 9 | 11 | 12", + "value": "2 | 5 | 1 | 4 | 10 | 7 | 3 | 6 | 8 | 9 | 11 | 12", "description": "Number of columns the section should span on large screens", "isOptional": true }, @@ -11919,7 +11858,7 @@ "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", "syntaxKind": "PropertySignature", "name": "xl", - "value": "2 | 5 | 1 | 4 | 10 | 3 | 6 | 7 | 8 | 9 | 11 | 12", + "value": "2 | 5 | 1 | 4 | 10 | 7 | 3 | 6 | 8 | 9 | 11 | 12", "description": "Number of columns the section should span on extra large screens", "isOptional": true } @@ -11963,6 +11902,40 @@ "value": "export interface ColumnsProps {\n children?: React.ReactNode;\n /** The number of columns to display\n * @default {xs: 6, sm: 6, md: 6, lg: 6, xl: 6}\n */\n columns?: Columns;\n /** The spacing between children. Accepts a spacing token or an object of spacing tokens for different screen sizes.\n * @default '4'\n * @example\n * gap='2'\n * gap={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}\n */\n gap?: Gap;\n}" } }, + "ConnectedProps": { + "polaris-react/src/components/Connected/Connected.tsx": { + "filePath": "polaris-react/src/components/Connected/Connected.tsx", + "name": "ConnectedProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Connected/Connected.tsx", + "syntaxKind": "PropertySignature", + "name": "left", + "value": "React.ReactNode", + "description": "Content to display on the left", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Connected/Connected.tsx", + "syntaxKind": "PropertySignature", + "name": "right", + "value": "React.ReactNode", + "description": "Content to display on the right", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Connected/Connected.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "Connected content", + "isOptional": true + } + ], + "value": "export interface ConnectedProps {\n /** Content to display on the left */\n left?: React.ReactNode;\n /** Content to display on the right */\n right?: React.ReactNode;\n /** Connected content */\n children?: React.ReactNode;\n}" + } + }, "TableRow": { "polaris-react/src/components/DataTable/DataTable.tsx": { "filePath": "polaris-react/src/components/DataTable/DataTable.tsx", @@ -12171,10 +12144,143 @@ "value": "export interface DataTableProps {\n /** List of data types, which determines content alignment for each column. Data types are \"text,\" which aligns left, or \"numeric,\" which aligns right. */\n columnContentTypes: ColumnContentType[];\n /** List of column headings. */\n headings: React.ReactNode[];\n /** List of numeric column totals, highlighted in the table’s header below column headings. Use empty strings as placeholders for columns with no total. */\n totals?: TableData[];\n /** Custom totals row heading */\n totalsName?: {\n singular: React.ReactNode;\n plural: React.ReactNode;\n };\n /** Placement of totals row within table */\n showTotalsInFooter?: boolean;\n /** Lists of data points which map to table body rows. */\n rows: TableData[][];\n /** Hide column visibility and navigation buttons above the header when the table horizontally collapses to be scrollable.\n * @default false\n */\n hideScrollIndicator?: boolean;\n /** Truncate content in first column instead of wrapping.\n * @default true\n */\n truncate?: boolean;\n /** Vertical alignment of content in the cells.\n * @default 'top'\n */\n verticalAlign?: VerticalAlign;\n /** Content centered in the full width cell of the table footer row. */\n footerContent?: TableData;\n /** Table row has hover state. Defaults to true. */\n hoverable?: boolean;\n /** List of booleans, which maps to whether sorting is enabled or not for each column. Defaults to false for all columns. */\n sortable?: boolean[];\n /**\n * The direction to sort the table rows on first click or keypress of a sortable column heading. Defaults to ascending.\n * @default 'ascending'\n */\n defaultSortDirection?: SortDirection;\n /**\n * The index of the heading that the table rows are initially sorted by. Defaults to the first column.\n * @default 0\n */\n initialSortColumnIndex?: number;\n /** Callback fired on click or keypress of a sortable column heading. */\n onSort?(headingIndex: number, direction: SortDirection): void;\n /** Increased density */\n increasedTableDensity?: boolean;\n /** Add zebra striping to data rows */\n hasZebraStripingOnData?: boolean;\n /** Header becomes sticky and pins to top of table when scrolling */\n stickyHeader?: boolean;\n /** @deprecated Add a fixed first column on horizontal scroll. Use fixedFirstColumns={n} instead. */\n hasFixedFirstColumn?: boolean;\n /** Add fixed columns on horizontal scroll. */\n fixedFirstColumns?: number;\n /** Specify a min width for the first column if neccessary */\n firstColumnMinWidth?: string;\n}" } }, - "DatePickerProps": { - "polaris-react/src/components/DatePicker/DatePicker.tsx": { - "filePath": "polaris-react/src/components/DatePicker/DatePicker.tsx", - "name": "DatePickerProps", + "Item": { + "polaris-react/src/components/DescriptionList/DescriptionList.tsx": { + "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", + "name": "Item", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "term", + "value": "React.ReactNode", + "description": "Title of the item" + }, + { + "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "description", + "value": "React.ReactNode", + "description": "Item content" + } + ], + "value": "interface Item {\n /** Title of the item */\n term: React.ReactNode;\n /** Item content */\n description: React.ReactNode;\n}" + }, + "polaris-react/src/components/ExceptionList/ExceptionList.tsx": { + "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", + "name": "Item", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "status", + "value": "\"warning\" | \"critical\"", + "description": "Set the color of the icon and title for the given item.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "any", + "description": "Icon displayed by the list item", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "Text displayed beside the icon", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "description", + "value": "any", + "description": "Text displayed for the item", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "truncate", + "value": "boolean", + "description": "Should the description be truncated at end of line", + "isOptional": true + } + ], + "value": "interface Item {\n /** Set the color of the icon and title for the given item. */\n status?: 'critical' | 'warning';\n /** Icon displayed by the list item */\n icon?: IconProps['source'];\n /** Text displayed beside the icon */\n title?: string;\n /** Text displayed for the item */\n description?: Description;\n /** Should the description be truncated at end of line */\n truncate?: boolean;\n}" + } + }, + "DescriptionListProps": { + "polaris-react/src/components/DescriptionList/DescriptionList.tsx": { + "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", + "name": "DescriptionListProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "items", + "value": "Item[]", + "description": "Collection of items for list" + }, + { + "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "spacing", + "value": "\"tight\" | \"loose\"", + "description": "Determines the spacing between list items", + "isOptional": true + } + ], + "value": "export interface DescriptionListProps {\n /** Collection of items for list */\n items: Item[];\n /** Determines the spacing between list items */\n spacing?: 'tight' | 'loose';\n}" + } + }, + "DisplayTextProps": { + "polaris-react/src/components/DisplayText/DisplayText.tsx": { + "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", + "name": "DisplayTextProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", + "syntaxKind": "PropertySignature", + "name": "element", + "value": "HeadingTagName", + "description": "Name of element to use for text", + "isOptional": true, + "defaultValue": "'p'" + }, + { + "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Size", + "description": "Size of the text", + "isOptional": true, + "defaultValue": "'medium'" + }, + { + "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "Content to display", + "isOptional": true + } + ], + "value": "export interface DisplayTextProps {\n /**\n * Name of element to use for text\n * @default 'p'\n */\n element?: HeadingTagName;\n /**\n * Size of the text\n * @default 'medium'\n */\n size?: Size;\n /** Content to display */\n children?: React.ReactNode;\n}" + } + }, + "DatePickerProps": { + "polaris-react/src/components/DatePicker/DatePicker.tsx": { + "filePath": "polaris-react/src/components/DatePicker/DatePicker.tsx", + "name": "DatePickerProps", "description": "", "members": [ { @@ -12284,137 +12390,22 @@ "value": "export interface DatePickerProps {\n /** ID for the element */\n id?: string;\n /** The selected date or range of dates */\n selected?: Date | Range;\n /** The month to show, from 0 to 11. 0 is January, 1 is February ... 11 is December */\n month: number;\n /** The year to show */\n year: number;\n /** Allow a range of dates to be selected */\n allowRange?: boolean;\n /** Disable selecting dates before this. */\n disableDatesBefore?: Date;\n /** Disable selecting dates after this. */\n disableDatesAfter?: Date;\n /** Disable specific dates. */\n disableSpecificDates?: Date[];\n /** The selection can span multiple months */\n multiMonth?: boolean;\n /**\n * First day of week, from 0 to 6. 0 is Sunday, 1 is Monday ... 6 is Saturday\n * @default 0\n */\n weekStartsOn?: number;\n /** Visually hidden prefix text for selected days on single selection date pickers */\n dayAccessibilityLabelPrefix?: string;\n /** Callback when date is selected. */\n onChange?(date: Range): void;\n /** Callback when month is changed. */\n onMonthChange?(month: number, year: number): void;\n}" } }, - "DisplayTextProps": { - "polaris-react/src/components/DisplayText/DisplayText.tsx": { - "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", - "name": "DisplayTextProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", - "syntaxKind": "PropertySignature", - "name": "element", - "value": "HeadingTagName", - "description": "Name of element to use for text", - "isOptional": true, - "defaultValue": "'p'" - }, - { - "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", - "syntaxKind": "PropertySignature", - "name": "size", - "value": "Size", - "description": "Size of the text", - "isOptional": true, - "defaultValue": "'medium'" - }, - { - "filePath": "polaris-react/src/components/DisplayText/DisplayText.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "Content to display", - "isOptional": true - } - ], - "value": "export interface DisplayTextProps {\n /**\n * Name of element to use for text\n * @default 'p'\n */\n element?: HeadingTagName;\n /**\n * Size of the text\n * @default 'medium'\n */\n size?: Size;\n /** Content to display */\n children?: React.ReactNode;\n}" - } - }, - "Item": { - "polaris-react/src/components/DescriptionList/DescriptionList.tsx": { - "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", - "name": "Item", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "term", - "value": "React.ReactNode", - "description": "Title of the item" - }, - { - "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "React.ReactNode", - "description": "Item content" - } - ], - "value": "interface Item {\n /** Title of the item */\n term: React.ReactNode;\n /** Item content */\n description: React.ReactNode;\n}" - }, - "polaris-react/src/components/ExceptionList/ExceptionList.tsx": { - "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", - "name": "Item", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "\"warning\" | \"critical\"", - "description": "Set the color of the icon and title for the given item.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "icon", - "value": "any", - "description": "Icon displayed by the list item", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "Text displayed beside the icon", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "any", - "description": "Text displayed for the item", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ExceptionList/ExceptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "truncate", - "value": "boolean", - "description": "Should the description be truncated at end of line", - "isOptional": true - } - ], - "value": "interface Item {\n /** Set the color of the icon and title for the given item. */\n status?: 'critical' | 'warning';\n /** Icon displayed by the list item */\n icon?: IconProps['source'];\n /** Text displayed beside the icon */\n title?: string;\n /** Text displayed for the item */\n description?: Description;\n /** Should the description be truncated at end of line */\n truncate?: boolean;\n}" - } - }, - "DescriptionListProps": { - "polaris-react/src/components/DescriptionList/DescriptionList.tsx": { - "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", - "name": "DescriptionListProps", + "DividerProps": { + "polaris-react/src/components/Divider/Divider.tsx": { + "filePath": "polaris-react/src/components/Divider/Divider.tsx", + "name": "DividerProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "Collection of items for list" - }, - { - "filePath": "polaris-react/src/components/DescriptionList/DescriptionList.tsx", + "filePath": "polaris-react/src/components/Divider/Divider.tsx", "syntaxKind": "PropertySignature", - "name": "spacing", - "value": "\"tight\" | \"loose\"", - "description": "Determines the spacing between list items", + "name": "borderStyle", + "value": "BorderTokenAlias", + "description": "Divider border style", "isOptional": true } ], - "value": "export interface DescriptionListProps {\n /** Collection of items for list */\n items: Item[];\n /** Determines the spacing between list items */\n spacing?: 'tight' | 'loose';\n}" + "value": "export interface DividerProps {\n /** Divider border style */\n borderStyle?: BorderTokenAlias;\n}" } }, "DropZoneFileType": { @@ -12791,24 +12782,6 @@ "value": "interface DropZoneContextType {\n disabled: boolean;\n focused: boolean;\n measuring: boolean;\n allowMultiple: boolean;\n size: string;\n type: string;\n}" } }, - "DividerProps": { - "polaris-react/src/components/Divider/Divider.tsx": { - "filePath": "polaris-react/src/components/Divider/Divider.tsx", - "name": "DividerProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Divider/Divider.tsx", - "syntaxKind": "PropertySignature", - "name": "borderStyle", - "value": "BorderTokenAlias", - "description": "Divider border style", - "isOptional": true - } - ], - "value": "export interface DividerProps {\n /** Divider border style */\n borderStyle?: BorderTokenAlias;\n}" - } - }, "EmptySearchResultProps": { "polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx": { "filePath": "polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx", @@ -13304,24 +13277,6 @@ "description": "" } }, - "FooterHelpProps": { - "polaris-react/src/components/FooterHelp/FooterHelp.tsx": { - "filePath": "polaris-react/src/components/FooterHelp/FooterHelp.tsx", - "name": "FooterHelpProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/FooterHelp/FooterHelp.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside the layout.", - "isOptional": true - } - ], - "value": "export interface FooterHelpProps {\n /** The content to display inside the layout. */\n children?: React.ReactNode;\n}" - } - }, "Enctype": { "polaris-react/src/components/Form/Form.tsx": { "filePath": "polaris-react/src/components/Form/Form.tsx", @@ -13454,6 +13409,24 @@ "value": "export interface FormProps {\n /** Space separated list of character encodings */\n acceptCharset?: string;\n /** Where to send form-data on submittal */\n action?: string;\n /** Grants the browser the ability to autocomplete input elements */\n autoComplete?: boolean;\n /** The content to display inside the form. */\n children?: React.ReactNode;\n /** Media type when submitting content to server */\n encType?: Enctype;\n /** Toggles if form submits on Enter keypress. Defaults to true. */\n implicitSubmit?: boolean;\n /** Method used to submit form */\n method?: Method;\n /** A unique name for the form */\n name?: string;\n /** Whether or not form is validated when submitting */\n noValidate?: boolean;\n /** Blocks the default form action */\n preventDefault?: boolean;\n /** Where to display response after form submittal */\n target?: Target;\n /** Callback when form is submitted */\n onSubmit(event: React.FormEvent): void;\n}" } }, + "FooterHelpProps": { + "polaris-react/src/components/FooterHelp/FooterHelp.tsx": { + "filePath": "polaris-react/src/components/FooterHelp/FooterHelp.tsx", + "name": "FooterHelpProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/FooterHelp/FooterHelp.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the layout.", + "isOptional": true + } + ], + "value": "export interface FooterHelpProps {\n /** The content to display inside the layout. */\n children?: React.ReactNode;\n}" + } + }, "FormLayoutProps": { "polaris-react/src/components/FormLayout/FormLayout.tsx": { "filePath": "polaris-react/src/components/FormLayout/FormLayout.tsx", @@ -14317,6 +14290,24 @@ "value": "export interface IndexTableProps\n extends IndexTableBaseProps,\n IndexProviderProps {}" } }, + "IndicatorProps": { + "polaris-react/src/components/Indicator/Indicator.tsx": { + "filePath": "polaris-react/src/components/Indicator/Indicator.tsx", + "name": "IndicatorProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Indicator/Indicator.tsx", + "syntaxKind": "PropertySignature", + "name": "pulse", + "value": "boolean", + "description": "", + "isOptional": true + } + ], + "value": "export interface IndicatorProps {\n pulse?: boolean;\n}" + } + }, "BlockAlign": { "polaris-react/src/components/Inline/Inline.tsx": { "filePath": "polaris-react/src/components/Inline/Inline.tsx", @@ -14380,40 +14371,21 @@ "value": "export interface InlineProps {\n children?: React.ReactNode;\n /** Horizontal alignment of children\n * @default 'start'\n */\n align?: Align;\n /** Vertical alignment of children\n * @default 'center'\n */\n blockAlign?: BlockAlign;\n /** The spacing between elements. Accepts a spacing token or an object of spacing tokens for different screen sizes.\n * @default '4'\n * @example\n * gap='2'\n * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n gap?: Gap;\n /** Wrap stack elements to additional rows as needed on small screens\n * @default true\n */\n wrap?: boolean;\n}" } }, - "IndicatorProps": { - "polaris-react/src/components/Indicator/Indicator.tsx": { - "filePath": "polaris-react/src/components/Indicator/Indicator.tsx", - "name": "IndicatorProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Indicator/Indicator.tsx", - "syntaxKind": "PropertySignature", - "name": "pulse", - "value": "boolean", - "description": "", - "isOptional": true - } - ], - "value": "export interface IndicatorProps {\n pulse?: boolean;\n}" - } - }, - "KeyboardKeyProps": { - "polaris-react/src/components/KeyboardKey/KeyboardKey.tsx": { - "filePath": "polaris-react/src/components/KeyboardKey/KeyboardKey.tsx", - "name": "KeyboardKeyProps", + "InlineCodeProps": { + "polaris-react/src/components/InlineCode/InlineCode.tsx": { + "filePath": "polaris-react/src/components/InlineCode/InlineCode.tsx", + "name": "InlineCodeProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/KeyboardKey/KeyboardKey.tsx", + "filePath": "polaris-react/src/components/InlineCode/InlineCode.tsx", "syntaxKind": "PropertySignature", "name": "children", - "value": "string", - "description": "The content to display inside the key", - "isOptional": true + "value": "ReactNode", + "description": "The content to render inside the code block" } ], - "value": "export interface KeyboardKeyProps {\n /** The content to display inside the key */\n children?: string;\n}" + "value": "export interface InlineCodeProps {\n /** The content to render inside the code block */\n children: ReactNode;\n}" } }, "InlineErrorProps": { @@ -14440,21 +14412,22 @@ "value": "export interface InlineErrorProps {\n /** Content briefly explaining how to resolve the invalid form field input. */\n message: Error;\n /** Unique identifier of the invalid form field that the message describes */\n fieldID: string;\n}" } }, - "InlineCodeProps": { - "polaris-react/src/components/InlineCode/InlineCode.tsx": { - "filePath": "polaris-react/src/components/InlineCode/InlineCode.tsx", - "name": "InlineCodeProps", + "KeyboardKeyProps": { + "polaris-react/src/components/KeyboardKey/KeyboardKey.tsx": { + "filePath": "polaris-react/src/components/KeyboardKey/KeyboardKey.tsx", + "name": "KeyboardKeyProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/InlineCode/InlineCode.tsx", + "filePath": "polaris-react/src/components/KeyboardKey/KeyboardKey.tsx", "syntaxKind": "PropertySignature", "name": "children", - "value": "ReactNode", - "description": "The content to render inside the code block" + "value": "string", + "description": "The content to display inside the key", + "isOptional": true } ], - "value": "export interface InlineCodeProps {\n /** The content to render inside the code block */\n children: ReactNode;\n}" + "value": "export interface KeyboardKeyProps {\n /** The content to display inside the key */\n children?: string;\n}" } }, "KeypressListenerProps": { @@ -14475,6 +14448,23 @@ "description": "" } }, + "KonamiCodeProps": { + "polaris-react/src/components/KonamiCode/KonamiCode.tsx": { + "filePath": "polaris-react/src/components/KonamiCode/KonamiCode.tsx", + "name": "KonamiCodeProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/KonamiCode/KonamiCode.tsx", + "syntaxKind": "MethodSignature", + "name": "handler", + "value": "(event: KeyboardEvent) => void", + "description": "" + } + ], + "value": "export interface KonamiCodeProps {\n handler(event: KeyboardEvent): void;\n}" + } + }, "LabelProps": { "polaris-react/src/components/Label/Label.tsx": { "filePath": "polaris-react/src/components/Label/Label.tsx", @@ -14516,23 +14506,6 @@ "value": "export interface LabelProps {\n /** Label content */\n children?: React.ReactNode;\n /** A unique identifier for the label */\n id: string;\n /** Visually hide the label */\n hidden?: boolean;\n /** Visual required indicator for the label */\n requiredIndicator?: boolean;\n}" } }, - "KonamiCodeProps": { - "polaris-react/src/components/KonamiCode/KonamiCode.tsx": { - "filePath": "polaris-react/src/components/KonamiCode/KonamiCode.tsx", - "name": "KonamiCodeProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/KonamiCode/KonamiCode.tsx", - "syntaxKind": "MethodSignature", - "name": "handler", - "value": "(event: KeyboardEvent) => void", - "description": "" - } - ], - "value": "export interface KonamiCodeProps {\n handler(event: KeyboardEvent): void;\n}" - } - }, "LabelledProps": { "polaris-react/src/components/Labelled/Labelled.tsx": { "filePath": "polaris-react/src/components/Labelled/Labelled.tsx", @@ -14586,23 +14559,139 @@ "isOptional": true }, { - "filePath": "polaris-react/src/components/Labelled/Labelled.tsx", + "filePath": "polaris-react/src/components/Labelled/Labelled.tsx", + "syntaxKind": "PropertySignature", + "name": "labelHidden", + "value": "boolean", + "description": "Visually hide the label", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Labelled/Labelled.tsx", + "syntaxKind": "PropertySignature", + "name": "requiredIndicator", + "value": "boolean", + "description": "Visual required indicator for the label", + "isOptional": true + } + ], + "value": "export interface LabelledProps {\n /** A unique identifier for the label */\n id: LabelProps['id'];\n /** Text for the label */\n label: React.ReactNode;\n /** Error to display beneath the label */\n error?: Error | boolean;\n /** An action */\n action?: Action;\n /** Additional hint text to display */\n helpText?: React.ReactNode;\n /** Content to display inside the connected */\n children?: React.ReactNode;\n /** Visually hide the label */\n labelHidden?: boolean;\n /** Visual required indicator for the label */\n requiredIndicator?: boolean;\n}" + } + }, + "LegacyCardProps": { + "polaris-react/src/components/LegacyCard/LegacyCard.tsx": { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "name": "LegacyCardProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "React.ReactNode", + "description": "Title content for the card", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "Inner content of the card", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "subdued", + "value": "boolean", + "description": "A less prominent card", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "sectioned", + "value": "boolean", + "description": "Auto wrap content in section", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "actions", + "value": "DisableableAction[]", + "description": "Card header actions", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "primaryFooterAction", + "value": "ComplexAction", + "description": "Primary action in the card footer", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "secondaryFooterActions", + "value": "ComplexAction[]", + "description": "Secondary actions in the card footer", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "secondaryFooterActionsDisclosureText", + "value": "string", + "description": "The content of the disclosure button rendered when there is more than one secondary footer action", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "footerActionAlignment", + "value": "\"left\" | \"right\"", + "description": "Alignment of the footer actions on the card, defaults to right", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/LegacyCard.tsx", + "syntaxKind": "PropertySignature", + "name": "hideOnPrint", + "value": "boolean", + "description": "Allow the card to be hidden when printing", + "isOptional": true + } + ], + "value": "export interface LegacyCardProps {\n /** Title content for the card */\n title?: React.ReactNode;\n /** Inner content of the card */\n children?: React.ReactNode;\n /** A less prominent card */\n subdued?: boolean;\n /** Auto wrap content in section */\n sectioned?: boolean;\n /** Card header actions */\n actions?: DisableableAction[];\n /** Primary action in the card footer */\n primaryFooterAction?: ComplexAction;\n /** Secondary actions in the card footer */\n secondaryFooterActions?: ComplexAction[];\n /** The content of the disclosure button rendered when there is more than one secondary footer action */\n secondaryFooterActionsDisclosureText?: string;\n /** Alignment of the footer actions on the card, defaults to right */\n footerActionAlignment?: 'right' | 'left';\n /** Allow the card to be hidden when printing */\n hideOnPrint?: boolean;\n}" + } + }, + "LayoutProps": { + "polaris-react/src/components/Layout/Layout.tsx": { + "filePath": "polaris-react/src/components/Layout/Layout.tsx", + "name": "LayoutProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Layout/Layout.tsx", "syntaxKind": "PropertySignature", - "name": "labelHidden", + "name": "sectioned", "value": "boolean", - "description": "Visually hide the label", + "description": "Automatically adds sections to layout.", "isOptional": true }, { - "filePath": "polaris-react/src/components/Labelled/Labelled.tsx", + "filePath": "polaris-react/src/components/Layout/Layout.tsx", "syntaxKind": "PropertySignature", - "name": "requiredIndicator", - "value": "boolean", - "description": "Visual required indicator for the label", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the layout.", "isOptional": true } ], - "value": "export interface LabelledProps {\n /** A unique identifier for the label */\n id: LabelProps['id'];\n /** Text for the label */\n label: React.ReactNode;\n /** Error to display beneath the label */\n error?: Error | boolean;\n /** An action */\n action?: Action;\n /** Additional hint text to display */\n helpText?: React.ReactNode;\n /** Content to display inside the connected */\n children?: React.ReactNode;\n /** Visually hide the label */\n labelHidden?: boolean;\n /** Visual required indicator for the label */\n requiredIndicator?: boolean;\n}" + "value": "export interface LayoutProps {\n /** Automatically adds sections to layout. */\n sectioned?: boolean;\n /** The content to display inside the layout. */\n children?: React.ReactNode;\n}" } }, "LinkProps": { @@ -14687,122 +14776,6 @@ "value": "export interface LinkProps {\n /** ID for the link */\n id?: string;\n /** The url to link to */\n url?: string;\n /** The content to display inside the link */\n children?: React.ReactNode;\n /** Makes the link open in a new tab */\n external?: boolean;\n /** Makes the link color the same as the current text color and adds an underline */\n monochrome?: boolean;\n /** Removes text decoration underline to the link*/\n removeUnderline?: boolean;\n /** Callback when a link is clicked */\n onClick?(): void;\n /** Descriptive text to be read to screenreaders */\n accessibilityLabel?: string;\n /** Indicates whether or not the link is the primary navigation link when rendered inside of an `IndexTable.Row` */\n dataPrimaryLink?: boolean;\n}" } }, - "LayoutProps": { - "polaris-react/src/components/Layout/Layout.tsx": { - "filePath": "polaris-react/src/components/Layout/Layout.tsx", - "name": "LayoutProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Layout/Layout.tsx", - "syntaxKind": "PropertySignature", - "name": "sectioned", - "value": "boolean", - "description": "Automatically adds sections to layout.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/Layout.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside the layout.", - "isOptional": true - } - ], - "value": "export interface LayoutProps {\n /** Automatically adds sections to layout. */\n sectioned?: boolean;\n /** The content to display inside the layout. */\n children?: React.ReactNode;\n}" - } - }, - "Type": { - "polaris-react/src/components/List/List.tsx": { - "filePath": "polaris-react/src/components/List/List.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Type", - "value": "'bullet' | 'number'", - "description": "" - }, - "polaris-react/src/components/TextField/TextField.tsx": { - "filePath": "polaris-react/src/components/TextField/TextField.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Type", - "value": "'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency'", - "description": "" - } - }, - "ListProps": { - "polaris-react/src/components/List/List.tsx": { - "filePath": "polaris-react/src/components/List/List.tsx", - "name": "ListProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/List/List.tsx", - "syntaxKind": "PropertySignature", - "name": "spacing", - "value": "Spacing", - "description": "Determines the space between list items", - "isOptional": true, - "defaultValue": "'loose'" - }, - { - "filePath": "polaris-react/src/components/List/List.tsx", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "Type", - "description": "Type of list to display", - "isOptional": true, - "defaultValue": "'bullet'" - }, - { - "filePath": "polaris-react/src/components/List/List.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "List item elements", - "isOptional": true - } - ], - "value": "export interface ListProps {\n /**\n * Determines the space between list items\n * @default 'loose'\n */\n spacing?: Spacing;\n /**\n * Type of list to display\n * @default 'bullet'\n */\n type?: Type;\n /** List item elements */\n children?: React.ReactNode;\n}" - }, - "polaris-react/src/components/Tabs/components/List/List.tsx": { - "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", - "name": "ListProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", - "syntaxKind": "PropertySignature", - "name": "focusIndex", - "value": "number", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", - "syntaxKind": "PropertySignature", - "name": "disclosureTabs", - "value": "TabDescriptor[]", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", - "syntaxKind": "MethodSignature", - "name": "onClick", - "value": "(id: string) => void", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", - "syntaxKind": "MethodSignature", - "name": "onKeyPress", - "value": "(event: React.KeyboardEvent) => void", - "description": "", - "isOptional": true - } - ], - "value": "export interface ListProps {\n focusIndex: number;\n disclosureTabs: TabDescriptor[];\n onClick?(id: string): void;\n onKeyPress?(event: React.KeyboardEvent): void;\n}" - } - }, "AutoSelection": { "polaris-react/src/components/Listbox/Listbox.tsx": { "filePath": "polaris-react/src/components/Listbox/Listbox.tsx", @@ -14903,36 +14876,94 @@ "description": "" } }, - "LoadingProps": { - "polaris-react/src/components/Loading/Loading.tsx": { - "filePath": "polaris-react/src/components/Loading/Loading.tsx", - "name": "LoadingProps", - "description": "", - "members": [], - "value": "export interface LoadingProps {}" + "Type": { + "polaris-react/src/components/List/List.tsx": { + "filePath": "polaris-react/src/components/List/List.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Type", + "value": "'bullet' | 'number'", + "description": "" }, - "polaris-react/src/components/Listbox/components/Loading/Loading.tsx": { - "filePath": "polaris-react/src/components/Listbox/components/Loading/Loading.tsx", - "name": "LoadingProps", + "polaris-react/src/components/TextField/TextField.tsx": { + "filePath": "polaris-react/src/components/TextField/TextField.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Type", + "value": "'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency'", + "description": "" + } + }, + "ListProps": { + "polaris-react/src/components/List/List.tsx": { + "filePath": "polaris-react/src/components/List/List.tsx", + "name": "ListProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/Listbox/components/Loading/Loading.tsx", + "filePath": "polaris-react/src/components/List/List.tsx", + "syntaxKind": "PropertySignature", + "name": "spacing", + "value": "Spacing", + "description": "Determines the space between list items", + "isOptional": true, + "defaultValue": "'loose'" + }, + { + "filePath": "polaris-react/src/components/List/List.tsx", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "Type", + "description": "Type of list to display", + "isOptional": true, + "defaultValue": "'bullet'" + }, + { + "filePath": "polaris-react/src/components/List/List.tsx", "syntaxKind": "PropertySignature", "name": "children", "value": "React.ReactNode", - "description": "", + "description": "List item elements", "isOptional": true + } + ], + "value": "export interface ListProps {\n /**\n * Determines the space between list items\n * @default 'loose'\n */\n spacing?: Spacing;\n /**\n * Type of list to display\n * @default 'bullet'\n */\n type?: Type;\n /** List item elements */\n children?: React.ReactNode;\n}" + }, + "polaris-react/src/components/Tabs/components/List/List.tsx": { + "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", + "name": "ListProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", + "syntaxKind": "PropertySignature", + "name": "focusIndex", + "value": "number", + "description": "" }, { - "filePath": "polaris-react/src/components/Listbox/components/Loading/Loading.tsx", + "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", + "name": "disclosureTabs", + "value": "TabDescriptor[]", "description": "" + }, + { + "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", + "syntaxKind": "MethodSignature", + "name": "onClick", + "value": "(id: string) => void", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tabs/components/List/List.tsx", + "syntaxKind": "MethodSignature", + "name": "onKeyPress", + "value": "(event: React.KeyboardEvent) => void", + "description": "", + "isOptional": true } ], - "value": "export interface LoadingProps {\n children?: React.ReactNode;\n accessibilityLabel: string;\n}" + "value": "export interface ListProps {\n focusIndex: number;\n disclosureTabs: TabDescriptor[];\n onClick?(id: string): void;\n onKeyPress?(event: React.KeyboardEvent): void;\n}" } }, "MediaCardProps": { @@ -14996,16 +15027,48 @@ "defaultValue": "false" }, { - "filePath": "polaris-react/src/components/MediaCard/MediaCard.tsx", + "filePath": "polaris-react/src/components/MediaCard/MediaCard.tsx", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Size", + "description": "Size of the visual media in the card", + "isOptional": true, + "defaultValue": "'medium'" + } + ], + "value": "interface MediaCardProps {\n /** The visual media to display in the card */\n children: React.ReactNode;\n /** Heading content */\n title: React.ReactNode;\n /** Body content */\n description: string;\n /** Main call to action, rendered as a basic button */\n primaryAction?: ComplexAction;\n /** Secondary call to action, rendered as a plain button */\n secondaryAction?: ComplexAction;\n /** Action list items to render in ellipsis popover */\n popoverActions?: ActionListItemDescriptor[];\n /** Whether or not card content should be laid out vertically\n * @default false\n */\n portrait?: boolean;\n /** Size of the visual media in the card\n * @default 'medium'\n */\n size?: Size;\n}" + } + }, + "LoadingProps": { + "polaris-react/src/components/Loading/Loading.tsx": { + "filePath": "polaris-react/src/components/Loading/Loading.tsx", + "name": "LoadingProps", + "description": "", + "members": [], + "value": "export interface LoadingProps {}" + }, + "polaris-react/src/components/Listbox/components/Loading/Loading.tsx": { + "filePath": "polaris-react/src/components/Listbox/components/Loading/Loading.tsx", + "name": "LoadingProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Listbox/components/Loading/Loading.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Listbox/components/Loading/Loading.tsx", "syntaxKind": "PropertySignature", - "name": "size", - "value": "Size", - "description": "Size of the visual media in the card", - "isOptional": true, - "defaultValue": "'medium'" + "name": "accessibilityLabel", + "value": "string", + "description": "" } ], - "value": "interface MediaCardProps {\n /** The visual media to display in the card */\n children: React.ReactNode;\n /** Heading content */\n title: React.ReactNode;\n /** Body content */\n description: string;\n /** Main call to action, rendered as a basic button */\n primaryAction?: ComplexAction;\n /** Secondary call to action, rendered as a plain button */\n secondaryAction?: ComplexAction;\n /** Action list items to render in ellipsis popover */\n popoverActions?: ActionListItemDescriptor[];\n /** Whether or not card content should be laid out vertically\n * @default false\n */\n portrait?: boolean;\n /** Size of the visual media in the card\n * @default 'medium'\n */\n size?: Size;\n}" + "value": "export interface LoadingProps {\n children?: React.ReactNode;\n accessibilityLabel: string;\n}" } }, "MessageIndicatorProps": { @@ -15370,138 +15433,6 @@ "value": "interface NavigationContextType {\n location: string;\n onNavigationDismiss?(): void;\n withinContentContainer?: boolean;\n}" } }, - "Alignment": { - "polaris-react/src/components/OptionList/OptionList.tsx": { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Alignment", - "value": "'top' | 'center' | 'bottom'", - "description": "" - }, - "polaris-react/src/components/ResourceItem/ResourceItem.tsx": { - "filePath": "polaris-react/src/components/ResourceItem/ResourceItem.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Alignment", - "value": "'leading' | 'trailing' | 'center' | 'fill' | 'baseline'", - "description": "" - }, - "polaris-react/src/components/Stack/Stack.tsx": { - "filePath": "polaris-react/src/components/Stack/Stack.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Alignment", - "value": "'leading' | 'trailing' | 'center' | 'fill' | 'baseline'", - "description": "" - }, - "polaris-react/src/components/Text/Text.tsx": { - "filePath": "polaris-react/src/components/Text/Text.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Alignment", - "value": "'start' | 'center' | 'end' | 'justify'", - "description": "" - }, - "polaris-react/src/components/TextField/TextField.tsx": { - "filePath": "polaris-react/src/components/TextField/TextField.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Alignment", - "value": "'left' | 'center' | 'right'", - "description": "" - }, - "polaris-react/src/components/OptionList/components/Option/Option.tsx": { - "filePath": "polaris-react/src/components/OptionList/components/Option/Option.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Alignment", - "value": "'top' | 'center' | 'bottom'", - "description": "" - } - }, - "OptionListProps": { - "polaris-react/src/components/OptionList/OptionList.tsx": { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "name": "OptionListProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the option list", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "List title", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "OptionDescriptor[]", - "description": "Collection of options to be listed", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "role", - "value": "string", - "description": "Defines a specific role attribute for the list itself", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "optionRole", - "value": "string", - "description": "Defines a specific role attribute for each option in the list", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "sections", - "value": "SectionDescriptor[]", - "description": "Sections containing a header and related options", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "string[]", - "description": "The selected options" - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "allowMultiple", - "value": "boolean", - "description": "Allow more than one option to be selected", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "PropertySignature", - "name": "verticalAlign", - "value": "Alignment", - "description": "Vertically align child content to the center, top, or bottom.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", - "syntaxKind": "MethodSignature", - "name": "onChange", - "value": "(selected: string[]) => void", - "description": "Callback when selection is changed" - } - ], - "value": "export interface OptionListProps {\n /** A unique identifier for the option list */\n id?: string;\n /** List title */\n title?: string;\n /** Collection of options to be listed */\n options?: OptionDescriptor[];\n /** Defines a specific role attribute for the list itself */\n role?: 'listbox' | 'combobox' | string;\n /** Defines a specific role attribute for each option in the list */\n optionRole?: string;\n /** Sections containing a header and related options */\n sections?: SectionDescriptor[];\n /** The selected options */\n selected: string[];\n /** Allow more than one option to be selected */\n allowMultiple?: boolean;\n /** Vertically align child content to the center, top, or bottom. */\n verticalAlign?: Alignment;\n /** Callback when selection is changed */\n onChange(selected: string[]): void;\n}" - } - }, "PageProps": { "polaris-react/src/components/Page/Page.tsx": { "filePath": "polaris-react/src/components/Page/Page.tsx", @@ -15568,7 +15499,7 @@ "filePath": "polaris-react/src/components/Page/Page.tsx", "syntaxKind": "PropertySignature", "name": "breadcrumbs", - "value": "(LinkAction | CallbackAction)[]", + "value": "LinkAction | CallbackAction | (LinkAction | CallbackAction)[]", "description": "Collection of breadcrumbs", "isOptional": true }, @@ -15630,65 +15561,155 @@ "isOptional": true }, { - "filePath": "polaris-react/src/components/Page/Page.tsx", + "filePath": "polaris-react/src/components/Page/Page.tsx", + "syntaxKind": "PropertySignature", + "name": "titleMetadata", + "value": "React.ReactNode", + "description": "Important and non-interactive status information shown immediately after the title.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Page/Page.tsx", + "syntaxKind": "PropertySignature", + "name": "compactTitle", + "value": "boolean", + "description": "Removes spacing between title and subtitle", + "isOptional": true + } + ], + "value": "export interface PageProps extends HeaderProps {\n /** The contents of the page */\n children?: React.ReactNode;\n /** Remove the normal max-width on the page */\n fullWidth?: boolean;\n /** Decreases the maximum layout width. Intended for single-column layouts */\n narrowWidth?: boolean;\n /** Displays a divider between the page header and the page content */\n divider?: boolean;\n}" + } + }, + "Alignment": { + "polaris-react/src/components/OptionList/OptionList.tsx": { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Alignment", + "value": "'top' | 'center' | 'bottom'", + "description": "" + }, + "polaris-react/src/components/ResourceItem/ResourceItem.tsx": { + "filePath": "polaris-react/src/components/ResourceItem/ResourceItem.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Alignment", + "value": "'leading' | 'trailing' | 'center' | 'fill' | 'baseline'", + "description": "" + }, + "polaris-react/src/components/Stack/Stack.tsx": { + "filePath": "polaris-react/src/components/Stack/Stack.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Alignment", + "value": "'leading' | 'trailing' | 'center' | 'fill' | 'baseline'", + "description": "" + }, + "polaris-react/src/components/Text/Text.tsx": { + "filePath": "polaris-react/src/components/Text/Text.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Alignment", + "value": "'start' | 'center' | 'end' | 'justify'", + "description": "" + }, + "polaris-react/src/components/TextField/TextField.tsx": { + "filePath": "polaris-react/src/components/TextField/TextField.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Alignment", + "value": "'left' | 'center' | 'right'", + "description": "" + }, + "polaris-react/src/components/OptionList/components/Option/Option.tsx": { + "filePath": "polaris-react/src/components/OptionList/components/Option/Option.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Alignment", + "value": "'top' | 'center' | 'bottom'", + "description": "" + } + }, + "OptionListProps": { + "polaris-react/src/components/OptionList/OptionList.tsx": { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "name": "OptionListProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the option list", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "List title", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "options", + "value": "OptionDescriptor[]", + "description": "Collection of options to be listed", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "role", + "value": "string", + "description": "Defines a specific role attribute for the list itself", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "syntaxKind": "PropertySignature", + "name": "optionRole", + "value": "string", + "description": "Defines a specific role attribute for each option in the list", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", "syntaxKind": "PropertySignature", - "name": "titleMetadata", - "value": "React.ReactNode", - "description": "Important and non-interactive status information shown immediately after the title.", + "name": "sections", + "value": "SectionDescriptor[]", + "description": "Sections containing a header and related options", "isOptional": true }, { - "filePath": "polaris-react/src/components/Page/Page.tsx", + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", "syntaxKind": "PropertySignature", - "name": "compactTitle", - "value": "boolean", - "description": "Removes spacing between title and subtitle", - "isOptional": true - } - ], - "value": "export interface PageProps extends HeaderProps {\n /** The contents of the page */\n children?: React.ReactNode;\n /** Remove the normal max-width on the page */\n fullWidth?: boolean;\n /** Decreases the maximum layout width. Intended for single-column layouts */\n narrowWidth?: boolean;\n /** Displays a divider between the page header and the page content */\n divider?: boolean;\n}" - } - }, - "PageActionsProps": { - "polaris-react/src/components/PageActions/PageActions.tsx": { - "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", - "name": "PageActionsProps", - "description": "", - "members": [ + "name": "selected", + "value": "string[]", + "description": "The selected options" + }, { - "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", "syntaxKind": "PropertySignature", - "name": "primaryAction", - "value": "any", - "description": "The primary action for the page", + "name": "allowMultiple", + "value": "boolean", + "description": "Allow more than one option to be selected", "isOptional": true }, { - "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", "syntaxKind": "PropertySignature", - "name": "secondaryActions", - "value": "any", - "description": "The secondary actions for the page", + "name": "verticalAlign", + "value": "Alignment", + "description": "Vertically align child content to the center, top, or bottom.", "isOptional": true + }, + { + "filePath": "polaris-react/src/components/OptionList/OptionList.tsx", + "syntaxKind": "MethodSignature", + "name": "onChange", + "value": "(selected: string[]) => void", + "description": "Callback when selection is changed" } ], - "value": "export interface PageActionsProps {\n /** The primary action for the page */\n primaryAction?: (DisableableAction & LoadableAction) | React.ReactNode;\n /** The secondary actions for the page */\n secondaryActions?: ComplexAction[] | React.ReactNode;\n}" - } - }, - "MaybeJSX": { - "polaris-react/src/components/PageActions/PageActions.tsx": { - "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeJSX", - "value": "JSX.Element | null", - "description": "" - }, - "polaris-react/src/components/Page/components/Header/Header.tsx": { - "filePath": "polaris-react/src/components/Page/components/Header/Header.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeJSX", - "value": "JSX.Element | null", - "description": "" + "value": "export interface OptionListProps {\n /** A unique identifier for the option list */\n id?: string;\n /** List title */\n title?: string;\n /** Collection of options to be listed */\n options?: OptionDescriptor[];\n /** Defines a specific role attribute for the list itself */\n role?: 'listbox' | 'combobox' | string;\n /** Defines a specific role attribute for each option in the list */\n optionRole?: string;\n /** Sections containing a header and related options */\n sections?: SectionDescriptor[];\n /** The selected options */\n selected: string[];\n /** Allow more than one option to be selected */\n allowMultiple?: boolean;\n /** Vertically align child content to the center, top, or bottom. */\n verticalAlign?: Alignment;\n /** Callback when selection is changed */\n onChange(selected: string[]): void;\n}" } }, "AccessibilityLabels": { @@ -15829,6 +15850,48 @@ "value": "export interface PaginationProps {\n /** Keyboard shortcuts for the next button */\n nextKeys?: Key[];\n /** Keyboard shortcuts for the previous button */\n previousKeys?: Key[];\n /** Tooltip for the next button */\n nextTooltip?: string;\n /** Tooltip for the previous button */\n previousTooltip?: string;\n /** The URL of the next page */\n nextURL?: string;\n /** The URL of the previous page */\n previousURL?: string;\n /** Whether there is a next page to show */\n hasNext?: boolean;\n /** Whether there is a previous page to show */\n hasPrevious?: boolean;\n /** Accessible label for the pagination */\n accessibilityLabel?: string;\n /** Accessible labels for the buttons and UnstyledLinks */\n accessibilityLabels?: AccessibilityLabels;\n /** Callback when next button is clicked */\n onNext?(): void;\n /** Callback when previous button is clicked */\n onPrevious?(): void;\n /** Text to provide more context in between the arrow buttons */\n label?: React.ReactNode;\n}" } }, + "PageActionsProps": { + "polaris-react/src/components/PageActions/PageActions.tsx": { + "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", + "name": "PageActionsProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", + "syntaxKind": "PropertySignature", + "name": "primaryAction", + "value": "any", + "description": "The primary action for the page", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", + "syntaxKind": "PropertySignature", + "name": "secondaryActions", + "value": "any", + "description": "The secondary actions for the page", + "isOptional": true + } + ], + "value": "export interface PageActionsProps {\n /** The primary action for the page */\n primaryAction?: (DisableableAction & LoadableAction) | React.ReactNode;\n /** The secondary actions for the page */\n secondaryActions?: ComplexAction[] | React.ReactNode;\n}" + } + }, + "MaybeJSX": { + "polaris-react/src/components/PageActions/PageActions.tsx": { + "filePath": "polaris-react/src/components/PageActions/PageActions.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeJSX", + "value": "JSX.Element | null", + "description": "" + }, + "polaris-react/src/components/Page/components/Header/Header.tsx": { + "filePath": "polaris-react/src/components/Page/components/Header/Header.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "MaybeJSX", + "value": "JSX.Element | null", + "description": "" + } + }, "MediaQueryContextType": { "polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx": { "filePath": "polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx", @@ -17108,6 +17171,14 @@ "description": "ReactNode to display instead of the sort control", "isOptional": true }, + { + "filePath": "polaris-react/src/components/ResourceList/ResourceList.tsx", + "syntaxKind": "PropertySignature", + "name": "headerContent", + "value": "string", + "description": "Custom header text displayed above the list instead of the resource count.", + "isOptional": true + }, { "filePath": "polaris-react/src/components/ResourceList/ResourceList.tsx", "syntaxKind": "MethodSignature", @@ -17148,7 +17219,7 @@ "isOptional": true } ], - "value": "export interface ResourceListProps {\n /** Item data; each item is passed to renderItem */\n items: TItemType[];\n filterControl?: React.ReactNode;\n /** The markup to display when no resources exist yet. Renders when set and items is empty. */\n emptyState?: React.ReactNode;\n /** The markup to display when no results are returned on search or filter of the list. Renders when `filterControl` is set, items are empty, and `emptyState` is not set.\n * @default EmptySearchResult\n */\n emptySearchState?: React.ReactNode;\n /** Name of the resource, such as customers or products */\n resourceName?: {\n singular: string;\n plural: string;\n };\n /** Up to 2 bulk actions that will be given more prominence */\n promotedBulkActions?: BulkActionsProps['promotedActions'];\n /** Actions available on the currently selected items */\n bulkActions?: BulkActionsProps['actions'];\n /** Collection of IDs for the currently selected items */\n selectedItems?: ResourceListSelectedItems;\n /** Whether or not the list has filter(s) applied */\n isFiltered?: boolean;\n /** Renders a Select All button at the top of the list and checkboxes in front of each list item. For use when bulkActions aren't provided. **/\n selectable?: boolean;\n /** Whether or not there are more items than currently set on the items prop. Determines whether or not to set the paginatedSelectAllAction and paginatedSelectAllText props on the BulkActions component. */\n hasMoreItems?: boolean;\n /** Overlays item list with a spinner while a background action is being performed */\n loading?: boolean;\n /** Boolean to show or hide the header */\n showHeader?: boolean;\n /** Total number of resources */\n totalItemsCount?: number;\n /** Current value of the sort control */\n sortValue?: string;\n /** Collection of sort options to choose from */\n sortOptions?: SelectOption[];\n /** ReactNode to display instead of the sort control */\n alternateTool?: React.ReactNode;\n /** Callback when sort option is changed */\n onSortChange?(selected: string, id: string): void;\n /** Callback when selection is changed */\n onSelectionChange?(selectedItems: ResourceListSelectedItems): void;\n /** Function to render each list item, must return a ResourceItem component */\n renderItem(item: TItemType, id: string, index: number): React.ReactNode;\n /** Function to customize the unique ID for each item */\n idForItem?(item: TItemType, index: number): string;\n /** Function to resolve the ids of items */\n resolveItemId?(item: TItemType): string;\n}" + "value": "export interface ResourceListProps {\n /** Item data; each item is passed to renderItem */\n items: TItemType[];\n filterControl?: React.ReactNode;\n /** The markup to display when no resources exist yet. Renders when set and items is empty. */\n emptyState?: React.ReactNode;\n /** The markup to display when no results are returned on search or filter of the list. Renders when `filterControl` is set, items are empty, and `emptyState` is not set.\n * @default EmptySearchResult\n */\n emptySearchState?: React.ReactNode;\n /** Name of the resource, such as customers or products */\n resourceName?: {\n singular: string;\n plural: string;\n };\n /** Up to 2 bulk actions that will be given more prominence */\n promotedBulkActions?: BulkActionsProps['promotedActions'];\n /** Actions available on the currently selected items */\n bulkActions?: BulkActionsProps['actions'];\n /** Collection of IDs for the currently selected items */\n selectedItems?: ResourceListSelectedItems;\n /** Whether or not the list has filter(s) applied */\n isFiltered?: boolean;\n /** Renders a Select All button at the top of the list and checkboxes in front of each list item. For use when bulkActions aren't provided. **/\n selectable?: boolean;\n /** Whether or not there are more items than currently set on the items prop. Determines whether or not to set the paginatedSelectAllAction and paginatedSelectAllText props on the BulkActions component. */\n hasMoreItems?: boolean;\n /** Overlays item list with a spinner while a background action is being performed */\n loading?: boolean;\n /** Boolean to show or hide the header */\n showHeader?: boolean;\n /** Total number of resources */\n totalItemsCount?: number;\n /** Current value of the sort control */\n sortValue?: string;\n /** Collection of sort options to choose from */\n sortOptions?: SelectOption[];\n /** ReactNode to display instead of the sort control */\n alternateTool?: React.ReactNode;\n /** Custom header text displayed above the list instead of the resource count. */\n headerContent?: string;\n /** Callback when sort option is changed */\n onSortChange?(selected: string, id: string): void;\n /** Callback when selection is changed */\n onSelectionChange?(selectedItems: ResourceListSelectedItems): void;\n /** Function to render each list item, must return a ResourceItem component */\n renderItem(item: TItemType, id: string, index: number): React.ReactNode;\n /** Function to customize the unique ID for each item */\n idForItem?(item: TItemType, index: number): string;\n /** Function to resolve the ids of items */\n resolveItemId?(item: TItemType): string;\n}" } }, "ResourceListType": { @@ -17228,89 +17299,6 @@ "value": "export interface ScrollableProps extends React.HTMLProps {\n /** Content to display in scrollable area */\n children?: React.ReactNode;\n /** Scroll content vertically\n * @default true\n * */\n vertical?: boolean;\n /** Scroll content horizontally\n * @default true\n * */\n horizontal?: boolean;\n /** Add a shadow when content is scrollable */\n shadow?: boolean;\n /** Slightly hints content upon mounting when scrollable */\n hint?: boolean;\n /** Adds a tabIndex to scrollable when children are not focusable */\n focusable?: boolean;\n /** Called when scrolled to the bottom of the scroll area */\n onScrolledToBottom?(): void;\n}" } }, - "AriaLive": { - "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx": { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "AriaLive", - "value": "'off' | 'polite' | undefined", - "description": "" - } - }, - "SelectAllActionsProps": { - "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx": { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "name": "SelectAllActionsProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "Visually hidden text for screen readers", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "string", - "description": "Label for the bulk actions", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean | \"indeterminate\"", - "description": "State of the bulk actions checkbox", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "PropertySignature", - "name": "selectMode", - "value": "boolean", - "description": "List is in a selectable state", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "PropertySignature", - "name": "paginatedSelectAllText", - "value": "string", - "description": "Text to select all across pages", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "PropertySignature", - "name": "paginatedSelectAllAction", - "value": "Action", - "description": "Action for selecting all across pages", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables bulk actions", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/SelectAllActions/SelectAllActions.tsx", - "syntaxKind": "MethodSignature", - "name": "onToggleAll", - "value": "() => void", - "description": "Callback when the select all checkbox is clicked", - "isOptional": true - } - ], - "value": "export interface SelectAllActionsProps {\n /** Visually hidden text for screen readers */\n accessibilityLabel?: string;\n /** Label for the bulk actions */\n label?: string;\n /** State of the bulk actions checkbox */\n selected?: boolean | 'indeterminate';\n /** List is in a selectable state */\n selectMode?: boolean;\n /** Text to select all across pages */\n paginatedSelectAllText?: string;\n /** Action for selecting all across pages */\n paginatedSelectAllAction?: Action;\n /** Disables bulk actions */\n disabled?: boolean;\n /** Callback when the select all checkbox is clicked */\n onToggleAll?(): void;\n}" - } - }, "StrictOption": { "polaris-react/src/components/Select/Select.tsx": { "filePath": "polaris-react/src/components/Select/Select.tsx", @@ -17817,25 +17805,6 @@ "value": "export interface SkeletonBodyTextProps {\n /**\n * Number of lines to display\n * @default 3\n */\n lines?: number;\n}" } }, - "SkeletonDisplayTextProps": { - "polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx": { - "filePath": "polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx", - "name": "SkeletonDisplayTextProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx", - "syntaxKind": "PropertySignature", - "name": "size", - "value": "Size", - "description": "Size of the text", - "isOptional": true, - "defaultValue": "'medium'" - } - ], - "value": "export interface SkeletonDisplayTextProps {\n /**\n * Size of the text\n * @default 'medium'\n */\n size?: Size;\n}" - } - }, "SkeletonPageProps": { "polaris-react/src/components/SkeletonPage/SkeletonPage.tsx": { "filePath": "polaris-react/src/components/SkeletonPage/SkeletonPage.tsx", @@ -17894,6 +17863,25 @@ "value": "export interface SkeletonPageProps {\n /** Page title, in large type */\n title?: string;\n /** Remove the normal max-width on the page */\n fullWidth?: boolean;\n /** Decreases the maximum layout width. Intended for single-column layouts */\n narrowWidth?: boolean;\n /** Shows a skeleton over the primary action */\n primaryAction?: boolean;\n /** Shows a skeleton over the breadcrumb */\n breadcrumbs?: boolean;\n /** The child elements to render in the skeleton page. */\n children?: React.ReactNode;\n}" } }, + "SkeletonDisplayTextProps": { + "polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx": { + "filePath": "polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx", + "name": "SkeletonDisplayTextProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx", + "syntaxKind": "PropertySignature", + "name": "size", + "value": "Size", + "description": "Size of the text", + "isOptional": true, + "defaultValue": "'medium'" + } + ], + "value": "export interface SkeletonDisplayTextProps {\n /**\n * Size of the text\n * @default 'medium'\n */\n size?: Size;\n}" + } + }, "SkeletonTabsProps": { "polaris-react/src/components/SkeletonTabs/SkeletonTabs.tsx": { "filePath": "polaris-react/src/components/SkeletonTabs/SkeletonTabs.tsx", @@ -17998,18 +17986,16 @@ "name": "onMouseUp", "value": "() => void", "description": "" - } - ], - "value": "export interface SpinnerProps {\n onChange: HandleStepFn;\n onClick?(event: React.MouseEvent): void;\n onMouseDown(onChange: HandleStepFn): void;\n onMouseUp(): void;\n}" - } - }, - "StickyProps": { - "polaris-react/src/components/Sticky/Sticky.tsx": { - "filePath": "polaris-react/src/components/Sticky/Sticky.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "StickyProps", - "value": "{\n /** Element outlining the fixed position boundaries */\n boundingElement?: HTMLElement | null;\n /** Offset vertical spacing from the top of the scrollable container */\n offset?: boolean;\n /** Should the element remain in a fixed position when the layout is stacked (smaller screens) */\n disableWhenStacked?: boolean;\n /** Callback run when sticky header is added or removed */\n onStickyChange?: (isSticky: boolean) => void;\n} & (\n | {children: React.ReactNode}\n | {children(isSticky: boolean): React.ReactNode}\n)", - "description": "" + }, + { + "filePath": "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx", + "syntaxKind": "MethodSignature", + "name": "onBlur", + "value": "(event: React.FocusEvent) => void", + "description": "" + } + ], + "value": "export interface SpinnerProps {\n onChange: HandleStepFn;\n onClick?(event: React.MouseEvent): void;\n onMouseDown(onChange: HandleStepFn): void;\n onMouseUp(): void;\n onBlur(event: React.FocusEvent): void;\n}" } }, "Distribution": { @@ -18079,31 +18065,13 @@ "value": "export interface StackProps {\n /** Elements to display inside stack */\n children?: React.ReactNode;\n /** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */\n wrap?: boolean;\n /** Stack the elements vertically */\n vertical?: boolean;\n /** Adjust spacing between elements */\n spacing?: Spacing;\n /** Adjust vertical alignment of elements */\n alignment?: Alignment;\n /** Adjust horizontal alignment of elements */\n distribution?: Distribution;\n}" } }, - "SubheadingProps": { - "polaris-react/src/components/Subheading/Subheading.tsx": { - "filePath": "polaris-react/src/components/Subheading/Subheading.tsx", - "name": "SubheadingProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Subheading/Subheading.tsx", - "syntaxKind": "PropertySignature", - "name": "element", - "value": "HeadingTagName", - "description": "The element name to use for the subheading", - "isOptional": true, - "defaultValue": "'h3'" - }, - { - "filePath": "polaris-react/src/components/Subheading/Subheading.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "Text to display in subheading", - "isOptional": true - } - ], - "value": "export interface SubheadingProps {\n /**\n * The element name to use for the subheading\n * @default 'h3'\n */\n element?: HeadingTagName;\n /** Text to display in subheading */\n children?: React.ReactNode;\n}" + "StickyProps": { + "polaris-react/src/components/Sticky/Sticky.tsx": { + "filePath": "polaris-react/src/components/Sticky/Sticky.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "StickyProps", + "value": "{\n /** Element outlining the fixed position boundaries */\n boundingElement?: HTMLElement | null;\n /** Offset vertical spacing from the top of the scrollable container */\n offset?: boolean;\n /** Should the element remain in a fixed position when the layout is stacked (smaller screens) */\n disableWhenStacked?: boolean;\n /** Callback run when sticky header is added or removed */\n onStickyChange?: (isSticky: boolean) => void;\n} & (\n | {children: React.ReactNode}\n | {children(isSticky: boolean): React.ReactNode}\n)", + "description": "" } }, "TabsProps": { @@ -18162,30 +18130,31 @@ "value": "export interface TabsProps {\n /** Content to display in tabs */\n children?: React.ReactNode;\n /** Index of selected tab */\n selected: number;\n /** List of tabs */\n tabs: TabDescriptor[];\n /** Fit tabs to container */\n fitted?: boolean;\n /** Text to replace disclosures horizontal dots */\n disclosureText?: string;\n /** Callback when tab is selected */\n onSelect?(selectedTabIndex: number): void;\n}" } }, - "TextContainerProps": { - "polaris-react/src/components/TextContainer/TextContainer.tsx": { - "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", - "name": "TextContainerProps", + "SubheadingProps": { + "polaris-react/src/components/Subheading/Subheading.tsx": { + "filePath": "polaris-react/src/components/Subheading/Subheading.tsx", + "name": "SubheadingProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", + "filePath": "polaris-react/src/components/Subheading/Subheading.tsx", "syntaxKind": "PropertySignature", - "name": "spacing", - "value": "Spacing", - "description": "The amount of vertical spacing children will get between them", - "isOptional": true + "name": "element", + "value": "HeadingTagName", + "description": "The element name to use for the subheading", + "isOptional": true, + "defaultValue": "'h3'" }, { - "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", + "filePath": "polaris-react/src/components/Subheading/Subheading.tsx", "syntaxKind": "PropertySignature", "name": "children", "value": "React.ReactNode", - "description": "The content to render in the text container.", + "description": "Text to display in subheading", "isOptional": true } ], - "value": "export interface TextContainerProps {\n /** The amount of vertical spacing children will get between them */\n spacing?: Spacing;\n /** The content to render in the text container. */\n children?: React.ReactNode;\n}" + "value": "export interface SubheadingProps {\n /**\n * The element name to use for the subheading\n * @default 'h3'\n */\n element?: HeadingTagName;\n /** Text to display in subheading */\n children?: React.ReactNode;\n}" } }, "Variant": { @@ -18293,6 +18262,116 @@ "value": "export interface TextProps {\n /** Adjust horizontal alignment of text */\n alignment?: Alignment;\n /** The element type */\n as: Element;\n /** Prevent text from overflowing */\n breakWord?: boolean;\n /** Text to display */\n children: ReactNode;\n /** Adjust color of text */\n color?: Color;\n /** Adjust weight of text */\n fontWeight?: FontWeight;\n /** HTML id attribute */\n id?: string;\n /** Truncate text overflow with ellipsis */\n truncate?: boolean;\n /** Typographic style of text */\n variant: Variant;\n /** Visually hide the text */\n visuallyHidden?: boolean;\n}" } }, + "TextContainerProps": { + "polaris-react/src/components/TextContainer/TextContainer.tsx": { + "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", + "name": "TextContainerProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", + "syntaxKind": "PropertySignature", + "name": "spacing", + "value": "Spacing", + "description": "The amount of vertical spacing children will get between them", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to render in the text container.", + "isOptional": true + } + ], + "value": "export interface TextContainerProps {\n /** The amount of vertical spacing children will get between them */\n spacing?: Spacing;\n /** The content to render in the text container. */\n children?: React.ReactNode;\n}" + } + }, + "TagProps": { + "polaris-react/src/components/Tag/Tag.tsx": { + "filePath": "polaris-react/src/components/Tag/Tag.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "TagProps", + "value": "NonMutuallyExclusiveProps & (\n | {onClick?(): void; onRemove?: undefined; url?: undefined}\n | {onClick?: undefined; onRemove?(): void; url?: string}\n )", + "description": "" + } + }, + "Variation": { + "polaris-react/src/components/TextStyle/TextStyle.tsx": { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Variation", + "value": "'positive' | 'negative' | 'warning' | 'strong' | 'subdued' | 'code'", + "description": "" + } + }, + "VariationValue": { + "polaris-react/src/components/TextStyle/TextStyle.tsx": { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "syntaxKind": "EnumDeclaration", + "name": "VariationValue", + "value": "enum VariationValue {\n Positive = 'positive',\n Negative = 'negative',\n Warning = 'warning',\n Strong = 'strong',\n Subdued = 'subdued',\n Code = 'code',\n}", + "members": [ + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "name": "Positive", + "value": "positive" + }, + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "name": "Negative", + "value": "negative" + }, + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "name": "Warning", + "value": "warning" + }, + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "name": "Strong", + "value": "strong" + }, + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "name": "Subdued", + "value": "subdued" + }, + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "name": "Code", + "value": "code" + } + ] + } + }, + "TextStyleProps": { + "polaris-react/src/components/TextStyle/TextStyle.tsx": { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "name": "TextStyleProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "syntaxKind": "PropertySignature", + "name": "variation", + "value": "Variation", + "description": "Give text additional visual meaning", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content that should get the intended styling", + "isOptional": true + } + ], + "value": "export interface TextStyleProps {\n /** Give text additional visual meaning */\n variation?: Variation;\n /** The content that should get the intended styling */\n children?: React.ReactNode;\n}" + } + }, "InputMode": { "polaris-react/src/components/TextField/TextField.tsx": { "filePath": "polaris-react/src/components/TextField/TextField.tsx", @@ -18414,92 +18493,8 @@ "filePath": "polaris-react/src/components/TextField/TextField.tsx", "syntaxKind": "TypeAliasDeclaration", "name": "TextFieldProps", - "value": "NonMutuallyExclusiveProps & MutuallyExclusiveInteractionProps & MutuallyExclusiveSelectionProps", - "description": "" - } - }, - "TagProps": { - "polaris-react/src/components/Tag/Tag.tsx": { - "filePath": "polaris-react/src/components/Tag/Tag.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "TagProps", - "value": "NonMutuallyExclusiveProps & (\n | {onClick?(): void; onRemove?: undefined; url?: undefined}\n | {onClick?: undefined; onRemove?(): void; url?: string}\n )", - "description": "" - } - }, - "Variation": { - "polaris-react/src/components/TextStyle/TextStyle.tsx": { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Variation", - "value": "'positive' | 'negative' | 'warning' | 'strong' | 'subdued' | 'code'", - "description": "" - } - }, - "VariationValue": { - "polaris-react/src/components/TextStyle/TextStyle.tsx": { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "syntaxKind": "EnumDeclaration", - "name": "VariationValue", - "value": "enum VariationValue {\n Positive = 'positive',\n Negative = 'negative',\n Warning = 'warning',\n Strong = 'strong',\n Subdued = 'subdued',\n Code = 'code',\n}", - "members": [ - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "name": "Positive", - "value": "positive" - }, - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "name": "Negative", - "value": "negative" - }, - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "name": "Warning", - "value": "warning" - }, - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "name": "Strong", - "value": "strong" - }, - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "name": "Subdued", - "value": "subdued" - }, - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "name": "Code", - "value": "code" - } - ] - } - }, - "TextStyleProps": { - "polaris-react/src/components/TextStyle/TextStyle.tsx": { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "name": "TextStyleProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "syntaxKind": "PropertySignature", - "name": "variation", - "value": "Variation", - "description": "Give text additional visual meaning", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/TextStyle/TextStyle.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content that should get the intended styling", - "isOptional": true - } - ], - "value": "export interface TextStyleProps {\n /** Give text additional visual meaning */\n variation?: Variation;\n /** The content that should get the intended styling */\n children?: React.ReactNode;\n}" + "value": "NonMutuallyExclusiveProps & MutuallyExclusiveInteractionProps & MutuallyExclusiveSelectionProps", + "description": "" } }, "ThumbnailProps": { @@ -18543,6 +18538,33 @@ "value": "export interface ThumbnailProps {\n /**\n * Size of thumbnail\n * @default 'medium'\n */\n size?: Size;\n /** URL for the image */\n source: string | React.FunctionComponent>;\n /** Alt text for the thumbnail image */\n alt: string;\n /** Transparent background */\n transparent?: boolean;\n}" } }, + "Width": { + "polaris-react/src/components/Tooltip/Tooltip.tsx": { + "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Width", + "value": "'default' | 'wide'", + "description": "" + } + }, + "Padding": { + "polaris-react/src/components/Tooltip/Tooltip.tsx": { + "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Padding", + "value": "'default' | Extract", + "description": "" + } + }, + "BorderRadius": { + "polaris-react/src/components/Tooltip/Tooltip.tsx": { + "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderRadius", + "value": "\"1\" | \"2\"", + "description": "" + } + }, "TooltipProps": { "polaris-react/src/components/Tooltip/Tooltip.tsx": { "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", @@ -18614,6 +18636,41 @@ "description": "Visually hidden text for screen readers", "isOptional": true }, + { + "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", + "syntaxKind": "PropertySignature", + "name": "width", + "value": "Width", + "description": "Width of content", + "isOptional": true, + "defaultValue": "'default'" + }, + { + "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "Padding", + "description": "Padding of content", + "isOptional": true, + "defaultValue": "'default'" + }, + { + "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "BorderRadius", + "description": "Border radius of the tooltip", + "isOptional": true, + "defaultValue": "'1'" + }, + { + "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", + "syntaxKind": "PropertySignature", + "name": "zIndexOverride", + "value": "number", + "description": "Override on the default z-index of 400", + "isOptional": true + }, { "filePath": "polaris-react/src/components/Tooltip/Tooltip.tsx", "syntaxKind": "MethodSignature", @@ -18631,7 +18688,7 @@ "isOptional": true } ], - "value": "export interface TooltipProps {\n /** The element that will activate to tooltip */\n children?: React.ReactNode;\n /** The content to display within the tooltip */\n content: React.ReactNode;\n /** Toggle whether the tooltip is visible */\n active?: boolean;\n /** Delay in milliseconds while hovering over an element before the tooltip is visible */\n hoverDelay?: number;\n /** Dismiss tooltip when not interacting with its children */\n dismissOnMouseOut?: TooltipOverlayProps['preventInteraction'];\n /**\n * The direction the tooltip tries to display\n * @default 'below'\n */\n preferredPosition?: TooltipOverlayProps['preferredPosition'];\n /**\n * The element type to wrap the activator in\n * @default 'span'\n */\n activatorWrapper?: string;\n /** Visually hidden text for screen readers */\n accessibilityLabel?: string;\n /* Callback fired when the tooltip is activated */\n onOpen?(): void;\n /* Callback fired when the tooltip is dismissed */\n onClose?(): void;\n}" + "value": "export interface TooltipProps {\n /** The element that will activate to tooltip */\n children?: React.ReactNode;\n /** The content to display within the tooltip */\n content: React.ReactNode;\n /** Toggle whether the tooltip is visible */\n active?: boolean;\n /** Delay in milliseconds while hovering over an element before the tooltip is visible */\n hoverDelay?: number;\n /** Dismiss tooltip when not interacting with its children */\n dismissOnMouseOut?: TooltipOverlayProps['preventInteraction'];\n /**\n * The direction the tooltip tries to display\n * @default 'below'\n */\n preferredPosition?: TooltipOverlayProps['preferredPosition'];\n /**\n * The element type to wrap the activator in\n * @default 'span'\n */\n activatorWrapper?: string;\n /** Visually hidden text for screen readers */\n accessibilityLabel?: string;\n /**\n * Width of content\n * @default 'default'\n */\n width?: Width;\n /**\n * Padding of content\n * @default 'default'\n */\n padding?: Padding;\n /**\n * Border radius of the tooltip\n * @default '1'\n */\n borderRadius?: BorderRadius;\n /** Override on the default z-index of 400 */\n zIndexOverride?: number;\n /* Callback fired when the tooltip is activated */\n onOpen?(): void;\n /* Callback fired when the tooltip is dismissed */\n onClose?(): void;\n}" } }, "TopBarProps": { @@ -18732,6 +18789,23 @@ "value": "export interface TopBarProps {\n /** Toggles whether or not a navigation component has been provided. Controls the presence of the mobile nav toggle button */\n showNavigationToggle?: boolean;\n /** Accepts a user component that is made available as a static member of the top bar component and renders as the primary menu */\n userMenu?: React.ReactNode;\n /** Accepts a menu component that is made available as a static member of the top bar component */\n secondaryMenu?: React.ReactNode;\n /** Accepts a component that is used to help users switch between different contexts */\n contextControl?: React.ReactNode;\n /** Accepts a search field component that is made available as a `TextField` static member of the top bar component */\n searchField?: React.ReactNode;\n /** Accepts a search results component that is ideally composed of a card component containing a list of actionable search results */\n searchResults?: React.ReactNode;\n /** A boolean property indicating whether search results are currently visible. */\n searchResultsVisible?: boolean;\n /** Whether or not the search results overlay has a visible backdrop */\n searchResultsOverlayVisible?: boolean;\n /** A callback function that handles the dismissal of search results */\n onSearchResultsDismiss?: SearchProps['onDismiss'];\n /** A callback function that handles hiding and showing mobile navigation */\n onNavigationToggle?(): void;\n /** Accepts a component that is used to supplement the logo markup */\n logoSuffix?: React.ReactNode;\n}" } }, + "TruncateProps": { + "polaris-react/src/components/Truncate/Truncate.tsx": { + "filePath": "polaris-react/src/components/Truncate/Truncate.tsx", + "name": "TruncateProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Truncate/Truncate.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "" + } + ], + "value": "export interface TruncateProps {\n children: React.ReactNode;\n}" + } + }, "TrapFocusProps": { "polaris-react/src/components/TrapFocus/TrapFocus.tsx": { "filePath": "polaris-react/src/components/TrapFocus/TrapFocus.tsx", @@ -18973,6 +19047,74 @@ "value": "export interface UnstyledButtonProps extends BaseButton {\n /** The content to display inside the button */\n children?: React.ReactNode;\n /** A custom class name to apply styles to button */\n className?: string;\n [key: string]: any;\n}" } }, + "VideoThumbnailProps": { + "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx": { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "name": "VideoThumbnailProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "syntaxKind": "PropertySignature", + "name": "thumbnailUrl", + "value": "string", + "description": "URL source for thumbnail image." + }, + { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "syntaxKind": "PropertySignature", + "name": "videoLength", + "value": "number", + "description": "Length of video in seconds.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "syntaxKind": "PropertySignature", + "name": "videoProgress", + "value": "number", + "description": "Video progress in seconds. Displays a progress bar at the bottom of the thumbnail. Only renders when videoLength is also set.", + "isOptional": true, + "defaultValue": "0" + }, + { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "syntaxKind": "PropertySignature", + "name": "showVideoProgress", + "value": "boolean", + "description": "Indicate whether to allow video progress to be displayed", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "Custom ARIA label for play button.", + "isOptional": true, + "defaultValue": "'Play video of length {human readable duration}'" + }, + { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "syntaxKind": "MethodSignature", + "name": "onClick", + "value": "() => void", + "description": "Callback on click or keypress of thumbnail. Use to trigger render of the video player in your chosen format, for example within a modal or fullscreen container." + }, + { + "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", + "syntaxKind": "MethodSignature", + "name": "onBeforeStartPlaying", + "value": "() => void", + "description": "Callback on mouse enter, focus, or touch start of thumbnail. Use to trigger video preload.", + "isOptional": true + } + ], + "value": "export interface VideoThumbnailProps {\n /** URL source for thumbnail image. */\n thumbnailUrl: string;\n /**\n * Length of video in seconds.\n * @default 0\n */\n videoLength?: number;\n /**\n * Video progress in seconds. Displays a progress bar at the bottom of the thumbnail. Only renders when videoLength is also set.\n * @default 0\n */\n videoProgress?: number;\n /**\n * Indicate whether to allow video progress to be displayed\n * @default false\n */\n showVideoProgress?: boolean;\n /** Custom ARIA label for play button.\n * @default 'Play video of length {human readable duration}'\n */\n accessibilityLabel?: string;\n /** Callback on click or keypress of thumbnail. Use to trigger render of the video player in your chosen format, for example within a modal or fullscreen container. */\n onClick(): void;\n /** Callback on mouse enter, focus, or touch start of thumbnail. Use to trigger video preload. */\n onBeforeStartPlaying?(): void;\n}" + } + }, "UnstyledLinkProps": { "polaris-react/src/components/UnstyledLink/UnstyledLink.tsx": { "filePath": "polaris-react/src/components/UnstyledLink/UnstyledLink.tsx", @@ -21890,74 +22032,6 @@ "value": "export interface UnstyledLinkProps extends LinkLikeComponentProps {}" } }, - "VideoThumbnailProps": { - "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx": { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "name": "VideoThumbnailProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "syntaxKind": "PropertySignature", - "name": "thumbnailUrl", - "value": "string", - "description": "URL source for thumbnail image." - }, - { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "syntaxKind": "PropertySignature", - "name": "videoLength", - "value": "number", - "description": "Length of video in seconds.", - "isOptional": true, - "defaultValue": "0" - }, - { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "syntaxKind": "PropertySignature", - "name": "videoProgress", - "value": "number", - "description": "Video progress in seconds. Displays a progress bar at the bottom of the thumbnail. Only renders when videoLength is also set.", - "isOptional": true, - "defaultValue": "0" - }, - { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "syntaxKind": "PropertySignature", - "name": "showVideoProgress", - "value": "boolean", - "description": "Indicate whether to allow video progress to be displayed", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "Custom ARIA label for play button.", - "isOptional": true, - "defaultValue": "'Play video of length {human readable duration}'" - }, - { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "syntaxKind": "MethodSignature", - "name": "onClick", - "value": "() => void", - "description": "Callback on click or keypress of thumbnail. Use to trigger render of the video player in your chosen format, for example within a modal or fullscreen container." - }, - { - "filePath": "polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx", - "syntaxKind": "MethodSignature", - "name": "onBeforeStartPlaying", - "value": "() => void", - "description": "Callback on mouse enter, focus, or touch start of thumbnail. Use to trigger video preload.", - "isOptional": true - } - ], - "value": "export interface VideoThumbnailProps {\n /** URL source for thumbnail image. */\n thumbnailUrl: string;\n /**\n * Length of video in seconds.\n * @default 0\n */\n videoLength?: number;\n /**\n * Video progress in seconds. Displays a progress bar at the bottom of the thumbnail. Only renders when videoLength is also set.\n * @default 0\n */\n videoProgress?: number;\n /**\n * Indicate whether to allow video progress to be displayed\n * @default false\n */\n showVideoProgress?: boolean;\n /** Custom ARIA label for play button.\n * @default 'Play video of length {human readable duration}'\n */\n accessibilityLabel?: string;\n /** Callback on click or keypress of thumbnail. Use to trigger render of the video player in your chosen format, for example within a modal or fullscreen container. */\n onClick(): void;\n /** Callback on mouse enter, focus, or touch start of thumbnail. Use to trigger video preload. */\n onBeforeStartPlaying?(): void;\n}" - } - }, "VisuallyHiddenProps": { "polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx": { "filePath": "polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx", @@ -22173,23 +22247,6 @@ "value": "export interface FocusManagerContextType {\n trapFocusList: string[];\n add: (id: string) => void;\n remove: (id: string) => boolean;\n}" } }, - "TruncateProps": { - "polaris-react/src/components/Truncate/Truncate.tsx": { - "filePath": "polaris-react/src/components/Truncate/Truncate.tsx", - "name": "TruncateProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Truncate/Truncate.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "" - } - ], - "value": "export interface TruncateProps {\n children: React.ReactNode;\n}" - } - }, "PortalsManager": { "polaris-react/src/utilities/portals/context.tsx": { "filePath": "polaris-react/src/utilities/portals/context.tsx", @@ -22367,6 +22424,23 @@ "name": "secondaryAction", "value": "SecondaryAction", "description": "", + "isOptional": true, + "deprecationMessage": "Use secondaryActions instead." + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "secondaryActions", + "value": "SecondaryActions", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "displayActionsOnHover", + "value": "boolean", + "description": "", "isOptional": true }, { @@ -22450,7 +22524,7 @@ "isOptional": true } ], - "value": "export interface ItemProps extends ItemURLDetails {\n icon?: IconProps['source'];\n badge?: ReactNode;\n label: string;\n disabled?: boolean;\n accessibilityLabel?: string;\n selected?: boolean;\n exactMatch?: boolean;\n new?: boolean;\n subNavigationItems?: SubNavigationItem[];\n secondaryAction?: SecondaryAction;\n onClick?(): void;\n onToggleExpandedState?(): void;\n expanded?: boolean;\n shouldResizeIcon?: boolean;\n truncateText?: boolean;\n}" + "value": "export interface ItemProps extends ItemURLDetails {\n icon?: IconProps['source'];\n badge?: ReactNode;\n label: string;\n disabled?: boolean;\n accessibilityLabel?: string;\n selected?: boolean;\n exactMatch?: boolean;\n new?: boolean;\n subNavigationItems?: SubNavigationItem[];\n /** @deprecated Use secondaryActions instead. */\n secondaryAction?: SecondaryAction;\n secondaryActions?: SecondaryActions;\n displayActionsOnHover?: boolean;\n onClick?(): void;\n onToggleExpandedState?(): void;\n expanded?: boolean;\n shouldResizeIcon?: boolean;\n truncateText?: boolean;\n}" }, "polaris-react/src/components/Stack/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", @@ -22544,39 +22618,15 @@ "description": "", "members": [ { - "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - } - ], - "value": "interface ItemProps {\n children?: React.ReactNode;\n}" - } - }, - "MeasuredActions": { - "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx": { - "filePath": "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx", - "name": "MeasuredActions", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx", - "syntaxKind": "PropertySignature", - "name": "showable", - "value": "MenuActionDescriptor[]", - "description": "" - }, - { - "filePath": "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx", + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "rolledUp", - "value": "(MenuActionDescriptor | MenuGroupDescriptor)[]", - "description": "" + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true } ], - "value": "interface MeasuredActions {\n showable: MenuActionDescriptor[];\n rolledUp: (MenuActionDescriptor | MenuGroupDescriptor)[];\n}" + "value": "interface ItemProps {\n children?: React.ReactNode;\n}" } }, "SectionProps": { @@ -22825,6 +22875,30 @@ "value": "export interface SectionProps {\n children?: React.ReactNode;\n}" } }, + "MeasuredActions": { + "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx": { + "filePath": "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx", + "name": "MeasuredActions", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx", + "syntaxKind": "PropertySignature", + "name": "showable", + "value": "MenuActionDescriptor[]", + "description": "" + }, + { + "filePath": "polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx", + "syntaxKind": "PropertySignature", + "name": "rolledUp", + "value": "(MenuActionDescriptor | MenuGroupDescriptor)[]", + "description": "" + } + ], + "value": "interface MeasuredActions {\n showable: MenuActionDescriptor[];\n rolledUp: (MenuActionDescriptor | MenuGroupDescriptor)[];\n}" + } + }, "MenuGroupProps": { "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx": { "filePath": "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx", @@ -22951,6 +23025,40 @@ "value": "export interface MenuGroupProps extends MenuGroupDescriptor {\n /** Visually hidden menu description for screen readers */\n accessibilityLabel?: string;\n /** Whether or not the menu is open */\n active?: boolean;\n /** Callback when the menu is clicked */\n onClick?(openActions: () => void): void;\n /** Callback for opening the MenuGroup by title */\n onOpen(title: string): void;\n /** Callback for closing the MenuGroup by title */\n onClose(title: string): void;\n /** Callback for getting the offsetWidth of the MenuGroup */\n getOffsetWidth?(width: number): void;\n /** Collection of sectioned action items */\n sections?: readonly ActionListSection[];\n}" } }, + "RollupActionsProps": { + "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx": { + "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", + "name": "RollupActionsProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "Accessibilty label", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", + "syntaxKind": "PropertySignature", + "name": "items", + "value": "ActionListItemDescriptor[]", + "description": "Collection of actions for the list", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", + "syntaxKind": "PropertySignature", + "name": "sections", + "value": "ActionListSection[]", + "description": "Collection of sectioned action items", + "isOptional": true + } + ], + "value": "export interface RollupActionsProps {\n /** Accessibilty label */\n accessibilityLabel?: string;\n /** Collection of actions for the list */\n items?: ActionListItemDescriptor[];\n /** Collection of sectioned action items */\n sections?: ActionListSection[];\n}" + } + }, "SecondaryAction": { "polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx": { "filePath": "polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx", @@ -23289,23 +23397,24 @@ { "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "url", + "name": "accessibilityLabel", "value": "string", "description": "" }, { "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", + "name": "icon", + "value": "any", "description": "" }, { "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "icon", - "value": "any", - "description": "" + "name": "url", + "value": "string", + "description": "", + "isOptional": true }, { "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", @@ -23324,41 +23433,7 @@ "isOptional": true } ], - "value": "interface SecondaryAction {\n url: string;\n accessibilityLabel: string;\n icon: IconProps['source'];\n onClick?(): void;\n tooltip?: TooltipProps;\n}" - } - }, - "RollupActionsProps": { - "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx": { - "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", - "name": "RollupActionsProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "Accessibilty label", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "ActionListItemDescriptor[]", - "description": "Collection of actions for the list", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx", - "syntaxKind": "PropertySignature", - "name": "sections", - "value": "ActionListSection[]", - "description": "Collection of sectioned action items", - "isOptional": true - } - ], - "value": "export interface RollupActionsProps {\n /** Accessibilty label */\n accessibilityLabel?: string;\n /** Collection of actions for the list */\n items?: ActionListItemDescriptor[];\n /** Collection of sectioned action items */\n sections?: ActionListSection[];\n}" + "value": "interface SecondaryAction {\n accessibilityLabel: string;\n icon: IconProps['source'];\n url?: string;\n onClick?(): void;\n tooltip?: TooltipProps;\n}" } }, "MappedAction": { @@ -23582,7 +23657,7 @@ "filePath": "polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx", "syntaxKind": "TypeAliasDeclaration", "name": "BulkActionButtonProps", - "value": "{\n disclosure?: boolean;\n indicator?: boolean;\n handleMeasurement?(width: number): void;\n} & DisableableAction", + "value": "{\n disclosure?: boolean;\n indicator?: boolean;\n handleMeasurement?(width: number): void;\n showContentInButton?: boolean;\n} & DisableableAction", "description": "" } }, @@ -23707,6 +23782,72 @@ "value": "export interface CardHeaderProps {\n title?: React.ReactNode;\n actions?: DisableableAction[];\n children?: React.ReactNode;\n}" } }, + "CardSectionProps": { + "polaris-react/src/components/Card/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "name": "CardSectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "subdued", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "flush", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "fullWidth", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "hideOnPrint", + "value": "boolean", + "description": "Allow the card to be hidden when printing", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "actions", + "value": "ComplexAction[]", + "description": "", + "isOptional": true + } + ], + "value": "export interface CardSectionProps {\n title?: React.ReactNode;\n children?: React.ReactNode;\n subdued?: boolean;\n flush?: boolean;\n fullWidth?: boolean;\n /** Allow the card to be hidden when printing */\n hideOnPrint?: boolean;\n actions?: ComplexAction[];\n}" + } + }, "CardSubsectionProps": { "polaris-react/src/components/Card/components/Subsection/Subsection.tsx": { "filePath": "polaris-react/src/components/Card/components/Subsection/Subsection.tsx", @@ -23776,115 +23917,49 @@ "value": "(hue: number) => void", "description": "" } - ], - "value": "export interface HuePickerProps {\n hue: number;\n onChange(hue: number): void;\n}" - } - }, - "SlidableProps": { - "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx": { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "name": "SlidableProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "syntaxKind": "PropertySignature", - "name": "draggerX", - "value": "number", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "syntaxKind": "PropertySignature", - "name": "draggerY", - "value": "number", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "syntaxKind": "MethodSignature", - "name": "onChange", - "value": "(position: Position) => void", - "description": "" - }, - { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "syntaxKind": "MethodSignature", - "name": "onDraggerHeight", - "value": "(height: number) => void", - "description": "", - "isOptional": true - } - ], - "value": "export interface SlidableProps {\n draggerX?: number;\n draggerY?: number;\n onChange(position: Position): void;\n onDraggerHeight?(height: number): void;\n}" - } - }, - "CardSectionProps": { - "polaris-react/src/components/Card/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", - "name": "CardSectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "subdued", - "value": "boolean", - "description": "", - "isOptional": true - }, + ], + "value": "export interface HuePickerProps {\n hue: number;\n onChange(hue: number): void;\n}" + } + }, + "SlidableProps": { + "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx": { + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", + "name": "SlidableProps", + "description": "", + "members": [ { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", "syntaxKind": "PropertySignature", - "name": "flush", - "value": "boolean", + "name": "draggerX", + "value": "number", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", "syntaxKind": "PropertySignature", - "name": "fullWidth", - "value": "boolean", + "name": "draggerY", + "value": "number", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "hideOnPrint", - "value": "boolean", - "description": "Allow the card to be hidden when printing", - "isOptional": true + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", + "syntaxKind": "MethodSignature", + "name": "onChange", + "value": "(position: Position) => void", + "description": "" }, { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "actions", - "value": "ComplexAction[]", + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", + "syntaxKind": "MethodSignature", + "name": "onDraggerHeight", + "value": "(height: number) => void", "description": "", "isOptional": true } ], - "value": "export interface CardSectionProps {\n title?: React.ReactNode;\n children?: React.ReactNode;\n subdued?: boolean;\n flush?: boolean;\n fullWidth?: boolean;\n /** Allow the card to be hidden when printing */\n hideOnPrint?: boolean;\n actions?: ComplexAction[];\n}" + "value": "export interface SlidableProps {\n draggerX?: number;\n draggerY?: number;\n onChange(position: Position): void;\n onDraggerHeight?(height: number): void;\n}" } }, "ItemPosition": { @@ -24332,37 +24407,6 @@ "value": "export interface DayProps {\n focused?: boolean;\n day?: Date;\n selected?: boolean;\n inRange?: boolean;\n inHoveringRange?: boolean;\n disabled?: boolean;\n lastDayOfMonth?: any;\n isLastSelectedDay?: boolean;\n isFirstSelectedDay?: boolean;\n isHoveringRight?: boolean;\n rangeIsDifferent?: boolean;\n weekday?: string;\n selectedAccessibilityLabelPrefix?: string;\n onClick?(day: Date): void;\n onHover?(day?: Date): void;\n onFocus?(day: Date): void;\n}" } }, - "WeekdayProps": { - "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx": { - "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", - "name": "WeekdayProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "string", - "description": "" - }, - { - "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", - "syntaxKind": "PropertySignature", - "name": "current", - "value": "boolean", - "description": "" - } - ], - "value": "export interface WeekdayProps {\n label: string;\n title: string;\n current: boolean;\n}" - } - }, "MonthProps": { "polaris-react/src/components/DatePicker/components/Month/Month.tsx": { "filePath": "polaris-react/src/components/DatePicker/components/Month/Month.tsx", @@ -24481,6 +24525,37 @@ "value": "export interface MonthProps {\n focusedDate?: Date;\n selected?: Range;\n hoverDate?: Date;\n month: number;\n year: number;\n disableDatesBefore?: Date;\n disableDatesAfter?: Date;\n disableSpecificDates?: Date[];\n allowRange?: boolean;\n weekStartsOn: number;\n accessibilityLabelPrefixes: [string | undefined, string];\n onChange?(date: Range): void;\n onHover?(hoverEnd: Date): void;\n onFocus?(date: Date): void;\n}" } }, + "WeekdayProps": { + "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx": { + "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", + "name": "WeekdayProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "" + }, + { + "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "" + }, + { + "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", + "syntaxKind": "PropertySignature", + "name": "current", + "value": "boolean", + "description": "" + } + ], + "value": "export interface WeekdayProps {\n label: string;\n title: string;\n current: boolean;\n}" + } + }, "FileUploadProps": { "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx": { "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", @@ -24778,15 +24853,6 @@ "value": "export interface CSSAnimationProps {\n in: boolean;\n className: string;\n type: AnimationType;\n children?: React.ReactNode;\n}" } }, - "Cell": { - "polaris-react/src/components/Grid/components/Cell/Cell.tsx": { - "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Cell", - "value": "{\n [Breakpoint in Breakpoints]?: string;\n}", - "description": "" - } - }, "ToastManagerProps": { "polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx": { "filePath": "polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx", @@ -24804,6 +24870,15 @@ "value": "export interface ToastManagerProps {\n toastMessages: ToastPropsWithID[];\n}" } }, + "Cell": { + "polaris-react/src/components/Grid/components/Cell/Cell.tsx": { + "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Cell", + "value": "{\n [Breakpoint in Breakpoints]?: string;\n}", + "description": "" + } + }, "CheckboxWrapperProps": { "polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx": { "filePath": "polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx", @@ -24918,6 +24993,106 @@ "value": "export interface RowProps {\n children: React.ReactNode;\n id: string;\n selected?: boolean;\n position: number;\n subdued?: boolean;\n status?: RowStatus;\n disabled?: boolean;\n onNavigation?(id: string): void;\n onClick?(): void;\n}" } }, + "LegacyCardHeaderProps": { + "polaris-react/src/components/LegacyCard/components/Header/Header.tsx": { + "filePath": "polaris-react/src/components/LegacyCard/components/Header/Header.tsx", + "name": "LegacyCardHeaderProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/LegacyCard/components/Header/Header.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Header/Header.tsx", + "syntaxKind": "PropertySignature", + "name": "actions", + "value": "DisableableAction[]", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Header/Header.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + } + ], + "value": "export interface LegacyCardHeaderProps {\n title?: React.ReactNode;\n actions?: DisableableAction[];\n children?: React.ReactNode;\n}" + } + }, + "LegacyCardSectionProps": { + "polaris-react/src/components/LegacyCard/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "name": "LegacyCardSectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "subdued", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "flush", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "fullWidth", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "hideOnPrint", + "value": "boolean", + "description": "Allow the card to be hidden when printing", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/LegacyCard/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "actions", + "value": "ComplexAction[]", + "description": "", + "isOptional": true + } + ], + "value": "export interface LegacyCardSectionProps {\n title?: React.ReactNode;\n children?: React.ReactNode;\n subdued?: boolean;\n flush?: boolean;\n fullWidth?: boolean;\n /** Allow the card to be hidden when printing */\n hideOnPrint?: boolean;\n actions?: ComplexAction[];\n}" + } + }, "ScrollContainerProps": { "polaris-react/src/components/IndexTable/components/ScrollContainer/ScrollContainer.tsx": { "filePath": "polaris-react/src/components/IndexTable/components/ScrollContainer/ScrollContainer.tsx", @@ -24949,6 +25124,24 @@ "value": "export interface ScrollContainerProps {\n children: React.ReactNode;\n scrollableContainerRef: React.RefObject;\n onScroll(canScrollLeft: boolean, canScrollRight: boolean): void;\n}" } }, + "LegacyCardSubsectionProps": { + "polaris-react/src/components/LegacyCard/components/Subsection/Subsection.tsx": { + "filePath": "polaris-react/src/components/LegacyCard/components/Subsection/Subsection.tsx", + "name": "LegacyCardSubsectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/LegacyCard/components/Subsection/Subsection.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + } + ], + "value": "export interface LegacyCardSubsectionProps {\n children?: React.ReactNode;\n}" + } + }, "AnnotatedSectionProps": { "polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx": { "filePath": "polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx", @@ -25149,7 +25342,7 @@ "filePath": "polaris-react/src/components/Page/components/Header/Header.tsx", "syntaxKind": "PropertySignature", "name": "breadcrumbs", - "value": "(LinkAction | CallbackAction)[]", + "value": "LinkAction | CallbackAction | (LinkAction | CallbackAction)[]", "description": "Collection of breadcrumbs", "isOptional": true }, @@ -25447,16 +25640,50 @@ "value": "boolean", "description": "", "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Modal/components/CloseButton/CloseButton.tsx", - "syntaxKind": "MethodSignature", - "name": "onClick", - "value": "() => void", - "description": "" + }, + { + "filePath": "polaris-react/src/components/Modal/components/CloseButton/CloseButton.tsx", + "syntaxKind": "MethodSignature", + "name": "onClick", + "value": "() => void", + "description": "" + } + ], + "value": "export interface CloseButtonProps {\n pressed?: boolean;\n titleHidden?: boolean;\n onClick(): void;\n}" + } + }, + "FooterProps": { + "polaris-react/src/components/Modal/components/Footer/Footer.tsx": { + "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", + "name": "FooterProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", + "syntaxKind": "PropertySignature", + "name": "primaryAction", + "value": "ComplexAction", + "description": "Primary action", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", + "syntaxKind": "PropertySignature", + "name": "secondaryActions", + "value": "ComplexAction[]", + "description": "Collection of secondary actions", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside modal", + "isOptional": true } ], - "value": "export interface CloseButtonProps {\n pressed?: boolean;\n titleHidden?: boolean;\n onClick(): void;\n}" + "value": "export interface FooterProps {\n /** Primary action */\n primaryAction?: ComplexAction;\n /** Collection of secondary actions */\n secondaryActions?: ComplexAction[];\n /** The content to display inside modal */\n children?: React.ReactNode;\n}" } }, "CSSTransitionProps": { @@ -25573,40 +25800,6 @@ "value": "export interface DialogProps {\n labelledBy?: string;\n instant?: boolean;\n children?: React.ReactNode;\n limitHeight?: boolean;\n large?: boolean;\n small?: boolean;\n onClose(): void;\n onEntered?(): void;\n onExited?(): void;\n in?: boolean;\n fullScreen?: boolean;\n setClosing?: Dispatch>;\n}" } }, - "FooterProps": { - "polaris-react/src/components/Modal/components/Footer/Footer.tsx": { - "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", - "name": "FooterProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", - "syntaxKind": "PropertySignature", - "name": "primaryAction", - "value": "ComplexAction", - "description": "Primary action", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", - "syntaxKind": "PropertySignature", - "name": "secondaryActions", - "value": "ComplexAction[]", - "description": "Collection of secondary actions", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Modal/components/Footer/Footer.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside modal", - "isOptional": true - } - ], - "value": "export interface FooterProps {\n /** Primary action */\n primaryAction?: ComplexAction;\n /** Collection of secondary actions */\n secondaryActions?: ComplexAction[];\n /** The content to display inside modal */\n children?: React.ReactNode;\n}" - } - }, "ItemURLDetails": { "polaris-react/src/components/Navigation/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", @@ -25753,6 +25946,15 @@ "value": "export interface SubNavigationItem extends ItemURLDetails {\n url: string;\n label: string;\n disabled?: boolean;\n new?: boolean;\n onClick?(): void;\n}" } }, + "SecondaryActions": { + "polaris-react/src/components/Navigation/components/Item/Item.tsx": { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "SecondaryActions", + "value": "[SecondaryAction] | [SecondaryAction, SecondaryAction]", + "description": "" + } + }, "MatchState": { "polaris-react/src/components/Navigation/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", @@ -25788,6 +25990,69 @@ ] } }, + "ItemSecondaryActionProps": { + "polaris-react/src/components/Navigation/components/Item/Item.tsx": { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "name": "ItemSecondaryActionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "tabIndex", + "value": "number", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "any", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "url", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "MethodSignature", + "name": "onClick", + "value": "() => void", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "tooltip", + "value": "TooltipProps", + "description": "", + "isOptional": true + } + ], + "value": "interface ItemSecondaryActionProps extends SecondaryAction {\n tabIndex: number;\n disabled?: boolean;\n}" + } + }, "PrimaryAction": { "polaris-react/src/components/Page/components/Header/Header.tsx": { "filePath": "polaris-react/src/components/Page/components/Header/Header.tsx", @@ -25910,6 +26175,65 @@ "value": "interface PrimaryAction\n extends DestructableAction,\n DisableableAction,\n LoadableAction,\n IconableAction,\n TooltipAction {\n /** Provides extra visual weight and identifies the primary action in a set of buttons */\n primary?: boolean;\n}" } }, + "PaneProps": { + "polaris-react/src/components/Popover/components/Pane/Pane.tsx": { + "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", + "name": "PaneProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", + "syntaxKind": "PropertySignature", + "name": "fixed", + "value": "boolean", + "description": "Fix the pane to the top of the popover", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", + "syntaxKind": "PropertySignature", + "name": "sectioned", + "value": "boolean", + "description": "Automatically wrap children in padded sections", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The pane content", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", + "syntaxKind": "PropertySignature", + "name": "height", + "value": "string", + "description": "Sets a fixed height and max-height on the Scrollable", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", + "syntaxKind": "MethodSignature", + "name": "onScrolledToBottom", + "value": "() => void", + "description": "Callback when the bottom of the popover is reached by mouse or keyboard", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", + "syntaxKind": "PropertySignature", + "name": "captureOverscroll", + "value": "boolean", + "description": "Prevents page scrolling when the end of the scrollable Popover content is reached", + "isOptional": true, + "defaultValue": "false" + } + ], + "value": "export interface PaneProps {\n /** Fix the pane to the top of the popover */\n fixed?: boolean;\n /** Automatically wrap children in padded sections */\n sectioned?: boolean;\n /** The pane content */\n children?: React.ReactNode;\n /** Sets a fixed height and max-height on the Scrollable */\n height?: string;\n /** Callback when the bottom of the popover is reached by mouse or keyboard */\n onScrolledToBottom?(): void;\n /**\n * Prevents page scrolling when the end of the scrollable Popover content is reached\n * @default false\n */\n captureOverscroll?: boolean;\n}" + } + }, "PopoverCloseSource": { "polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx": { "filePath": "polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx", @@ -26099,65 +26423,6 @@ "value": "export interface PopoverOverlayProps {\n children?: React.ReactNode;\n fullWidth?: boolean;\n fullHeight?: boolean;\n fluidContent?: boolean;\n preferredPosition?: PositionedOverlayProps['preferredPosition'];\n preferredAlignment?: PositionedOverlayProps['preferredAlignment'];\n active: boolean;\n id: string;\n zIndexOverride?: number;\n activator: HTMLElement;\n preferInputActivator?: PositionedOverlayProps['preferInputActivator'];\n sectioned?: boolean;\n fixed?: boolean;\n hideOnPrint?: boolean;\n onClose(source: PopoverCloseSource): void;\n autofocusTarget?: PopoverAutofocusTarget;\n preventCloseOnChildOverlayClick?: boolean;\n captureOverscroll?: boolean;\n}" } }, - "PaneProps": { - "polaris-react/src/components/Popover/components/Pane/Pane.tsx": { - "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", - "name": "PaneProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", - "syntaxKind": "PropertySignature", - "name": "fixed", - "value": "boolean", - "description": "Fix the pane to the top of the popover", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", - "syntaxKind": "PropertySignature", - "name": "sectioned", - "value": "boolean", - "description": "Automatically wrap children in padded sections", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The pane content", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", - "syntaxKind": "PropertySignature", - "name": "height", - "value": "string", - "description": "Sets a fixed height and max-height on the Scrollable", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", - "syntaxKind": "MethodSignature", - "name": "onScrolledToBottom", - "value": "() => void", - "description": "Callback when the bottom of the popover is reached by mouse or keyboard", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Popover/components/Pane/Pane.tsx", - "syntaxKind": "PropertySignature", - "name": "captureOverscroll", - "value": "boolean", - "description": "Prevents page scrolling when the end of the scrollable Popover content is reached", - "isOptional": true, - "defaultValue": "false" - } - ], - "value": "export interface PaneProps {\n /** Fix the pane to the top of the popover */\n fixed?: boolean;\n /** Automatically wrap children in padded sections */\n sectioned?: boolean;\n /** The pane content */\n children?: React.ReactNode;\n /** Sets a fixed height and max-height on the Scrollable */\n height?: string;\n /** Callback when the bottom of the popover is reached by mouse or keyboard */\n onScrolledToBottom?(): void;\n /**\n * Prevents page scrolling when the end of the scrollable Popover content is reached\n * @default false\n */\n captureOverscroll?: boolean;\n}" - } - }, "PolarisContainerProps": { "polaris-react/src/components/PortalsManager/components/PortalsContainer/PortalsContainer.tsx": { "filePath": "polaris-react/src/components/PortalsManager/components/PortalsContainer/PortalsContainer.tsx", @@ -26801,6 +27066,38 @@ "description": "", "isOptional": true }, + { + "filePath": "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx", + "syntaxKind": "PropertySignature", + "name": "width", + "value": "Width", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "Padding", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx", + "syntaxKind": "PropertySignature", + "name": "borderRadius", + "value": "BorderRadius", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx", + "syntaxKind": "PropertySignature", + "name": "zIndexOverride", + "value": "number", + "description": "", + "isOptional": true + }, { "filePath": "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx", "syntaxKind": "MethodSignature", @@ -26809,7 +27106,7 @@ "description": "" } ], - "value": "export interface TooltipOverlayProps {\n id: string;\n active: boolean;\n preventInteraction?: PositionedOverlayProps['preventInteraction'];\n preferredPosition?: PositionedOverlayProps['preferredPosition'];\n children?: React.ReactNode;\n activator: HTMLElement;\n accessibilityLabel?: string;\n onClose(): void;\n}" + "value": "export interface TooltipOverlayProps {\n id: string;\n active: boolean;\n preventInteraction?: PositionedOverlayProps['preventInteraction'];\n preferredPosition?: PositionedOverlayProps['preferredPosition'];\n children?: React.ReactNode;\n activator: HTMLElement;\n accessibilityLabel?: string;\n width?: Width;\n padding?: Padding;\n borderRadius?: BorderRadius;\n zIndexOverride?: number;\n onClose(): void;\n}" } }, "MenuProps": { @@ -27224,4 +27521,4 @@ "value": "export interface MessageProps {\n title: string;\n description: string;\n action: {onClick(): void; content: string};\n link: {to: string; content: string};\n badge?: {content: string; status: BadgeProps['status']};\n}" } } -} +} \ No newline at end of file