From d64653d4dab9a391589847e3554aa69dbc96fd00 Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Tue, 22 Aug 2023 16:43:03 +1000 Subject: [PATCH 1/2] `OptionList` consolidate se23 logic --- .../src/components/OptionList/OptionList.tsx | 88 +++++-------------- .../components/Checkbox/Checkbox.scss | 84 ------------------ .../components/Checkbox/Checkbox.tsx | 57 ------------ .../OptionList/components/Checkbox/index.ts | 1 - .../Checkbox/tests/Checkbox.test.tsx | 36 -------- .../OptionList/components/Option/Option.tsx | 80 ++++++----------- .../components/Option/tests/Option.test.tsx | 59 ++----------- .../components/OptionList/components/index.ts | 2 - .../OptionList/tests/OptionList.test.tsx | 69 --------------- .../content/components/lists/option-list.md | 1 - 10 files changed, 52 insertions(+), 425 deletions(-) delete mode 100644 polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss delete mode 100644 polaris-react/src/components/OptionList/components/Checkbox/Checkbox.tsx delete mode 100644 polaris-react/src/components/OptionList/components/Checkbox/index.ts delete mode 100644 polaris-react/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx diff --git a/polaris-react/src/components/OptionList/OptionList.tsx b/polaris-react/src/components/OptionList/OptionList.tsx index fb7faa51c28..d3247d8bab7 100644 --- a/polaris-react/src/components/OptionList/OptionList.tsx +++ b/polaris-react/src/components/OptionList/OptionList.tsx @@ -11,8 +11,6 @@ import {useDeepEffect} from '../../utilities/use-deep-effect'; import {Box} from '../Box'; import type {BoxProps} from '../Box'; import {Text} from '../Text'; -import {Bleed} from '../Bleed'; -import {useFeatures} from '../../utilities/features'; import {BlockStack} from '../BlockStack'; import {Option} from './components'; @@ -28,8 +26,6 @@ export interface OptionListProps { options?: OptionDescriptor[]; /** Defines a specific role attribute for the list itself */ role?: 'listbox' | 'combobox' | string; - /** Defines a specific role attribute for each option in the list */ - optionRole?: string; /** Sections containing a header and related options */ sections?: SectionDescriptor[]; /** The selected options */ @@ -53,14 +49,12 @@ export function OptionList({ selected, allowMultiple, role, - optionRole, verticalAlign, onChange, id: idProp, onPointerEnterOption, onFocusOption, }: OptionListProps) { - const {polarisSummerEditions2023} = useFeatures(); const [normalizedOptions, setNormalizedOptions] = useState( createNormalizedOptions(options, sections, title), ); @@ -127,34 +121,16 @@ export function OptionList({ const optionsMarkup = optionsExist ? normalizedOptions.map(({title, options}, sectionIndex) => { const isFirstOption = sectionIndex === 0; - const sectionPaddingBlockStart = polarisSummerEditions2023 ? '3' : '4'; - const firstOptionBlockStartPadding = polarisSummerEditions2023 - ? '05' - : '2'; const titleLevel = isFirstOption ? 'h2' : 'h3'; const titleMarkup = title ? ( - + {title} @@ -177,7 +153,6 @@ export function OptionList({ select={isSelected} allowMultiple={allowMultiple} verticalAlign={verticalAlign} - role={optionRole} onPointerEnter={handlePointerEnter} onFocus={handleFocus} /> @@ -185,35 +160,23 @@ export function OptionList({ }); const option = ( - - - {optionsMarkup} - - + {optionsMarkup} + ); // eslint-disable-next-line no-nested-ternary const blockStartPadding = isFirstOption - ? // eslint-disable-next-line no-nested-ternary - polarisSummerEditions2023 - ? title - ? '1' - : '0' - : undefined - : // eslint-disable-next-line no-nested-ternary - polarisSummerEditions2023 ? title - ? '05' + ? '1' : '0' - : '2'; + : title + ? '05' + : '0'; return ( - {polarisSummerEditions2023 ? ( - - {titleMarkup} - {option} - - ) : ( - <> - {titleMarkup} - {option} - - )} + + {titleMarkup} + {option} + ); }) : null; return ( - + {optionsMarkup} ); diff --git a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss deleted file mode 100644 index 8571f75320c..00000000000 --- a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss +++ /dev/null @@ -1,84 +0,0 @@ -@import '../../../../styles/common'; - -.Checkbox { - position: relative; - width: 100%; - margin: var(--p-space-025); - // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY - &.active .Backdrop { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - } -} - -.Input { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include visually-hidden; - - &:focus-visible + .Backdrop { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - } - - &:active:not(:disabled), - &:checked, - &.Input-indeterminate { - // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - + .Backdrop { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include control-backdrop(active); - } - - // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - ~ .Icon { - transform: translate(-50%, -50%) scale(1); - opacity: 1; - transition: opacity var(--p-motion-duration-150) var(--p-motion-ease), - transform var(--p-motion-duration-150) var(--p-motion-ease); - } - } - - &:disabled + .Backdrop { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include control-backdrop(disabled); - } - - &:disabled:checked { - // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY - + .Backdrop, - + .Backdrop::before { - background: var(--p-color-border-disabled); - } - } -} - -.Backdrop { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include control-backdrop; - position: relative; - display: block; - width: 100%; - height: 100%; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($border-width: var(--p-border-width-2)); -} - -.Icon { - position: absolute; - top: 50%; - left: 50%; - transform-origin: 50% 50%; - pointer-events: none; - transform: translate(-50%, -50%) scale(0.25); - opacity: 0; - transition: opacity var(--p-motion-duration-100) var(--p-motion-ease), - transform var(--p-motion-duration-100) var(--p-motion-ease); - - @media (-ms-high-contrast: active) { - fill: windowText; - } - - svg { - fill: var(--p-color-icon-on-color); - } -} diff --git a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.tsx deleted file mode 100644 index 4ae49230ffc..00000000000 --- a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, {useId} from 'react'; -import {TickSmallMinor} from '@shopify/polaris-icons'; - -import {classNames} from '../../../../utilities/css'; -import {Icon} from '../../../Icon'; - -import styles from './Checkbox.scss'; - -export interface CheckboxProps { - checked?: boolean; - disabled?: boolean; - active?: boolean; - id?: string; - name?: string; - value?: string; - role?: string; - onChange(): void; -} - -export function Checkbox({ - id: idProp, - checked = false, - disabled, - active, - onChange, - name, - value, - role, -}: CheckboxProps) { - const uniqId = useId(); - const id = idProp ?? uniqId; - - const className = classNames(styles.Checkbox, active && styles.active); - - const inputClassName = classNames(styles.Input); - - return ( -
- -
-
- -
-
- ); -} diff --git a/polaris-react/src/components/OptionList/components/Checkbox/index.ts b/polaris-react/src/components/OptionList/components/Checkbox/index.ts deleted file mode 100644 index f5c939faf48..00000000000 --- a/polaris-react/src/components/OptionList/components/Checkbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Checkbox'; diff --git a/polaris-react/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx b/polaris-react/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx deleted file mode 100644 index 1db1a97c61e..00000000000 --- a/polaris-react/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import {mountWithApp} from 'tests/utilities'; - -import {Checkbox} from '../Checkbox'; -import type {CheckboxProps} from '../Checkbox'; - -describe('', () => { - const defaultProps: CheckboxProps = { - checked: true, - disabled: false, - id: 'checkboxId', - name: 'Checkbox', - value: 'checkbox', - onChange: noop, - }; - - it('sets pass through props for input', () => { - const input = mountWithApp(); - - expect(input).toContainReactComponent('input', defaultProps); - }); - - it('calls onChange', () => { - const spy = jest.fn(); - - const input = mountWithApp( - , - ).find('input'); - - input!.trigger('onChange'); - - expect(spy).toHaveBeenCalledTimes(1); - }); -}); - -function noop() {} diff --git a/polaris-react/src/components/OptionList/components/Option/Option.tsx b/polaris-react/src/components/OptionList/components/Option/Option.tsx index ae5aa52dd4c..9879a7f36e2 100644 --- a/polaris-react/src/components/OptionList/components/Option/Option.tsx +++ b/polaris-react/src/components/OptionList/components/Option/Option.tsx @@ -7,9 +7,7 @@ import {Icon} from '../../../Icon'; import type {ThumbnailProps} from '../../../Thumbnail'; import type {AvatarProps} from '../../../Avatar'; import {Scrollable} from '../../../Scrollable'; -import {Checkbox} from '../Checkbox'; import {classNames, variationName} from '../../../../utilities/css'; -import {useFeatures} from '../../../../utilities/features'; import type {InlineStackProps} from '../../../InlineStack'; import {InlineStack} from '../../../InlineStack'; import {Checkbox as PolarisCheckbox} from '../../../Checkbox'; @@ -30,7 +28,6 @@ export interface OptionProps { select?: boolean; allowMultiple?: boolean; verticalAlign?: Alignment; - role?: string; onClick(section: number, option: number): void; /** Callback when pointer enters the option */ onPointerEnter(section: number, option: number): void; @@ -46,7 +43,6 @@ export function Option({ active, allowMultiple, disabled, - role, media, onClick, section, @@ -56,7 +52,6 @@ export function Option({ onFocus, }: OptionProps) { const {value: focused, toggle: toggleFocused} = useToggle(false); - const {polarisSummerEditions2023} = useFeatures(); const handleClick = useCallback(() => { if (disabled) { @@ -99,43 +94,25 @@ export function Option({ active && styles.active, select && styles.select, verticalAlign && styles[variationName('verticalAlign', verticalAlign)], - polarisSummerEditions2023 && allowMultiple && styles.CheckboxLabel, - polarisSummerEditions2023 && allowMultiple && styles.MultiSelectOption, + allowMultiple && styles.CheckboxLabel, + allowMultiple && styles.MultiSelectOption, ); - const checkBoxRole = role === 'option' ? 'presentation' : undefined; - const optionMarkup = allowMultiple ? ( ) : ( ); diff --git a/polaris-react/src/components/OptionList/components/Option/tests/Option.test.tsx b/polaris-react/src/components/OptionList/components/Option/tests/Option.test.tsx index 66b3500502a..3b6f8b30f41 100644 --- a/polaris-react/src/components/OptionList/components/Option/tests/Option.test.tsx +++ b/polaris-react/src/components/OptionList/components/Option/tests/Option.test.tsx @@ -1,8 +1,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; -import {Checkbox} from '../../Checkbox'; -import {Checkbox as PolarisCheckbox} from '../../../../Checkbox'; +import {Checkbox} from '../../../../Checkbox'; import {Scrollable} from '../../../../Scrollable'; import {Option} from '../Option'; import type {OptionProps} from '../Option'; @@ -20,10 +19,8 @@ describe('