From 91ad8cc506a7195f618e73107ac5f5785fb35cdd Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Wed, 30 Nov 2022 07:58:10 -0500 Subject: [PATCH 01/15] [ResourceItem] Use layout components (#7784) Closes: https://github.com/Shopify/polaris/issues/7580 This slightly moves the checkbox handle 2px to the left. This means it now lines up with our 20px padding instead of 22px from the card edge. Also improves vertical alignment of the checkboxes and bulk select on xs screens Before | After ---|--- ![image](https://screenshot.click/24-12-z59dz-bpdqu.png) | ![image](https://screenshot.click/24-12-viiqs-efiaf.png) The only CSS that remains is for interactive elements, interactive behavior (hover, focus), and transitions (which are being removed in https://github.com/Shopify/polaris/pull/7290/files). --- .changeset/nine-worms-sip.md | 5 + .../components/BulkActions/BulkActions.scss | 19 ++ .../components/ResourceItem/ResourceItem.scss | 210 +----------------- .../components/ResourceItem/ResourceItem.tsx | 202 ++++++++++------- .../ResourceItem/tests/ResourceItem.test.tsx | 46 ++-- .../components/ResourceList/ResourceList.scss | 1 + .../ResourceList/tests/ResourceList.test.tsx | 29 ++- 7 files changed, 206 insertions(+), 306 deletions(-) create mode 100644 .changeset/nine-worms-sip.md diff --git a/.changeset/nine-worms-sip.md b/.changeset/nine-worms-sip.md new file mode 100644 index 00000000000..7ebd6eab697 --- /dev/null +++ b/.changeset/nine-worms-sip.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Rebuilt `ResourceItem` with layout components diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss index 5bdb4e0f939..990861e0c4c 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.scss @@ -79,6 +79,20 @@ $bulk-actions-button-stacking-order: ( max-width: 100%; pointer-events: auto; + @media #{$p-breakpoints-sm-down} { + // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space + > div > div:first-child { + flex: 1 1 auto; + } + } + + @media #{$p-breakpoints-sm-up} { + width: auto; + justify-content: flex-start; + margin-right: var(--p-space-2); + margin-left: calc(-1 * var(--p-space-05)); + } + .Group-measuring & { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY position: absolute; @@ -96,6 +110,11 @@ $bulk-actions-button-stacking-order: ( } } +.CheckableContainer { + flex: 1 1 0; + margin-left: calc(-1 * (var(--p-space-05) + var(--p-space-1))); +} + .disabled { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include base-button-disabled; diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss index aa03d47a167..645c3ac7392 100644 --- a/polaris-react/src/components/ResourceItem/ResourceItem.scss +++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss @@ -1,57 +1,33 @@ @import '../../styles/common'; @mixin action-hide { - clip: rect(1px, 1px, 1px, 1px); + clip: rect(0, 0, 0, 0); overflow: hidden; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - height: 1px; } @mixin action-unhide { clip: auto; overflow: visible; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - height: 100%; -} - -.CheckboxWrapper { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; } .ResourceItem { // stylelint-disable -- Polaris component custom properties --pc-resource-item-min-height: 44px; --pc-resource-item-disclosure-width: 48px; - // Offset equals handle width + handle margin-left + handle margin-right - --pc-resource-item-offset: 40px; + --pc-resource-item-offset: 38px; --pc-resource-item-clickable-stacking-order: 1; --pc-resource-item-content-stacking-order: 2; // stylelint-enable - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: relative; outline: none; cursor: pointer; - &:not(.persistActions) { - .Actions { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - right: var(--p-space-4); - } - } - &:hover { background-color: var(--p-surface-hovered); - &:not(.persistActions) { - // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY - .Actions { + .Actions { + /* stylelint-disable-next-line selector-max-combinators */ + > * { @include action-unhide; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @media #{$p-breakpoints-lg-down} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: none; - } } } } @@ -95,83 +71,6 @@ border: none; } -// Item inner container -.Container { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: relative; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - z-index: var(--pc-resource-item-content-stacking-order); - padding: var(--p-space-3) var(--p-space-4); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - min-height: var(--pc-resource-item-min-height); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: flex-start; - - @media #{$p-breakpoints-sm-up} { - padding: var(--p-space-3) var(--p-space-5); - } -} - -.alignmentLeading { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: flex-start; -} - -.alignmentTrailing { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: flex-end; -} - -.alignmentCenter { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; -} - -.alignmentFill { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: stretch; -} - -.alignmentBaseline { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: baseline; -} - -.Owned { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; -} - -.OwnedNoMedia { - padding-top: var(--p-space-1); -} - -// Item handle -.Handle { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - width: 48px; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - min-height: var(--pc-resource-item-min-height); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - justify-content: center; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - margin: calc(-1 * var(--p-space-3)) var(--p-space-1) - calc(-1 * var(--p-space-3)) calc(-1 * var(--p-space-3)); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - - @media #{$p-breakpoints-sm-down} { - visibility: hidden; - - .selectMode & { - visibility: visible; - } - } -} - .selectable { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: calc(100% + var(--pc-resource-item-offset)); @@ -193,104 +92,20 @@ } } -.Media { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex: 0 0 auto; - margin-right: var(--p-space-5); - color: inherit; - text-decoration: none; -} - -// Item content -.Content { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include layout-flex-fix; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex: 1 1 auto; -} - // Item actions .Actions { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: absolute; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - top: 0; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - pointer-events: initial; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - height: 100%; - max-height: 56px; - - @include action-hide; - - .focused & { - @include action-unhide; + > * { + @include action-hide; } - @media #{$p-breakpoints-lg-down} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: none; - } -} - -.persistActions { - .Actions { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: relative; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex: 0 0 auto; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex-basis: auto; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - margin-top: 0; - margin-left: var(--p-space-4); - pointer-events: initial; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - height: 100%; - - @media #{$p-breakpoints-lg-down} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: none; + .focused & { + // stylelint-disable-next-line selector-max-combinators + > * { + @include action-unhide; } } } -.Disclosure { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: relative; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - top: calc(-1 * var(--p-space-3)); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - right: calc(-1 * var(--p-space-4)); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: none; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - width: var(--pc-resource-item-disclosure-width); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - min-height: var(--pc-resource-item-min-height); - pointer-events: initial; - - .selectMode & { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: none; - } - - @media #{$p-breakpoints-lg-down} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex: 0 0 var(--pc-resource-item-disclosure-width); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - justify-content: center; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - } -} - .selected { background-color: var(--p-surface-selected); @@ -304,9 +119,6 @@ } .ListItem { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: relative; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include focus-ring($border-width: -1px); .ListItem + & { diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx index c06f4da4432..8c319283ae9 100644 --- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx +++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx @@ -2,23 +2,31 @@ import React, {Component, createRef, useContext} from 'react'; import {HorizontalDotsMinor} from '@shopify/polaris-icons'; import isEqual from 'react-fast-compare'; -import {classNames, variationName} from '../../utilities/css'; -import {useI18n} from '../../utilities/i18n'; -import type {DisableableAction} from '../../types'; import {ActionList} from '../ActionList'; +import {Box} from '../Box'; +import {Bleed} from '../Bleed'; +import {Button, buttonsFrom} from '../Button'; +import {ButtonGroup} from '../ButtonGroup'; +import {Checkbox} from '../Checkbox'; +import {Columns} from '../Columns'; +import {Inline, InlineProps} from '../Inline'; import {Popover} from '../Popover'; -import type {AvatarProps} from '../Avatar'; import {UnstyledLink} from '../UnstyledLink'; +import type {AvatarProps} from '../Avatar'; +import type {DisableableAction} from '../../types'; import type {ThumbnailProps} from '../Thumbnail'; -import {ButtonGroup} from '../ButtonGroup'; -import {Checkbox} from '../Checkbox'; -import {Button, buttonsFrom} from '../Button'; +import { + useBreakpoints, + BreakpointsDirectionAlias, +} from '../../utilities/breakpoints'; +import {classNames} from '../../utilities/css'; +import {globalIdGeneratorFactory} from '../../utilities/unique-id'; +import {useI18n} from '../../utilities/i18n'; import { ResourceListContext, SELECT_ALL_ITEMS, ResourceListSelectedItems, } from '../../utilities/resource-list'; -import {globalIdGeneratorFactory} from '../../utilities/unique-id'; import styles from './ResourceItem.scss'; @@ -68,8 +76,11 @@ interface PropsWithClick extends BaseProps { } export type ResourceItemProps = PropsWithUrl | PropsWithClick; - +type BreakpointsMatches = { + [DirectionAlias in BreakpointsDirectionAlias]: boolean; +}; interface PropsFromWrapper { + breakpoints?: BreakpointsMatches; context: React.ContextType; i18n: ReturnType; } @@ -151,6 +162,7 @@ class BaseResourceItem extends Component { i18n, verticalAlignment, dataHref, + breakpoints, } = this.props; const {actionsMenuVisible, focused, focusedInner, selected} = this.state; @@ -158,42 +170,47 @@ class BaseResourceItem extends Component { let ownedMarkup: React.ReactNode = null; let handleMarkup: React.ReactNode = null; - const mediaMarkup = media ? ( -
{media}
- ) : null; - if (selectable) { const checkboxAccessibilityLabel = name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox'); handleMarkup = ( -
-
-
- -
-
+
+ + +
+
+ +
+
+
+
); } if (media || selectable) { ownedMarkup = ( -
{handleMarkup} - {mediaMarkup} -
+ {media} + ); } @@ -217,15 +234,13 @@ class BaseResourceItem extends Component { if (shortcutActions && !loading) { if (persistActions) { - actionsMarkup = ( + actionsMarkup = breakpoints?.lgUp ? (
- {buttonsFrom(shortcutActions, { - plain: true, - })} + {buttonsFrom(shortcutActions, {plain: true})}
- ); + ) : null; const disclosureAccessibilityLabel = name ? i18n.translate('Polaris.ResourceList.Item.actionsDropdownLabel', { @@ -233,54 +248,68 @@ class BaseResourceItem extends Component { }) : i18n.translate('Polaris.ResourceList.Item.actionsDropdown'); - disclosureMarkup = ( -
- - } - onClose={this.handleCloseRequest} - active={actionsMenuVisible} - > - - -
- ); - } else { + disclosureMarkup = + !selectMode && breakpoints?.lgDown ? ( +
+ + } + onClose={this.handleCloseRequest} + active={actionsMenuVisible} + > + + +
+ ) : null; + } else if (breakpoints?.lgUp) { actionsMarkup = (
- - {buttonsFrom(shortcutActions, { - size: 'slim', - })} - + + + {buttonsFrom(shortcutActions, {size: 'slim'})} + +
); } } - const content = children ? ( -
{children}
- ) : null; - - const containerClassName = classNames( - styles.Container, - verticalAlignment && - styles[variationName('alignment', verticalAlignment)], - ); - const containerMarkup = ( -
- {ownedMarkup} - {content} - {actionsMarkup} - {disclosureMarkup} -
+ + + + {ownedMarkup} + + + {children} + + + + {actionsMarkup} + {disclosureMarkup} + + ); const tabIndex = loading ? -1 : 0; @@ -459,11 +488,30 @@ function isSelected(id: string, selectedItems?: ResourceListSelectedItems) { } export function ResourceItem(props: ResourceItemProps) { + const breakpoints = useBreakpoints(); return ( ); } + +function getAlignment(alignment?: Alignment): InlineProps['blockAlign'] { + switch (alignment) { + case 'leading': + return 'start'; + case 'trailing': + return 'end'; + case 'center': + return 'center'; + case 'fill': + return 'stretch'; + case 'baseline': + return 'baseline'; + default: + return 'start'; + } +} diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx index d8c9b66d699..8b584bea38c 100644 --- a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx +++ b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx @@ -1,10 +1,13 @@ import React, {AllHTMLAttributes} from 'react'; import {mountWithApp} from 'tests/utilities'; +import {matchMedia} from '@shopify/jest-dom-mocks'; +import {setMediaWidth} from 'tests/utilities/breakpoints'; import {Avatar} from '../../Avatar'; import {Button} from '../../Button'; import {ButtonGroup} from '../../ButtonGroup'; import {Checkbox} from '../../Checkbox'; +import {Inline} from '../../Inline'; import {Thumbnail} from '../../Thumbnail'; import {UnstyledLink} from '../../UnstyledLink'; import {ResourceItem} from '../ResourceItem'; @@ -17,10 +20,12 @@ describe('', () => { beforeEach(() => { spy = jest.spyOn(window, 'open'); spy.mockImplementation(() => {}); + matchMedia.mock(); }); afterEach(() => { spy.mockRestore(); + matchMedia.restore(); }); const mockDefaultContext = { @@ -126,6 +131,7 @@ describe('', () => { }); it('is used on the disclosure action menu when there are persistent actions', () => { + setMediaWidth('breakpoints-lg'); const item = mountWithApp( ', () => { , ); - wrapper.find('div', {className: styles.Handle})!.trigger('onClick', { + wrapper.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {}, }); @@ -420,7 +426,7 @@ describe('', () => { , ); - wrapper.find('div', {className: styles.Handle})!.trigger('onClick', { + wrapper.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {shiftKey: false}, }); @@ -545,8 +551,7 @@ describe('', () => { } /> , ); - const media = wrapper.find('div', {className: styles.Media}); - expect(media).toContainReactComponent(Avatar); + expect(wrapper).toContainReactComponent(Avatar); }); it('includes a if one is provided', () => { @@ -559,8 +564,7 @@ describe('', () => { /> , ); - const media = wrapper.find('div', {className: styles.Media}); - expect(media).toContainReactComponent(Thumbnail); + expect(wrapper).toContainReactComponent(Thumbnail); }); }); @@ -576,7 +580,8 @@ describe('', () => { }); }); - it('renders shortcut actions when some are provided', () => { + it('renders shortcut actions when some are provided and viewport is lgUp', () => { + setMediaWidth('breakpoints-lg'); const wrapper = mountWithApp( ', () => { }); }); - it('renders persistent shortcut actions if persistActions is true', () => { + it('renders persistent shortcut actions if persistActions is true and viewport is lgUp', () => { + setMediaWidth('breakpoints-lg'); const wrapper = mountWithApp( ', () => { it('renders with default flex-start alignment if not provided', () => { const resourceItem = mountWithApp(); - expect(resourceItem).toContainReactComponent('div', { - className: 'Container', - }); + expect(resourceItem).toContainReactComponent(Inline); }); it('renders with leading vertical alignment', () => { @@ -689,8 +693,8 @@ describe('', () => { , ); - expect(resourceItem).toContainReactComponent('div', { - className: 'Container alignmentLeading', + expect(resourceItem).toContainReactComponent(Inline, { + blockAlign: 'start', }); }); @@ -699,8 +703,8 @@ describe('', () => { , ); - expect(resourceItem).toContainReactComponent('div', { - className: 'Container alignmentCenter', + expect(resourceItem).toContainReactComponent(Inline, { + blockAlign: 'center', }); }); @@ -709,8 +713,8 @@ describe('', () => { , ); - expect(resourceItem).toContainReactComponent('div', { - className: 'Container alignmentTrailing', + expect(resourceItem).toContainReactComponent(Inline, { + blockAlign: 'end', }); }); @@ -719,8 +723,8 @@ describe('', () => { , ); - expect(resourceItem).toContainReactComponent('div', { - className: 'Container alignmentFill', + expect(resourceItem).toContainReactComponent(Inline, { + blockAlign: 'stretch', }); }); @@ -729,8 +733,8 @@ describe('', () => { , ); - expect(resourceItem).toContainReactComponent('div', { - className: 'Container alignmentBaseline', + expect(resourceItem).toContainReactComponent(Inline, { + blockAlign: 'baseline', }); }); }); diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss index 82006dd4a34..82a5a59a5c7 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.scss +++ b/polaris-react/src/components/ResourceList/ResourceList.scss @@ -236,6 +236,7 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)}) .CheckableButtonWrapper { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY display: none; + margin-left: calc(-1 * var(--p-space-05)); @media #{$p-breakpoints-sm-up} { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx index 376e26886c8..41915bf9d22 100644 --- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx +++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +import {matchMedia} from '@shopify/jest-dom-mocks'; import {BulkActions, useIsBulkActionsSticky} from '../../BulkActions'; import {SelectAllActions} from '../../SelectAllActions'; @@ -70,6 +71,14 @@ describe('', () => { computeTableDimensions: jest.fn(), }); + beforeEach(() => { + matchMedia.mock(); + }); + + afterEach(() => { + matchMedia.restore(); + }); + describe('renderItem', () => { it('renders list items', () => { const resourceList = mountWithApp( @@ -395,7 +404,9 @@ describe('', () => { onSelectionChange={onSelectionChange} />, ); - resourceList.find('div', {className: styles.Handle})!.trigger('onClick', { + const resourceItem = resourceList.find(ResourceItem); + + resourceItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {}, }); @@ -1077,13 +1088,13 @@ describe('', () => { />, ); const firstItem = resourceList.find(ResourceItem); - firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + firstItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {}, }); const allItems = resourceList.findAll(ResourceItem); const lastItem = allItems[allItems.length - 1]; - lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + lastItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {shiftKey: true}, }); @@ -1102,13 +1113,13 @@ describe('', () => { />, ); const firstItem = resourceList.find(ResourceItem); - firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + firstItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {}, }); const allItems = resourceList.findAll(ResourceItem); const lastItem = allItems[allItems.length - 1]; - lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + lastItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {shiftKey: true}, }); @@ -1146,13 +1157,13 @@ describe('', () => { />, ); const firstItem = resourceList.find(ResourceItem); - firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + firstItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {}, }); const allItems = resourceList.findAll(ResourceItem); const lastItem = allItems[allItems.length - 1]; - lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + lastItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {shiftKey: true}, }); @@ -1178,13 +1189,13 @@ describe('', () => { ); // Sets {lastSelected: 0} const firstItem = resourceList.find(ResourceItem); - firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + firstItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {}, }); const allItems = resourceList.findAll(ResourceItem); const lastItem = allItems[allItems.length - 1]; - lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', { + lastItem!.findAll('div')[6]!.trigger('onClick', { stopPropagation: () => {}, nativeEvent: {shiftKey: true}, }); From 6de4d906f3be8bfa48a15c7a71a14ea844da2fbb Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 1 Dec 2022 10:22:34 -0800 Subject: [PATCH 02/15] [Layout] Update `ActionList` to use Layout primitives (#7805) Fixes #7458 Co-authored-by: Lo Kim --- .changeset/serious-tomatoes-dress.md | 6 + .../src/components/ActionList/ActionList.scss | 53 --- .../src/components/ActionList/ActionList.tsx | 13 +- .../ActionList/components/Item/Item.tsx | 16 +- .../ActionList/components/Section/Section.tsx | 31 +- polaris.shopify.com/src/data/props.json | 390 ++++++++++-------- 6 files changed, 259 insertions(+), 250 deletions(-) create mode 100644 .changeset/serious-tomatoes-dress.md diff --git a/.changeset/serious-tomatoes-dress.md b/.changeset/serious-tomatoes-dress.md new file mode 100644 index 00000000000..3c40b08b50a --- /dev/null +++ b/.changeset/serious-tomatoes-dress.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': minor +'polaris.shopify.com': patch +--- + +Rebuilt `ActionList` to use layout primitives diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss index 285353fe160..bca85c2ecd1 100644 --- a/polaris-react/src/components/ActionList/ActionList.scss +++ b/polaris-react/src/components/ActionList/ActionList.scss @@ -1,44 +1,5 @@ @import '../../styles/common'; -.ActionList { - outline: none; - list-style: none; - margin: 0; - padding: 0; -} - -.Section:not(:first-child) { - border-top: var(--p-border-divider); - - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - > .Section-withoutTitle .Actions { - padding-top: var(--p-space-2); - } -} - -.Actions { - outline: none; - list-style: none; - margin: 0; - padding: var(--p-space-2); -} - -.ActionList, -.Section:first-child { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - > .Section-withoutTitle .Actions { - border-top: none; - padding-top: var(--p-space-2); - } -} - -.ActionList .Section { - // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY - .Actions { - padding-top: 0; - } -} - .Item { // stylelint-disable -- Polaris component custom properties --pc-action-list-image-size: 20px; @@ -131,13 +92,6 @@ } } -.Content { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; -} - .Prefix { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include recolor-icon(var(--p-icon)); @@ -168,13 +122,6 @@ .Suffix { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include recolor-icon(var(--p-icon)); - margin-left: var(--p-space-4); -} - -.ContentBlock, -.ContentBlockInner { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: block; } .Text { diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx index 233fe2ad650..7ec14e87b69 100644 --- a/polaris-react/src/components/ActionList/ActionList.tsx +++ b/polaris-react/src/components/ActionList/ActionList.tsx @@ -6,11 +6,10 @@ import { } from '../../utilities/focus'; import {KeypressListener} from '../KeypressListener'; import {ActionListItemDescriptor, ActionListSection, Key} from '../../types'; -import {classNames} from '../../utilities/css'; +import {Box} from '../Box'; import {Section, Item} from './components'; import type {ItemProps} from './components'; -import styles from './ActionList.scss'; export interface ActionListProps { /** Collection of actions for list */ @@ -40,10 +39,7 @@ export function ActionList({ finalSections = sections; } - const className = classNames(styles.ActionList); - const hasMultipleSections = finalSections.length > 1; - const Element = hasMultipleSections ? 'ul' : 'div'; const elementRole = hasMultipleSections && actionRole === 'menuitem' ? 'menu' : undefined; const elementTabIndex = @@ -57,6 +53,7 @@ export function ActionList({ hasMultipleSections={hasMultipleSections} actionRole={actionRole} onActionAnyItem={onActionAnyItem} + isFirst={index === 0} /> ) : null; }); @@ -102,15 +99,15 @@ export function ActionList({ ) : null; return ( - {listeners} {sectionMarkup} - + ); } diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx index 46177c3c10b..03957153ac4 100644 --- a/polaris-react/src/components/ActionList/components/Item/Item.tsx +++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx @@ -9,6 +9,8 @@ import {Badge} from '../../../Badge'; import {Text} from '../../../Text'; import styles from '../../ActionList.scss'; import {handleMouseUpByBlurring} from '../../../../utilities/focus'; +import {Inline} from '../../../Inline'; +import {Box} from '../../../Box'; export type ItemProps = ActionListItemDescriptor; @@ -61,12 +63,12 @@ export function Item({ const contentText = ellipsis && content ? `${content}…` : content; const contentMarkup = helpText ? ( - - {contentText} + <> + {contentText} {helpText} - + ) : ( contentText ); @@ -78,18 +80,20 @@ export function Item({ ); const suffixMarkup = suffix && ( - {suffix} + + {suffix} + ); const textMarkup = {contentMarkup}; const contentElement = ( - + {prefixMarkup} {textMarkup} {badgeMarkup} {suffixMarkup} - + ); const scrollMarkup = active ? : null; diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx index de76ad9d2c3..921d6b83681 100644 --- a/polaris-react/src/components/ActionList/components/Section/Section.tsx +++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx @@ -7,7 +7,6 @@ import type { ActionListItemDescriptor, ActionListSection, } from '../../../../types'; -import styles from '../../ActionList.scss'; export interface SectionProps { /** Section of action items */ @@ -18,11 +17,14 @@ export interface SectionProps { actionRole?: 'option' | 'menuitem' | string; /** Callback when any item is clicked or keypressed */ onActionAnyItem?: ActionListItemDescriptor['onAction']; + /** Whether it is the first in a group of sections */ + isFirst?: boolean; } export function Section({ section, hasMultipleSections, + isFirst, actionRole, onActionAnyItem, }: SectionProps) { @@ -55,8 +57,6 @@ export function Section({ }, ); - const className = section.title ? undefined : styles['Section-withoutTitle']; - const titleMarkup = section.title ? ( ) : null; - let sectionRole; + let sectionRole: 'menu' | 'presentation' | undefined; switch (actionRole) { case 'option': sectionRole = 'presentation'; @@ -84,22 +84,29 @@ export function Section({ } const sectionMarkup = ( -
+ <> {titleMarkup} -
    {actionMarkup} -
-
+
+ ); return hasMultipleSections ? ( -
  • + {sectionMarkup} -
  • + ) : ( sectionMarkup ); diff --git a/polaris.shopify.com/src/data/props.json b/polaris.shopify.com/src/data/props.json index 5d1c6d4176b..a20433574a0 100644 --- a/polaris.shopify.com/src/data/props.json +++ b/polaris.shopify.com/src/data/props.json @@ -22310,30 +22310,6 @@ ], "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}" }, - "polaris-react/src/components/Stack/components/Item/Item.tsx": { - "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", - "name": "ItemProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "Elements to display inside item", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "fill", - "value": "boolean", - "description": "Fill the remaining horizontal space in the stack with the item", - "isOptional": true - } - ], - "value": "export interface ItemProps {\n /** Elements to display inside item */\n children?: React.ReactNode;\n /** Fill the remaining horizontal space in the stack with the item */\n fill?: boolean;\n /**\n * @default false\n */\n}" - }, "polaris-react/src/components/Tabs/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "name": "ItemProps", @@ -22396,6 +22372,30 @@ ], "value": "export interface ItemProps {\n id: string;\n focused: boolean;\n panelID?: string;\n children?: React.ReactNode;\n url?: string;\n accessibilityLabel?: string;\n onClick?(): void;\n}" }, + "polaris-react/src/components/Stack/components/Item/Item.tsx": { + "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", + "name": "ItemProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "Elements to display inside item", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", + "syntaxKind": "PropertySignature", + "name": "fill", + "value": "boolean", + "description": "Fill the remaining horizontal space in the stack with the item", + "isOptional": true + } + ], + "value": "export interface ItemProps {\n /** Elements to display inside item */\n children?: React.ReactNode;\n /** Fill the remaining horizontal space in the stack with the item */\n fill?: boolean;\n /**\n * @default false\n */\n}" + }, "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx", "name": "ItemProps", @@ -22448,9 +22448,17 @@ "value": "() => void", "description": "Callback when any item is clicked or keypressed", "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "isFirst", + "value": "boolean", + "description": "", + "isOptional": true } ], - "value": "export interface SectionProps {\n /** Section of action items */\n section: ActionListSection;\n /** Should there be multiple sections */\n hasMultipleSections: boolean;\n /** Defines a specific role attribute for each action in the list */\n actionRole?: 'option' | 'menuitem' | string;\n /** Callback when any item is clicked or keypressed */\n onActionAnyItem?: ActionListItemDescriptor['onAction'];\n}" + "value": "export interface SectionProps {\n /** Section of action items */\n section: ActionListSection;\n /** Should there be multiple sections */\n hasMultipleSections: boolean;\n /** Defines a specific role attribute for each action in the list */\n actionRole?: 'option' | 'menuitem' | string;\n /** Callback when any item is clicked or keypressed */\n onActionAnyItem?: ActionListItemDescriptor['onAction'];\n isFirst?: boolean;\n}" }, "polaris-react/src/components/Layout/components/Section/Section.tsx": { "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", @@ -22835,6 +22843,15 @@ "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}" } }, + "MappedOption": { + "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx": { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "MappedOption", + "value": "ArrayElement & {\n selected: boolean;\n singleSelection: boolean;\n}", + "description": "" + } + }, "SecondaryAction": { "polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx": { "filePath": "polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx", @@ -23623,24 +23640,6 @@ "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", - "name": "CardSubsectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Card/components/Subsection/Subsection.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - } - ], - "value": "export interface CardSubsectionProps {\n children?: React.ReactNode;\n}" - } - }, "AlphaPickerProps": { "polaris-react/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx": { "filePath": "polaris-react/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx", @@ -23737,6 +23736,24 @@ "value": "export interface SlidableProps {\n draggerX?: number;\n draggerY?: number;\n onChange(position: Position): void;\n onDraggerHeight?(height: number): void;\n}" } }, + "CardSubsectionProps": { + "polaris-react/src/components/Card/components/Subsection/Subsection.tsx": { + "filePath": "polaris-react/src/components/Card/components/Subsection/Subsection.tsx", + "name": "CardSubsectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Card/components/Subsection/Subsection.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + } + ], + "value": "export interface CardSubsectionProps {\n children?: React.ReactNode;\n}" + } + }, "ItemPosition": { "polaris-react/src/components/Connected/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Connected/components/Item/Item.tsx", @@ -24300,6 +24317,32 @@ "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}" } }, + "FileUploadProps": { + "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx": { + "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", + "name": "FileUploadProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", + "syntaxKind": "PropertySignature", + "name": "actionTitle", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", + "syntaxKind": "PropertySignature", + "name": "actionHint", + "value": "string", + "description": "", + "isOptional": true + } + ], + "value": "export interface FileUploadProps {\n actionTitle?: string;\n actionHint?: string;\n}" + } + }, "WeekdayProps": { "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx": { "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", @@ -24331,32 +24374,6 @@ "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", - "name": "FileUploadProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", - "syntaxKind": "PropertySignature", - "name": "actionTitle", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", - "syntaxKind": "PropertySignature", - "name": "actionHint", - "value": "string", - "description": "", - "isOptional": true - } - ], - "value": "export interface FileUploadProps {\n actionTitle?: string;\n actionHint?: string;\n}" - } - }, "PopoverableAction": { "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx": { "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", @@ -25638,6 +25655,65 @@ ] } }, + "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}" + } + }, "PrimaryAction": { "polaris-react/src/components/Page/components/Header/Header.tsx": { "filePath": "polaris-react/src/components/Page/components/Header/Header.tsx", @@ -25760,65 +25836,6 @@ "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", @@ -26662,6 +26679,48 @@ "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}" } }, + "SearchProps": { + "polaris-react/src/components/TopBar/components/Search/Search.tsx": { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "name": "SearchProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "PropertySignature", + "name": "visible", + "value": "boolean", + "description": "Toggles whether or not the search is visible", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the search", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "PropertySignature", + "name": "overlayVisible", + "value": "boolean", + "description": "Whether or not the search results overlay has a visible backdrop", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "MethodSignature", + "name": "onDismiss", + "value": "() => void", + "description": "Callback when the search is dismissed", + "isOptional": true + } + ], + "value": "export interface SearchProps {\n /** Toggles whether or not the search is visible */\n visible?: boolean;\n /** The content to display inside the search */\n children?: React.ReactNode;\n /** Whether or not the search results overlay has a visible backdrop */\n overlayVisible?: boolean;\n /** Callback when the search is dismissed */\n onDismiss?(): void;\n}" + } + }, "MenuProps": { "polaris-react/src/components/TopBar/components/Menu/Menu.tsx": { "filePath": "polaris-react/src/components/TopBar/components/Menu/Menu.tsx", @@ -26723,48 +26782,6 @@ "value": "export interface MenuProps {\n /** Accepts an activator component that renders inside of a button that opens the menu */\n activatorContent: React.ReactNode;\n /** An array of action objects that are rendered inside of a popover triggered by this menu */\n actions: ActionListProps['sections'];\n /** Accepts a message that facilitates direct, urgent communication with the merchant through the menu */\n message?: MessageProps;\n /** A boolean property indicating whether the menu is currently open */\n open: boolean;\n /** A callback function to handle opening the menu popover */\n onOpen(): void;\n /** A callback function to handle closing the menu popover */\n onClose(): void;\n /** A callback function to handle closing the menu popover */\n onClose(): void;\n /** A string that provides the accessibility labeling */\n accessibilityLabel?: string;\n}" } }, - "SearchProps": { - "polaris-react/src/components/TopBar/components/Search/Search.tsx": { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "name": "SearchProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "PropertySignature", - "name": "visible", - "value": "boolean", - "description": "Toggles whether or not the search is visible", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside the search", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "PropertySignature", - "name": "overlayVisible", - "value": "boolean", - "description": "Whether or not the search results overlay has a visible backdrop", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "MethodSignature", - "name": "onDismiss", - "value": "() => void", - "description": "Callback when the search is dismissed", - "isOptional": true - } - ], - "value": "export interface SearchProps {\n /** Toggles whether or not the search is visible */\n visible?: boolean;\n /** The content to display inside the search */\n children?: React.ReactNode;\n /** Whether or not the search results overlay has a visible backdrop */\n overlayVisible?: boolean;\n /** Callback when the search is dismissed */\n onDismiss?(): void;\n}" - } - }, "SearchFieldProps": { "polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx": { "filePath": "polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx", @@ -26953,6 +26970,37 @@ "value": "export interface DiscardConfirmationModalProps {\n open: boolean;\n onDiscard(): void;\n onCancel(): void;\n}" } }, + "DiscardConfirmationModalProps": { + "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx": { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "name": "DiscardConfirmationModalProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "syntaxKind": "PropertySignature", + "name": "open", + "value": "boolean", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "syntaxKind": "MethodSignature", + "name": "onDiscard", + "value": "() => void", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "syntaxKind": "MethodSignature", + "name": "onCancel", + "value": "() => void", + "description": "" + } + ], + "value": "export interface DiscardConfirmationModalProps {\n open: boolean;\n onDiscard(): void;\n onCancel(): void;\n}" + } + }, "SecondaryProps": { "polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx": { "filePath": "polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx", @@ -27074,4 +27122,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 +} From 58d8c6f9efff976d79d89d61cba7166d36fc5cea Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Fri, 2 Dec 2022 11:06:15 -0500 Subject: [PATCH 03/15] [polaris.shopify.com] Run `get-props` script --- polaris.shopify.com/src/data/props.json | 2345 +++++++++++------------ 1 file changed, 1105 insertions(+), 1240 deletions(-) diff --git a/polaris.shopify.com/src/data/props.json b/polaris.shopify.com/src/data/props.json index a20433574a0..7a99e2b189f 100644 --- a/polaris.shopify.com/src/data/props.json +++ b/polaris.shopify.com/src/data/props.json @@ -3179,6 +3179,13 @@ "name": "BreakpointsMatches", "value": "{\n [DirectionAlias in BreakpointsDirectionAlias]: boolean;\n}", "description": "Match results for each directional Polaris `breakpoints` alias." + }, + "polaris-react/src/components/ResourceItem/ResourceItem.tsx": { + "filePath": "polaris-react/src/components/ResourceItem/ResourceItem.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BreakpointsMatches", + "value": "{\n [DirectionAlias in BreakpointsDirectionAlias]: boolean;\n}", + "description": "" } }, "UseBreakpointsOptions": { @@ -7579,70 +7586,55 @@ "description": "" } }, - "AccountConnectionProps": { - "polaris-react/src/components/AccountConnection/AccountConnection.tsx": { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "name": "AccountConnectionProps", + "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/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "React.ReactNode", - "description": "Content to display as title", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "details", - "value": "React.ReactNode", - "description": "Content to display as additional details", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", "syntaxKind": "PropertySignature", - "name": "termsOfService", - "value": "React.ReactNode", - "description": "Content to display as terms of service", + "name": "items", + "value": "readonly ActionListItemDescriptor[]", + "description": "Collection of actions for list", "isOptional": true }, { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", "syntaxKind": "PropertySignature", - "name": "accountName", - "value": "string", - "description": "The name of the service", + "name": "sections", + "value": "readonly ActionListSection[]", + "description": "Collection of sectioned action items", "isOptional": true }, { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", "syntaxKind": "PropertySignature", - "name": "avatarUrl", + "name": "actionRole", "value": "string", - "description": "URL for the user’s avatar image", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "connected", - "value": "boolean", - "description": "Set if the account is connected", + "description": "Defines a specific role attribute for each action in the list", "isOptional": true }, { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", "syntaxKind": "PropertySignature", - "name": "action", - "value": "Action", - "description": "Action for account connection", + "name": "onActionAnyItem", + "value": "() => void", + "description": "Callback when any item is clicked or keypressed", "isOptional": true } ], - "value": "export interface AccountConnectionProps {\n /** Content to display as title */\n title?: React.ReactNode;\n /** Content to display as additional details */\n details?: React.ReactNode;\n /** Content to display as terms of service */\n termsOfService?: React.ReactNode;\n /** The name of the service */\n accountName?: string;\n /** URL for the user’s avatar image */\n avatarUrl?: string;\n /** Set if the account is connected */\n connected?: boolean;\n /** Action for account connection */\n action?: Action;\n}" + "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": "" } }, "ActionListProps": { @@ -8047,15 +8039,15 @@ "value": "ResponsiveProp", "description": "" }, - "polaris-react/src/components/Bleed/Bleed.tsx": { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", "syntaxKind": "TypeAliasDeclaration", "name": "Spacing", "value": "ResponsiveProp", "description": "" }, - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", + "polaris-react/src/components/Bleed/Bleed.tsx": { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", "syntaxKind": "TypeAliasDeclaration", "name": "Spacing", "value": "ResponsiveProp", @@ -8134,6 +8126,72 @@ "value": "export interface AlphaCardProps {\n children?: React.ReactNode;\n /** Background color\n * @default 'surface'\n */\n background?: CardBackgroundColorTokenScale;\n /** The spacing around the card\n * @default {xs: '4', sm: '5'}\n * @example\n * padding='4'\n * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n padding?: Spacing;\n /** Border radius value above a set breakpoint */\n roundedAbove?: BreakpointsAlias;\n}" } }, + "AccountConnectionProps": { + "polaris-react/src/components/AccountConnection/AccountConnection.tsx": { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "name": "AccountConnectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "React.ReactNode", + "description": "Content to display as title", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "details", + "value": "React.ReactNode", + "description": "Content to display as additional details", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "termsOfService", + "value": "React.ReactNode", + "description": "Content to display as terms of service", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "accountName", + "value": "string", + "description": "The name of the service", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "avatarUrl", + "value": "string", + "description": "URL for the user’s avatar image", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "connected", + "value": "boolean", + "description": "Set if the account is connected", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "action", + "value": "Action", + "description": "Action for account connection", + "isOptional": true + } + ], + "value": "export interface AccountConnectionProps {\n /** Content to display as title */\n title?: React.ReactNode;\n /** Content to display as additional details */\n details?: React.ReactNode;\n /** Content to display as terms of service */\n termsOfService?: React.ReactNode;\n /** The name of the service */\n accountName?: string;\n /** URL for the user’s avatar image */\n avatarUrl?: string;\n /** Set if the account is connected */\n connected?: boolean;\n /** Action for account connection */\n action?: Action;\n}" + } + }, "Align": { "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", @@ -9570,312 +9628,114 @@ "description": "" } }, - "BannerStatus": { - "polaris-react/src/components/Banner/Banner.tsx": { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "Overflow": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "BannerStatus", - "value": "'success' | 'info' | 'warning' | 'critical'", + "name": "Overflow", + "value": "'hidden' | 'scroll'", "description": "" } }, - "BannerProps": { - "polaris-react/src/components/Banner/Banner.tsx": { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "name": "BannerProps", + "Position": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Position", + "value": "'relative' | 'absolute' | 'fixed' | 'sticky'", + "description": "" + }, + "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx": { + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", + "name": "Position", "description": "", "members": [ { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "Title content for the banner.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", "syntaxKind": "PropertySignature", - "name": "icon", - "value": "any", - "description": "Icon to display in the banner. Use only major, duotone icons", - "isOptional": true + "name": "x", + "value": "number", + "description": "" }, { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", "syntaxKind": "PropertySignature", - "name": "status", - "value": "BannerStatus", - "description": "Sets the status of the banner.", - "isOptional": true - }, + "name": "y", + "value": "number", + "description": "" + } + ], + "value": "interface Position {\n x: number;\n y: number;\n}" + } + }, + "ColorTokenScale": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "ColorTokenScale", + "value": "'text' | 'text-critical' | 'text-disabled' | 'text-highlight' | 'text-on-critical' | 'text-on-dark' | 'text-on-interactive' | 'text-on-primary' | 'text-primary' | 'text-primary-hovered' | 'text-primary-pressed' | 'text-subdued' | 'text-subdued-on-dark' | 'text-success' | 'text-warning'", + "description": "" + } + }, + "BorderTokenAlias": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderTokenAlias", + "value": "'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'", + "description": "" + }, + "polaris-react/src/components/Divider/Divider.tsx": { + "filePath": "polaris-react/src/components/Divider/Divider.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderTokenAlias", + "value": "'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'", + "description": "" + } + }, + "BorderRadiusTokenScale": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BorderRadiusTokenScale", + "value": "'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'base' | 'large' | 'half'", + "description": "" + } + }, + "BackgroundColors": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BackgroundColors", + "value": "ColorsBackdropTokenAlias | ColorsBackgroundTokenAlias | ColorsOverlayTokenAlias | ColorsActionTokenAlias | ColorsSurfaceTokenAlias", + "description": "" + } + }, + "BoxProps": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "name": "BoxProps", + "description": "", + "members": [ { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "filePath": "polaris-react/src/components/Box/Box.tsx", "syntaxKind": "PropertySignature", "name": "children", "value": "React.ReactNode", - "description": "The child elements to render in the banner.", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "filePath": "polaris-react/src/components/Box/Box.tsx", "syntaxKind": "PropertySignature", - "name": "action", - "value": "DisableableAction & LoadableAction", - "description": "Action for banner", - "isOptional": true + "name": "as", + "value": "Element", + "description": "HTML Element type", + "isOptional": true, + "defaultValue": "'div'" }, { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "PropertySignature", - "name": "secondaryAction", - "value": "Action", - "description": "Action | Displays a secondary action", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "MethodSignature", - "name": "onDismiss", - "value": "() => void", - "description": "Callback when banner is dismissed", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "PropertySignature", - "name": "stopAnnouncements", - "value": "boolean", - "description": "Disables screen reader announcements when changing the content of the banner", - "isOptional": true - } - ], - "value": "export interface BannerProps {\n /** Title content for the banner. */\n title?: string;\n /** Icon to display in the banner. Use only major, duotone icons */\n icon?: IconProps['source'];\n /** Sets the status of the banner. */\n status?: BannerStatus;\n /** The child elements to render in the banner. */\n children?: React.ReactNode;\n /** Action for banner */\n action?: DisableableAction & LoadableAction;\n /** Action | Displays a secondary action */\n secondaryAction?: Action;\n /** Callback when banner is dismissed */\n onDismiss?(): void;\n /** Disables screen reader announcements when changing the content of the banner */\n stopAnnouncements?: boolean;\n}" - } - }, - "BannerAttributes": { - "polaris-react/src/components/Banner/Banner.tsx": { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "name": "BannerAttributes", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "PropertySignature", - "name": "iconColor", - "value": "Color", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "PropertySignature", - "name": "defaultIcon", - "value": "any", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "PropertySignature", - "name": "ariaRoleType", - "value": "\"alert\" | \"status\"", - "description": "" - } - ], - "value": "interface BannerAttributes {\n iconColor: IconProps['color'];\n defaultIcon: IconProps['source'];\n ariaRoleType: 'status' | 'alert';\n}" - } - }, - "BannerHandles": { - "polaris-react/src/components/Banner/Banner.tsx": { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "name": "BannerHandles", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Banner/Banner.tsx", - "syntaxKind": "MethodSignature", - "name": "focus", - "value": "() => void", - "description": "" - } - ], - "value": "export interface BannerHandles {\n focus(): void;\n}" - } - }, - "BleedProps": { - "polaris-react/src/components/Bleed/Bleed.tsx": { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "name": "BleedProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginInline", - "value": "Spacing", - "description": "Negative horizontal space around children", - "isOptional": true, - "defaultValue": "'5'" - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginBlock", - "value": "Spacing", - "description": "Negative vertical space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginBlockStart", - "value": "Spacing", - "description": "Negative top space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginBlockEnd", - "value": "Spacing", - "description": "Negative bottom space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginInlineStart", - "value": "Spacing", - "description": "Negative left space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginInlineEnd", - "value": "Spacing", - "description": "Negative right space around children", - "isOptional": true - } - ], - "value": "export interface BleedProps {\n children?: React.ReactNode;\n /** Negative horizontal space around children\n * @default '5'\n */\n marginInline?: Spacing;\n /** Negative vertical space around children */\n marginBlock?: Spacing;\n /** Negative top space around children */\n marginBlockStart?: Spacing;\n /** Negative bottom space around children */\n marginBlockEnd?: Spacing;\n /** Negative left space around children */\n marginInlineStart?: Spacing;\n /** Negative right space around children */\n marginInlineEnd?: Spacing;\n}" - } - }, - "Overflow": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Overflow", - "value": "'hidden' | 'scroll'", - "description": "" - } - }, - "Position": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Position", - "value": "'relative' | 'absolute' | 'fixed' | 'sticky'", - "description": "" - }, - "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx": { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "name": "Position", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "syntaxKind": "PropertySignature", - "name": "x", - "value": "number", - "description": "" - }, - { - "filePath": "polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx", - "syntaxKind": "PropertySignature", - "name": "y", - "value": "number", - "description": "" - } - ], - "value": "interface Position {\n x: number;\n y: number;\n}" - } - }, - "ColorTokenScale": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorTokenScale", - "value": "'text' | 'text-critical' | 'text-disabled' | 'text-highlight' | 'text-on-critical' | 'text-on-dark' | 'text-on-interactive' | 'text-on-primary' | 'text-primary' | 'text-primary-hovered' | 'text-primary-pressed' | 'text-subdued' | 'text-subdued-on-dark' | 'text-success' | 'text-warning'", - "description": "" - } - }, - "BorderTokenAlias": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderTokenAlias", - "value": "'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'", - "description": "" - }, - "polaris-react/src/components/Divider/Divider.tsx": { - "filePath": "polaris-react/src/components/Divider/Divider.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderTokenAlias", - "value": "'base' | 'dark' | 'divider' | 'divider-on-dark' | 'transparent'", - "description": "" - } - }, - "BorderRadiusTokenScale": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderRadiusTokenScale", - "value": "'05' | '1' | '2' | '3' | '4' | '5' | '6' | 'base' | 'large' | 'half'", - "description": "" - } - }, - "BackgroundColors": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColors", - "value": "ColorsBackdropTokenAlias | ColorsBackgroundTokenAlias | ColorsOverlayTokenAlias | ColorsActionTokenAlias | ColorsSurfaceTokenAlias", - "description": "" - } - }, - "BoxProps": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "name": "BoxProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "PropertySignature", - "name": "as", - "value": "Element", - "description": "HTML Element type", - "isOptional": true, - "defaultValue": "'div'" - }, - { - "filePath": "polaris-react/src/components/Box/Box.tsx", + "filePath": "polaris-react/src/components/Box/Box.tsx", "syntaxKind": "PropertySignature", "name": "background", "value": "BackgroundColors", @@ -10214,23 +10074,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", @@ -10445,20 +10288,104 @@ "description": "" } }, - "ButtonProps": { - "polaris-react/src/components/Button/Button.tsx": { - "filePath": "polaris-react/src/components/Button/Button.tsx", - "name": "ButtonProps", + "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/Button/Button.tsx", + "filePath": "polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx", "syntaxKind": "PropertySignature", - "name": "children", - "value": "string | string[]", - "description": "The content to display inside the button", - "isOptional": true - }, + "name": "breadcrumbs", + "value": "(LinkAction | CallbackAction)[]", + "description": "Collection of breadcrumbs" + } + ], + "value": "export interface BreadcrumbsProps {\n /** Collection of breadcrumbs */\n breadcrumbs: (CallbackAction | LinkAction)[];\n}" + } + }, + "BleedProps": { + "polaris-react/src/components/Bleed/Bleed.tsx": { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "name": "BleedProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginInline", + "value": "Spacing", + "description": "Negative horizontal space around children", + "isOptional": true, + "defaultValue": "'5'" + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginBlock", + "value": "Spacing", + "description": "Negative vertical space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginBlockStart", + "value": "Spacing", + "description": "Negative top space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginBlockEnd", + "value": "Spacing", + "description": "Negative bottom space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginInlineStart", + "value": "Spacing", + "description": "Negative left space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginInlineEnd", + "value": "Spacing", + "description": "Negative right space around children", + "isOptional": true + } + ], + "value": "export interface BleedProps {\n children?: React.ReactNode;\n /** Negative horizontal space around children\n * @default '5'\n */\n marginInline?: Spacing;\n /** Negative vertical space around children */\n marginBlock?: Spacing;\n /** Negative top space around children */\n marginBlockStart?: Spacing;\n /** Negative bottom space around children */\n marginBlockEnd?: Spacing;\n /** Negative left space around children */\n marginInlineStart?: Spacing;\n /** Negative right space around children */\n marginInlineEnd?: Spacing;\n}" + } + }, + "ButtonProps": { + "polaris-react/src/components/Button/Button.tsx": { + "filePath": "polaris-react/src/components/Button/Button.tsx", + "name": "ButtonProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Button/Button.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "string | string[]", + "description": "The content to display inside the button", + "isOptional": true + }, { "filePath": "polaris-react/src/components/Button/Button.tsx", "syntaxKind": "PropertySignature", @@ -11496,107 +11423,6 @@ "value": "export interface ChoiceListProps {\n /** Label for list of choices */\n title: React.ReactNode;\n /** Collection of choices */\n choices: Choice[];\n /** Collection of selected choices */\n selected: string[];\n /** Name for form input */\n name?: string;\n /** Allow merchants to select multiple options at once */\n allowMultiple?: boolean;\n /** Toggles display of the title */\n titleHidden?: boolean;\n /** Display an error message */\n error?: Error;\n /** Disable all choices **/\n disabled?: boolean;\n /** Callback when the selected choices change */\n onChange?(selected: string[], name: string): void;\n}" } }, - "Transition": { - "polaris-react/src/components/Collapsible/Collapsible.tsx": { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "name": "Transition", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "duration", - "value": "string", - "description": "Assign a transition duration to the collapsible animation.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "timingFunction", - "value": "string", - "description": "Assign a transition timing function to the collapsible animation", - "isOptional": true - } - ], - "value": "interface Transition {\n /** Assign a transition duration to the collapsible animation. */\n duration?: string;\n /** Assign a transition timing function to the collapsible animation */\n timingFunction?: string;\n}" - } - }, - "CollapsibleProps": { - "polaris-react/src/components/Collapsible/Collapsible.tsx": { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "name": "CollapsibleProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop." - }, - { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "expandOnPrint", - "value": "boolean", - "description": "Option to show collapsible content when printing", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "open", - "value": "boolean", - "description": "Toggle whether the collapsible is expanded or not." - }, - { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "transition", - "value": "boolean | Transition", - "description": "Override transition properties. When set to false, disables transition completely.", - "isOptional": true, - "defaultValue": "transition={{duration: 'var(--p-duration-150)', timingFunction: 'var(--p-ease-in-out)'}}" - }, - { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "preventMeasuringOnChildrenUpdate", - "value": "boolean", - "description": "", - "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", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside the collapsible.", - "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 /** Callback when the animation completes. */\n onAnimationEnd?(): void;\n /** The content to display inside the collapsible. */\n children?: React.ReactNode;\n}" - } - }, - "AnimationState": { - "polaris-react/src/components/Collapsible/Collapsible.tsx": { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnimationState", - "value": "'idle' | 'measuring' | 'animating'", - "description": "" - } - }, "Color": { "polaris-react/src/components/ColorPicker/ColorPicker.tsx": { "filePath": "polaris-react/src/components/ColorPicker/ColorPicker.tsx", @@ -11705,60 +11531,153 @@ "value": "export interface ColorPickerProps {\n /** ID for the element */\n id?: string;\n /** The currently selected color */\n color: Color;\n /** Allow user to select an alpha value */\n allowAlpha?: boolean;\n /** Allow HuePicker to take the full width */\n fullWidth?: boolean;\n /** Callback when color is selected */\n onChange(color: HSBAColor): void;\n}" } }, - "Columns": { - "polaris-react/src/components/Columns/Columns.tsx": { - "filePath": "polaris-react/src/components/Columns/Columns.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Columns", - "value": "{\n [Breakpoint in BreakpointsAlias]?: number | string;\n}", - "description": "" - }, - "polaris-react/src/components/Grid/Grid.tsx": { - "filePath": "polaris-react/src/components/Grid/Grid.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Columns", - "value": "{\n [Breakpoint in Breakpoints]?: number;\n}", - "description": "" - }, - "polaris-react/src/components/Grid/components/Cell/Cell.tsx": { - "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", - "name": "Columns", + "Transition": { + "polaris-react/src/components/Collapsible/Collapsible.tsx": { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "name": "Transition", "description": "", "members": [ { - "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", "syntaxKind": "PropertySignature", - "name": "xs", - "value": "2 | 5 | 1 | 4 | 3 | 6", - "description": "Number of columns the section should span on extra small screens", + "name": "duration", + "value": "string", + "description": "Assign a transition duration to the collapsible animation.", "isOptional": true }, { - "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", "syntaxKind": "PropertySignature", - "name": "sm", - "value": "2 | 5 | 1 | 4 | 3 | 6", - "description": "Number of columns the section should span on small screens", + "name": "timingFunction", + "value": "string", + "description": "Assign a transition timing function to the collapsible animation", "isOptional": true - }, + } + ], + "value": "interface Transition {\n /** Assign a transition duration to the collapsible animation. */\n duration?: string;\n /** Assign a transition timing function to the collapsible animation */\n timingFunction?: string;\n}" + } + }, + "CollapsibleProps": { + "polaris-react/src/components/Collapsible/Collapsible.tsx": { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "name": "CollapsibleProps", + "description": "", + "members": [ { - "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", "syntaxKind": "PropertySignature", - "name": "md", - "value": "2 | 5 | 1 | 4 | 3 | 6", - "description": "Number of columns the section should span on medium screens", - "isOptional": true + "name": "id", + "value": "string", + "description": "Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop." }, { - "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", "syntaxKind": "PropertySignature", - "name": "lg", - "value": "2 | 5 | 1 | 4 | 10 | 3 | 6 | 7 | 8 | 9 | 11 | 12", - "description": "Number of columns the section should span on large screens", + "name": "expandOnPrint", + "value": "boolean", + "description": "Option to show collapsible content when printing", "isOptional": true }, { - "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "open", + "value": "boolean", + "description": "Toggle whether the collapsible is expanded or not." + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "transition", + "value": "boolean | Transition", + "description": "Override transition properties. When set to false, disables transition completely.", + "isOptional": true, + "defaultValue": "transition={{duration: 'var(--p-duration-150)', timingFunction: 'var(--p-ease-in-out)'}}" + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "preventMeasuringOnChildrenUpdate", + "value": "boolean", + "description": "", + "isOptional": true, + "deprecationMessage": "Re-measuring is no longer necessary on children update *" + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the collapsible.", + "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}" + } + }, + "AnimationState": { + "polaris-react/src/components/Collapsible/Collapsible.tsx": { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "AnimationState", + "value": "'idle' | 'measuring' | 'animating'", + "description": "" + } + }, + "Columns": { + "polaris-react/src/components/Columns/Columns.tsx": { + "filePath": "polaris-react/src/components/Columns/Columns.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Columns", + "value": "{\n [Breakpoint in BreakpointsAlias]?: number | string;\n}", + "description": "" + }, + "polaris-react/src/components/Grid/Grid.tsx": { + "filePath": "polaris-react/src/components/Grid/Grid.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Columns", + "value": "{\n [Breakpoint in Breakpoints]?: number;\n}", + "description": "" + }, + "polaris-react/src/components/Grid/components/Cell/Cell.tsx": { + "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "name": "Columns", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "syntaxKind": "PropertySignature", + "name": "xs", + "value": "2 | 5 | 1 | 4 | 3 | 6", + "description": "Number of columns the section should span on extra small screens", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "syntaxKind": "PropertySignature", + "name": "sm", + "value": "2 | 5 | 1 | 4 | 3 | 6", + "description": "Number of columns the section should span on small screens", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", + "syntaxKind": "PropertySignature", + "name": "md", + "value": "2 | 5 | 1 | 4 | 3 | 6", + "description": "Number of columns the section should span on medium screens", + "isOptional": true + }, + { + "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", + "description": "Number of columns the section should span on large screens", + "isOptional": true + }, + { + "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", @@ -12233,6 +12152,42 @@ "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", @@ -12330,42 +12285,6 @@ "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}" - } - }, "DividerProps": { "polaris-react/src/components/Divider/Divider.tsx": { "filePath": "polaris-react/src/components/Divider/Divider.tsx", @@ -12970,6 +12889,39 @@ "value": "export interface ExceptionListProps {\n /** Collection of items for list */\n items: Item[];\n}" } }, + "FocusProps": { + "polaris-react/src/components/Focus/Focus.tsx": { + "filePath": "polaris-react/src/components/Focus/Focus.tsx", + "name": "FocusProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Focus/Focus.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Focus/Focus.tsx", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Focus/Focus.tsx", + "syntaxKind": "PropertySignature", + "name": "root", + "value": "any", + "description": "" + } + ], + "value": "export interface FocusProps {\n children?: React.ReactNode;\n disabled?: boolean;\n root: React.RefObject | HTMLElement | null;\n}" + } + }, "AppliedFilterInterface": { "polaris-react/src/components/Filters/Filters.tsx": { "filePath": "polaris-react/src/components/Filters/Filters.tsx", @@ -13211,39 +13163,6 @@ ] } }, - "FocusProps": { - "polaris-react/src/components/Focus/Focus.tsx": { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "name": "FocusProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "syntaxKind": "PropertySignature", - "name": "root", - "value": "any", - "description": "" - } - ], - "value": "export interface FocusProps {\n children?: React.ReactNode;\n disabled?: boolean;\n root: React.RefObject | HTMLElement | null;\n}" - } - }, "Context": { "polaris-react/src/components/FocusManager/FocusManager.tsx": { "filePath": "polaris-react/src/components/FocusManager/FocusManager.tsx", @@ -13271,26 +13190,109 @@ "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", - "syntaxKind": "TypeAliasDeclaration", - "name": "Enctype", - "value": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'", - "description": "" - } - }, - "Method": { - "polaris-react/src/components/Form/Form.tsx": { - "filePath": "polaris-react/src/components/Form/Form.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Method", - "value": "'post' | 'get' | 'action'", - "description": "" - } - }, - "Target": { - "polaris-react/src/components/Form/Form.tsx": { + "FrameProps": { + "polaris-react/src/components/Frame/Frame.tsx": { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "name": "FrameProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "logo", + "value": "Logo", + "description": "Sets the logo for the TopBar, Navigation, and ContextualSaveBar components", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "offset", + "value": "string", + "description": "A horizontal offset that pushes the frame to the right, leaving empty space on the left", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the frame.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "topBar", + "value": "React.ReactNode", + "description": "Accepts a top bar component that will be rendered at the top-most portion of an application frame", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "navigation", + "value": "React.ReactNode", + "description": "Accepts a navigation component that will be rendered in the left sidebar of an application frame", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "globalRibbon", + "value": "React.ReactNode", + "description": "Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "showMobileNavigation", + "value": "boolean", + "description": "A boolean property indicating whether the mobile navigation is currently visible", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "skipToContentTarget", + "value": "React.RefObject", + "description": "Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "MethodSignature", + "name": "onNavigationDismiss", + "value": "() => void", + "description": "A callback function to handle clicking the mobile navigation dismiss button", + "isOptional": true + } + ], + "value": "export interface FrameProps {\n /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */\n logo?: Logo;\n /** A horizontal offset that pushes the frame to the right, leaving empty space on the left */\n offset?: string;\n /** The content to display inside the frame. */\n children?: React.ReactNode;\n /** Accepts a top bar component that will be rendered at the top-most portion of an application frame */\n topBar?: React.ReactNode;\n /** Accepts a navigation component that will be rendered in the left sidebar of an application frame */\n navigation?: React.ReactNode;\n /** Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame */\n globalRibbon?: React.ReactNode;\n /** A boolean property indicating whether the mobile navigation is currently visible\n * @default false\n */\n showMobileNavigation?: boolean;\n /** Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link */\n skipToContentTarget?: React.RefObject;\n /** A callback function to handle clicking the mobile navigation dismiss button */\n onNavigationDismiss?(): void;\n}" + } + }, + "Enctype": { + "polaris-react/src/components/Form/Form.tsx": { + "filePath": "polaris-react/src/components/Form/Form.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Enctype", + "value": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'", + "description": "" + } + }, + "Method": { + "polaris-react/src/components/Form/Form.tsx": { + "filePath": "polaris-react/src/components/Form/Form.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Method", + "value": "'post' | 'get' | 'action'", + "description": "" + } + }, + "Target": { + "polaris-react/src/components/Form/Form.tsx": { "filePath": "polaris-react/src/components/Form/Form.tsx", "syntaxKind": "TypeAliasDeclaration", "name": "Target", @@ -13421,89 +13423,6 @@ "value": "export interface FormLayoutProps {\n /** The content to display inside the layout. */\n children?: React.ReactNode;\n}" } }, - "FrameProps": { - "polaris-react/src/components/Frame/Frame.tsx": { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "name": "FrameProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "logo", - "value": "Logo", - "description": "Sets the logo for the TopBar, Navigation, and ContextualSaveBar components", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "offset", - "value": "string", - "description": "A horizontal offset that pushes the frame to the right, leaving empty space on the left", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside the frame.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "topBar", - "value": "React.ReactNode", - "description": "Accepts a top bar component that will be rendered at the top-most portion of an application frame", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "React.ReactNode", - "description": "Accepts a navigation component that will be rendered in the left sidebar of an application frame", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "globalRibbon", - "value": "React.ReactNode", - "description": "Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "showMobileNavigation", - "value": "boolean", - "description": "A boolean property indicating whether the mobile navigation is currently visible", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "skipToContentTarget", - "value": "React.RefObject", - "description": "Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "MethodSignature", - "name": "onNavigationDismiss", - "value": "() => void", - "description": "A callback function to handle clicking the mobile navigation dismiss button", - "isOptional": true - } - ], - "value": "export interface FrameProps {\n /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */\n logo?: Logo;\n /** A horizontal offset that pushes the frame to the right, leaving empty space on the left */\n offset?: string;\n /** The content to display inside the frame. */\n children?: React.ReactNode;\n /** Accepts a top bar component that will be rendered at the top-most portion of an application frame */\n topBar?: React.ReactNode;\n /** Accepts a navigation component that will be rendered in the left sidebar of an application frame */\n navigation?: React.ReactNode;\n /** Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame */\n globalRibbon?: React.ReactNode;\n /** A boolean property indicating whether the mobile navigation is currently visible\n * @default false\n */\n showMobileNavigation?: boolean;\n /** Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link */\n skipToContentTarget?: React.RefObject;\n /** A callback function to handle clicking the mobile navigation dismiss button */\n onNavigationDismiss?(): void;\n}" - } - }, "FullscreenBarProps": { "polaris-react/src/components/FullscreenBar/FullscreenBar.tsx": { "filePath": "polaris-react/src/components/FullscreenBar/FullscreenBar.tsx", @@ -16889,6 +16808,14 @@ "name": "PropsFromWrapper", "description": "", "members": [ + { + "filePath": "polaris-react/src/components/ResourceItem/ResourceItem.tsx", + "syntaxKind": "PropertySignature", + "name": "breakpoints", + "value": "BreakpointsMatches", + "description": "", + "isOptional": true + }, { "filePath": "polaris-react/src/components/ResourceItem/ResourceItem.tsx", "syntaxKind": "PropertySignature", @@ -16904,7 +16831,7 @@ "description": "" } ], - "value": "interface PropsFromWrapper {\n context: React.ContextType;\n i18n: ReturnType;\n}" + "value": "interface PropsFromWrapper {\n breakpoints?: BreakpointsMatches;\n context: React.ContextType;\n i18n: ReturnType;\n}" } }, "ResourceListProps": { @@ -22310,68 +22237,6 @@ ], "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}" }, - "polaris-react/src/components/Tabs/components/Item/Item.tsx": { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "name": "ItemProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "focused", - "value": "boolean", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "panelID", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "url", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", - "syntaxKind": "MethodSignature", - "name": "onClick", - "value": "() => void", - "description": "", - "isOptional": true - } - ], - "value": "export interface ItemProps {\n id: string;\n focused: boolean;\n panelID?: string;\n children?: React.ReactNode;\n url?: string;\n accessibilityLabel?: string;\n onClick?(): void;\n}" - }, "polaris-react/src/components/Stack/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Stack/components/Item/Item.tsx", "name": "ItemProps", @@ -22396,259 +22261,75 @@ ], "value": "export interface ItemProps {\n /** Elements to display inside item */\n children?: React.ReactNode;\n /** Fill the remaining horizontal space in the stack with the item */\n fill?: boolean;\n /**\n * @default false\n */\n}" }, - "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx": { - "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx", + "polaris-react/src/components/Tabs/components/Item/Item.tsx": { + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "name": "ItemProps", "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}" - } - }, - "SectionProps": { - "polaris-react/src/components/ActionList/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "section", - "value": "ActionListSection", - "description": "Section of action items" - }, - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "hasMultipleSections", - "value": "boolean", - "description": "Should there be multiple sections" - }, - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "actionRole", + "name": "id", "value": "string", - "description": "Defines a specific role attribute for each action in the list", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "onActionAnyItem", - "value": "() => void", - "description": "Callback when any item is clicked or keypressed", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "isFirst", - "value": "boolean", - "description": "", - "isOptional": true - } - ], - "value": "export interface SectionProps {\n /** Section of action items */\n section: ActionListSection;\n /** Should there be multiple sections */\n hasMultipleSections: boolean;\n /** Defines a specific role attribute for each action in the list */\n actionRole?: 'option' | 'menuitem' | string;\n /** Callback when any item is clicked or keypressed */\n onActionAnyItem?: ActionListItemDescriptor['onAction'];\n isFirst?: boolean;\n}" - }, - "polaris-react/src/components/Layout/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "secondary", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "fullWidth", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "oneHalf", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "oneThird", - "value": "boolean", - "description": "", - "isOptional": true - } - ], - "value": "export interface SectionProps {\n children?: React.ReactNode;\n secondary?: boolean;\n fullWidth?: boolean;\n oneHalf?: boolean;\n oneThird?: boolean;\n}" - }, - "polaris-react/src/components/Listbox/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "divider", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "ReactNode", "description": "" - } - ], - "value": "interface SectionProps {\n divider?: boolean;\n children?: ReactNode;\n title: ReactNode;\n}" - }, - "polaris-react/src/components/Modal/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true }, { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "flush", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "subdued", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "titleHidden", + "name": "focused", "value": "boolean", - "description": "", - "isOptional": true - } - ], - "value": "export interface SectionProps {\n children?: React.ReactNode;\n flush?: boolean;\n subdued?: boolean;\n titleHidden?: boolean;\n}" - }, - "polaris-react/src/components/Navigation/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "ItemProps[]", "description": "" }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "icon", - "value": "any", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "title", + "name": "panelID", "value": "string", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "fill", - "value": "boolean", + "name": "children", + "value": "React.ReactNode", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "rollup", - "value": "{ after: number; view: string; hide: string; activePath: string; }", + "name": "url", + "value": "string", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", "syntaxKind": "PropertySignature", - "name": "action", - "value": "{ icon: any; accessibilityLabel: string; onClick(): void; tooltip?: TooltipProps; }", + "name": "accessibilityLabel", + "value": "string", "description": "", "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "separator", - "value": "boolean", + }, + { + "filePath": "polaris-react/src/components/Tabs/components/Item/Item.tsx", + "syntaxKind": "MethodSignature", + "name": "onClick", + "value": "() => void", "description": "", "isOptional": true } ], - "value": "export interface SectionProps {\n items: ItemProps[];\n icon?: IconProps['source'];\n title?: string;\n fill?: boolean;\n rollup?: {\n after: number;\n view: string;\n hide: string;\n activePath: string;\n };\n action?: {\n icon: IconProps['source'];\n accessibilityLabel: string;\n onClick(): void;\n tooltip?: TooltipProps;\n };\n separator?: boolean;\n}" + "value": "export interface ItemProps {\n id: string;\n focused: boolean;\n panelID?: string;\n children?: React.ReactNode;\n url?: string;\n accessibilityLabel?: string;\n onClick?(): void;\n}" }, - "polaris-react/src/components/Popover/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", - "name": "SectionProps", + "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx": { + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx", + "name": "ItemProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx", "syntaxKind": "PropertySignature", "name": "children", "value": "React.ReactNode", @@ -22656,7 +22337,7 @@ "isOptional": true } ], - "value": "export interface SectionProps {\n children?: React.ReactNode;\n}" + "value": "interface ItemProps {\n children?: React.ReactNode;\n}" } }, "MeasuredActions": { @@ -22843,15 +22524,6 @@ "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}" } }, - "MappedOption": { - "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx": { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "MappedOption", - "value": "ArrayElement & {\n selected: boolean;\n singleSelection: boolean;\n}", - "description": "" - } - }, "SecondaryAction": { "polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx": { "filePath": "polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx", @@ -23334,71 +23006,335 @@ "isOptional": true }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the action", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "PropertySignature", + "name": "content", + "value": "string", + "description": "Content the action displays", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "PropertySignature", + "name": "url", + "value": "string", + "description": "A destination to link to, rendered in the action", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "PropertySignature", + "name": "external", + "value": "boolean", + "description": "Forces url to open in a new tab", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "MethodSignature", + "name": "onAction", + "value": "() => void", + "description": "Callback when an action takes place", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "MethodSignature", + "name": "onMouseEnter", + "value": "() => void", + "description": "Callback when mouse enter", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "MethodSignature", + "name": "onTouchStart", + "value": "() => void", + "description": "Callback when element is touched", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "PropertySignature", + "name": "destructive", + "value": "boolean", + "description": "Destructive action", + "isOptional": true + } + ], + "value": "interface MappedAction extends ActionListItemDescriptor {\n wrapOverflow?: boolean;\n}" + } + }, + "MappedOption": { + "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx": { + "filePath": "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "MappedOption", + "value": "ArrayElement & {\n selected: boolean;\n singleSelection: boolean;\n}", + "description": "" + } + }, + "SectionProps": { + "polaris-react/src/components/ActionList/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "section", + "value": "ActionListSection", + "description": "Section of action items" + }, + { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "hasMultipleSections", + "value": "boolean", + "description": "Should there be multiple sections" + }, + { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.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/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "onActionAnyItem", + "value": "() => void", + "description": "Callback when any item is clicked or keypressed", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "isFirst", + "value": "boolean", + "description": "Whether it is the first in a group of sections", + "isOptional": true + } + ], + "value": "export interface SectionProps {\n /** Section of action items */\n section: ActionListSection;\n /** Should there be multiple sections */\n hasMultipleSections: boolean;\n /** Defines a specific role attribute for each action in the list */\n actionRole?: 'option' | 'menuitem' | string;\n /** Callback when any item is clicked or keypressed */\n onActionAnyItem?: ActionListItemDescriptor['onAction'];\n /** Whether it is the first in a group of sections */\n isFirst?: boolean;\n}" + }, + "polaris-react/src/components/Layout/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "secondary", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "fullWidth", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "oneHalf", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "oneThird", + "value": "boolean", + "description": "", + "isOptional": true + } + ], + "value": "export interface SectionProps {\n children?: React.ReactNode;\n secondary?: boolean;\n fullWidth?: boolean;\n oneHalf?: boolean;\n oneThird?: boolean;\n}" + }, + "polaris-react/src/components/Listbox/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "divider", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "ReactNode", + "description": "" + } + ], + "value": "interface SectionProps {\n divider?: boolean;\n children?: ReactNode;\n title: ReactNode;\n}" + }, + "polaris-react/src/components/Modal/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "flush", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "subdued", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the action", + "name": "titleHidden", + "value": "boolean", + "description": "", "isOptional": true + } + ], + "value": "export interface SectionProps {\n children?: React.ReactNode;\n flush?: boolean;\n subdued?: boolean;\n titleHidden?: boolean;\n}" + }, + "polaris-react/src/components/Navigation/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "items", + "value": "ItemProps[]", + "description": "" }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "Content the action displays", + "name": "icon", + "value": "any", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", "syntaxKind": "PropertySignature", - "name": "url", + "name": "title", "value": "string", - "description": "A destination to link to, rendered in the action", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", "syntaxKind": "PropertySignature", - "name": "external", + "name": "fill", "value": "boolean", - "description": "Forces url to open in a new tab", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "MethodSignature", - "name": "onAction", - "value": "() => void", - "description": "Callback when an action takes place", + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "rollup", + "value": "{ after: number; view: string; hide: string; activePath: string; }", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "MethodSignature", - "name": "onMouseEnter", - "value": "() => void", - "description": "Callback when mouse enter", + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "action", + "value": "{ icon: any; accessibilityLabel: string; onClick(): void; tooltip?: TooltipProps; }", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "MethodSignature", - "name": "onTouchStart", - "value": "() => void", - "description": "Callback when element is touched", + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "separator", + "value": "boolean", + "description": "", "isOptional": true - }, + } + ], + "value": "export interface SectionProps {\n items: ItemProps[];\n icon?: IconProps['source'];\n title?: string;\n fill?: boolean;\n rollup?: {\n after: number;\n view: string;\n hide: string;\n activePath: string;\n };\n action?: {\n icon: IconProps['source'];\n accessibilityLabel: string;\n onClick(): void;\n tooltip?: TooltipProps;\n };\n separator?: boolean;\n}" + }, + "polaris-react/src/components/Popover/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", "syntaxKind": "PropertySignature", - "name": "destructive", - "value": "boolean", - "description": "Destructive action", + "name": "children", + "value": "React.ReactNode", + "description": "", "isOptional": true } ], - "value": "interface MappedAction extends ActionListItemDescriptor {\n wrapOverflow?: boolean;\n}" + "value": "export interface SectionProps {\n children?: React.ReactNode;\n}" + } + }, + "BulkActionButtonProps": { + "polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx": { + "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", + "description": "" } }, "MappedOption": { @@ -23444,15 +23380,6 @@ "value": "export interface PipProps {\n status?: Status;\n progress?: Progress;\n accessibilityLabelOverride?: string;\n}" } }, - "BulkActionButtonProps": { - "polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx": { - "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 showContentInButton?: boolean;\n} & DisableableAction", - "description": "" - } - }, "BulkActionsMenuProps": { "polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx": { "filePath": "polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx", @@ -23640,6 +23567,24 @@ "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", + "name": "CardSubsectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Card/components/Subsection/Subsection.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + } + ], + "value": "export interface CardSubsectionProps {\n children?: React.ReactNode;\n}" + } + }, "AlphaPickerProps": { "polaris-react/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx": { "filePath": "polaris-react/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx", @@ -23736,24 +23681,6 @@ "value": "export interface SlidableProps {\n draggerX?: number;\n draggerY?: number;\n onChange(position: Position): void;\n onDraggerHeight?(height: number): void;\n}" } }, - "CardSubsectionProps": { - "polaris-react/src/components/Card/components/Subsection/Subsection.tsx": { - "filePath": "polaris-react/src/components/Card/components/Subsection/Subsection.tsx", - "name": "CardSubsectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Card/components/Subsection/Subsection.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - } - ], - "value": "export interface CardSubsectionProps {\n children?: React.ReactNode;\n}" - } - }, "ItemPosition": { "polaris-react/src/components/Connected/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Connected/components/Item/Item.tsx", @@ -24317,32 +24244,6 @@ "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}" } }, - "FileUploadProps": { - "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx": { - "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", - "name": "FileUploadProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", - "syntaxKind": "PropertySignature", - "name": "actionTitle", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", - "syntaxKind": "PropertySignature", - "name": "actionHint", - "value": "string", - "description": "", - "isOptional": true - } - ], - "value": "export interface FileUploadProps {\n actionTitle?: string;\n actionHint?: string;\n}" - } - }, "WeekdayProps": { "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx": { "filePath": "polaris-react/src/components/DatePicker/components/Weekday/Weekday.tsx", @@ -24374,6 +24275,32 @@ "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", + "name": "FileUploadProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", + "syntaxKind": "PropertySignature", + "name": "actionTitle", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx", + "syntaxKind": "PropertySignature", + "name": "actionHint", + "value": "string", + "description": "", + "isOptional": true + } + ], + "value": "export interface FileUploadProps {\n actionTitle?: string;\n actionHint?: string;\n}" + } + }, "PopoverableAction": { "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx": { "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", @@ -24507,94 +24434,52 @@ { "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", "syntaxKind": "PropertySignature", - "name": "auxiliary", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", - "syntaxKind": "PropertySignature", - "name": "forceShowMorefiltersButton", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", - "syntaxKind": "PropertySignature", - "name": "queryFieldHidden", - "value": "boolean", - "description": "", - "isOptional": true - } - ], - "value": "export interface ConnectedFilterControlProps {\n children: React.ReactNode;\n rightPopoverableActions?: PopoverableAction[] | null;\n rightAction?: React.ReactNode;\n auxiliary?: React.ReactNode;\n disabled?: boolean;\n forceShowMorefiltersButton?: boolean;\n queryFieldHidden?: boolean;\n}" - } - }, - "ComputedProperty": { - "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx": { - "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", - "name": "ComputedProperty", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", - "name": "[key: string]", - "value": "number" - } - ], - "value": "interface ComputedProperty {\n [key: string]: number;\n}" - } - }, - "GroupProps": { - "polaris-react/src/components/FormLayout/components/Group/Group.tsx": { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", - "name": "GroupProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", - "syntaxKind": "PropertySignature", - "name": "children", + "name": "auxiliary", "value": "React.ReactNode", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", "syntaxKind": "PropertySignature", - "name": "condensed", + "name": "disabled", "value": "boolean", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", + "name": "forceShowMorefiltersButton", + "value": "boolean", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", "syntaxKind": "PropertySignature", - "name": "helpText", - "value": "React.ReactNode", + "name": "queryFieldHidden", + "value": "boolean", "description": "", "isOptional": true } ], - "value": "export interface GroupProps {\n children?: React.ReactNode;\n condensed?: boolean;\n title?: string;\n helpText?: React.ReactNode;\n}" + "value": "export interface ConnectedFilterControlProps {\n children: React.ReactNode;\n rightPopoverableActions?: PopoverableAction[] | null;\n rightAction?: React.ReactNode;\n auxiliary?: React.ReactNode;\n disabled?: boolean;\n forceShowMorefiltersButton?: boolean;\n queryFieldHidden?: boolean;\n}" + } + }, + "ComputedProperty": { + "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx": { + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", + "name": "ComputedProperty", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx", + "name": "[key: string]", + "value": "number" + } + ], + "value": "interface ComputedProperty {\n [key: string]: number;\n}" } }, "AnimationType": { @@ -24662,6 +24547,48 @@ "value": "export interface ToastManagerProps {\n toastMessages: ToastPropsWithID[];\n}" } }, + "GroupProps": { + "polaris-react/src/components/FormLayout/components/Group/Group.tsx": { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "name": "GroupProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "condensed", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "helpText", + "value": "React.ReactNode", + "description": "", + "isOptional": true + } + ], + "value": "export interface GroupProps {\n children?: React.ReactNode;\n condensed?: boolean;\n title?: string;\n helpText?: React.ReactNode;\n}" + } + }, "Cell": { "polaris-react/src/components/Grid/components/Cell/Cell.tsx": { "filePath": "polaris-react/src/components/Grid/components/Cell/Cell.tsx", @@ -25655,65 +25582,6 @@ ] } }, - "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}" - } - }, "PrimaryAction": { "polaris-react/src/components/Page/components/Header/Header.tsx": { "filePath": "polaris-react/src/components/Page/components/Header/Header.tsx", @@ -25836,6 +25704,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", @@ -26600,15 +26527,6 @@ "value": "export interface ResizerProps {\n contents?: string;\n currentHeight?: number | null;\n minimumLines?: number;\n onHeightChange(height: number): void;\n}" } }, - "HandleStepFn": { - "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx": { - "filePath": "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "HandleStepFn", - "value": "(step: number) => void", - "description": "" - } - }, "TooltipOverlayProps": { "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx": { "filePath": "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx", @@ -26679,6 +26597,15 @@ "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}" } }, + "HandleStepFn": { + "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx": { + "filePath": "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "HandleStepFn", + "value": "(step: number) => void", + "description": "" + } + }, "SearchProps": { "polaris-react/src/components/TopBar/components/Search/Search.tsx": { "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", @@ -26939,68 +26866,6 @@ "value": "export interface UserMenuProps {\n /** An array of action objects that are rendered inside of a popover triggered by this menu */\n actions: {items: IconableAction[]}[];\n /** Accepts a message that facilitates direct, urgent communication with the merchant through the user menu */\n message?: MenuProps['message'];\n /** A string detailing the merchant’s full name to be displayed in the user menu */\n name: string;\n /** A string allowing further detail on the merchant’s name displayed in the user menu */\n detail?: string;\n /** A string that provides the accessibility labeling */\n accessibilityLabel?: string;\n /** The merchant’s initials, rendered in place of an avatar image when not provided */\n initials: AvatarProps['initials'];\n /** An avatar image representing the merchant */\n avatar?: AvatarProps['source'];\n /** A boolean property indicating whether the user menu is currently open */\n open: boolean;\n /** A callback function to handle opening and closing the user menu */\n onToggle(): void;\n}" } }, - "DiscardConfirmationModalProps": { - "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx": { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "name": "DiscardConfirmationModalProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "syntaxKind": "PropertySignature", - "name": "open", - "value": "boolean", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "syntaxKind": "MethodSignature", - "name": "onDiscard", - "value": "() => void", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "syntaxKind": "MethodSignature", - "name": "onCancel", - "value": "() => void", - "description": "" - } - ], - "value": "export interface DiscardConfirmationModalProps {\n open: boolean;\n onDiscard(): void;\n onCancel(): void;\n}" - } - }, - "DiscardConfirmationModalProps": { - "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx": { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "name": "DiscardConfirmationModalProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "syntaxKind": "PropertySignature", - "name": "open", - "value": "boolean", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "syntaxKind": "MethodSignature", - "name": "onDiscard", - "value": "() => void", - "description": "" - }, - { - "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", - "syntaxKind": "MethodSignature", - "name": "onCancel", - "value": "() => void", - "description": "" - } - ], - "value": "export interface DiscardConfirmationModalProps {\n open: boolean;\n onDiscard(): void;\n onCancel(): void;\n}" - } - }, "SecondaryProps": { "polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx": { "filePath": "polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx", From 23afbfa2308ce371663b1f56033ecf74a8b7abad Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Fri, 2 Dec 2022 11:42:10 -0500 Subject: [PATCH 04/15] [SkeletonPage] Rebuild with layout primitives (#7797) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes [#7714](https://github.com/Shopify/polaris/issues/7714) - Refactors `SkeletonPage` and its child components to use our layout primitives. - Removes `max-width: 100%` property from AlphaStack - Adds storybook examples for `SkeletonPage` with `narrowWidth` and with `fullWidth` props
    Unable to center `SkeletonPage` when `narrowWidth` prop is used - SOLVED ✅
    Before After
    Screenshot 2022-11-24 at 9 13 21 AM Screenshot 2022-11-24 at 9 10 25 AM
    Screenshot 2022-11-24 at 9 13 42 AM Screenshot 2022-11-24 at 9 11 17 AM
    Our current `Text` component has the opposite breakpoint behaviour compared to how `.Title` is used in `SkeletonPage` - SOLVED ✅
    Before After
    before text before text
    ```java .Title { font-weight: var(--p-font-weight-semibold); font-size: 24px; line-height: 28px; @media #{$p-breakpoints-md-up} { font-size: 20px; } } ``` ```java .headingXl { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-3); @media #{$p-breakpoints-md-up} { font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-4); } } ```
    ~~`role` prop is missing from `Box`, creating a separate issue to solve this [here](https://github.com/Shopify/polaris/pull/7799)~~ SOLVED ✅ - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide Co-authored-by: Lo Kim --- .changeset/strong-bottles-swim.md | 7 ++ .../components/SkeletonPage/SkeletonPage.scss | 100 +----------------- .../SkeletonPage/SkeletonPage.stories.tsx | 100 ++++++++++++++++++ .../components/SkeletonPage/SkeletonPage.tsx | 77 +++++++++----- .../SkeletonPage/tests/SkeletonPage.test.tsx | 14 +-- 5 files changed, 172 insertions(+), 126 deletions(-) create mode 100644 .changeset/strong-bottles-swim.md diff --git a/.changeset/strong-bottles-swim.md b/.changeset/strong-bottles-swim.md new file mode 100644 index 00000000000..9b76d2d1790 --- /dev/null +++ b/.changeset/strong-bottles-swim.md @@ -0,0 +1,7 @@ +--- +'@shopify/polaris': minor +--- + +Refactored `SkeletonPage` to use primitive Layout components +Removed `max-width` on children in `AlphaStack` +Added `narrowWidth` and `fullWidth` examples to `AlphaStack` stories diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss index 3f0b7ee4fe5..292ca70bf6d 100644 --- a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss +++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss @@ -2,73 +2,19 @@ $primary-action-button-height: 36px; $primary-action-button-width: 100px; -$skeleton-display-text-max-width: 120px; -.Page { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include page-layout; -} - -.fullWidth { - max-width: none; -} - -.narrowWidth { - max-width: $layout-width-primary-max; -} - -.Content { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include page-content-layout; -} - -.Header { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include page-header-layout; - padding-bottom: var(--p-space-2); -} - -.BreadcrumbAction { - padding-top: var(--p-space-4); - padding-bottom: var(--p-space-4); - margin-top: calc(-1 * var(--p-space-1)); - margin-bottom: calc(-1 * var(--p-space-1)); -} - -.TitleAndPrimaryAction { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: flex-start; -} - -.TitleWrapper { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex: 1 1 0%; +:root { + --pc-skeleton-page-max-width: 998px; + --pc-skeleton-page-max-width-narrow: 662px; } .Title { font-weight: var(--p-font-weight-semibold); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - font-size: 24px; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - line-height: 28px; - - @media #{$p-breakpoints-md-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - font-size: 20px; - } + font-size: var(--p-font-size-300); + line-height: var(--p-font-line-height-4); } .SkeletonTitle { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - background-color: var(--p-surface-neutral); - border-radius: var(--p-border-radius-base); - max-width: $skeleton-display-text-max-width; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - height: 28px; - @media screen and (-ms-high-contrast: active) { background-color: grayText; } @@ -83,39 +29,3 @@ $skeleton-display-text-max-width: 120px; min-width: $primary-action-button-width; } } - -.Actions { - margin-top: var(--p-space-2); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - flex-direction: row-reverse; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - justify-content: flex-end; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; -} - -.Action { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - flex-direction: column; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - justify-content: center; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - min-height: control-slim-height(); - padding-right: var(--p-space-6); - margin-top: calc(-1 * var(--p-space-1)); - margin-bottom: calc(-1 * var(--p-space-1)); - padding-top: var(--p-space-4); - - &:first-child { - padding-right: 0; - } - - @media #{$p-breakpoints-lg-down} { - &:not(:last-child) { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: none; - } - } -} diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx index 41216d5e316..4ffd288ba88 100644 --- a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx +++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx @@ -100,3 +100,103 @@ export function WithStaticContent() { ); } + +export function WithNarrowWidth() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export function WithFullWidth() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx index 8cd1588ac1f..e692822ef56 100644 --- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx +++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx @@ -1,9 +1,11 @@ import React from 'react'; -import {classNames} from '../../utilities/css'; import {useI18n} from '../../utilities/i18n'; import {SkeletonDisplayText} from '../SkeletonDisplayText'; import {SkeletonBodyText} from '../SkeletonBodyText'; +import {Box} from '../Box'; +import {Inline} from '../Inline'; +import {AlphaStack} from '../AlphaStack'; import styles from './SkeletonPage.scss'; @@ -31,20 +33,20 @@ export function SkeletonPage({ breadcrumbs, }: SkeletonPageProps) { const i18n = useI18n(); - const className = classNames( - styles.Page, - fullWidth && styles.fullWidth, - narrowWidth && styles.narrowWidth, - ); const titleContent = title ? (

    {title}

    ) : ( -
    +
    + +
    ); - const titleMarkup =
    {titleContent}
    ; - const primaryActionMarkup = primaryAction ? (
    @@ -52,25 +54,50 @@ export function SkeletonPage({ ) : null; const breadcrumbMarkup = breadcrumbs ? ( -
    + -
    + ) : null; return ( -
    -
    - {breadcrumbMarkup} -
    - {titleMarkup} - {primaryActionMarkup} -
    -
    -
    {children}
    -
    + + + + + {breadcrumbMarkup} + + {titleContent} + {primaryActionMarkup} + + + + {children} + + + + ); } diff --git a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx index 1bef933df19..20688bd794d 100644 --- a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx +++ b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx @@ -2,11 +2,11 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {Card} from '../../Card'; -import {Text} from '../../Text'; import {Layout} from '../../Layout'; import {SkeletonBodyText} from '../../SkeletonBodyText'; import {SkeletonDisplayText} from '../../SkeletonDisplayText'; import {SkeletonPage} from '../SkeletonPage'; +import {Box} from '../../Box'; describe('', () => { it('renders its children', () => { @@ -38,7 +38,9 @@ describe('', () => { const skeletonPage = mountWithApp(); expect(skeletonPage).toContainReactComponent('h1', {className: 'Title'}); - expect(skeletonPage).not.toContainReactComponent(Text); + expect(skeletonPage).not.toContainReactComponent(Box, { + background: 'surface-neutral', + }); }); it('renders SkeletonTitle when a title not defined', () => { @@ -47,8 +49,8 @@ describe('', () => { expect(skeletonPage).not.toContainReactComponent('h1', { className: 'Title', }); - expect(skeletonPage).toContainReactComponent('div', { - className: 'SkeletonTitle', + expect(skeletonPage).toContainReactComponent(Box, { + background: 'surface-neutral', }); }); @@ -58,8 +60,8 @@ describe('', () => { expect(skeletonPage).not.toContainReactComponent('h1', { className: 'Title', }); - expect(skeletonPage).toContainReactComponent('div', { - className: 'SkeletonTitle', + expect(skeletonPage).toContainReactComponent(Box, { + background: 'surface-neutral', }); }); }); From 45d8134dd6568c7e6a6337408c47987d61415529 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Wed, 7 Dec 2022 09:08:56 -0500 Subject: [PATCH 05/15] Add comments for stylelint disable --- polaris-react/src/components/BulkActions/BulkActions.scss | 2 +- polaris-react/src/components/ResourceItem/ResourceItem.scss | 5 +++-- polaris-react/src/components/SkeletonPage/SkeletonPage.scss | 2 ++ 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss index 990861e0c4c..62e474a368d 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.scss @@ -80,7 +80,7 @@ $bulk-actions-button-stacking-order: ( pointer-events: auto; @media #{$p-breakpoints-sm-down} { - // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space + // stylelint-disable-next-line selector-max-combinators, selector-max-type -- update button spacing on small screens > div > div:first-child { flex: 1 1 auto; } diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss index 645c3ac7392..2a2e79a443e 100644 --- a/polaris-react/src/components/ResourceItem/ResourceItem.scss +++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss @@ -25,7 +25,7 @@ background-color: var(--p-surface-hovered); .Actions { - /* stylelint-disable-next-line selector-max-combinators */ + // stylelint-disable-next-line selector-max-combinators -- show actions on hover > * { @include action-unhide; } @@ -99,7 +99,7 @@ } .focused & { - // stylelint-disable-next-line selector-max-combinators + // stylelint-disable-next-line selector-max-combinators -- show actions on focus > * { @include action-unhide; } @@ -119,6 +119,7 @@ } .ListItem { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include focus-ring($border-width: -1px); .ListItem + & { diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss index 292ca70bf6d..d6618a3b04d 100644 --- a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss +++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss @@ -4,8 +4,10 @@ $primary-action-button-height: 36px; $primary-action-button-width: 100px; :root { + // stylelint-disable -- use custom properties to set max width based on props --pc-skeleton-page-max-width: 998px; --pc-skeleton-page-max-width-narrow: 662px; + // stylelint-enable } .Title { From 980aa972bcd15842393aee6b0c6a97047cb615ae Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Wed, 7 Dec 2022 09:16:52 -0500 Subject: [PATCH 06/15] [BulkActions] Update disable comment --- polaris-react/src/components/BulkActions/BulkActions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss index 62e474a368d..990861e0c4c 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.scss @@ -80,7 +80,7 @@ $bulk-actions-button-stacking-order: ( pointer-events: auto; @media #{$p-breakpoints-sm-down} { - // stylelint-disable-next-line selector-max-combinators, selector-max-type -- update button spacing on small screens + // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space > div > div:first-child { flex: 1 1 auto; } From c53dc272a2e0d8ca0717089351da02ae21c2baa7 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Wed, 7 Dec 2022 09:18:24 -0500 Subject: [PATCH 07/15] [polaris.shopify.com] Run `get-props` script --- polaris.shopify.com/src/data/props.json | 3413 ++++++++++++----------- 1 file changed, 1825 insertions(+), 1588 deletions(-) diff --git a/polaris.shopify.com/src/data/props.json b/polaris.shopify.com/src/data/props.json index 7a99e2b189f..4e11be9979f 100644 --- a/polaris.shopify.com/src/data/props.json +++ b/polaris.shopify.com/src/data/props.json @@ -7586,6 +7586,72 @@ "description": "" } }, + "AccountConnectionProps": { + "polaris-react/src/components/AccountConnection/AccountConnection.tsx": { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "name": "AccountConnectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "React.ReactNode", + "description": "Content to display as title", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "details", + "value": "React.ReactNode", + "description": "Content to display as additional details", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "termsOfService", + "value": "React.ReactNode", + "description": "Content to display as terms of service", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "accountName", + "value": "string", + "description": "The name of the service", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "avatarUrl", + "value": "string", + "description": "URL for the user’s avatar image", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "connected", + "value": "boolean", + "description": "Set if the account is connected", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", + "syntaxKind": "PropertySignature", + "name": "action", + "value": "Action", + "description": "Action for account connection", + "isOptional": true + } + ], + "value": "export interface AccountConnectionProps {\n /** Content to display as title */\n title?: React.ReactNode;\n /** Content to display as additional details */\n details?: React.ReactNode;\n /** Content to display as terms of service */\n termsOfService?: React.ReactNode;\n /** The name of the service */\n accountName?: string;\n /** URL for the user’s avatar image */\n avatarUrl?: string;\n /** Set if the account is connected */\n connected?: boolean;\n /** Action for account connection */\n action?: Action;\n}" + } + }, "ActionListProps": { "polaris-react/src/components/ActionList/ActionList.tsx": { "filePath": "polaris-react/src/components/ActionList/ActionList.tsx", @@ -7738,6 +7804,103 @@ "value": "export interface ActionMenuProps {\n /** Collection of page-level secondary actions */\n actions?: MenuActionDescriptor[];\n /** Collection of page-level action groups */\n groups?: MenuGroupDescriptor[];\n /** Roll up all actions into a Popover > ActionList */\n rollup?: boolean;\n /** Label for rolled up actions activator */\n rollupActionsLabel?: string;\n /** Callback that returns true when secondary actions are rolled up into action groups, and false when not */\n onActionRollup?(hasRolledUp: boolean): void;\n}" } }, + "CardBackgroundColorTokenScale": { + "polaris-react/src/components/AlphaCard/AlphaCard.tsx": { + "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "CardBackgroundColorTokenScale", + "value": "\"surface\" | \"surface-subdued\"", + "description": "" + } + }, + "Spacing": { + "polaris-react/src/components/AlphaCard/AlphaCard.tsx": { + "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Spacing", + "value": "ResponsiveProp", + "description": "" + }, + "polaris-react/src/components/Bleed/Bleed.tsx": { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Spacing", + "value": "ResponsiveProp", + "description": "" + }, + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Spacing", + "value": "ResponsiveProp", + "description": "" + }, + "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx": { + "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Spacing", + "value": "'extraTight' | 'tight' | 'loose'", + "description": "" + }, + "polaris-react/src/components/Stack/Stack.tsx": { + "filePath": "polaris-react/src/components/Stack/Stack.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Spacing", + "value": "'extraTight' | 'tight' | 'baseTight' | 'loose' | 'extraLoose' | 'none'", + "description": "" + }, + "polaris-react/src/components/TextContainer/TextContainer.tsx": { + "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Spacing", + "value": "'tight' | 'loose'", + "description": "" + } + }, + "AlphaCardProps": { + "polaris-react/src/components/AlphaCard/AlphaCard.tsx": { + "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "name": "AlphaCardProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "syntaxKind": "PropertySignature", + "name": "background", + "value": "CardBackgroundColorTokenScale", + "description": "Background color", + "isOptional": true, + "defaultValue": "'surface'" + }, + { + "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "syntaxKind": "PropertySignature", + "name": "padding", + "value": "Spacing", + "description": "The spacing around the card", + "isOptional": true, + "defaultValue": "{xs: '4', sm: '5'}" + }, + { + "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "syntaxKind": "PropertySignature", + "name": "roundedAbove", + "value": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", + "description": "Border radius value above a set breakpoint", + "isOptional": true + } + ], + "value": "export interface AlphaCardProps {\n children?: React.ReactNode;\n /** Background color\n * @default 'surface'\n */\n background?: CardBackgroundColorTokenScale;\n /** The spacing around the card\n * @default {xs: '4', sm: '5'}\n * @example\n * padding='4'\n * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n padding?: Spacing;\n /** Border radius value above a set breakpoint */\n roundedAbove?: BreakpointsAlias;\n}" + } + }, "Props": { "polaris-react/src/components/AfterInitialMount/AfterInitialMount.tsx": { "filePath": "polaris-react/src/components/AfterInitialMount/AfterInitialMount.tsx", @@ -8022,74 +8185,83 @@ "value": "interface Props {\n /** Callback when the search is dismissed */\n onDismiss?(): void;\n /** Determines whether the overlay should be visible */\n visible: boolean;\n}" } }, - "CardBackgroundColorTokenScale": { - "polaris-react/src/components/AlphaCard/AlphaCard.tsx": { - "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "Align": { + "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { + "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "CardBackgroundColorTokenScale", - "value": "\"surface\" | \"surface-subdued\"", + "name": "Align", + "value": "'start' | 'end' | 'center'", + "description": "" + }, + "polaris-react/src/components/Inline/Inline.tsx": { + "filePath": "polaris-react/src/components/Inline/Inline.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Align", + "value": "'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'", "description": "" } }, - "Spacing": { - "polaris-react/src/components/AlphaCard/AlphaCard.tsx": { - "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "Element": { + "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { + "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "Spacing", - "value": "ResponsiveProp", + "name": "Element", + "value": "'div' | 'ul' | 'ol' | 'fieldset'", "description": "" }, "polaris-react/src/components/Box/Box.tsx": { "filePath": "polaris-react/src/components/Box/Box.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "Spacing", - "value": "ResponsiveProp", + "name": "Element", + "value": "'div' | 'span' | 'section' | 'legend' | 'ul' | 'li'", "description": "" }, - "polaris-react/src/components/Bleed/Bleed.tsx": { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "polaris-react/src/components/Text/Text.tsx": { + "filePath": "polaris-react/src/components/Text/Text.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "Spacing", - "value": "ResponsiveProp", + "name": "Element", + "value": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend'", "description": "" - }, - "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx": { - "filePath": "polaris-react/src/components/ButtonGroup/ButtonGroup.tsx", + } + }, + "Gap": { + "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { + "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "Spacing", - "value": "'extraTight' | 'tight' | 'loose'", + "name": "Gap", + "value": "ResponsiveProp", "description": "" }, - "polaris-react/src/components/List/List.tsx": { - "filePath": "polaris-react/src/components/List/List.tsx", + "polaris-react/src/components/Columns/Columns.tsx": { + "filePath": "polaris-react/src/components/Columns/Columns.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "Spacing", - "value": "'extraTight' | 'loose'", + "name": "Gap", + "value": "ResponsiveProp", "description": "" }, - "polaris-react/src/components/Stack/Stack.tsx": { - "filePath": "polaris-react/src/components/Stack/Stack.tsx", + "polaris-react/src/components/Grid/Grid.tsx": { + "filePath": "polaris-react/src/components/Grid/Grid.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "Spacing", - "value": "'extraTight' | 'tight' | 'baseTight' | 'loose' | 'extraLoose' | 'none'", + "name": "Gap", + "value": "{\n [Breakpoint in Breakpoints]?: string;\n}", "description": "" }, - "polaris-react/src/components/TextContainer/TextContainer.tsx": { - "filePath": "polaris-react/src/components/TextContainer/TextContainer.tsx", + "polaris-react/src/components/Inline/Inline.tsx": { + "filePath": "polaris-react/src/components/Inline/Inline.tsx", "syntaxKind": "TypeAliasDeclaration", - "name": "Spacing", - "value": "'tight' | 'loose'", + "name": "Gap", + "value": "ResponsiveProp", "description": "" } }, - "AlphaCardProps": { - "polaris-react/src/components/AlphaCard/AlphaCard.tsx": { - "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", - "name": "AlphaCardProps", + "AlphaStackProps": { + "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { + "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", + "name": "AlphaStackProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", "syntaxKind": "PropertySignature", "name": "children", "value": "React.ReactNode", @@ -8097,190 +8269,11 @@ "isOptional": true }, { - "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", + "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", "syntaxKind": "PropertySignature", - "name": "background", - "value": "CardBackgroundColorTokenScale", - "description": "Background color", - "isOptional": true, - "defaultValue": "'surface'" - }, - { - "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", - "syntaxKind": "PropertySignature", - "name": "padding", - "value": "Spacing", - "description": "The spacing around the card", - "isOptional": true, - "defaultValue": "{xs: '4', sm: '5'}" - }, - { - "filePath": "polaris-react/src/components/AlphaCard/AlphaCard.tsx", - "syntaxKind": "PropertySignature", - "name": "roundedAbove", - "value": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", - "description": "Border radius value above a set breakpoint", - "isOptional": true - } - ], - "value": "export interface AlphaCardProps {\n children?: React.ReactNode;\n /** Background color\n * @default 'surface'\n */\n background?: CardBackgroundColorTokenScale;\n /** The spacing around the card\n * @default {xs: '4', sm: '5'}\n * @example\n * padding='4'\n * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}\n */\n padding?: Spacing;\n /** Border radius value above a set breakpoint */\n roundedAbove?: BreakpointsAlias;\n}" - } - }, - "AccountConnectionProps": { - "polaris-react/src/components/AccountConnection/AccountConnection.tsx": { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "name": "AccountConnectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "React.ReactNode", - "description": "Content to display as title", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "details", - "value": "React.ReactNode", - "description": "Content to display as additional details", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "termsOfService", - "value": "React.ReactNode", - "description": "Content to display as terms of service", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "accountName", - "value": "string", - "description": "The name of the service", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "avatarUrl", - "value": "string", - "description": "URL for the user’s avatar image", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "connected", - "value": "boolean", - "description": "Set if the account is connected", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AccountConnection/AccountConnection.tsx", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "Action", - "description": "Action for account connection", - "isOptional": true - } - ], - "value": "export interface AccountConnectionProps {\n /** Content to display as title */\n title?: React.ReactNode;\n /** Content to display as additional details */\n details?: React.ReactNode;\n /** Content to display as terms of service */\n termsOfService?: React.ReactNode;\n /** The name of the service */\n accountName?: string;\n /** URL for the user’s avatar image */\n avatarUrl?: string;\n /** Set if the account is connected */\n connected?: boolean;\n /** Action for account connection */\n action?: Action;\n}" - } - }, - "Align": { - "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { - "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Align", - "value": "'start' | 'end' | 'center'", - "description": "" - }, - "polaris-react/src/components/Inline/Inline.tsx": { - "filePath": "polaris-react/src/components/Inline/Inline.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Align", - "value": "'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'", - "description": "" - } - }, - "Element": { - "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { - "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Element", - "value": "'div' | 'ul' | 'ol' | 'fieldset'", - "description": "" - }, - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Element", - "value": "'div' | 'span' | 'section' | 'legend' | 'ul' | 'li'", - "description": "" - }, - "polaris-react/src/components/Text/Text.tsx": { - "filePath": "polaris-react/src/components/Text/Text.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Element", - "value": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend'", - "description": "" - } - }, - "Gap": { - "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { - "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Gap", - "value": "ResponsiveProp", - "description": "" - }, - "polaris-react/src/components/Columns/Columns.tsx": { - "filePath": "polaris-react/src/components/Columns/Columns.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Gap", - "value": "ResponsiveProp", - "description": "" - }, - "polaris-react/src/components/Grid/Grid.tsx": { - "filePath": "polaris-react/src/components/Grid/Grid.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Gap", - "value": "{\n [Breakpoint in Breakpoints]?: string;\n}", - "description": "" - }, - "polaris-react/src/components/Inline/Inline.tsx": { - "filePath": "polaris-react/src/components/Inline/Inline.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Gap", - "value": "ResponsiveProp", - "description": "" - } - }, - "AlphaStackProps": { - "polaris-react/src/components/AlphaStack/AlphaStack.tsx": { - "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", - "name": "AlphaStackProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/AlphaStack/AlphaStack.tsx", - "syntaxKind": "PropertySignature", - "name": "as", - "value": "Element", - "description": "HTML Element type", + "name": "as", + "value": "Element", + "description": "HTML Element type", "isOptional": true, "defaultValue": "'div'" }, @@ -8328,7 +8321,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 /** 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}" + "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}" } }, "State": { @@ -9180,62 +9173,6 @@ ], "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", @@ -9617,28 +9554,282 @@ } ], "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}" - } - }, - "BadgeProps": { - "polaris-react/src/components/Badge/Badge.tsx": { - "filePath": "polaris-react/src/components/Badge/Badge.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "BadgeProps", - "value": "NonMutuallyExclusiveProps & (\n | {progress?: Progress; icon?: undefined}\n | {icon?: IconSource; progress?: undefined}\n )", - "description": "" - } - }, - "Overflow": { - "polaris-react/src/components/Box/Box.tsx": { - "filePath": "polaris-react/src/components/Box/Box.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Overflow", - "value": "'hidden' | 'scroll'", - "description": "" - } - }, - "Position": { - "polaris-react/src/components/Box/Box.tsx": { + }, + "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": { + "polaris-react/src/components/Badge/Badge.tsx": { + "filePath": "polaris-react/src/components/Badge/Badge.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BadgeProps", + "value": "NonMutuallyExclusiveProps & (\n | {progress?: Progress; icon?: undefined}\n | {icon?: IconSource; progress?: undefined}\n )", + "description": "" + } + }, + "BannerStatus": { + "polaris-react/src/components/Banner/Banner.tsx": { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "BannerStatus", + "value": "'success' | 'info' | 'warning' | 'critical'", + "description": "" + } + }, + "BannerProps": { + "polaris-react/src/components/Banner/Banner.tsx": { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "name": "BannerProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "Title content for the banner.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "any", + "description": "Icon to display in the banner. Use only major, duotone icons", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "status", + "value": "BannerStatus", + "description": "Sets the status of the banner.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The child elements to render in the banner.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "action", + "value": "DisableableAction & LoadableAction", + "description": "Action for banner", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "secondaryAction", + "value": "Action", + "description": "Action | Displays a secondary action", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "MethodSignature", + "name": "onDismiss", + "value": "() => void", + "description": "Callback when banner is dismissed", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "stopAnnouncements", + "value": "boolean", + "description": "Disables screen reader announcements when changing the content of the banner", + "isOptional": true + } + ], + "value": "export interface BannerProps {\n /** Title content for the banner. */\n title?: string;\n /** Icon to display in the banner. Use only major, duotone icons */\n icon?: IconProps['source'];\n /** Sets the status of the banner. */\n status?: BannerStatus;\n /** The child elements to render in the banner. */\n children?: React.ReactNode;\n /** Action for banner */\n action?: DisableableAction & LoadableAction;\n /** Action | Displays a secondary action */\n secondaryAction?: Action;\n /** Callback when banner is dismissed */\n onDismiss?(): void;\n /** Disables screen reader announcements when changing the content of the banner */\n stopAnnouncements?: boolean;\n}" + } + }, + "BannerAttributes": { + "polaris-react/src/components/Banner/Banner.tsx": { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "name": "BannerAttributes", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "iconColor", + "value": "Color", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "defaultIcon", + "value": "any", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "PropertySignature", + "name": "ariaRoleType", + "value": "\"alert\" | \"status\"", + "description": "" + } + ], + "value": "interface BannerAttributes {\n iconColor: IconProps['color'];\n defaultIcon: IconProps['source'];\n ariaRoleType: 'status' | 'alert';\n}" + } + }, + "BannerHandles": { + "polaris-react/src/components/Banner/Banner.tsx": { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "name": "BannerHandles", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Banner/Banner.tsx", + "syntaxKind": "MethodSignature", + "name": "focus", + "value": "() => void", + "description": "" + } + ], + "value": "export interface BannerHandles {\n focus(): void;\n}" + } + }, + "BleedProps": { + "polaris-react/src/components/Bleed/Bleed.tsx": { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "name": "BleedProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginInline", + "value": "Spacing", + "description": "Negative horizontal space around children", + "isOptional": true, + "defaultValue": "'5'" + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginBlock", + "value": "Spacing", + "description": "Negative vertical space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginBlockStart", + "value": "Spacing", + "description": "Negative top space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginBlockEnd", + "value": "Spacing", + "description": "Negative bottom space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginInlineStart", + "value": "Spacing", + "description": "Negative left space around children", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", + "syntaxKind": "PropertySignature", + "name": "marginInlineEnd", + "value": "Spacing", + "description": "Negative right space around children", + "isOptional": true + } + ], + "value": "export interface BleedProps {\n children?: React.ReactNode;\n /** Negative horizontal space around children\n * @default '5'\n */\n marginInline?: Spacing;\n /** Negative vertical space around children */\n marginBlock?: Spacing;\n /** Negative top space around children */\n marginBlockStart?: Spacing;\n /** Negative bottom space around children */\n marginBlockEnd?: Spacing;\n /** Negative left space around children */\n marginInlineStart?: Spacing;\n /** Negative right space around children */\n marginInlineEnd?: Spacing;\n}" + } + }, + "Overflow": { + "polaris-react/src/components/Box/Box.tsx": { + "filePath": "polaris-react/src/components/Box/Box.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Overflow", + "value": "'hidden' | 'scroll'", + "description": "" + } + }, + "Position": { + "polaris-react/src/components/Box/Box.tsx": { "filePath": "polaris-react/src/components/Box/Box.tsx", "syntaxKind": "TypeAliasDeclaration", "name": "Position", @@ -10074,6 +10265,23 @@ "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", @@ -10288,94 +10496,10 @@ "description": "" } }, - "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}" - } - }, - "BleedProps": { - "polaris-react/src/components/Bleed/Bleed.tsx": { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "name": "BleedProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginInline", - "value": "Spacing", - "description": "Negative horizontal space around children", - "isOptional": true, - "defaultValue": "'5'" - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginBlock", - "value": "Spacing", - "description": "Negative vertical space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginBlockStart", - "value": "Spacing", - "description": "Negative top space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginBlockEnd", - "value": "Spacing", - "description": "Negative bottom space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginInlineStart", - "value": "Spacing", - "description": "Negative left space around children", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Bleed/Bleed.tsx", - "syntaxKind": "PropertySignature", - "name": "marginInlineEnd", - "value": "Spacing", - "description": "Negative right space around children", - "isOptional": true - } - ], - "value": "export interface BleedProps {\n children?: React.ReactNode;\n /** Negative horizontal space around children\n * @default '5'\n */\n marginInline?: Spacing;\n /** Negative vertical space around children */\n marginBlock?: Spacing;\n /** Negative top space around children */\n marginBlockStart?: Spacing;\n /** Negative bottom space around children */\n marginBlockEnd?: Spacing;\n /** Negative left space around children */\n marginInlineStart?: Spacing;\n /** Negative right space around children */\n marginInlineEnd?: Spacing;\n}" - } - }, - "ButtonProps": { - "polaris-react/src/components/Button/Button.tsx": { - "filePath": "polaris-react/src/components/Button/Button.tsx", - "name": "ButtonProps", + "ButtonProps": { + "polaris-react/src/components/Button/Button.tsx": { + "filePath": "polaris-react/src/components/Button/Button.tsx", + "name": "ButtonProps", "description": "", "members": [ { @@ -10729,54 +10853,22 @@ "description": "" } }, - "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", - "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", + "filePath": "polaris-react/src/components/Caption/Caption.tsx", "syntaxKind": "PropertySignature", "name": "children", "value": "React.ReactNode", - "description": "Button components", + "description": "The content to use as a graph label or timestamp", "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 CaptionProps {\n /** The content to use as a graph label or timestamp */\n children?: React.ReactNode;\n}" } }, "CalloutCardProps": { @@ -10834,22 +10926,54 @@ "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}" } }, - "CaptionProps": { - "polaris-react/src/components/Caption/Caption.tsx": { - "filePath": "polaris-react/src/components/Caption/Caption.tsx", - "name": "CaptionProps", + "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/Caption/Caption.tsx", + "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": "children", "value": "React.ReactNode", - "description": "The content to use as a graph label or timestamp", + "description": "Button components", "isOptional": true } ], - "value": "export interface CaptionProps {\n /** The content to use as a graph label or timestamp */\n children?: React.ReactNode;\n}" + "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}" } }, "CardProps": { @@ -10942,50 +11066,88 @@ "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}" } }, - "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/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 }, { @@ -10997,7 +11159,7 @@ "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}" } }, "CheckboxProps": { @@ -11192,92 +11354,62 @@ "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}" } }, - "ChoiceProps": { - "polaris-react/src/components/Choice/Choice.tsx": { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", - "name": "ChoiceProps", + "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/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", - "name": "id", + "name": "accessibilityLabel", "value": "string", - "description": "A unique identifier for the choice" + "description": "", + "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", "name": "label", - "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", + "value": "string", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", - "name": "error", - "value": "any", - "description": "Display an error message", + "name": "selected", + "value": "boolean | \"indeterminate\"", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "PropertySignature", - "name": "labelHidden", + "name": "disabled", "value": "boolean", - "description": "Visually hide the label", - "isOptional": true - }, - { - "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": "onClick", - "value": "() => void", - "description": "Callback when clicked", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Choice/Choice.tsx", + "filePath": "polaris-react/src/components/CheckableButton/CheckableButton.tsx", "syntaxKind": "MethodSignature", - "name": "onMouseOver", + "name": "onToggleAll", "value": "() => void", - "description": "Callback when mouse over", + "description": "", "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/CheckableButton/CheckableButton.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}" + "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}" } }, "Choice": { @@ -11423,6 +11555,99 @@ "value": "export interface ChoiceListProps {\n /** Label for list of choices */\n title: React.ReactNode;\n /** Collection of choices */\n choices: Choice[];\n /** Collection of selected choices */\n selected: string[];\n /** Name for form input */\n name?: string;\n /** Allow merchants to select multiple options at once */\n allowMultiple?: boolean;\n /** Toggles display of the title */\n titleHidden?: boolean;\n /** Display an error message */\n error?: Error;\n /** Disable all choices **/\n disabled?: boolean;\n /** Callback when the selected choices change */\n onChange?(selected: string[], name: string): void;\n}" } }, + "Transition": { + "polaris-react/src/components/Collapsible/Collapsible.tsx": { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "name": "Transition", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "duration", + "value": "string", + "description": "Assign a transition duration to the collapsible animation.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "timingFunction", + "value": "string", + "description": "Assign a transition timing function to the collapsible animation", + "isOptional": true + } + ], + "value": "interface Transition {\n /** Assign a transition duration to the collapsible animation. */\n duration?: string;\n /** Assign a transition timing function to the collapsible animation */\n timingFunction?: string;\n}" + } + }, + "CollapsibleProps": { + "polaris-react/src/components/Collapsible/Collapsible.tsx": { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "name": "CollapsibleProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop." + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "expandOnPrint", + "value": "boolean", + "description": "Option to show collapsible content when printing", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "open", + "value": "boolean", + "description": "Toggle whether the collapsible is expanded or not." + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "transition", + "value": "boolean | Transition", + "description": "Override transition properties. When set to false, disables transition completely.", + "isOptional": true, + "defaultValue": "transition={{duration: 'var(--p-duration-150)', timingFunction: 'var(--p-ease-in-out)'}}" + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "preventMeasuringOnChildrenUpdate", + "value": "boolean", + "description": "", + "isOptional": true, + "deprecationMessage": "Re-measuring is no longer necessary on children update *" + }, + { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the collapsible.", + "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}" + } + }, + "AnimationState": { + "polaris-react/src/components/Collapsible/Collapsible.tsx": { + "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "AnimationState", + "value": "'idle' | 'measuring' | 'animating'", + "description": "" + } + }, "Color": { "polaris-react/src/components/ColorPicker/ColorPicker.tsx": { "filePath": "polaris-react/src/components/ColorPicker/ColorPicker.tsx", @@ -11531,97 +11756,111 @@ "value": "export interface ColorPickerProps {\n /** ID for the element */\n id?: string;\n /** The currently selected color */\n color: Color;\n /** Allow user to select an alpha value */\n allowAlpha?: boolean;\n /** Allow HuePicker to take the full width */\n fullWidth?: boolean;\n /** Callback when color is selected */\n onChange(color: HSBAColor): void;\n}" } }, - "Transition": { - "polaris-react/src/components/Collapsible/Collapsible.tsx": { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "name": "Transition", + "ComboboxProps": { + "polaris-react/src/components/Combobox/Combobox.tsx": { + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", + "name": "ComboboxProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", "syntaxKind": "PropertySignature", - "name": "duration", - "value": "string", - "description": "Assign a transition duration to the collapsible animation.", - "isOptional": true + "name": "activator", + "value": "React.ReactElement", + "description": "The text field component to activate the Popover" }, { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", "syntaxKind": "PropertySignature", - "name": "timingFunction", - "value": "string", - "description": "Assign a transition timing function to the collapsible animation", + "name": "allowMultiple", + "value": "boolean", + "description": "Allows more than one option to be selected", "isOptional": true - } - ], - "value": "interface Transition {\n /** Assign a transition duration to the collapsible animation. */\n duration?: string;\n /** Assign a transition timing function to the collapsible animation */\n timingFunction?: string;\n}" - } - }, - "CollapsibleProps": { - "polaris-react/src/components/Collapsible/Collapsible.tsx": { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "name": "CollapsibleProps", - "description": "", - "members": [ + }, { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop." + "name": "children", + "value": "any", + "description": "The content to display inside the popover", + "isOptional": true }, { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", "syntaxKind": "PropertySignature", - "name": "expandOnPrint", - "value": "boolean", - "description": "Option to show collapsible content when printing", + "name": "preferredPosition", + "value": "PreferredPosition", + "description": "The preferred direction to open the popover", "isOptional": true }, { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", "syntaxKind": "PropertySignature", - "name": "open", + "name": "willLoadMoreOptions", "value": "boolean", - "description": "Toggle whether the collapsible is expanded or not." + "description": "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.", + "isOptional": true }, { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", "syntaxKind": "PropertySignature", - "name": "transition", - "value": "boolean | Transition", - "description": "Override transition properties. When set to false, disables transition completely.", - "isOptional": true, - "defaultValue": "transition={{duration: 'var(--p-duration-150)', timingFunction: 'var(--p-ease-in-out)'}}" + "name": "height", + "value": "string", + "description": "Height to set on the Popover Pane.", + "isOptional": true }, { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "PropertySignature", - "name": "preventMeasuringOnChildrenUpdate", - "value": "boolean", - "description": "", - "isOptional": true, - "deprecationMessage": "Re-measuring is no longer necessary on children update *" + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", + "syntaxKind": "MethodSignature", + "name": "onScrolledToBottom", + "value": "() => void", + "description": "Callback fired when the bottom of the lisbox is reached. Use to lazy load when listbox option data is paginated.", + "isOptional": true }, { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", + "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", + "syntaxKind": "MethodSignature", + "name": "onClose", + "value": "() => void", + "description": "Callback fired when the popover closes", + "isOptional": true + } + ], + "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": "The content to display inside the collapsible.", + "description": "Connected content", "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}" - } - }, - "AnimationState": { - "polaris-react/src/components/Collapsible/Collapsible.tsx": { - "filePath": "polaris-react/src/components/Collapsible/Collapsible.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnimationState", - "value": "'idle' | 'measuring' | 'animating'", - "description": "" + "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": { @@ -11724,113 +11963,6 @@ "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}" } }, - "ComboboxProps": { - "polaris-react/src/components/Combobox/Combobox.tsx": { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "name": "ComboboxProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "PropertySignature", - "name": "activator", - "value": "React.ReactElement", - "description": "The text field component to activate the Popover" - }, - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "PropertySignature", - "name": "allowMultiple", - "value": "boolean", - "description": "Allows more than one option to be selected", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "any", - "description": "The content to display inside the popover", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "PropertySignature", - "name": "preferredPosition", - "value": "PreferredPosition", - "description": "The preferred direction to open the popover", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "PropertySignature", - "name": "willLoadMoreOptions", - "value": "boolean", - "description": "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.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "PropertySignature", - "name": "height", - "value": "string", - "description": "Height to set on the Popover Pane.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "MethodSignature", - "name": "onScrolledToBottom", - "value": "() => void", - "description": "Callback fired when the bottom of the lisbox is reached. Use to lazy load when listbox option data is paginated.", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Combobox/Combobox.tsx", - "syntaxKind": "MethodSignature", - "name": "onClose", - "value": "() => void", - "description": "Callback fired when the popover closes", - "isOptional": true - } - ], - "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}" - } - }, "TableRow": { "polaris-react/src/components/DataTable/DataTable.tsx": { "filePath": "polaris-react/src/components/DataTable/DataTable.tsx", @@ -12285,24 +12417,6 @@ "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}" } }, - "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}" - } - }, "DropZoneFileType": { "polaris-react/src/components/DropZone/DropZone.tsx": { "filePath": "polaris-react/src/components/DropZone/DropZone.tsx", @@ -12677,6 +12791,24 @@ "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", @@ -12889,39 +13021,6 @@ "value": "export interface ExceptionListProps {\n /** Collection of items for list */\n items: Item[];\n}" } }, - "FocusProps": { - "polaris-react/src/components/Focus/Focus.tsx": { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "name": "FocusProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Focus/Focus.tsx", - "syntaxKind": "PropertySignature", - "name": "root", - "value": "any", - "description": "" - } - ], - "value": "export interface FocusProps {\n children?: React.ReactNode;\n disabled?: boolean;\n root: React.RefObject | HTMLElement | null;\n}" - } - }, "AppliedFilterInterface": { "polaris-react/src/components/Filters/Filters.tsx": { "filePath": "polaris-react/src/components/Filters/Filters.tsx", @@ -13163,114 +13262,64 @@ ] } }, - "Context": { - "polaris-react/src/components/FocusManager/FocusManager.tsx": { - "filePath": "polaris-react/src/components/FocusManager/FocusManager.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "Context", - "value": "NonNullable>", - "description": "" - } - }, - "FooterHelpProps": { - "polaris-react/src/components/FooterHelp/FooterHelp.tsx": { - "filePath": "polaris-react/src/components/FooterHelp/FooterHelp.tsx", - "name": "FooterHelpProps", + "FocusProps": { + "polaris-react/src/components/Focus/Focus.tsx": { + "filePath": "polaris-react/src/components/Focus/Focus.tsx", + "name": "FocusProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/FooterHelp/FooterHelp.tsx", + "filePath": "polaris-react/src/components/Focus/Focus.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}" - } - }, - "FrameProps": { - "polaris-react/src/components/Frame/Frame.tsx": { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "name": "FrameProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "logo", - "value": "Logo", - "description": "Sets the logo for the TopBar, Navigation, and ContextualSaveBar components", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "offset", - "value": "string", - "description": "A horizontal offset that pushes the frame to the right, leaving empty space on the left", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside the frame.", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "filePath": "polaris-react/src/components/Focus/Focus.tsx", "syntaxKind": "PropertySignature", - "name": "topBar", - "value": "React.ReactNode", - "description": "Accepts a top bar component that will be rendered at the top-most portion of an application frame", + "name": "disabled", + "value": "boolean", + "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "filePath": "polaris-react/src/components/Focus/Focus.tsx", "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "React.ReactNode", - "description": "Accepts a navigation component that will be rendered in the left sidebar of an application frame", - "isOptional": true - }, + "name": "root", + "value": "any", + "description": "" + } + ], + "value": "export interface FocusProps {\n children?: React.ReactNode;\n disabled?: boolean;\n root: React.RefObject | HTMLElement | null;\n}" + } + }, + "Context": { + "polaris-react/src/components/FocusManager/FocusManager.tsx": { + "filePath": "polaris-react/src/components/FocusManager/FocusManager.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "Context", + "value": "NonNullable>", + "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/Frame/Frame.tsx", + "filePath": "polaris-react/src/components/FooterHelp/FooterHelp.tsx", "syntaxKind": "PropertySignature", - "name": "globalRibbon", + "name": "children", "value": "React.ReactNode", - "description": "Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "showMobileNavigation", - "value": "boolean", - "description": "A boolean property indicating whether the mobile navigation is currently visible", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "PropertySignature", - "name": "skipToContentTarget", - "value": "React.RefObject", - "description": "Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Frame/Frame.tsx", - "syntaxKind": "MethodSignature", - "name": "onNavigationDismiss", - "value": "() => void", - "description": "A callback function to handle clicking the mobile navigation dismiss button", + "description": "The content to display inside the layout.", "isOptional": true } ], - "value": "export interface FrameProps {\n /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */\n logo?: Logo;\n /** A horizontal offset that pushes the frame to the right, leaving empty space on the left */\n offset?: string;\n /** The content to display inside the frame. */\n children?: React.ReactNode;\n /** Accepts a top bar component that will be rendered at the top-most portion of an application frame */\n topBar?: React.ReactNode;\n /** Accepts a navigation component that will be rendered in the left sidebar of an application frame */\n navigation?: React.ReactNode;\n /** Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame */\n globalRibbon?: React.ReactNode;\n /** A boolean property indicating whether the mobile navigation is currently visible\n * @default false\n */\n showMobileNavigation?: boolean;\n /** Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link */\n skipToContentTarget?: React.RefObject;\n /** A callback function to handle clicking the mobile navigation dismiss button */\n onNavigationDismiss?(): void;\n}" + "value": "export interface FooterHelpProps {\n /** The content to display inside the layout. */\n children?: React.ReactNode;\n}" } }, "Enctype": { @@ -13423,6 +13472,89 @@ "value": "export interface FormLayoutProps {\n /** The content to display inside the layout. */\n children?: React.ReactNode;\n}" } }, + "FrameProps": { + "polaris-react/src/components/Frame/Frame.tsx": { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "name": "FrameProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "logo", + "value": "Logo", + "description": "Sets the logo for the TopBar, Navigation, and ContextualSaveBar components", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "offset", + "value": "string", + "description": "A horizontal offset that pushes the frame to the right, leaving empty space on the left", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the frame.", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "topBar", + "value": "React.ReactNode", + "description": "Accepts a top bar component that will be rendered at the top-most portion of an application frame", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "navigation", + "value": "React.ReactNode", + "description": "Accepts a navigation component that will be rendered in the left sidebar of an application frame", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "globalRibbon", + "value": "React.ReactNode", + "description": "Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "showMobileNavigation", + "value": "boolean", + "description": "A boolean property indicating whether the mobile navigation is currently visible", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "PropertySignature", + "name": "skipToContentTarget", + "value": "React.RefObject", + "description": "Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Frame/Frame.tsx", + "syntaxKind": "MethodSignature", + "name": "onNavigationDismiss", + "value": "() => void", + "description": "A callback function to handle clicking the mobile navigation dismiss button", + "isOptional": true + } + ], + "value": "export interface FrameProps {\n /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */\n logo?: Logo;\n /** A horizontal offset that pushes the frame to the right, leaving empty space on the left */\n offset?: string;\n /** The content to display inside the frame. */\n children?: React.ReactNode;\n /** Accepts a top bar component that will be rendered at the top-most portion of an application frame */\n topBar?: React.ReactNode;\n /** Accepts a navigation component that will be rendered in the left sidebar of an application frame */\n navigation?: React.ReactNode;\n /** Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame */\n globalRibbon?: React.ReactNode;\n /** A boolean property indicating whether the mobile navigation is currently visible\n * @default false\n */\n showMobileNavigation?: boolean;\n /** Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link */\n skipToContentTarget?: React.RefObject;\n /** A callback function to handle clicking the mobile navigation dismiss button */\n onNavigationDismiss?(): void;\n}" + } + }, "FullscreenBarProps": { "polaris-react/src/components/FullscreenBar/FullscreenBar.tsx": { "filePath": "polaris-react/src/components/FullscreenBar/FullscreenBar.tsx", @@ -14185,24 +14317,6 @@ "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", @@ -14266,21 +14380,40 @@ "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}" } }, - "InlineCodeProps": { - "polaris-react/src/components/InlineCode/InlineCode.tsx": { - "filePath": "polaris-react/src/components/InlineCode/InlineCode.tsx", - "name": "InlineCodeProps", + "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/InlineCode/InlineCode.tsx", + "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", + "description": "", + "members": [ + { + "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}" } }, "InlineErrorProps": { @@ -14307,22 +14440,21 @@ "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}" } }, - "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}" } }, "KeypressListenerProps": { @@ -14343,23 +14475,6 @@ "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", @@ -14401,6 +14516,23 @@ "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", @@ -17096,6 +17228,89 @@ "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", @@ -17788,6 +18003,15 @@ "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": "" + } + }, "Distribution": { "polaris-react/src/components/Stack/Stack.tsx": { "filePath": "polaris-react/src/components/Stack/Stack.tsx", @@ -17855,15 +18079,6 @@ "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}" } }, - "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": "" - } - }, "SubheadingProps": { "polaris-react/src/components/Subheading/Subheading.tsx": { "filePath": "polaris-react/src/components/Subheading/Subheading.tsx", @@ -17947,13 +18162,30 @@ "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}" } }, - "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": "" + "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}" } }, "Variant": { @@ -18061,32 +18293,6 @@ "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}" - } - }, "InputMode": { "polaris-react/src/components/TextField/TextField.tsx": { "filePath": "polaris-react/src/components/TextField/TextField.tsx", @@ -18212,6 +18418,15 @@ "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", @@ -18543,23 +18758,6 @@ "value": "export interface TrapFocusProps {\n trapping?: boolean;\n children?: 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}" - } - }, "UnstyledButtonProps": { "polaris-react/src/components/UnstyledButton/UnstyledButton.tsx": { "filePath": "polaris-react/src/components/UnstyledButton/UnstyledButton.tsx", @@ -21975,6 +22173,23 @@ "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", @@ -22364,26 +22579,272 @@ "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", - "name": "MenuGroupProps", + "SectionProps": { + "polaris-react/src/components/ActionList/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "name": "SectionProps", "description": "", "members": [ { - "filePath": "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx", + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "Visually hidden menu description for screen readers", - "isOptional": true + "name": "section", + "value": "ActionListSection", + "description": "Section of action items" }, { - "filePath": "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx", + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", "syntaxKind": "PropertySignature", - "name": "active", + "name": "hasMultipleSections", "value": "boolean", - "description": "Whether or not the menu is open", + "description": "Should there be multiple sections" + }, + { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.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/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "onActionAnyItem", + "value": "() => void", + "description": "Callback when any item is clicked or keypressed", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "isFirst", + "value": "boolean", + "description": "Whether it is the first in a group of sections", + "isOptional": true + } + ], + "value": "export interface SectionProps {\n /** Section of action items */\n section: ActionListSection;\n /** Should there be multiple sections */\n hasMultipleSections: boolean;\n /** Defines a specific role attribute for each action in the list */\n actionRole?: 'option' | 'menuitem' | string;\n /** Callback when any item is clicked or keypressed */\n onActionAnyItem?: ActionListItemDescriptor['onAction'];\n /** Whether it is the first in a group of sections */\n isFirst?: boolean;\n}" + }, + "polaris-react/src/components/Layout/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "secondary", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "fullWidth", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "oneHalf", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "oneThird", + "value": "boolean", + "description": "", + "isOptional": true + } + ], + "value": "export interface SectionProps {\n children?: React.ReactNode;\n secondary?: boolean;\n fullWidth?: boolean;\n oneHalf?: boolean;\n oneThird?: boolean;\n}" + }, + "polaris-react/src/components/Listbox/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "divider", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "ReactNode", + "description": "" + } + ], + "value": "interface SectionProps {\n divider?: boolean;\n children?: ReactNode;\n title: ReactNode;\n}" + }, + "polaris-react/src/components/Modal/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "flush", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "subdued", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "titleHidden", + "value": "boolean", + "description": "", + "isOptional": true + } + ], + "value": "export interface SectionProps {\n children?: React.ReactNode;\n flush?: boolean;\n subdued?: boolean;\n titleHidden?: boolean;\n}" + }, + "polaris-react/src/components/Navigation/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "items", + "value": "ItemProps[]", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "icon", + "value": "any", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "fill", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "rollup", + "value": "{ after: number; view: string; hide: string; activePath: string; }", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "action", + "value": "{ icon: any; accessibilityLabel: string; onClick(): void; tooltip?: TooltipProps; }", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "separator", + "value": "boolean", + "description": "", + "isOptional": true + } + ], + "value": "export interface SectionProps {\n items: ItemProps[];\n icon?: IconProps['source'];\n title?: string;\n fill?: boolean;\n rollup?: {\n after: number;\n view: string;\n hide: string;\n activePath: string;\n };\n action?: {\n icon: IconProps['source'];\n accessibilityLabel: string;\n onClick(): void;\n tooltip?: TooltipProps;\n };\n separator?: boolean;\n}" + }, + "polaris-react/src/components/Popover/components/Section/Section.tsx": { + "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", + "name": "SectionProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + } + ], + "value": "export interface SectionProps {\n children?: React.ReactNode;\n}" + } + }, + "MenuGroupProps": { + "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx": { + "filePath": "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx", + "name": "MenuGroupProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "string", + "description": "Visually hidden menu description for screen readers", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx", + "syntaxKind": "PropertySignature", + "name": "active", + "value": "boolean", + "description": "Whether or not the menu is open", "isOptional": true }, { @@ -22483,45 +22944,11 @@ "syntaxKind": "PropertySignature", "name": "badge", "value": "{ status: \"new\"; content: string; }", - "description": "", - "isOptional": true - } - ], - "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", + "description": "", "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": "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}" } }, "SecondaryAction": { @@ -22900,6 +23327,40 @@ "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}" + } + }, "MappedAction": { "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx": { "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", @@ -22940,401 +23401,137 @@ "isOptional": true }, { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "icon", - "value": "any", - "description": "", - "isOptional": true, - "deprecationMessage": "Source of the icon" - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "string", - "description": "", - "isOptional": true, - "deprecationMessage": "Image source" - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "prefix", - "value": "React.ReactNode", - "description": "Prefix source", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "suffix", - "value": "React.ReactNode", - "description": "Suffix source", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "ellipsis", - "value": "boolean", - "description": "Add an ellipsis suffix to action content", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "active", - "value": "boolean", - "description": "Whether the action is active or not", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "role", - "value": "string", - "description": "Defines a role for the action", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether or not the action is disabled", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the action", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "Content the action displays", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "url", - "value": "string", - "description": "A destination to link to, rendered in the action", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "external", - "value": "boolean", - "description": "Forces url to open in a new tab", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "MethodSignature", - "name": "onAction", - "value": "() => void", - "description": "Callback when an action takes place", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "MethodSignature", - "name": "onMouseEnter", - "value": "() => void", - "description": "Callback when mouse enter", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "MethodSignature", - "name": "onTouchStart", - "value": "() => void", - "description": "Callback when element is touched", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", - "syntaxKind": "PropertySignature", - "name": "destructive", - "value": "boolean", - "description": "Destructive action", - "isOptional": true - } - ], - "value": "interface MappedAction extends ActionListItemDescriptor {\n wrapOverflow?: boolean;\n}" - } - }, - "MappedOption": { - "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx": { - "filePath": "polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "MappedOption", - "value": "ArrayElement & {\n selected: boolean;\n singleSelection: boolean;\n}", - "description": "" - } - }, - "SectionProps": { - "polaris-react/src/components/ActionList/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "section", - "value": "ActionListSection", - "description": "Section of action items" - }, - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "hasMultipleSections", - "value": "boolean", - "description": "Should there be multiple sections" - }, - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.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/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "onActionAnyItem", - "value": "() => void", - "description": "Callback when any item is clicked or keypressed", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/ActionList/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "isFirst", - "value": "boolean", - "description": "Whether it is the first in a group of sections", - "isOptional": true - } - ], - "value": "export interface SectionProps {\n /** Section of action items */\n section: ActionListSection;\n /** Should there be multiple sections */\n hasMultipleSections: boolean;\n /** Defines a specific role attribute for each action in the list */\n actionRole?: 'option' | 'menuitem' | string;\n /** Callback when any item is clicked or keypressed */\n onActionAnyItem?: ActionListItemDescriptor['onAction'];\n /** Whether it is the first in a group of sections */\n isFirst?: boolean;\n}" - }, - "polaris-react/src/components/Layout/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "secondary", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "fullWidth", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "oneHalf", - "value": "boolean", + "name": "icon", + "value": "any", "description": "", - "isOptional": true + "isOptional": true, + "deprecationMessage": "Source of the icon" }, { - "filePath": "polaris-react/src/components/Layout/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "oneThird", - "value": "boolean", + "name": "image", + "value": "string", "description": "", - "isOptional": true - } - ], - "value": "export interface SectionProps {\n children?: React.ReactNode;\n secondary?: boolean;\n fullWidth?: boolean;\n oneHalf?: boolean;\n oneThird?: boolean;\n}" - }, - "polaris-react/src/components/Listbox/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ + "isOptional": true, + "deprecationMessage": "Image source" + }, { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "divider", - "value": "boolean", - "description": "", + "name": "prefix", + "value": "React.ReactNode", + "description": "Prefix source", "isOptional": true }, { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "children", - "value": "ReactNode", - "description": "", + "name": "suffix", + "value": "React.ReactNode", + "description": "Suffix source", "isOptional": true }, { - "filePath": "polaris-react/src/components/Listbox/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "ReactNode", - "description": "" - } - ], - "value": "interface SectionProps {\n divider?: boolean;\n children?: ReactNode;\n title: ReactNode;\n}" - }, - "polaris-react/src/components/Modal/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", + "name": "ellipsis", + "value": "boolean", + "description": "Add an ellipsis suffix to action content", "isOptional": true }, { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "flush", + "name": "active", "value": "boolean", - "description": "", + "description": "Whether the action is active or not", "isOptional": true }, { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "subdued", - "value": "boolean", - "description": "", + "name": "role", + "value": "string", + "description": "Defines a role for the action", "isOptional": true }, { - "filePath": "polaris-react/src/components/Modal/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "titleHidden", + "name": "disabled", "value": "boolean", - "description": "", + "description": "Whether or not the action is disabled", "isOptional": true - } - ], - "value": "export interface SectionProps {\n children?: React.ReactNode;\n flush?: boolean;\n subdued?: boolean;\n titleHidden?: boolean;\n}" - }, - "polaris-react/src/components/Navigation/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ + }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "items", - "value": "ItemProps[]", - "description": "" + "name": "id", + "value": "string", + "description": "A unique identifier for the action", + "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "icon", - "value": "any", - "description": "", + "name": "content", + "value": "string", + "description": "Content the action displays", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "title", + "name": "url", "value": "string", - "description": "", + "description": "A destination to link to, rendered in the action", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "fill", + "name": "external", "value": "boolean", - "description": "", + "description": "Forces url to open in a new tab", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "rollup", - "value": "{ after: number; view: string; hide: string; activePath: string; }", - "description": "", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "MethodSignature", + "name": "onAction", + "value": "() => void", + "description": "Callback when an action takes place", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "{ icon: any; accessibilityLabel: string; onClick(): void; tooltip?: TooltipProps; }", - "description": "", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "MethodSignature", + "name": "onMouseEnter", + "value": "() => void", + "description": "Callback when mouse enter", "isOptional": true }, { - "filePath": "polaris-react/src/components/Navigation/components/Section/Section.tsx", - "syntaxKind": "PropertySignature", - "name": "separator", - "value": "boolean", - "description": "", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", + "syntaxKind": "MethodSignature", + "name": "onTouchStart", + "value": "() => void", + "description": "Callback when element is touched", "isOptional": true - } - ], - "value": "export interface SectionProps {\n items: ItemProps[];\n icon?: IconProps['source'];\n title?: string;\n fill?: boolean;\n rollup?: {\n after: number;\n view: string;\n hide: string;\n activePath: string;\n };\n action?: {\n icon: IconProps['source'];\n accessibilityLabel: string;\n onClick(): void;\n tooltip?: TooltipProps;\n };\n separator?: boolean;\n}" - }, - "polaris-react/src/components/Popover/components/Section/Section.tsx": { - "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", - "name": "SectionProps", - "description": "", - "members": [ + }, { - "filePath": "polaris-react/src/components/Popover/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx", "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", + "name": "destructive", + "value": "boolean", + "description": "Destructive action", "isOptional": true } ], - "value": "export interface SectionProps {\n children?: React.ReactNode;\n}" - } - }, - "BulkActionButtonProps": { - "polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx": { - "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", - "description": "" + "value": "interface MappedAction extends ActionListItemDescriptor {\n wrapOverflow?: boolean;\n}" } }, "MappedOption": { @@ -23380,6 +23577,15 @@ "value": "export interface PipProps {\n status?: Status;\n progress?: Progress;\n accessibilityLabelOverride?: string;\n}" } }, + "BulkActionButtonProps": { + "polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx": { + "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", + "description": "" + } + }, "BulkActionsMenuProps": { "polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx": { "filePath": "polaris-react/src/components/BulkActions/components/BulkActionMenu/BulkActionMenu.tsx", @@ -23469,102 +23675,36 @@ }, "CardHeaderProps": { "polaris-react/src/components/Card/components/Header/Header.tsx": { - "filePath": "polaris-react/src/components/Card/components/Header/Header.tsx", - "name": "CardHeaderProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/Card/components/Header/Header.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Card/components/Header/Header.tsx", - "syntaxKind": "PropertySignature", - "name": "actions", - "value": "DisableableAction[]", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/Card/components/Header/Header.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - } - ], - "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/Header/Header.tsx", + "name": "CardHeaderProps", + "description": "", + "members": [ { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Card/components/Header/Header.tsx", "syntaxKind": "PropertySignature", - "name": "flush", - "value": "boolean", + "name": "title", + "value": "React.ReactNode", "description": "", "isOptional": true }, { - "filePath": "polaris-react/src/components/Card/components/Section/Section.tsx", + "filePath": "polaris-react/src/components/Card/components/Header/Header.tsx", "syntaxKind": "PropertySignature", - "name": "fullWidth", - "value": "boolean", + "name": "actions", + "value": "DisableableAction[]", "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", + "filePath": "polaris-react/src/components/Card/components/Header/Header.tsx", "syntaxKind": "PropertySignature", - "name": "actions", - "value": "ComplexAction[]", + "name": "children", + "value": "React.ReactNode", "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 CardHeaderProps {\n title?: React.ReactNode;\n actions?: DisableableAction[];\n children?: React.ReactNode;\n}" } }, "CardSubsectionProps": { @@ -23681,6 +23821,72 @@ "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 + }, + { + "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}" + } + }, "ItemPosition": { "polaris-react/src/components/Connected/components/Item/Item.tsx": { "filePath": "polaris-react/src/components/Connected/components/Item/Item.tsx", @@ -24126,6 +24332,37 @@ "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", @@ -24244,37 +24481,6 @@ "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", @@ -24482,6 +24688,48 @@ "value": "interface ComputedProperty {\n [key: string]: number;\n}" } }, + "GroupProps": { + "polaris-react/src/components/FormLayout/components/Group/Group.tsx": { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "name": "GroupProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "condensed", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", + "syntaxKind": "PropertySignature", + "name": "helpText", + "value": "React.ReactNode", + "description": "", + "isOptional": true + } + ], + "value": "export interface GroupProps {\n children?: React.ReactNode;\n condensed?: boolean;\n title?: string;\n helpText?: React.ReactNode;\n}" + } + }, "AnimationType": { "polaris-react/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx": { "filePath": "polaris-react/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx", @@ -24530,6 +24778,15 @@ "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", @@ -24539,63 +24796,12 @@ { "filePath": "polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx", "syntaxKind": "PropertySignature", - "name": "toastMessages", - "value": "ToastPropsWithID[]", - "description": "" - } - ], - "value": "export interface ToastManagerProps {\n toastMessages: ToastPropsWithID[];\n}" - } - }, - "GroupProps": { - "polaris-react/src/components/FormLayout/components/Group/Group.tsx": { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", - "name": "GroupProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", - "syntaxKind": "PropertySignature", - "name": "condensed", - "value": "boolean", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/FormLayout/components/Group/Group.tsx", - "syntaxKind": "PropertySignature", - "name": "helpText", - "value": "React.ReactNode", - "description": "", - "isOptional": true + "name": "toastMessages", + "value": "ToastPropsWithID[]", + "description": "" } ], - "value": "export interface GroupProps {\n children?: React.ReactNode;\n condensed?: boolean;\n title?: string;\n helpText?: 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": "" + "value": "export interface ToastManagerProps {\n toastMessages: ToastPropsWithID[];\n}" } }, "CheckboxWrapperProps": { @@ -25704,65 +25910,6 @@ "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", @@ -25952,6 +26099,65 @@ "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", @@ -26527,6 +26733,15 @@ "value": "export interface ResizerProps {\n contents?: string;\n currentHeight?: number | null;\n minimumLines?: number;\n onHeightChange(height: number): void;\n}" } }, + "HandleStepFn": { + "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx": { + "filePath": "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx", + "syntaxKind": "TypeAliasDeclaration", + "name": "HandleStepFn", + "value": "(step: number) => void", + "description": "" + } + }, "TooltipOverlayProps": { "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx": { "filePath": "polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx", @@ -26597,57 +26812,6 @@ "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}" } }, - "HandleStepFn": { - "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx": { - "filePath": "polaris-react/src/components/TextField/components/Spinner/Spinner.tsx", - "syntaxKind": "TypeAliasDeclaration", - "name": "HandleStepFn", - "value": "(step: number) => void", - "description": "" - } - }, - "SearchProps": { - "polaris-react/src/components/TopBar/components/Search/Search.tsx": { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "name": "SearchProps", - "description": "", - "members": [ - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "PropertySignature", - "name": "visible", - "value": "boolean", - "description": "Toggles whether or not the search is visible", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "React.ReactNode", - "description": "The content to display inside the search", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "PropertySignature", - "name": "overlayVisible", - "value": "boolean", - "description": "Whether or not the search results overlay has a visible backdrop", - "isOptional": true - }, - { - "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", - "syntaxKind": "MethodSignature", - "name": "onDismiss", - "value": "() => void", - "description": "Callback when the search is dismissed", - "isOptional": true - } - ], - "value": "export interface SearchProps {\n /** Toggles whether or not the search is visible */\n visible?: boolean;\n /** The content to display inside the search */\n children?: React.ReactNode;\n /** Whether or not the search results overlay has a visible backdrop */\n overlayVisible?: boolean;\n /** Callback when the search is dismissed */\n onDismiss?(): void;\n}" - } - }, "MenuProps": { "polaris-react/src/components/TopBar/components/Menu/Menu.tsx": { "filePath": "polaris-react/src/components/TopBar/components/Menu/Menu.tsx", @@ -26709,6 +26873,48 @@ "value": "export interface MenuProps {\n /** Accepts an activator component that renders inside of a button that opens the menu */\n activatorContent: React.ReactNode;\n /** An array of action objects that are rendered inside of a popover triggered by this menu */\n actions: ActionListProps['sections'];\n /** Accepts a message that facilitates direct, urgent communication with the merchant through the menu */\n message?: MessageProps;\n /** A boolean property indicating whether the menu is currently open */\n open: boolean;\n /** A callback function to handle opening the menu popover */\n onOpen(): void;\n /** A callback function to handle closing the menu popover */\n onClose(): void;\n /** A callback function to handle closing the menu popover */\n onClose(): void;\n /** A string that provides the accessibility labeling */\n accessibilityLabel?: string;\n}" } }, + "SearchProps": { + "polaris-react/src/components/TopBar/components/Search/Search.tsx": { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "name": "SearchProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "PropertySignature", + "name": "visible", + "value": "boolean", + "description": "Toggles whether or not the search is visible", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "React.ReactNode", + "description": "The content to display inside the search", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "PropertySignature", + "name": "overlayVisible", + "value": "boolean", + "description": "Whether or not the search results overlay has a visible backdrop", + "isOptional": true + }, + { + "filePath": "polaris-react/src/components/TopBar/components/Search/Search.tsx", + "syntaxKind": "MethodSignature", + "name": "onDismiss", + "value": "() => void", + "description": "Callback when the search is dismissed", + "isOptional": true + } + ], + "value": "export interface SearchProps {\n /** Toggles whether or not the search is visible */\n visible?: boolean;\n /** The content to display inside the search */\n children?: React.ReactNode;\n /** Whether or not the search results overlay has a visible backdrop */\n overlayVisible?: boolean;\n /** Callback when the search is dismissed */\n onDismiss?(): void;\n}" + } + }, "SearchFieldProps": { "polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx": { "filePath": "polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx", @@ -26866,6 +27072,37 @@ "value": "export interface UserMenuProps {\n /** An array of action objects that are rendered inside of a popover triggered by this menu */\n actions: {items: IconableAction[]}[];\n /** Accepts a message that facilitates direct, urgent communication with the merchant through the user menu */\n message?: MenuProps['message'];\n /** A string detailing the merchant’s full name to be displayed in the user menu */\n name: string;\n /** A string allowing further detail on the merchant’s name displayed in the user menu */\n detail?: string;\n /** A string that provides the accessibility labeling */\n accessibilityLabel?: string;\n /** The merchant’s initials, rendered in place of an avatar image when not provided */\n initials: AvatarProps['initials'];\n /** An avatar image representing the merchant */\n avatar?: AvatarProps['source'];\n /** A boolean property indicating whether the user menu is currently open */\n open: boolean;\n /** A callback function to handle opening and closing the user menu */\n onToggle(): void;\n}" } }, + "DiscardConfirmationModalProps": { + "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx": { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "name": "DiscardConfirmationModalProps", + "description": "", + "members": [ + { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "syntaxKind": "PropertySignature", + "name": "open", + "value": "boolean", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "syntaxKind": "MethodSignature", + "name": "onDiscard", + "value": "() => void", + "description": "" + }, + { + "filePath": "polaris-react/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx", + "syntaxKind": "MethodSignature", + "name": "onCancel", + "value": "() => void", + "description": "" + } + ], + "value": "export interface DiscardConfirmationModalProps {\n open: boolean;\n onDiscard(): void;\n onCancel(): void;\n}" + } + }, "SecondaryProps": { "polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx": { "filePath": "polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx", From cff41d10230a4ee6fd0dca2f451cc0e7244aa9a2 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 3 Jan 2023 10:17:36 -0500 Subject: [PATCH 08/15] [ResourceList] Fix header alignment (#7965) Fixes https://github.com/Shopify/polaris/issues/7959 --- .changeset/neat-dolphins-sniff.md | 5 +++++ .../components/BulkActions/BulkActions.scss | 5 ----- .../CheckableButton/CheckableButton.scss | 10 ---------- .../components/ResourceList/ResourceList.scss | 19 +++---------------- 4 files changed, 8 insertions(+), 31 deletions(-) create mode 100644 .changeset/neat-dolphins-sniff.md diff --git a/.changeset/neat-dolphins-sniff.md b/.changeset/neat-dolphins-sniff.md new file mode 100644 index 00000000000..ecb2d6b71bb --- /dev/null +++ b/.changeset/neat-dolphins-sniff.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed `ResourceList` header alignment diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss index 990861e0c4c..78b1cda5880 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.scss @@ -110,11 +110,6 @@ $bulk-actions-button-stacking-order: ( } } -.CheckableContainer { - flex: 1 1 0; - margin-left: calc(-1 * (var(--p-space-05) + var(--p-space-1))); -} - .disabled { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include base-button-disabled; diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.scss b/polaris-react/src/components/CheckableButton/CheckableButton.scss index f9d6d3e4acf..58fea8a6d25 100644 --- a/polaris-react/src/components/CheckableButton/CheckableButton.scss +++ b/polaris-react/src/components/CheckableButton/CheckableButton.scss @@ -1,10 +1,6 @@ @import '../../styles/common'; @import '../ResourceList/variables'; -$button-vertical-padding: calc( - (36px - var(--p-font-line-height-2) - var(--p-space-05)) / 2 -); - .CheckableButton { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include recolor-icon(var(--p-icon-on-interactive)); @@ -21,8 +17,6 @@ $button-vertical-padding: calc( min-height: 36px; min-width: 36px; margin: 0; - padding: $button-vertical-padding var(--p-space-1) $button-vertical-padding - var(--p-space-4); cursor: pointer; user-select: none; text-decoration: none; @@ -47,10 +41,6 @@ $button-vertical-padding: calc( height: var(--p-choice-size); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: var(--p-choice-size); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - margin-left: calc( - -1 * var(--p-space-2) - var(--p-control-border-width) - var(--p-border-width-1) - ); } .Label { diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss index 82a5a59a5c7..e8c848d530d 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.scss +++ b/polaris-react/src/components/ResourceList/ResourceList.scss @@ -72,12 +72,8 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)}) // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: 100%; min-height: resource-list(header-min-height); - padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-4); + padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-5); background-color: var(--p-surface); - - @media #{$p-breakpoints-sm-up} { - flex-direction: row; - } } .HeaderWrapper-isSticky { @@ -90,9 +86,9 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)}) // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: resource-list(content-wrapper-stacking-order); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - right: var(--p-space-3); + right: var(--p-space-5); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - left: var(--p-space-3); + left: var(--p-space-5); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY display: flex; min-height: resource-list(header-content-min-height); @@ -102,14 +98,6 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)}) .HeaderWrapper-inSelectMode & { opacity: 0; } - - @media #{$p-breakpoints-sm-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - right: var(--p-space-4); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - left: var(--p-space-4); - align-self: flex-start; - } } .SortWrapper, @@ -236,7 +224,6 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)}) .CheckableButtonWrapper { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY display: none; - margin-left: calc(-1 * var(--p-space-05)); @media #{$p-breakpoints-sm-up} { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY From fb4e5ca1d9663bd375c06d794a4651ecf50b1eb5 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Wed, 11 Jan 2023 11:28:00 -0600 Subject: [PATCH 09/15] Rebuild `EmptyState` component with layout primitives (#7809) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes [#7564](https://github.com/Shopify/polaris/issues/7564) - Remove max-width from AlphaStack - Rebuild EmptyState with layout components DEPENDS ON #7842. Merge that in first then bring `layout-rebuild-batch-2` up to date with `main` and then merge in those changes into this branch ### [✅ RESOLVED] UX Review There is a discrepancy in the size of the image container. The update `EmptyState` component image container is 5px smaller in height than the production one. The comparison below shows the production version (first) vs the update component (second). This results in about 5px additional whitespace in the prod version. This different is due to the production version relying on a flex property on the image container that we don't currently implement. Is this difference acceptable or should we adjust the image container size somehow?
    Compare image container whitespace before and after https://user-images.githubusercontent.com/4642404/204934759-3363b103-5118-4335-ab87-79edaa5d0634.mov Production image size prod-size Updated ima updated-size
    Co-authored-by: Kyle Durand Co-authored-by: aveline Co-authored-by: Lo Kim Co-authored-by: Chaz Dean <59836805+chazdean@users.noreply.github.com> --- .../src/components/EmptyState/EmptyState.scss | 154 +----------------- .../EmptyState/EmptyState.stories.tsx | 16 ++ .../src/components/EmptyState/EmptyState.tsx | 77 ++++----- .../EmptyState/tests/EmptyState.test.tsx | 10 +- 4 files changed, 64 insertions(+), 193 deletions(-) diff --git a/polaris-react/src/components/EmptyState/EmptyState.scss b/polaris-react/src/components/EmptyState/EmptyState.scss index 1980c725c6a..fa0cf9c1df0 100644 --- a/polaris-react/src/components/EmptyState/EmptyState.scss +++ b/polaris-react/src/components/EmptyState/EmptyState.scss @@ -1,156 +1,8 @@ @import '../../styles/common'; -$within-page-detail-width: 336px; -$detail-width: 400px; - -$stacking-order: ( - illustration: 0, - details: 10, -); - -$left-offset: 35%; -$right-offset: 10%; - -// Multiply by 2 to expand the image size to align with design requirements -$illustration-left-margin: $left-offset * -2; - -// Shift the illustration to the left to overlap with Details -$illustration-width: calc(100% + #{$left-offset} * 2); - -// Respect the right offset on mobile so the illustration shows the correct -// crop zone -$illustration-width-cropped: calc( - #{$illustration-width} + #{$right-offset} * 2 -); - -$centered-illustration-width: 226px; - -.EmptyState { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - flex-direction: column; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - width: 100%; - margin: 0 auto; - padding: var(--p-space-5) 0; - padding-top: var(--p-space-5); - padding-bottom: calc(3 * var(--p-space-5)); - max-width: $page-max-width; -} - -.Section { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - flex-direction: column-reverse; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex: 1 1 auto; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - width: 100%; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - justify-content: center; - - @media #{$p-breakpoints-md-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - left: var(--p-space-5); - } -} - -.Details { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - text-align: center; - flex-direction: column; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - - @media #{$p-breakpoints-sm-up} { - max-width: $detail-width; - } -} - -.Image { - margin: 0; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - width: initial; -} - -.ImageContainer, -.DetailsContainer { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex: 1 1 auto; - padding: 0; - margin: 0; - - @media #{$p-breakpoints-md-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex-basis: 50%; - } -} - -.withinContentContainer { - margin: 0 auto; - padding-top: var(--p-space-5); - padding-bottom: calc(3 * var(--p-space-5)); - - .Section { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: unset; - flex-direction: column-reverse; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - justify-content: center; - } - - .Details { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - display: flex; - text-align: center; - flex-direction: column; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: center; - - @media #{$p-breakpoints-sm-up} { - max-width: $detail-width; - } - } - - .Image { - margin: 0; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - width: initial; - } - - .Content { - padding-bottom: var(--p-space-2); - } -} - .imageContained { - .Image { - @media #{$p-breakpoints-md-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - position: initial; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - width: 100%; - } - } -} - -.fullWidth { - .Details { - max-width: 100%; + @media #{$p-breakpoints-md-up} { + position: initial; + width: 100%; } } - -.Content { - padding-bottom: var(--p-space-2); -} - -.Actions { - margin-top: var(--p-space-4); -} diff --git a/polaris-react/src/components/EmptyState/EmptyState.stories.tsx b/polaris-react/src/components/EmptyState/EmptyState.stories.tsx index f1d58563a32..da31c962265 100644 --- a/polaris-react/src/components/EmptyState/EmptyState.stories.tsx +++ b/polaris-react/src/components/EmptyState/EmptyState.stories.tsx @@ -70,3 +70,19 @@ export function WithFullWidthLayout() { ); } + +export function WithoutContentContainer() { + return ( + +

    Track and receive your incoming inventory from suppliers.

    +
    + ); +} diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx index 76e3dfef14d..70706a49a04 100644 --- a/polaris-react/src/components/EmptyState/EmptyState.tsx +++ b/polaris-react/src/components/EmptyState/EmptyState.tsx @@ -6,9 +6,9 @@ import type {ComplexAction} from '../../types'; import {Box} from '../Box'; import {buttonFrom} from '../Button'; import {Image} from '../Image'; -import {Stack} from '../Stack'; -import {TextContainer} from '../TextContainer'; import {Text} from '../Text'; +import {AlphaStack} from '../AlphaStack'; +import {Inline} from '../Inline'; import styles from './EmptyState.scss'; @@ -48,19 +48,16 @@ export function EmptyState({ footerContent, }: EmptyStateProps) { const withinContentContainer = useContext(WithinContentContext); - const className = classNames( - styles.EmptyState, - fullWidth && styles.fullWidth, + const imageContainedClass = classNames( imageContained && styles.imageContained, - withinContentContainer && styles.withinContentContainer, ); const imageMarkup = largeImage ? ( ) : ( - + ); const secondaryActionMarkup = secondaryAction @@ -77,7 +79,7 @@ export function EmptyState({ const footerContentMarkup = footerContent ? ( - + {footerContent} @@ -90,56 +92,57 @@ export function EmptyState({ : null; const headingMarkup = heading ? ( - - {heading} - + + + {heading} + + ) : null; const childrenMarkup = children ? ( -
    - - {children} - -
    + + {children} + ) : null; const textContentMarkup = headingMarkup || children ? ( - + {headingMarkup} {childrenMarkup} - + ) : null; const actionsMarkup = primaryActionMarkup || secondaryActionMarkup ? ( -
    - - {secondaryActionMarkup} - {primaryActionMarkup} - -
    + + {secondaryActionMarkup} + {primaryActionMarkup} + ) : null; const detailsMarkup = textContentMarkup || actionsMarkup || footerContentMarkup ? ( -
    -
    + + {textContentMarkup} {actionsMarkup} {footerContentMarkup} -
    -
    - ) : ( -
    - ); + + + ) : null; return ( -
    -
    + + {detailsMarkup} -
    {imageMarkup}
    -
    -
    + {imageMarkup} + + ); } diff --git a/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx b/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx index f03f8b8d254..6e616e2f21f 100644 --- a/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx +++ b/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx @@ -3,11 +3,11 @@ import {mountWithApp} from 'tests/utilities'; import {Button} from '../../Button'; import {Image} from '../../Image'; -import {Stack} from '../../Stack'; import {Text} from '../../Text'; import {UnstyledLink} from '../../UnstyledLink'; import {WithinContentContext} from '../../../utilities/within-content-context'; import {EmptyState} from '../EmptyState'; +import {Inline} from '../../Inline'; describe('', () => { let imgSrc = @@ -50,14 +50,14 @@ describe('', () => { }); }); - it('adds center distribution and tight spacing to Stack', () => { + it('adds center align and spacing-2 to Inline', () => { const emptyState = mountWithApp( , ); - expect(emptyState).toContainReactComponent(Stack, { - spacing: 'tight', - distribution: 'center', + expect(emptyState).toContainReactComponent(Inline, { + align: 'center', + gap: '2', }); }); From d9dfd9b2da2f95f193d88a656dccde2b7f3e2883 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Fri, 13 Jan 2023 21:01:32 +0100 Subject: [PATCH 10/15] [Layout foundations] Adjust size and position of title and body in SkeletonPage to closer match Page (#8030) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Fixes #8014 ### WHAT is this pull request doing? - Centers `SkeletonTitle` to align with `PrimaryActionSkeleton` on right - Reduces height of `SkeletonTitle` from `28px` to `24px` to closer match `Page` title - Removes `paddingBlockStart` from `SkeletonPage` Body allowing it shift up vertically matching `Page` Before| :----:| Screenshot 2023-01-11 at 3 48 06 PM| **After**| Screenshot 2023-01-11 at 3 47 40 PM| ### How to 🎩 [Spin Link](https://admin.web.web-6ubu.chaz-dean.us.spin.dev/store/shop1/) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .changeset/fluffy-hotels-explain.md | 5 +++++ .../components/SkeletonPage/SkeletonPage.tsx | 21 +++++++------------ 2 files changed, 12 insertions(+), 14 deletions(-) create mode 100644 .changeset/fluffy-hotels-explain.md diff --git a/.changeset/fluffy-hotels-explain.md b/.changeset/fluffy-hotels-explain.md new file mode 100644 index 00000000000..be33a0c8215 --- /dev/null +++ b/.changeset/fluffy-hotels-explain.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Updated `SkeletonPage` title and body layout diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx index e692822ef56..94e37be211d 100644 --- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx +++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx @@ -41,7 +41,7 @@ export function SkeletonPage({
    @@ -77,25 +77,18 @@ export function SkeletonPage({ > {breadcrumbMarkup} - + {titleContent} {primaryActionMarkup} - - {children} - + {children} From 98454611ecfaf1cac5518d83cc9ea7aca0a6586f Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 19 Jan 2023 06:58:58 -0800 Subject: [PATCH 11/15] Fix header alignment (#8079) ### WHY are these changes introduced? Fixes #8078 ### WHAT is this pull request doing? Removes left padding from header wrapper that's no longer necessary --- polaris-react/src/components/ResourceList/ResourceList.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss index e8c848d530d..2c0e3eb9cf8 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.scss +++ b/polaris-react/src/components/ResourceList/ResourceList.scss @@ -146,7 +146,6 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)}) text-overflow: ellipsis; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY flex: 1; - padding-left: var(--p-space-1); align-self: center; .HeaderWrapper-hasAlternateTool &, From 9abbc84d36ca29308ac667eb6e701233b9ba6202 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Thu, 19 Jan 2023 17:23:19 +0100 Subject: [PATCH 12/15] [Layout foundations] Update `SkeletonPage` title to have fixed height (#8075) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Adds consistency to `SkeletonPage` by giving the skeleton title a fixed height regardless if the `primaryAction` prop is being used or not ### WHAT is this pull request doing? - Centers the title skeleton by adding `blockStart` and `blockEnd` padding - Increases title height back to `28px` so that with `8px` of extra padding, title container can match the height of the `primaryAction` skeleton at `36px` #### With primaryAction skeleton Screenshot 2023-01-18 at 8 37 53 AM #### Without primaryAction skeleton Screenshot 2023-01-18 at 8 38 50 AM ### How to 🎩 [Spin Link](https://admin.web.web-6n2m.chaz-dean.us.spin.dev/store/shop1/) (Updated) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .changeset/grumpy-students-pull.md | 5 +++++ polaris-react/src/components/SkeletonPage/SkeletonPage.tsx | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/grumpy-students-pull.md diff --git a/.changeset/grumpy-students-pull.md b/.changeset/grumpy-students-pull.md new file mode 100644 index 00000000000..83a92944d72 --- /dev/null +++ b/.changeset/grumpy-students-pull.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Refactored `SkeletonPage` title layout diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx index 94e37be211d..98465613c8e 100644 --- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx +++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx @@ -41,7 +41,7 @@ export function SkeletonPage({
    @@ -84,7 +84,9 @@ export function SkeletonPage({ > {breadcrumbMarkup} - {titleContent} + + {titleContent} + {primaryActionMarkup} From 071e9d6f2db6cb907ff4ad87a8b7d15cd6d45b79 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 19 Jan 2023 15:59:38 -0500 Subject: [PATCH 13/15] [ResourceItem] Realign shortcut actions to match header (#8106) Header alignment changed in https://github.com/Shopify/polaris/pull/7965. Adjusting shortcut action spacing to match --- polaris-react/src/components/ResourceItem/ResourceItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx index 8c319283ae9..00bc540c802 100644 --- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx +++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx @@ -270,7 +270,7 @@ class BaseResourceItem extends Component { } else if (breakpoints?.lgUp) { actionsMarkup = (
    - + {buttonsFrom(shortcutActions, {size: 'slim'})} From d759d917f6808740515365c44b831affb78037ab Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 26 Jan 2023 11:37:56 -0500 Subject: [PATCH 14/15] [BulkActions] Re-add header alignment fix --- polaris-react/src/components/BulkActions/BulkActions.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss index 78b1cda5880..531ac9a755d 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.scss @@ -78,6 +78,7 @@ $bulk-actions-button-stacking-order: ( box-shadow: var(--p-shadow-deep), var(--p-shadow-popover); max-width: 100%; pointer-events: auto; + margin-left: var(--p-space-05); @media #{$p-breakpoints-sm-down} { // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space From 0e7a846308c3cd1a535e3da07f45f335e8f718ee Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 26 Jan 2023 12:32:30 -0500 Subject: [PATCH 15/15] fix: IndexTable checkbox alignment (#8163) Before | After ---|--- ![ba-before](https://user-images.githubusercontent.com/6844391/214901055-98b9ff06-c150-4c3c-9bb5-97709308d2f7.gif) | ![ba](https://user-images.githubusercontent.com/6844391/214901057-6fb4262a-2c68-43ff-955d-b0e6c3ede5c8.gif) --- .changeset/silver-emus-unite.md | 5 +++++ polaris-react/src/components/BulkActions/BulkActions.scss | 1 - polaris-react/src/components/IndexTable/IndexTable.scss | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 .changeset/silver-emus-unite.md diff --git a/.changeset/silver-emus-unite.md b/.changeset/silver-emus-unite.md new file mode 100644 index 00000000000..c4b968f760e --- /dev/null +++ b/.changeset/silver-emus-unite.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed IndexTable checkbox alignment diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss index 531ac9a755d..78b1cda5880 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.scss @@ -78,7 +78,6 @@ $bulk-actions-button-stacking-order: ( box-shadow: var(--p-shadow-deep), var(--p-shadow-popover); max-width: 100%; pointer-events: auto; - margin-left: var(--p-space-05); @media #{$p-breakpoints-sm-down} { // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 1979dbdb33b..c5d1b3f4785 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -602,7 +602,7 @@ $loading-panel-height: 53px; left: 0; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY right: 0; - padding: 0 var(--p-space-2) 0 calc(var(--p-space-3) - var(--p-space-025)); + padding: 0 var(--p-space-2) 0 var(--p-space-4); background: var(--p-surface); &.StickyTableHeader-condensed {