diff --git a/site/docs/components/checkbox/examples.mdx b/site/docs/components/checkbox/examples.mdx index b5ec42eab28..fade61d6adc 100644 --- a/site/docs/components/checkbox/examples.mdx +++ b/site/docs/components/checkbox/examples.mdx @@ -143,5 +143,13 @@ For more information, refer to the [form pattern](/salt/patterns/forms). You can add a description to a checkbox using a `StackLayout` in the `label` prop. + + + + +## Controlled + +A controlled CheckboxGroup will rely on the application to manually set the value through the `checkedValues` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `checkedValues` prop. + diff --git a/site/docs/components/dropdown/examples.mdx b/site/docs/components/dropdown/examples.mdx index b4ef4c91326..2222aac496e 100644 --- a/site/docs/components/dropdown/examples.mdx +++ b/site/docs/components/dropdown/examples.mdx @@ -180,5 +180,13 @@ To style `Dropdown` with a full border, set `bordered={true}`. We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background). + + + + +## Controlled + +A controlled Dropdown will rely on the application to manually set the selected values through the `selected` prop. The `onSelectionChange` event should be used to read the new selected values and decide what the next values should be. This value is updated by changing the `selected` prop. + diff --git a/site/docs/components/input/examples.mdx b/site/docs/components/input/examples.mdx index 046d66cdb4e..9bd7637059a 100644 --- a/site/docs/components/input/examples.mdx +++ b/site/docs/components/input/examples.mdx @@ -120,5 +120,13 @@ To style Input with a full border, set `bordered={true}`. We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background). + + + + +## Controlled + +A controlled Input will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop. + diff --git a/site/docs/components/list-box/examples.mdx b/site/docs/components/list-box/examples.mdx index 7bb03967f7a..de994f5cee8 100644 --- a/site/docs/components/list-box/examples.mdx +++ b/site/docs/components/list-box/examples.mdx @@ -69,5 +69,13 @@ You can supply static content as children to the `Option` component. This can be - Users can benefit from seeing a particular visual with list items. Customize the display as you see fit. For example, if displaying a list of contacts, it may help to provide headshots alongside the option text. - Place any visual support such as icons, country symbols or avatars to the left of the option text. + + + + +## Controlled + +A controlled List Box will rely on the application to manually set the value through the `selected` prop. The `onSelectionChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `selected` prop. + diff --git a/site/docs/components/multiline-input/examples.mdx b/site/docs/components/multiline-input/examples.mdx index 98a65e96203..9fa41da8692 100644 --- a/site/docs/components/multiline-input/examples.mdx +++ b/site/docs/components/multiline-input/examples.mdx @@ -128,5 +128,12 @@ If you've disabled the containing multiline input or set it to a read-only state To control the number of maximum rows visible, you can set a max height for the multiline input. + + + +## Controlled + +A controlled Multiline Input will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop. + diff --git a/site/docs/components/radio-button/examples.mdx b/site/docs/components/radio-button/examples.mdx index b5fd6cdb6ae..15fe7663be4 100644 --- a/site/docs/components/radio-button/examples.mdx +++ b/site/docs/components/radio-button/examples.mdx @@ -123,5 +123,13 @@ For more information, refer to the [form field](/salt/patterns/forms) guidance. You can add a description to a checkbox using a `StackLayout` in the `label` prop. + + + + +## Controlled + +A controlled Radio will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop. + diff --git a/site/docs/components/switch/examples.mdx b/site/docs/components/switch/examples.mdx index 5ab9688eeab..8cb4eaa610c 100644 --- a/site/docs/components/switch/examples.mdx +++ b/site/docs/components/switch/examples.mdx @@ -63,5 +63,13 @@ Use a disabled checked state for switches that have permissions, dependencies or Use a form field if you need a left aligned label, avoid also having a switch label. + + + + +## Controlled + +A controlled Switch will rely on the application to manually set the value through the `checked` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `checked` prop. + diff --git a/site/docs/components/toggle-button/examples.mdx b/site/docs/components/toggle-button/examples.mdx index ae1a0ac093e..fc9404a7f4d 100644 --- a/site/docs/components/toggle-button/examples.mdx +++ b/site/docs/components/toggle-button/examples.mdx @@ -75,5 +75,13 @@ You can disable toggle buttons if required by context or user permissions. Disab By default, a toggle button group has horizontal alignment. If you can present the options in a stacked layout, orientate the group vertically using the `orientation=”vertical”` prop. + + + + +## Controlled + +A controlled Toggle Button will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop. + diff --git a/site/src/examples/checkbox/Controlled.tsx b/site/src/examples/checkbox/Controlled.tsx new file mode 100644 index 00000000000..739c214797e --- /dev/null +++ b/site/src/examples/checkbox/Controlled.tsx @@ -0,0 +1,22 @@ +import { Checkbox, CheckboxGroup } from "@salt-ds/core"; +import { type ChangeEvent, type ReactElement, useState } from "react"; + +export const Controlled = (): ReactElement => { + const [checkedValues, setCheckedValues] = useState([]); + + const handleChange = (event: ChangeEvent) => { + const value = event.target.value; + const updatedCheckedValues = checkedValues.includes(value) + ? checkedValues.filter((checkedValue) => checkedValue !== value) + : [...checkedValues, value]; + setCheckedValues(updatedCheckedValues); + }; + + return ( + + + + + + ); +}; diff --git a/site/src/examples/checkbox/index.ts b/site/src/examples/checkbox/index.ts index cde140a5433..04d3bb2d401 100644 --- a/site/src/examples/checkbox/index.ts +++ b/site/src/examples/checkbox/index.ts @@ -11,3 +11,4 @@ export * from "./WrapGroup"; export * from "./Indeterminate"; export * from "./WithFormField"; export * from "./WithDescription"; +export * from "./Controlled"; diff --git a/site/src/examples/dropdown/Controlled.tsx b/site/src/examples/dropdown/Controlled.tsx new file mode 100644 index 00000000000..4f4fa3f8491 --- /dev/null +++ b/site/src/examples/dropdown/Controlled.tsx @@ -0,0 +1,26 @@ +import { Dropdown, Option } from "@salt-ds/core"; +import { type ReactElement, type SyntheticEvent, useState } from "react"; +import { shortColorData } from "./exampleData"; + +export const Controlled = (): ReactElement => { + const [selected, setSelected] = useState([]); + + const handleSelectionChange = ( + event: SyntheticEvent, + newSelected: string[], + ) => { + setSelected(newSelected); + }; + + return ( + + {shortColorData.map((color) => ( + + ); +}; diff --git a/site/src/examples/dropdown/index.ts b/site/src/examples/dropdown/index.ts index 20c2b82e2fa..010e7ba9d50 100644 --- a/site/src/examples/dropdown/index.ts +++ b/site/src/examples/dropdown/index.ts @@ -14,3 +14,4 @@ export * from "./WithFormField"; export * from "./ObjectValues"; export * from "./SelectAll"; export * from "./Bordered"; +export * from "./Controlled"; diff --git a/site/src/examples/input/Controlled.tsx b/site/src/examples/input/Controlled.tsx new file mode 100644 index 00000000000..55e0ae3179b --- /dev/null +++ b/site/src/examples/input/Controlled.tsx @@ -0,0 +1,15 @@ +import { Input } from "@salt-ds/core"; +import { type ChangeEvent, type ReactElement, useState } from "react"; + +export const Controlled = (): ReactElement => { + const [value, setValue] = useState("Value"); + + const handleChange = (event: ChangeEvent) => { + const value = event.target.value; + setValue(value); + }; + + return ( + + ); +}; diff --git a/site/src/examples/input/index.ts b/site/src/examples/input/index.ts index a6593206e5b..74750bc9202 100644 --- a/site/src/examples/input/index.ts +++ b/site/src/examples/input/index.ts @@ -11,3 +11,4 @@ export * from "./Primary"; export * from "./TextAlignment"; export * from "./Validation"; export * from "./Bordered"; +export * from "./Controlled"; diff --git a/site/src/examples/list-box/Controlled.tsx b/site/src/examples/list-box/Controlled.tsx new file mode 100644 index 00000000000..1fb9fe0f090 --- /dev/null +++ b/site/src/examples/list-box/Controlled.tsx @@ -0,0 +1,27 @@ +import { ListBox, Option } from "@salt-ds/core"; +import { type ReactElement, type SyntheticEvent, useState } from "react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/list-box/exampleData.ts +import { shortColorData } from "./exampleData"; + +export const Controlled = (): ReactElement => { + const [selected, setSelected] = useState([]); + + const handleSelectionChange = ( + event: SyntheticEvent, + newSelected: string[], + ) => { + setSelected(newSelected); + }; + + return ( + + {shortColorData.slice(0, 5).map((color) => ( + + ); +}; diff --git a/site/src/examples/list-box/index.ts b/site/src/examples/list-box/index.ts index 20d81e77ac6..674dd00b45e 100644 --- a/site/src/examples/list-box/index.ts +++ b/site/src/examples/list-box/index.ts @@ -5,3 +5,4 @@ export * from "./DisabledOption"; export * from "./Bordered"; export * from "./Scrolling"; export * from "./ComplexOptions"; +export * from "./Controlled"; diff --git a/site/src/examples/multiline-input/Controlled.tsx b/site/src/examples/multiline-input/Controlled.tsx new file mode 100644 index 00000000000..bf243a0a454 --- /dev/null +++ b/site/src/examples/multiline-input/Controlled.tsx @@ -0,0 +1,19 @@ +import { MultilineInput } from "@salt-ds/core"; +import { type ChangeEvent, type ReactElement, useState } from "react"; + +export const Controlled = (): ReactElement => { + const [value, setValue] = useState("Value"); + + const handleChange = (event: ChangeEvent) => { + const value = event.target.value; + setValue(value); + }; + + return ( + + ); +}; diff --git a/site/src/examples/multiline-input/index.ts b/site/src/examples/multiline-input/index.ts index 3a03751975a..0d88aed3d7b 100644 --- a/site/src/examples/multiline-input/index.ts +++ b/site/src/examples/multiline-input/index.ts @@ -10,3 +10,4 @@ export * from "./Secondary"; export * from "./StaticAdornments"; export * from "./ValidationStatus"; export * from "./MaxHeight"; +export * from "./Controlled"; diff --git a/site/src/examples/radio-button/Controlled.tsx b/site/src/examples/radio-button/Controlled.tsx new file mode 100644 index 00000000000..d3c98aa67dc --- /dev/null +++ b/site/src/examples/radio-button/Controlled.tsx @@ -0,0 +1,19 @@ +import { RadioButton, RadioButtonGroup } from "@salt-ds/core"; +import { type ChangeEvent, type ReactElement, useState } from "react"; + +export const Controlled = (): ReactElement => { + const [value, setValue] = useState(""); + + const handleChange = (event: ChangeEvent) => { + const updatedValue = event.target.value; + setValue(updatedValue); + }; + + return ( + + + + + + ); +}; diff --git a/site/src/examples/radio-button/index.ts b/site/src/examples/radio-button/index.ts index 085a3123d27..e7eb1598e31 100644 --- a/site/src/examples/radio-button/index.ts +++ b/site/src/examples/radio-button/index.ts @@ -9,3 +9,4 @@ export * from "./Wrap"; export * from "./LongText"; export * from "./WithFormField"; export * from "./WithDescription"; +export * from "./Controlled"; diff --git a/site/src/examples/switch/Controlled.tsx b/site/src/examples/switch/Controlled.tsx new file mode 100644 index 00000000000..252a0d437a5 --- /dev/null +++ b/site/src/examples/switch/Controlled.tsx @@ -0,0 +1,15 @@ +import { Switch } from "@salt-ds/core"; +import { type ChangeEvent, type ReactElement, useState } from "react"; + +export const Controlled = (): ReactElement => { + const [checked, setChecked] = useState(false); + + const handleChange = (event: ChangeEvent) => { + const updatedChecked = event.target.checked; + setChecked(updatedChecked); + }; + + return ( + + ); +}; diff --git a/site/src/examples/switch/index.ts b/site/src/examples/switch/index.ts index d83ea97585b..446b91f0234 100644 --- a/site/src/examples/switch/index.ts +++ b/site/src/examples/switch/index.ts @@ -3,3 +3,4 @@ export * from "./DefaultChecked"; export * from "./DisabledChecked"; export * from "./Disabled"; export * from "./LeftAlignedLabel"; +export * from "./Controlled"; diff --git a/site/src/examples/toggle-button/Controlled.tsx b/site/src/examples/toggle-button/Controlled.tsx new file mode 100644 index 00000000000..fd8ea142b2a --- /dev/null +++ b/site/src/examples/toggle-button/Controlled.tsx @@ -0,0 +1,29 @@ +import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core"; +import { AppSwitcherIcon, FolderClosedIcon, VisibleIcon } from "@salt-ds/icons"; +import { type ReactElement, type SyntheticEvent, useState } from "react"; + +export const Controlled = (): ReactElement => { + const [value, setValue] = useState(""); + + const handleChange = (event: SyntheticEvent) => { + const updatedValue = event.currentTarget.value; + setValue(updatedValue); + }; + + return ( + + + + All + + + + Active + + + + Archived + + + ); +}; diff --git a/site/src/examples/toggle-button/index.ts b/site/src/examples/toggle-button/index.ts index adfbcb18145..278281d8b06 100644 --- a/site/src/examples/toggle-button/index.ts +++ b/site/src/examples/toggle-button/index.ts @@ -4,3 +4,4 @@ export * from "./ToggleButtonGroupVertical"; export * from "./Disabled"; export * from "./IconOnly"; export * from "./TextOnly"; +export * from "./Controlled";