From 1d68feeea631789802c2a8caa319da317d8694bd Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 May 2023 15:33:26 -0700 Subject: [PATCH 1/7] Make placeholderText prop optional --- src/FilteredActionList/FilteredActionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx index 7a6cf8ef007..bf12933658d 100644 --- a/src/FilteredActionList/FilteredActionList.tsx +++ b/src/FilteredActionList/FilteredActionList.tsx @@ -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> From c60e573f8492b3b5f1883bb39c29a7980dbb14f9 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 May 2023 15:33:40 -0700 Subject: [PATCH 2/7] Add `inputLabel` prop --- src/SelectPanel/SelectPanel.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx index b0d53fc760c..9b134ee94d6 100644 --- a/src/SelectPanel/SelectPanel.tsx +++ b/src/SelectPanel/SelectPanel.tsx @@ -10,6 +10,7 @@ import {TextInputProps} from '../TextInput' import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay' import {useProvidedRefOrCreate} from '../hooks' +import {SearchIcon} from '@primer/octicons-react' interface SelectPanelSingleSelection { selected: ItemInput | undefined @@ -27,6 +28,8 @@ interface SelectPanelBaseProps { gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection', ) => void placeholder?: string + // TODO: Make `inputLabel` required in next major version + inputLabel?: string overlayProps?: Partial } @@ -53,6 +56,8 @@ export function SelectPanel({ renderAnchor = props => , anchorRef: externalAnchorRef, placeholder, + placeholderText = 'Filter items', + inputLabel = placeholderText, selected, onSelectedChange, filterValue: externalFilterValue, @@ -141,9 +146,11 @@ export function SelectPanel({ return { sx: {m: 2}, contrast: true, + leadingVisual: SearchIcon, + 'aria-label': inputLabel, ...textInputProps, } - }, [textInputProps]) + }, [inputLabel, textInputProps]) return ( Date: Mon, 22 May 2023 15:37:43 -0700 Subject: [PATCH 3/7] Add filter input description --- src/FilteredActionList/FilteredActionList.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx index bf12933658d..00fc8ae8bb6 100644 --- a/src/FilteredActionList/FilteredActionList.tsx +++ b/src/FilteredActionList/FilteredActionList.tsx @@ -1,19 +1,20 @@ +import type {ScrollIntoViewOptions} from '@primer/behaviors' +import {scrollIntoView} from '@primer/behaviors' import React, {KeyboardEventHandler, useCallback, useEffect, useRef} from 'react' -import {GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List' -import TextInput, {TextInputProps} from '../TextInput' +import styled from 'styled-components' 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 TextInput, {TextInputProps} from '../TextInput' import {get} from '../constants' +import {ActionList} from '../deprecated/ActionList' +import {GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List' +import {useFocusZone} from '../hooks/useFocusZone' +import {useId} from '../hooks/useId' import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate' +import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate' import useScrollFlash from '../hooks/useScrollFlash' -import {scrollIntoView} from '@primer/behaviors' -import type {ScrollIntoViewOptions} from '@primer/behaviors' +import {VisuallyHidden} from '../internal/components/VisuallyHidden' import {SxProp} from '../sx' -import {useId} from '../hooks/useId' const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8} @@ -60,6 +61,7 @@ export function FilteredActionList({ const inputRef = useProvidedRefOrCreate(providedInputRef) const activeDescendantRef = useRef() const listId = useId() + const inputDescriptionTextId = useId() const onInputKeyPress: KeyboardEventHandler = useCallback( event => { if (event.key === 'Enter' && activeDescendantRef.current) { @@ -119,9 +121,11 @@ export function FilteredActionList({ placeholder={placeholderText} aria-label={placeholderText} aria-controls={listId} + aria-describedby={inputDescriptionTextId} {...textInputProps} /> + Items will be filtered as you type {loading ? ( From a546be08aa7347ebedbde4c8f44bb3cfc187c3f8 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 May 2023 15:57:13 -0700 Subject: [PATCH 4/7] Create early-beds-whisper.md --- .changeset/early-beds-whisper.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/early-beds-whisper.md diff --git a/.changeset/early-beds-whisper.md b/.changeset/early-beds-whisper.md new file mode 100644 index 00000000000..b8e530c6b6c --- /dev/null +++ b/.changeset/early-beds-whisper.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +SelectPanel: Add filter input label and description From f50ad4a6de9f78d6a53a346cd6b98232d6b0ee52 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 22 May 2023 15:57:26 -0700 Subject: [PATCH 5/7] Document inputLabel prop --- src/SelectPanel/SelectPanel.docs.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/SelectPanel/SelectPanel.docs.json b/src/SelectPanel/SelectPanel.docs.json index 2eeb4498d60..0788b8df554 100644 --- a/src/SelectPanel/SelectPanel.docs.json +++ b/src/SelectPanel/SelectPanel.docs.json @@ -18,6 +18,12 @@ "defaultValue": "", "description": "" }, + { + "name": "inputLabel", + "type": "string", + "defaultValue": "Same as placeholderText", + "description": "The aria-label for the filter input" + } { "name": "overlayProps", "type": "Partial", @@ -56,4 +62,4 @@ } ], "subcomponents": [] -} \ No newline at end of file +} From f1a6afd808c4853589f9a6a60f8674f145742424 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 23 May 2023 11:04:28 -0700 Subject: [PATCH 6/7] Update src/SelectPanel/SelectPanel.docs.json --- src/SelectPanel/SelectPanel.docs.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SelectPanel/SelectPanel.docs.json b/src/SelectPanel/SelectPanel.docs.json index 0788b8df554..c901d755df4 100644 --- a/src/SelectPanel/SelectPanel.docs.json +++ b/src/SelectPanel/SelectPanel.docs.json @@ -23,7 +23,7 @@ "type": "string", "defaultValue": "Same as placeholderText", "description": "The aria-label for the filter input" - } + }, { "name": "overlayProps", "type": "Partial", From cf4c84e898cf348eae7123b194741c720f8e09ec Mon Sep 17 00:00:00 2001 From: colebemis Date: Tue, 23 May 2023 18:06:25 +0000 Subject: [PATCH 7/7] Update generated/components.json --- generated/components.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/generated/components.json b/generated/components.json index b6e0488b3fe..7da51136a31 100644 --- a/generated/components.json +++ b/generated/components.json @@ -3655,6 +3655,12 @@ "defaultValue": "", "description": "" }, + { + "name": "inputLabel", + "type": "string", + "defaultValue": "Same as placeholderText", + "description": "The aria-label for the filter input" + }, { "name": "overlayProps", "type": "Partial",