Skip to content

Commit

Permalink
OptionList consolidate se23 logic
Browse files Browse the repository at this point in the history
  • Loading branch information
gwyneplaine committed Aug 23, 2023
1 parent 210f212 commit 6401345
Show file tree
Hide file tree
Showing 10 changed files with 53 additions and 420 deletions.
84 changes: 21 additions & 63 deletions polaris-react/src/components/OptionList/OptionList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 */
Expand All @@ -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),
);
Expand Down Expand Up @@ -127,10 +121,8 @@ 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 sectionPaddingBlockStart = '3';
const firstOptionBlockStartPadding = '05';
const titleLevel = isFirstOption ? 'h2' : 'h3';
const titleMarkup = title ? (
<Box
Expand All @@ -139,22 +131,12 @@ export function OptionList({
? firstOptionBlockStartPadding
: sectionPaddingBlockStart
}
paddingInlineStart={
polarisSummerEditions2023 ? '1_5-experimental' : '2'
}
paddingBlockEnd={polarisSummerEditions2023 ? '1' : '2'}
paddingInlineEnd={
polarisSummerEditions2023 ? '1_5-experimental' : '2'
}
paddingInlineStart="1_5-experimental"
paddingBlockEnd="1"
paddingInlineEnd="1_5-experimental"
borderColor="border-subdued"
borderBlockStartWidth={
!isFirstOption && !polarisSummerEditions2023 ? '1' : undefined
}
>
<Text
as={polarisSummerEditions2023 ? titleLevel : 'p'}
variant="headingXs"
>
<Text as={titleLevel} variant="headingXs">
{title}
</Text>
</Box>
Expand All @@ -177,72 +159,48 @@ export function OptionList({
select={isSelected}
allowMultiple={allowMultiple}
verticalAlign={verticalAlign}
role={optionRole}
onPointerEnter={handlePointerEnter}
onFocus={handleFocus}
/>
);
});

const option = (
<Bleed
marginBlockStart={
title || polarisSummerEditions2023 ? undefined : '05'
}
<Box
as="ul"
id={`${id}-${sectionIndex}`}
role={role as BoxProps['role']}
>
<Box
as="ul"
id={`${id}-${sectionIndex}`}
role={role as BoxProps['role']}
>
{optionsMarkup}
</Box>
</Bleed>
{optionsMarkup}
</Box>
);

// 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 (
<Box
key={title || `noTitle-${sectionIndex}`}
as="li"
paddingBlockStart={blockStartPadding}
>
{polarisSummerEditions2023 ? (
<BlockStack gap={isFirstOption && sections ? undefined : '0'}>
{titleMarkup}
{option}
</BlockStack>
) : (
<>
{titleMarkup}
{option}
</>
)}
<BlockStack gap={isFirstOption && sections ? undefined : '0'}>
{titleMarkup}
{option}
</BlockStack>
</Box>
);
})
: null;

return (
<Box
as="ul"
role={role as BoxProps['role']}
padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
>
<Box as="ul" role={role as BoxProps['role']} padding="1_5-experimental">
{optionsMarkup}
</Box>
);
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Loading

0 comments on commit 6401345

Please sign in to comment.