Skip to content

Commit

Permalink
docs(Checkbox): add examples of reversed and label wraps
Browse files Browse the repository at this point in the history
  • Loading branch information
adamviktora committed Apr 30, 2024
1 parent f95fee9 commit cc5cf04
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 0 deletions.
14 changes: 14 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/Checkbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,20 @@ propComponents: ['Checkbox']

```

### Reversed

```ts file="./CheckboxReversed.tsx"

```

### Label wraps

When the input is wrapped in a label, larger area can be clicked to check the box, including the space between the checkbox and its description.

```ts file="./CheckboxLabelWraps.tsx"

```

### Disabled

```ts file='./CheckboxDisabled.tsx'
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxLabelWraps: React.FunctionComponent = () => (
<Checkbox
isLabelWrapped
label="Label wraps input example"
id="checkbox-label-wraps-input"
name="checkbox-label-wraps-input"
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxReversed: React.FunctionComponent = () => (
<Checkbox isLabelBeforeButton label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
);
11 changes: 11 additions & 0 deletions packages/react-core/src/components/Radio/examples/Radio.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,55 @@ ouia: true
### Controlled

```ts file="./RadioControlled.tsx"

```

### Uncontrolled

```ts file="./RadioUncontrolled.tsx"

```

### Reversed

```ts file="./RadioReversed.tsx"

```

### Label wraps

When the input is wrapped in a label, larger area can be clicked to check the radio, including the space between the radio and its description.

```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"

```

0 comments on commit cc5cf04

Please sign in to comment.