From 80caa50898b32379cfa21220613314094bf18d7f Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 11:28:30 -0500 Subject: [PATCH 01/12] passes appearance prop to properly render validation --- docs/content/FormControl.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index 3ca1e7ef097..ae1bffa3d0a 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -204,9 +204,11 @@ const ValidationExample = () => { GitHub handle {validationResult === 'noSpaces' && ( - GitHub handles cannot contain spaces + GitHub handles cannot contain spaces + )} + {validationResult === 'validName' && ( + Valid name )} - {validationResult === 'validName' && Valid name} With or without "@". For example "monalisa" or "@monalisa" ) From 6e2760d637101cc326b93a8b832e530ddad24f34 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 11:35:57 -0500 Subject: [PATCH 02/12] changes 'appearance' prop to 'variant', and adds that to props table --- docs/content/FormControl.mdx | 9 +++++++-- src/FormControl/FormControl.tsx | 2 +- src/FormControl/_FormControlValidation.tsx | 2 +- src/__tests__/FormControl.test.tsx | 8 ++++---- src/stories/FormControl.stories.tsx | 6 +++--- 5 files changed, 16 insertions(+), 11 deletions(-) diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index ae1bffa3d0a..39fa822cf1e 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -204,10 +204,10 @@ const ValidationExample = () => { GitHub handle {validationResult === 'noSpaces' && ( - GitHub handles cannot contain spaces + GitHub handles cannot contain spaces )} {validationResult === 'validName' && ( - Valid name + Valid name )} With or without "@". For example "monalisa" or "@monalisa" @@ -309,6 +309,11 @@ Use `FormControl.Validation` to render contextual validation information if nece type="React.ReactNode" description="The content (usually just text) that is rendered to give contextual info about the validation result for the field" /> + diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx index 01645f1b97c..e108d2d8096 100644 --- a/src/FormControl/FormControl.tsx +++ b/src/FormControl/FormControl.tsx @@ -43,7 +43,7 @@ const FormControl = ({children, disabled, id: idProp, required}: FormControlProp child => React.isValidElement(child) && child.type === FormControlLabel ) const validationMessageId = validationChild ? `${id}-validationMsg` : '' - const validationStatus = React.isValidElement(validationChild) ? validationChild.props.appearance : undefined + const validationStatus = React.isValidElement(validationChild) ? validationChild.props.variant : undefined const captionId = captionChildren?.length ? `${id}-caption` : undefined const InputComponent = React.Children.toArray(children).find(child => expectedInputComponents.some(inputComponent => React.isValidElement(child) && child.type === inputComponent) diff --git a/src/FormControl/_FormControlValidation.tsx b/src/FormControl/_FormControlValidation.tsx index 28f53a332d3..620fa2a061d 100644 --- a/src/FormControl/_FormControlValidation.tsx +++ b/src/FormControl/_FormControlValidation.tsx @@ -3,7 +3,7 @@ import {FormValidationStatus} from '../utils/types/FormValidationStatus' import {Slot} from './slots' export interface FormControlValidationProps { - appearance: FormValidationStatus + variant: FormValidationStatus } const FormControlValidation: React.FC = ({children}) => ( diff --git a/src/__tests__/FormControl.test.tsx b/src/__tests__/FormControl.test.tsx index ec5ff6002f9..34786c56fa0 100644 --- a/src/__tests__/FormControl.test.tsx +++ b/src/__tests__/FormControl.test.tsx @@ -104,7 +104,7 @@ describe('FormControl', () => { {LABEL_TEXT} - {ERROR_TEXT} + {ERROR_TEXT} ) @@ -119,7 +119,7 @@ describe('FormControl', () => { {LABEL_TEXT} - {ERROR_TEXT} + {ERROR_TEXT} ) @@ -243,7 +243,7 @@ describe('FormControl', () => { {LABEL_TEXT} - {ERROR_TEXT} + {ERROR_TEXT} ) @@ -394,7 +394,7 @@ describe('FormControl', () => { {LABEL_TEXT} - Some error + Some error {CAPTION_TEXT} diff --git a/src/stories/FormControl.stories.tsx b/src/stories/FormControl.stories.tsx index 55f7a287142..1fd255c41c7 100644 --- a/src/stories/FormControl.stories.tsx +++ b/src/stories/FormControl.stories.tsx @@ -19,7 +19,7 @@ export default { defaultValue: false } }, - parameters: {controls: {exclude: ['variant', 'id']}}, + parameters: {controls: {exclude: ['id']}}, decorators: [ Story => { return ( @@ -58,7 +58,7 @@ export const WithValidation = (args: Args) => ( Name - Your first name cannot contain spaces + Your first name cannot contain spaces ) WithValidation.parameters = {controls: {exclude: ['id']}} @@ -67,7 +67,7 @@ export const WithValidationAndCaption = (args: Args) => ( Name - Your first name cannot contain spaces + Your first name cannot contain spaces Hint: your first name ) From 88a77bf0bca7adbd8b3a17b772529f5d1fb6e40d Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 11:40:34 -0500 Subject: [PATCH 03/12] adds sx prop --- src/FormControl/FormControl.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx index e108d2d8096..987e2e0245e 100644 --- a/src/FormControl/FormControl.tsx +++ b/src/FormControl/FormControl.tsx @@ -8,6 +8,7 @@ import {Slots} from './slots' import ValidationAnimationContainer from '../_ValidationAnimationContainer' import {get} from '../constants' import FormControlLeadingVisual from './_FormControlLeadingVisual' +import {SxProp} from '../sx' export type FormControlProps = { children?: React.ReactNode @@ -23,14 +24,14 @@ export type FormControlProps = { * If true, the user must specify a value for the input before the owning form can be submitted */ required?: boolean -} +} & SxProp export interface FormControlContext extends Pick { captionId: string validationMessageId: string } -const FormControl = ({children, disabled, id: idProp, required}: FormControlProps) => { +const FormControl = ({children, disabled, id: idProp, required, sx}: FormControlProps) => { const expectedInputComponents = [Autocomplete, Checkbox, Radio, Select, TextInput, TextInputWithTokens, Textarea] const id = useSSRSafeId(idProp) const validationChild = React.Children.toArray(children).find(child => @@ -132,7 +133,7 @@ const FormControl = ({children, disabled, id: idProp, required}: FormControlProp const isLabelHidden = React.isValidElement(slots.Label) && slots.Label.props.visuallyHidden return isChoiceInput ? ( - + input': {marginLeft: 0, marginRight: 0}}}> {React.isValidElement(InputComponent) && React.cloneElement(InputComponent, { @@ -178,7 +179,7 @@ const FormControl = ({children, disabled, id: idProp, required}: FormControlProp display="flex" flexDirection="column" width="100%" - sx={isLabelHidden ? {'> *:not(label) + *': {marginTop: 2}} : {'> * + *': {marginTop: 2}}} + sx={{...sx, ...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 2}} : {'> * + *': {marginTop: 2}})}} > {React.Children.toArray(children).filter( child => From 7e8a1c76929ae3a92af0bf986e54023b6152f346 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 11:44:04 -0500 Subject: [PATCH 04/12] adds changeset --- .changeset/silly-humans-float.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silly-humans-float.md diff --git a/.changeset/silly-humans-float.md b/.changeset/silly-humans-float.md new file mode 100644 index 00000000000..566dfc04351 --- /dev/null +++ b/.changeset/silly-humans-float.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Adds 'sx' prop, renames 'appearance' prop, fixes docs rendering mistake From 6e2f34876ba6aa353dc7153da8ade4f63248fe91 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 11:51:33 -0500 Subject: [PATCH 05/12] rm stray quotes and backticks --- docs/content/FormControl.mdx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index 39fa822cf1e..d6f4ec104bf 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -155,7 +155,6 @@ render(DifferentInputs) We encourage using `FormControl` alongside all standalone form components like [`TextInput`](/TextInput), as every input must have a corresponding label to be accessible to assistive technology. -`` `FormControl` also provides an interface for showing a hint text caption and a validation message, and associating those with the input for assistive technology. @@ -317,9 +316,11 @@ Use `FormControl.Validation` to render contextual validation information if nece - Validation messages should not be shown for an individual checkbox or radio form control, so `FormControl.Validation` - will not be rendered when a `Checkbox` or `Radio` is not a child of `FormControl`. Validation messages for checkbox - and radio selections should only apply to the entire group of inputs. + +Validation messages should not be shown for an individual checkbox or radio form control, so `FormControl.Validation` +will not be rendered when a `Checkbox` or `Radio` is not a child of `FormControl`. Validation messages for checkbox +and radio selections should only apply to the entire group of inputs. + ### FormControl.LeadingVisual From c4557055f6249e27e49d145ec3ae3fa94b865638 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 11:52:49 -0500 Subject: [PATCH 06/12] Update .changeset/silly-humans-float.md Co-authored-by: Cole Bemis --- .changeset/silly-humans-float.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/silly-humans-float.md b/.changeset/silly-humans-float.md index 566dfc04351..5ea51552aac 100644 --- a/.changeset/silly-humans-float.md +++ b/.changeset/silly-humans-float.md @@ -2,4 +2,6 @@ '@primer/react': patch --- -Adds 'sx' prop, renames 'appearance' prop, fixes docs rendering mistake +FormControl: +* Add `sx` prop +* Rename `appearance` prop to `variant` From 5f7d10aacd91ca9d3e10196d1100053ee3b90f16 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 11:57:16 -0500 Subject: [PATCH 07/12] shows variant prop as required in docs --- docs/content/FormControl.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index d6f4ec104bf..867a26cc89c 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -309,6 +309,7 @@ Use `FormControl.Validation` to render contextual validation information if nece description="The content (usually just text) that is rendered to give contextual info about the validation result for the field" /> Date: Wed, 9 Feb 2022 12:04:45 -0500 Subject: [PATCH 08/12] Update docs/content/FormControl.mdx Co-authored-by: Cole Bemis --- docs/content/FormControl.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index 867a26cc89c..cff4a01fe68 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -311,7 +311,7 @@ Use `FormControl.Validation` to render contextual validation information if nece From db6d9a6516ce071270a702996454bd8cee220536 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 13:10:37 -0500 Subject: [PATCH 09/12] adds sx prop to all child components --- src/FormControl/FormControl.tsx | 10 ++------ src/FormControl/_FormControlCaption.tsx | 5 ++-- src/FormControl/_FormControlLabel.tsx | 9 ++++--- src/FormControl/_FormControlLeadingVisual.tsx | 25 ++++++++++++++++++- src/FormControl/_FormControlValidation.tsx | 17 ++++++++++--- src/_InputCaption.tsx | 9 ++++--- src/_InputLabel.tsx | 6 +++-- src/_InputValidation.tsx | 10 +++++--- 8 files changed, 62 insertions(+), 29 deletions(-) diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx index 987e2e0245e..f4060024534 100644 --- a/src/FormControl/FormControl.tsx +++ b/src/FormControl/FormControl.tsx @@ -179,7 +179,7 @@ const FormControl = ({children, disabled, id: idProp, required, sx}: FormControl display="flex" flexDirection="column" width="100%" - sx={{...sx, ...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 2}} : {'> * + *': {marginTop: 2}})}} + sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 2}} : {'> * + *': {marginTop: 2}}), ...sx}} > {React.Children.toArray(children).filter( child => @@ -195,13 +195,7 @@ const FormControl = ({children, disabled, id: idProp, required, sx}: FormControl validationStatus, ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' ') })} - {validationChild && ( - - - {slots.Validation} - - - )} + {validationChild && {slots.Validation}} {slots.Caption} ) diff --git a/src/FormControl/_FormControlCaption.tsx b/src/FormControl/_FormControlCaption.tsx index 07ec2b4f4e2..26ab27a5162 100644 --- a/src/FormControl/_FormControlCaption.tsx +++ b/src/FormControl/_FormControlCaption.tsx @@ -1,12 +1,13 @@ import React from 'react' +import {SxProp} from '../sx' import InputCaption from '../_InputCaption' import {FormControlContext} from './FormControl' import {Slot} from './slots' -const FormControlCaption: React.FC = ({children}) => ( +const FormControlCaption: React.FC = ({children, sx}) => ( {({captionId, disabled}: FormControlContext) => ( - + {children} )} diff --git a/src/FormControl/_FormControlLabel.tsx b/src/FormControl/_FormControlLabel.tsx index 8808de852aa..e6a0021f095 100644 --- a/src/FormControl/_FormControlLabel.tsx +++ b/src/FormControl/_FormControlLabel.tsx @@ -1,19 +1,20 @@ import React from 'react' +import {SxProp} from '../sx' import InputLabel from '../_InputLabel' import {FormControlContext} from './FormControl' import {Slot} from './slots' -export interface Props { +export type Props = { /** * Whether the label should be visually hidden */ visuallyHidden?: boolean -} +} & SxProp -const FormControlLabel: React.FC = ({children, visuallyHidden}) => ( +const FormControlLabel: React.FC = ({children, visuallyHidden, sx}) => ( {({disabled, id, required}: FormControlContext) => ( - + {children} )} diff --git a/src/FormControl/_FormControlLeadingVisual.tsx b/src/FormControl/_FormControlLeadingVisual.tsx index ecd9d8caa50..6936ed7ad7a 100644 --- a/src/FormControl/_FormControlLeadingVisual.tsx +++ b/src/FormControl/_FormControlLeadingVisual.tsx @@ -1,6 +1,29 @@ import React from 'react' +import {Box} from '..' +import {get} from '../constants' +import {SxProp} from '../sx' +import {FormControlContext} from './FormControl' import {Slot} from './slots' -const FormControlLeadingVisual: React.FC = ({children}) => {children} +const FormControlLeadingVisual: React.FC = ({children, sx}) => ( + + {({disabled, captionId}: FormControlContext) => ( + *': { + minWidth: captionId ? get('fontSizes.4') : get('fontSizes.2'), + minHeight: captionId ? get('fontSizes.4') : get('fontSizes.2'), + fill: 'currentColor' + }, + ...sx + }} + ml={2} + > + {children} + + )} + +) export default FormControlLeadingVisual diff --git a/src/FormControl/_FormControlValidation.tsx b/src/FormControl/_FormControlValidation.tsx index 620fa2a061d..7ea94e25ec3 100644 --- a/src/FormControl/_FormControlValidation.tsx +++ b/src/FormControl/_FormControlValidation.tsx @@ -1,13 +1,22 @@ import React from 'react' +import {SxProp} from '../sx' import {FormValidationStatus} from '../utils/types/FormValidationStatus' +import InputValidation from '../_InputValidation' +import {FormControlContext} from './FormControl' import {Slot} from './slots' -export interface FormControlValidationProps { +export type FormControlValidationProps = { variant: FormValidationStatus -} +} & SxProp -const FormControlValidation: React.FC = ({children}) => ( - {children} +const FormControlValidation: React.FC = ({children, variant, sx}) => ( + + {({validationMessageId}: FormControlContext) => ( + + {children} + + )} + ) export default FormControlValidation diff --git a/src/_InputCaption.tsx b/src/_InputCaption.tsx index 56d0e1cb9b5..012e7c00930 100644 --- a/src/_InputCaption.tsx +++ b/src/_InputCaption.tsx @@ -1,7 +1,8 @@ import React from 'react' import {Text} from '.' +import {SxProp} from './sx' -interface Props { +type Props = { /** * The unique identifier used to associate the caption with an input */ @@ -10,10 +11,10 @@ interface Props { * Whether the input associated with this caption is disabled */ disabled?: boolean -} +} & SxProp -const InputCaption: React.FC = ({children, disabled, id}) => ( - +const InputCaption: React.FC = ({children, disabled, id, sx}) => ( + {children} ) diff --git a/src/_InputLabel.tsx b/src/_InputLabel.tsx index 147aecb5530..491be8a7d41 100644 --- a/src/_InputLabel.tsx +++ b/src/_InputLabel.tsx @@ -1,5 +1,6 @@ import React from 'react' import {Box} from '.' +import {SxProp} from './sx' import VisuallyHidden from './_VisuallyHidden' interface Props extends React.HTMLProps { @@ -8,7 +9,7 @@ interface Props extends React.HTMLProps { visuallyHidden?: boolean } -const InputLabel: React.FC = ({children, disabled, required, visuallyHidden, htmlFor}) => { +const InputLabel: React.FC = ({children, disabled, required, visuallyHidden, htmlFor, sx}) => { return ( = ({children, disabled, required, visuallyHidd fontSize: 1, display: 'block', color: disabled ? 'fg.muted' : 'fg.default', - cursor: 'pointer' + cursor: 'pointer', + ...sx }} > {required ? ( diff --git a/src/_InputValidation.tsx b/src/_InputValidation.tsx index fc9d20d34c1..20aa0fd30f6 100644 --- a/src/_InputValidation.tsx +++ b/src/_InputValidation.tsx @@ -1,12 +1,13 @@ import {AlertFillIcon, CheckCircleFillIcon, IconProps} from '@primer/octicons-react' import React from 'react' import {Box, Text} from '.' +import {SxProp} from './sx' import {FormValidationStatus} from './utils/types/FormValidationStatus' -interface Props { +type Props = { id: string validationStatus?: FormValidationStatus -} +} & SxProp const validationIconMap: Record, React.ComponentType> = { success: CheckCircleFillIcon, @@ -20,7 +21,7 @@ const validationColorMap: Record, string> warning: 'attention.fg' } -const InputValidation: React.FC = ({children, id, validationStatus}) => { +const InputValidation: React.FC = ({children, id, validationStatus, sx}) => { const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined const fgColor = validationStatus ? validationColorMap[validationStatus] : undefined @@ -34,7 +35,8 @@ const InputValidation: React.FC = ({children, id, validationStatus}) => { a: { color: 'currentColor', textDecoration: 'underline' - } + }, + ...sx }} > {IconComponent && ( From 6c7a2830e54581d2dcbba4f26494875735b16d08 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 13:14:25 -0500 Subject: [PATCH 10/12] lint fix --- src/FormControl/FormControl.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx index f4060024534..0091fc65a16 100644 --- a/src/FormControl/FormControl.tsx +++ b/src/FormControl/FormControl.tsx @@ -1,6 +1,5 @@ import React from 'react' import {Autocomplete, Box, Checkbox, Radio, Select, Textarea, TextInput, TextInputWithTokens, useSSRSafeId} from '..' -import InputValidation from '../_InputValidation' import FormControlCaption from './_FormControlCaption' import FormControlLabel from './_FormControlLabel' import FormControlValidation from './_FormControlValidation' From 1b4c6e4fd8f09aa8a7348519a3356125e5e5163c Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 13:59:28 -0500 Subject: [PATCH 11/12] adds sx prop to props tables --- docs/content/FormControl.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index cff4a01fe68..28660dde034 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -271,6 +271,7 @@ The container that handles the layout and passes the relevant IDs and ARIA attri defaultValue="false" description="If true, the user must specify a value for the input before the owning form can be submitted" /> + ### FormControl.Label @@ -284,6 +285,7 @@ A `FormControl.Label` must be passed for the field to be accessible to assistive defaultValue="false" description="Whether the label should be visually hidden" /> + ### FormControl.Caption @@ -296,6 +298,7 @@ A `FormControl.Label` must be passed for the field to be accessible to assistive type="React.ReactNode" description="The content (usually just text) that is rendered to give contextual info about the field" /> + ### FormControl.Validation @@ -314,6 +317,7 @@ Use `FormControl.Validation` to render contextual validation information if nece type="'error' | 'success' | 'warning'" description="Changes the visual style to match the validation status" /> + @@ -334,6 +338,7 @@ Use `FormControl.LeadingVisual` if the selectable option is easier to understand type="React.ReactNode" description="The visual to render before the choice input's label" /> + From 319e5ff5add2bed522fa4d92237b346456c0c030 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 9 Feb 2022 16:28:28 -0500 Subject: [PATCH 12/12] uses FormControl in form component docs that render a label --- docs/content/Autocomplete.mdx | 229 +++++++++------------------ docs/content/Checkbox.mdx | 99 +++++------- docs/content/Radio.mdx | 42 ++--- docs/content/Select.mdx | 24 ++- docs/content/TextInputWithTokens.mdx | 79 ++++----- docs/content/Textarea.mdx | 2 + 6 files changed, 176 insertions(+), 299 deletions(-) diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx index ef27c492407..a5a55aa63a6 100644 --- a/docs/content/Autocomplete.mdx +++ b/docs/content/Autocomplete.mdx @@ -54,12 +54,10 @@ A function may be passed to the `filterFn` prop if this default filtering behavi ### Basic example ```jsx live -<> - - Pick a branch - + + Pick a branch - + - + ``` ### Autocomplete.Input with a custom text input @@ -115,24 +112,10 @@ const CustomTextInputExample = () => { } return ( - <> - - Pick options - + + Pick options - + { selectedItemIds={selectedItemIds} onSelectedChange={onSelectedChange} selectionVariant="multiple" - aria-labelledby="autocompleteLabel-customInput" /> - + ) } @@ -162,19 +144,10 @@ render() ### Without `Autocomplete.Overlay` ```jsx live -<> - - Pick a branch - + + Pick a branch - + ) {text: 'visual-design-tweaks', id: 7} ]} selectedItemIds={[]} - aria-labelledby="autocompleteLabel-withoutOverlay" /> - + ``` #### Render items using `ActionList.Item` props @@ -247,24 +219,14 @@ const CustomRenderedItemExample = () => { } return ( - <> - - Pick labels - + + Pick labels { /> - + ) } @@ -315,17 +277,8 @@ const CustomSortAfterMenuClose = () => { isItemSelected(itemIdA) === isItemSelected(itemIdB) ? 0 : isItemSelected(itemIdA) ? 1 : -1 return ( - <> - - Pick branches - + + Pick branches @@ -348,7 +301,7 @@ const CustomSortAfterMenuClose = () => { /> - + ) } @@ -368,17 +321,8 @@ const CustomSearchFilter = () => { const customFilterFn = item => item.text.includes(filterVal) return ( - <> - - Pick a branch - + + Pick a branch @@ -399,7 +343,7 @@ const CustomSearchFilter = () => { /> - + ) } @@ -432,72 +376,55 @@ const InOverlayWithCustomScrollContainerRef = () => { side="inside-top" renderAnchor={props => Pick branches} > - - Pick branches - - - - - + Pick branches + + + + - - - + padding: '0', + boxShadow: 'none', + ':focus-within': { + border: '0', + boxShadow: 'none' + } + }} + /> + + + + - - + + ) } @@ -531,11 +458,9 @@ const MultiSelect = () => { const getItemById = id => items.find(item => item.id === id) return ( - -
- - Pick branches - + + + Pick branches @@ -548,7 +473,7 @@ const MultiSelect = () => { /> -
+
Selected items:
@@ -603,11 +528,9 @@ const MultiSelectAddNewItem = () => { } return ( - -
- - Pick or add branches - + + + Pick or add branches @@ -635,7 +558,7 @@ const MultiSelectAddNewItem = () => { /> -
+
Selected items:
diff --git a/docs/content/Checkbox.mdx b/docs/content/Checkbox.mdx index 14d9ed86b3e..472e13132da 100644 --- a/docs/content/Checkbox.mdx +++ b/docs/content/Checkbox.mdx @@ -13,7 +13,7 @@ import {ComponentChecklist} from '../src/component-checklist' -**Use [ChoiceInputField](/ChoiceInputField) to display an accessible checkbox form field**. This `Checkbox` component is intended only as an ingredient for other custom components, or as a drop-in replacement for native HTML checkboxes outside of form use-cases. +**Use [FormControl](/FormControl) to display an accessible checkbox form field**. This `Checkbox` component is intended only as an ingredient for other custom components, or as a drop-in replacement for native HTML checkboxes outside of form use-cases. If you do use this component to build a custom checkbox, it should always be accompanied by a corresponding `