diff --git a/packages/react-core/src/components/Checkbox/examples/Checkbox.md b/packages/react-core/src/components/Checkbox/examples/Checkbox.md index ec4499f7693..2d52497d450 100644 --- a/packages/react-core/src/components/Checkbox/examples/Checkbox.md +++ b/packages/react-core/src/components/Checkbox/examples/Checkbox.md @@ -20,6 +20,20 @@ propComponents: ['Checkbox'] ``` +### Reversed + +```ts file="./CheckboxReversed.tsx" + +``` + +### Label wraps + +You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `isLabelWrapped` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label. + +```ts file="./CheckboxLabelWraps.tsx" + +``` + ### Disabled ```ts file='./CheckboxDisabled.tsx' diff --git a/packages/react-core/src/components/Checkbox/examples/CheckboxLabelWraps.tsx b/packages/react-core/src/components/Checkbox/examples/CheckboxLabelWraps.tsx new file mode 100644 index 00000000000..256d9de82b7 --- /dev/null +++ b/packages/react-core/src/components/Checkbox/examples/CheckboxLabelWraps.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Checkbox } from '@patternfly/react-core'; + +export const CheckboxLabelWraps: React.FunctionComponent = () => ( + +); diff --git a/packages/react-core/src/components/Checkbox/examples/CheckboxReversed.tsx b/packages/react-core/src/components/Checkbox/examples/CheckboxReversed.tsx new file mode 100644 index 00000000000..58b301be18b --- /dev/null +++ b/packages/react-core/src/components/Checkbox/examples/CheckboxReversed.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Checkbox } from '@patternfly/react-core'; + +export const CheckboxReversed: React.FunctionComponent = () => ( + +); diff --git a/packages/react-core/src/components/Radio/examples/Radio.md b/packages/react-core/src/components/Radio/examples/Radio.md index 638ec396540..54eb726e610 100644 --- a/packages/react-core/src/components/Radio/examples/Radio.md +++ b/packages/react-core/src/components/Radio/examples/Radio.md @@ -12,44 +12,55 @@ ouia: true ### Controlled ```ts file="./RadioControlled.tsx" + ``` ### Uncontrolled ```ts file="./RadioUncontrolled.tsx" + ``` ### Reversed ```ts file="./RadioReversed.tsx" + ``` ### Label wraps +You can expand the clickable area of a radio so that it spans wider than the radio label by adding the `isLabelWrapped` property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label. + ```ts file="./RadioLabelWraps.tsx" + ``` ### Disabled ```ts file="./RadioDisabled.tsx" + ``` ### With description ```ts file="./RadioWithDescription.tsx" + ``` ### With body ```ts file="./RadioWithBody.tsx" + ``` ### With description and body ```ts file="./RadioWithDescriptionAndBody.tsx" + ``` ### Standalone input ```ts file="./RadioStandaloneInput.tsx" + ```