From 2f128facad34b8034dae5e3920030b44e8061ccd Mon Sep 17 00:00:00 2001 From: kyledurand Date: Thu, 25 Jan 2024 10:06:29 -0500 Subject: [PATCH] lots of polish --- polaris-react/playground/DetailsPage.tsx | 28 +++ .../playground/components/Select/Select.tsx | 165 +++++++++++------- .../src/components/ActionList/ActionList.tsx | 6 +- .../components/Combobox/Combobox.module.scss | 4 + .../src/components/Combobox/Combobox.tsx | 10 +- .../TextOption/TextOption.module.scss | 13 +- .../components/TextOption/TextOption.tsx | 1 + .../components/Popover/Popover.module.scss | 4 +- .../Popover/components/Pane/Pane.tsx | 2 + .../PositionedOverlay/PositionedOverlay.tsx | 2 +- .../PositionedOverlay/utilities/math.ts | 3 +- .../Scrollable/Scrollable.module.scss | 1 + 12 files changed, 168 insertions(+), 71 deletions(-) diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx index 3fbdb33797d..dd21746ecdd 100644 --- a/polaris-react/playground/DetailsPage.tsx +++ b/polaris-react/playground/DetailsPage.tsx @@ -14,6 +14,7 @@ import { SettingsIcon, WifiIcon, InfoIcon, + CollectionIcon, } from '@shopify/polaris-icons'; import { @@ -647,6 +648,7 @@ export function DetailsPage() { resourceTitle="Collections" emptyStateTitle="No collections" defaultSelected={['01234567', '12345678', '23456789']} + optionIcon={CollectionIcon} options={[ {value: '01234567', label: 'Table'}, {value: '12345678', label: 'Chair'}, @@ -660,6 +662,7 @@ export function DetailsPage() { `; + +function TagIcon() { + return ( + + + + + ); +} diff --git a/polaris-react/playground/components/Select/Select.tsx b/polaris-react/playground/components/Select/Select.tsx index 8cdf0b90300..0f369ea5012 100644 --- a/polaris-react/playground/components/Select/Select.tsx +++ b/polaris-react/playground/components/Select/Select.tsx @@ -4,11 +4,11 @@ import { ArrowUpIcon, PlusIcon, SearchIcon, - // CollectionIcon, - // ArrowDownIcon, } from '@shopify/polaris-icons'; +import type {IconProps} from '../../../src'; import { + UnstyledButton, Combobox, Listbox, Text, @@ -33,6 +33,7 @@ interface Props { searchPlaceholder?: string; defaultSelected?: string[]; options?: Option[]; + optionIcon?: IconProps['source']; } export function Select({ @@ -40,12 +41,12 @@ export function Select({ emptyStateTitle, searchPlaceholder, defaultSelected = [], + optionIcon, options: defaultOptions = [], }: Props) { const collapsibleId = React.useId(); const [active, setActive] = React.useState(false); const [inputValue, setInputValue] = useState(''); - const [options] = useState(defaultOptions); const [filteredOptions, setFilteredOptions] = useState(defaultOptions); const [collapsibleOpen, setCollapsibleOpen] = useState(false); const [selectedOptions, setSelectedOptions] = @@ -92,7 +93,9 @@ export function Select({ )); @@ -100,7 +103,9 @@ export function Select({ )); @@ -119,23 +124,25 @@ export function Select({ : null; const activator = ( - - - - {selectedOptions.length ? resourceTitle : emptyStateTitle} - + + + + + {selectedOptions.length ? resourceTitle : emptyStateTitle} + - - - + + + )} ); } -function TagIcon() { - return ( - - - - - ); -} - function Tag({ options, selectedOption, + icon, + resourceTitle, }: { options: Option[]; selectedOption: string; + icon?: IconProps['source']; + resourceTitle?: string; }) { return ( - + {icon && ( + + + + )} - {options?.find((option) => option.value === selectedOption)?.label} + {options?.find((option) => option.value === selectedOption)?.label ?? + `new fake ${resourceTitle?.toLocaleLowerCase()}`} diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx index 6bcb111f34b..091bdde4f42 100644 --- a/polaris-react/src/components/ActionList/ActionList.tsx +++ b/polaris-react/src/components/ActionList/ActionList.tsx @@ -45,7 +45,7 @@ export function ActionList({ const filterActions = useContext(FilterActionsContext); let finalSections: readonly ActionListSection[] = []; const actionListRef = useRef(null); - const [searchText, setSeachText] = useState(''); + const [searchText, setSearchText] = useState(''); if (items) { finalSections = [{items}, ...sections]; @@ -159,9 +159,9 @@ export function ActionList({ )} autoComplete="off" value={searchText} - onChange={(value) => setSeachText(value)} + onChange={(value) => setSearchText(value)} prefix={} - onClearButtonClick={() => setSeachText('')} + onClearButtonClick={() => setSearchText('')} /> )} diff --git a/polaris-react/src/components/Combobox/Combobox.module.scss b/polaris-react/src/components/Combobox/Combobox.module.scss index a003261b8e2..1df09a4c11f 100644 --- a/polaris-react/src/components/Combobox/Combobox.module.scss +++ b/polaris-react/src/components/Combobox/Combobox.module.scss @@ -2,3 +2,7 @@ padding: var(--p-space-200) 0; overflow: visible; } + +.allowMultiple { + padding: 0; +} diff --git a/polaris-react/src/components/Combobox/Combobox.tsx b/polaris-react/src/components/Combobox/Combobox.tsx index 91afacdf026..8fe4bc440b5 100644 --- a/polaris-react/src/components/Combobox/Combobox.tsx +++ b/polaris-react/src/components/Combobox/Combobox.tsx @@ -15,6 +15,7 @@ import type { ComboboxListboxOptionType, } from '../../utilities/combobox'; import {Box} from '../Box'; +import {classNames} from '../../utilities/css'; import styles from './Combobox.module.scss'; import {TextField} from './components'; @@ -165,7 +166,14 @@ export function Combobox({ -
{children}
+
+ {children} +
diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.module.scss b/polaris-react/src/components/Listbox/components/TextOption/TextOption.module.scss index d24b606495e..cf1c8eab271 100644 --- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.module.scss +++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.module.scss @@ -11,8 +11,9 @@ @include focus-ring; &.allowMultiple { - margin: var(--p-space-100) var(--p-space-200) 0; - padding: var(--p-space-100) var(--p-space-200); + margin: 0; + padding: 0; + border-radius: var(--p-border-radius-0); } &.isAction { @@ -85,6 +86,14 @@ li:first-of-type > .TextOption { display: flex; } +.allowMultiple .Content { + padding: 0 var(--p-space-200); +} + .Checkbox { pointer-events: none; } + +.selectedMultiple { + background-color: var(--p-color-bg-surface-selected); +} diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx b/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx index 5e9fa64f64d..b3402e6be63 100644 --- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx +++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx @@ -30,6 +30,7 @@ export const TextOption = memo(function TextOption({ const textOptionClassName = classNames( styles.TextOption, selected && !allowMultiple && styles.selected, + selected && allowMultiple && styles.selectedMultiple, disabled && styles.disabled, allowMultiple && styles.allowMultiple, isAction && styles.isAction, diff --git a/polaris-react/src/components/Popover/Popover.module.scss b/polaris-react/src/components/Popover/Popover.module.scss index edd0cb90ddc..b241e2b39ea 100644 --- a/polaris-react/src/components/Popover/Popover.module.scss +++ b/polaris-react/src/components/Popover/Popover.module.scss @@ -12,7 +12,7 @@ $vertical-motion-offset: -5px; will-change: left, top; @include shadow-bevel( $boxShadow: var(--p-shadow-300), - $borderRadius: var(--p-border-radius-300), + $borderRadius: var(--p-border-radius-200), $zIndex: 2 ); } @@ -59,7 +59,7 @@ $vertical-motion-offset: -5px; position: relative; overflow: hidden; background: var(--p-color-bg-surface); - border-radius: var(--p-space-300); + border-radius: var(--p-space-200); /* Prevent Scrollable's box shadows overflowing the rounded corners of this * element on Safari prior to tech preview version 156. diff --git a/polaris-react/src/components/Popover/components/Pane/Pane.tsx b/polaris-react/src/components/Popover/components/Pane/Pane.tsx index 4c588d4a220..872eed0604a 100644 --- a/polaris-react/src/components/Popover/components/Pane/Pane.tsx +++ b/polaris-react/src/components/Popover/components/Pane/Pane.tsx @@ -61,6 +61,8 @@ export function Pane({ className={className} style={style} onScrolledToBottom={onScrolledToBottom} + horizontal={false} + vertical={false} > {content} diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx index 3eac1769189..862d260e80b 100644 --- a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx +++ b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx @@ -17,7 +17,7 @@ import { import type {PreferredPosition, PreferredAlignment} from './utilities/math'; import styles from './PositionedOverlay.module.scss'; -type Positioning = 'above' | 'below'; +type Positioning = 'above' | 'below' | 'cover'; interface OverlayDetails { left?: number; diff --git a/polaris-react/src/components/PositionedOverlay/utilities/math.ts b/polaris-react/src/components/PositionedOverlay/utilities/math.ts index 4f5538fd256..69d9884aae4 100644 --- a/polaris-react/src/components/PositionedOverlay/utilities/math.ts +++ b/polaris-react/src/components/PositionedOverlay/utilities/math.ts @@ -62,8 +62,7 @@ export function calculateVerticalPosition( top: activatorBottom + containerRectTop - - activatorRect.height - - verticalMargins * 2, + (activatorRect.height + verticalMargins), positioning: 'cover', }; diff --git a/polaris-react/src/components/Scrollable/Scrollable.module.scss b/polaris-react/src/components/Scrollable/Scrollable.module.scss index df16c4dd3b1..77e6c1d941c 100644 --- a/polaris-react/src/components/Scrollable/Scrollable.module.scss +++ b/polaris-react/src/components/Scrollable/Scrollable.module.scss @@ -16,6 +16,7 @@ max-height: var(--pc-scrollable-max-height); overflow-x: hidden; overflow-y: hidden; + scrollbar-width: thin; /* Prevent Scrollable's box shadows overflowing the rounded corners of this * element on Safari prior to tech preview version 156.