From 446126313f69967a049e45c32376df7076c6656d Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Thu, 15 Sep 2022 08:18:17 +1000 Subject: [PATCH 1/3] Revert "SelectPanel: Accessibility remediation (#2138)" This reverts commit ace38afb0f469f93fbfea0df488e688005609a62. --- docs/content/SelectPanel.mdx | 13 +- docs/content/deprecated/ActionList.mdx | 52 +- src/Autocomplete/AutocompleteMenu.tsx | 2 - src/FilteredActionList/FilteredActionList.tsx | 32 +- src/SelectPanel/SelectPanel.tsx | 166 +- src/__tests__/SelectPanel.test.tsx | 3 +- src/__tests__/SelectPanel.types.test.tsx | 6 +- .../__snapshots__/Autocomplete.test.tsx.snap | 4552 ++++++++--------- .../__snapshots__/SelectPanel.test.tsx.snap | 2 +- src/__tests__/deprecated/ActionList.test.tsx | 29 +- .../__snapshots__/ActionList.test.tsx.snap | 28 +- src/deprecated/ActionList/Divider.tsx | 4 +- src/deprecated/ActionList/Group.tsx | 16 +- src/deprecated/ActionList/Item.tsx | 21 +- src/deprecated/ActionList/List.tsx | 66 +- src/deprecated/ActionMenu.tsx | 2 +- .../MarkdownEditor/MarkdownEditor.test.tsx | 9 +- src/stories/SelectPanel.stories.tsx | 168 +- src/stories/deprecated/ActionList.stories.tsx | 82 +- 19 files changed, 2548 insertions(+), 2705 deletions(-) diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx index c2067da79cf..a044fc2af21 100644 --- a/docs/content/SelectPanel.mdx +++ b/docs/content/SelectPanel.mdx @@ -37,20 +37,19 @@ const items = [ ] function DemoComponent() { - const [selected, setSelected] = React.useState([items[2], items[4]]) + const [selected, setSelected] = React.useState([items[0], items[1]]) const [filter, setFilter] = React.useState('') const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) const [open, setOpen] = React.useState(false) return ( ( - )} - title="Select Items" - inputLabel="Select Items" + placeholderText="Filter Labels" open={open} onOpenChange={setOpen} items={filteredItems} @@ -58,7 +57,7 @@ function DemoComponent() { onSelectedChange={setSelected} onFilterChange={setFilter} showItemDividers={true} - overlayProps={{width: 'medium', height: 'medium'}} + overlayProps={{width: 'small', height: 'xsmall'}} /> ) } diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx index 4768212314a..c25de07a382 100644 --- a/docs/content/deprecated/ActionList.mdx +++ b/docs/content/deprecated/ActionList.mdx @@ -14,13 +14,12 @@ Use [new version of ActionList](/ActionList) with composable API, design updates ```jsx ``` @@ -28,12 +27,12 @@ Use [new version of ActionList](/ActionList) with composable API, design updates **After** ```jsx - - New file - Copy link - Edit file + + New file + Copy link + Edit file - Delete file + Delete file ``` @@ -47,13 +46,12 @@ import {ActionList} from '@primer/react/deprecated' ```jsx live deprecated ``` @@ -62,7 +60,6 @@ import {ActionList} from '@primer/react/deprecated' ```jsx live deprecated ``` @@ -110,21 +104,17 @@ import {ActionList} from '@primer/react/deprecated' ```jsx deprecated }, { text: 'React Router link', - role: 'option', renderItem: props => }, { text: 'NextJS style', - role: 'option', renderItem: props => ( diff --git a/src/Autocomplete/AutocompleteMenu.tsx b/src/Autocomplete/AutocompleteMenu.tsx index f2be474df84..be08c1aba0e 100644 --- a/src/Autocomplete/AutocompleteMenu.tsx +++ b/src/Autocomplete/AutocompleteMenu.tsx @@ -153,7 +153,6 @@ function AutocompleteMenu(props: AutocompleteMe items.map(selectableItem => { return { ...selectableItem, - _legacyEnterSupport: true, //TODO: Change behaviour, the enter key should not be used here. role: 'option', id: selectableItem.id, selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined, @@ -220,7 +219,6 @@ function AutocompleteMenu(props: AutocompleteMe ? [ { ...addNewItem, - _legacyEnterSupport: true, //TODO: Change behaviour, the enter key should not be used here. leadingVisual: () => , onAction: (item: T) => { // TODO: make it possible to pass a leadingVisual when using `addNewItem` diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx index 7ff89e56ead..665cf6a9c12 100644 --- a/src/FilteredActionList/FilteredActionList.tsx +++ b/src/FilteredActionList/FilteredActionList.tsx @@ -5,6 +5,7 @@ import TextInput, {TextInputProps} from '../TextInput' import Box from '../Box' import {ActionList} from '../deprecated/ActionList' import Spinner from '../Spinner' +import {useFocusZone} from '../hooks/useFocusZone' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' import styled from 'styled-components' import {get} from '../constants' @@ -13,7 +14,6 @@ import useScrollFlash from '../hooks/useScrollFlash' import {scrollIntoView} from '@primer/behaviors' import type {ScrollIntoViewOptions} from '@primer/behaviors' import {SxProp} from '../sx' -import VisuallyHidden from '../_VisuallyHidden' const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8} @@ -22,7 +22,7 @@ export interface FilteredActionListProps ListPropsBase, SxProp { loading?: boolean - placeholderText?: string + placeholderText: string filterValue?: string onFilterChange: (value: string, e: React.ChangeEvent) => void textInputProps?: Partial> @@ -56,10 +56,10 @@ export function FilteredActionList({ ) const scrollContainerRef = useRef(null) + const listContainerRef = useRef(null) const inputRef = useProvidedRefOrCreate(providedInputRef) const activeDescendantRef = useRef() const listId = useSSRSafeId() - const inputDescriptionTextId = useSSRSafeId() const onInputKeyPress: KeyboardEventHandler = useCallback( event => { if (event.key === 'Enter' && activeDescendantRef.current) { @@ -74,6 +74,28 @@ export function FilteredActionList({ [activeDescendantRef] ) + useFocusZone( + { + containerRef: listContainerRef, + focusOutBehavior: 'wrap', + focusableElementFilter: element => { + return !(element instanceof HTMLInputElement) + }, + activeDescendantFocus: inputRef, + onActiveDescendantChanged: (current, previous, directlyActivated) => { + activeDescendantRef.current = current + + if (current && scrollContainerRef.current && directlyActivated) { + scrollIntoView(current, scrollContainerRef.current, menuScrollMargins) + } + } + }, + [ + // List ref isn't set while loading. Need to re-bind focus zone when it changes + loading + ] + ) + useEffect(() => { // if items changed, we want to instantly move active descendant into view if (activeDescendantRef.current && scrollContainerRef.current) { @@ -97,10 +119,8 @@ export function FilteredActionList({ placeholder={placeholderText} aria-label={placeholderText} aria-controls={listId} - aria-describedby={inputDescriptionTextId} {...textInputProps} /> - Items will be filtered as you type {loading ? ( @@ -108,7 +128,7 @@ export function FilteredActionList({ ) : ( - + )} diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx index 1d39cd2765e..7226bc63126 100644 --- a/src/SelectPanel/SelectPanel.tsx +++ b/src/SelectPanel/SelectPanel.tsx @@ -1,8 +1,7 @@ -import React, {useCallback, useMemo, useState} from 'react' +import React, {useCallback, useMemo} from 'react' import {FilteredActionList, FilteredActionListProps} from '../FilteredActionList' import {OverlayProps} from '../Overlay' import {ItemInput} from '../deprecated/ActionList/List' -import Heading from '../Heading' import {FocusZoneHookSettings} from '../hooks/useFocusZone' import {DropdownButton} from '../deprecated/DropdownMenu' import {ItemProps} from '../deprecated/ActionList' @@ -11,12 +10,6 @@ import {TextInputProps} from '../TextInput' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay' import {useProvidedRefOrCreate} from '../hooks' -import {Button} from '../Button' -import {SearchIcon} from '@primer/octicons-react' -import Box from '../Box' -import {useSSRSafeId} from '@react-aria/ssr' -import VisuallyHidden from '../_VisuallyHidden' -import ButtonClose from '../deprecated/Button/ButtonClose' interface SelectPanelSingleSelection { selected: ItemInput | undefined @@ -33,11 +26,7 @@ interface SelectPanelBaseProps { open: boolean, gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection' ) => void - // TODO: Make `title` and `inputLabel` required and remove default values - // in the next major release - title?: string - inputLabel?: string - inputPlaceholder?: string + placeholder?: string overlayProps?: Partial } @@ -63,17 +52,15 @@ export function SelectPanel({ onOpenChange, renderAnchor = props => , anchorRef: externalAnchorRef, + placeholder, selected, onSelectedChange, - title = isMultiSelectVariant(selected) ? 'Select items' : 'Select an item', - inputLabel = 'Filter items', - inputPlaceholder, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, textInputProps, overlayProps, - sx: sxProp, + sx, ...listProps }: SelectPanelProps): JSX.Element { const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '') @@ -85,17 +72,6 @@ export function SelectPanel({ [externalOnFilterChange, setInternalFilterValue] ) - const selectedItems = React.useMemo( - () => (Array.isArray(selected) ? selected : [...(selected ? [selected] : [])]), - [selected] - ) - - const [finalItemsSelected, setFinalItemsSelected] = useState(selectedItems) - - // Refresh the selected items state when the prop changes. - // This is necessary because sometimes the selected items need to be fetched async. - React.useEffect(() => setFinalItemsSelected(selectedItems), [selectedItems]) - const anchorRef = useProvidedRefOrCreate(externalAnchorRef) const onOpen: AnchoredOverlayProps['onOpen'] = useCallback(gesture => onOpenChange(true, gesture), [onOpenChange]) const onClose = useCallback( @@ -110,20 +86,24 @@ export function SelectPanel({ return null } + const selectedItems = Array.isArray(selected) ? selected : [...(selected ? [selected] : [])] + return >(props: T) => { return renderAnchor({ ...props, - children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : inputLabel + children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder }) } - }, [inputLabel, renderAnchor, selectedItems]) + }, [placeholder, renderAnchor, selected]) const itemsToRender = useMemo(() => { return items.map(item => { + const isItemSelected = isMultiSelectVariant(selected) ? selected.includes(item) : selected === item + return { ...item, role: 'option', - selected: 'selected' in item && item.selected === undefined ? undefined : finalItemsSelected.includes(item), + selected: 'selected' in item && item.selected === undefined ? undefined : isItemSelected, onAction: (itemFromAction, event) => { item.onAction?.(itemFromAction, event) @@ -132,47 +112,24 @@ export function SelectPanel({ } if (isMultiSelectVariant(selected)) { - const otherSelectedItems = finalItemsSelected.filter(selectedItem => selectedItem !== item) - const newSelectedItems = finalItemsSelected.includes(item) - ? otherSelectedItems - : [...otherSelectedItems, item] + const otherSelectedItems = selected.filter(selectedItem => selectedItem !== item) + const newSelectedItems = selected.includes(item) ? otherSelectedItems : [...otherSelectedItems, item] - setFinalItemsSelected(newSelectedItems) - } else { - // single select - setFinalItemsSelected(finalItemsSelected.includes(item) ? [] : [item]) + const multiSelectOnChange = onSelectedChange as SelectPanelMultiSelection['onSelectedChange'] + multiSelectOnChange(newSelectedItems) + return } + + // single select + const singleSelectOnChange = onSelectedChange as SelectPanelSingleSelection['onSelectedChange'] + singleSelectOnChange(item === selected ? undefined : item) + onClose('selection') } } as ItemProps }) - }, [items, selected, setFinalItemsSelected, finalItemsSelected]) - - const onSaveClickHandler = React.useCallback(() => { - if (isMultiSelectVariant(selected)) { - const multiSelectOnChange = onSelectedChange as SelectPanelMultiSelection['onSelectedChange'] - multiSelectOnChange(finalItemsSelected) - } else { - const singleSelectOnChange = onSelectedChange as SelectPanelSingleSelection['onSelectedChange'] - singleSelectOnChange(finalItemsSelected.length > 0 ? finalItemsSelected[0] : undefined) - } - onClose('selection') - }, [finalItemsSelected, onSelectedChange, onClose, selected]) - - const onCloseOverlay = React.useCallback( - (gesture?: 'anchor-click' | 'click-outside' | 'escape') => { - setFinalItemsSelected(selectedItems) - onClose(gesture ?? 'escape') - }, - [onClose, selectedItems] - ) - - const onCloseClickHandler = React.useCallback(() => { - setFinalItemsSelected(selectedItems) - onClose('escape') - }, [onClose, selectedItems]) + }, [onClose, onSelectedChange, items, selected]) const inputRef = React.useRef(null) - const titleId = useSSRSafeId() const focusTrapSettings = { initialFocusRef: inputRef } @@ -181,22 +138,9 @@ export function SelectPanel({ return { sx: {m: 2}, contrast: true, - leadingVisual: SearchIcon, - 'aria-label': inputLabel, - placeholder: inputPlaceholder, ...textInputProps } - }, [textInputProps, inputLabel, inputPlaceholder]) - - const overlayKeyPressHandler = useCallback( - event => { - if (!event.defaultPrevented && ['Enter'].includes(event.key)) { - onSaveClickHandler() - event.preventDefault() - } - }, - [onSaveClickHandler] - ) + }, [textInputProps]) return ( - {/* inheriting height and maxHeight ensures that the content is never taller than the Overlay (which would break scrolling the items) */} - - - {filterValue === '' - ? 'Showing all items' - : items.length <= 0 - ? 'No matching items' - : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`} - - - - {title} - - - - - - - - - + ) } diff --git a/src/__tests__/SelectPanel.test.tsx b/src/__tests__/SelectPanel.test.tsx index 077c83c3790..64a19522006 100644 --- a/src/__tests__/SelectPanel.test.tsx +++ b/src/__tests__/SelectPanel.test.tsx @@ -22,8 +22,7 @@ function SimpleSelectPanel(): JSX.Element { null} items={[]} @@ -19,8 +18,7 @@ export function shouldAcceptCallWithNoProps() { export function shouldAcceptDOMPropsOnOverlay() { return ( null} items={[]} diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index ae1842a293b..6a844ff62e7 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -500,8 +500,6 @@ exports[`Autocomplete snapshots renders a menu that contains an item to add to t .c2 { margin-top: 8px; margin-bottom: 8px; - list-style: none; - padding-inline-start: 0; } .c8 { @@ -667,9 +665,6 @@ exports[`Autocomplete snapshots renders a menu that contains an item to add to t .c1 { font-size: 14px; line-height: 20px; - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; } .c1[data-has-active-descendant], @@ -689,636 +684,629 @@ exports[`Autocomplete snapshots renders a menu that contains an item to add to t className="c0" >
-
-
    +
    -
  • -
      - -
    • + + +
    • +
    +
    -
    - -
    -
    -
    - - one - -
    -
    - -
  • +
    • +
    +
+
+
+
- -
-
-
- - two - -
-
- -
  • + + +
    • +
    +
    -
    - -
    -
    -
    - - three - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    - -
    -
    -
    - - four - -
    -
    - -
  • + + +
    • +
    +
    -
    - -
    -
    -
    - - five - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    - -
    -
    -
    - - six - -
    -
    - -
  • + + +
    • +
    +
    -
    - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - seven - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    + + +
    +
    +
    + - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - twenty - -
    -
    - -
  • +
    • +
    +
    +
    +
    + +
    +
    +
    -
    - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - twentyone - -
    -
    - -
  • +
    • +
    +
    +
    +
    + +
    +
    +
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    + -
    - - Add new item - -
    -
    - - - - + Add new item + +
    +
    +
    +
    , @@ -1470,8 +1458,6 @@ exports[`Autocomplete snapshots renders a multiselect input 1`] = ` .c2 { margin-top: 8px; margin-bottom: 8px; - list-style: none; - padding-inline-start: 0; } .c8 { @@ -1600,9 +1586,6 @@ exports[`Autocomplete snapshots renders a multiselect input 1`] = ` .c1 { font-size: 14px; line-height: 20px; - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; } .c1[data-has-active-descendant], @@ -1622,583 +1605,576 @@ exports[`Autocomplete snapshots renders a multiselect input 1`] = ` className="c0" >
    -
    -
      +
      -
    • -
        - -
      • + + +
      • +
      +
      -
      - -
      -
      -
      - - one - -
      -
      - -
    • +
      • +
      +
    +
    +
    +
    - -
    -
    -
    - - two - -
    -
    - -
  • + + +
    • +
    +
    -
    - -
    -
    -
    - - three - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    - -
    -
    -
    - - four - -
    -
    - -
  • + + +
    • +
    +
    -
    - -
    -
    -
    - - five - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    - -
    -
    + + +
    +
    +
    + -
    - - six - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    + + +
    +
    +
    + - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - seven - -
    -
    - -
  • +
    • +
    +
    +
    +
    + +
    +
    +
    -
    - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - twenty - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    + + +
    +
    +
    + - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - twentyone - -
    -
    - - - - + twentyone + +
    +
    +
    +
    , @@ -2350,8 +2326,6 @@ exports[`Autocomplete snapshots renders a multiselect input with selected menu i .c2 { margin-top: 8px; margin-bottom: 8px; - list-style: none; - padding-inline-start: 0; } .c8 { @@ -2491,9 +2465,6 @@ exports[`Autocomplete snapshots renders a multiselect input with selected menu i .c1 { font-size: 14px; line-height: 20px; - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; } .c1[data-has-active-descendant], @@ -2513,583 +2484,576 @@ exports[`Autocomplete snapshots renders a multiselect input with selected menu i className="c0" >
    -
    -
      +
      -
    • -
        - -
      • + + +
      • +
      +
      -
      - -
      -
      -
      - - one - -
      -
      - -
    • +
      • +
      +
    +
    +
    +
    - -
    -
    -
    - - two - -
    -
    - -
  • + + +
    • +
    +
    -
    - -
    -
    -
    - - three - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    - -
    -
    -
    - - four - -
    -
    - -
  • + + +
    • +
    +
    -
    - -
    -
    -
    - - five - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    - -
    -
    + + +
    +
    +
    + -
    - - six - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    + + +
    +
    +
    + - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - seven - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    + + +
    +
    +
    + - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - twenty - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    + + +
    +
    +
    + - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    + -
    - - twentyone - -
    -
    - - - - + twentyone + +
    +
    +
    +
    , @@ -3241,8 +3205,6 @@ exports[`Autocomplete snapshots renders a single select input 1`] = ` .c2 { margin-top: 8px; margin-bottom: 8px; - list-style: none; - padding-inline-start: 0; } .c6 { @@ -3339,9 +3301,6 @@ exports[`Autocomplete snapshots renders a single select input 1`] = ` .c1 { font-size: 14px; line-height: 20px; - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; } .c1[data-has-active-descendant], @@ -3361,313 +3320,306 @@ exports[`Autocomplete snapshots renders a single select input 1`] = ` className="c0" >
    -
    -
      +
      -
    • -
        -
      • -
        -
        - - zero - -
        -
        -
        • -
      • +
      • +
    +
    +
    +
    +
    -
    -
    - - one - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - two - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - three - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - four - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - five - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - six - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - seven - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - twenty - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - twentyone - -
    -
    - - - - + twentyone + +
    +
    +
    + , @@ -3696,8 +3648,6 @@ exports[`Autocomplete snapshots renders with a custom text input component 1`] = .c2 { margin-top: 8px; margin-bottom: 8px; - list-style: none; - padding-inline-start: 0; } .c6 { @@ -3794,9 +3744,6 @@ exports[`Autocomplete snapshots renders with a custom text input component 1`] = .c1 { font-size: 14px; line-height: 20px; - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; } .c1[data-has-active-descendant], @@ -3816,313 +3763,306 @@ exports[`Autocomplete snapshots renders with a custom text input component 1`] = className="c0" >
    -
    -
      +
      -
    • -
        -
      • -
        -
        - - zero - -
        -
        -
        • -
      • +
      • +
    +
    +
    +
    +
    -
    -
    - - one - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - two - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - three - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - four - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - five - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - six - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - seven - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - twenty - -
    -
    - -
  • +
    • +
    +
    +
    +
    +
    -
    -
    - - twentyone - -
    -
    - - - - + twentyone + +
    +
    +
    + , diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap index a02ee2f8b3b..b337f4f29d5 100644 --- a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap +++ b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap @@ -86,7 +86,7 @@ exports[`SelectPanel renders consistently 1`] = `