Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(styles): fix overflow styling on Radio Group and Checkbox and align styles with Pattern Library #1110

Merged
merged 26 commits into from
Jul 21, 2023
Merged

fix(styles): fix overflow styling on Radio Group and Checkbox and align styles with Pattern Library #1110

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
cd0b50d
fix: fix overfllow bug
yhafez Jul 16, 2023
ba3462c
fix: fix overflow bug
yhafez Jul 16, 2023
5bd19b1
chore: fix label
yhafez Jul 17, 2023
d47de1d
chore: address pr review
yhafez Jul 17, 2023
d666d1a
feat: sync up radio and checkbox styles with uxpin pattern library
yhafez Jul 19, 2023
8a1d83a
chore: change wrapper classed to Checbox__wrap and Radio__wrap
yhafez Jul 19, 2023
f00458e
Merge branch 'develop' into radio-group-wrap
yhafez Jul 19, 2023
6ae03f9
Update packages/styles/forms.css
yhafez Jul 20, 2023
fbd3eba
Update packages/styles/forms.css
yhafez Jul 20, 2023
9808d2c
chore: address pr review
yhafez Jul 20, 2023
de16132
feat: revise form.css to use more component-level variables
yhafez Jul 20, 2023
278a27d
chore: address pr review
yhafez Jul 20, 2023
5993768
chore: address pr review
yhafez Jul 20, 2023
41fd61b
chore: address pr review
yhafez Jul 21, 2023
25a6269
chore: address pr review
yhafez Jul 21, 2023
e8a335f
chore: address pr review
yhafez Jul 21, 2023
cdeceeb
chore: fix a11y job
yhafez Jul 21, 2023
e82c038
chore: address pr review
yhafez Jul 21, 2023
c648f1a
chore: address pr review
yhafez Jul 21, 2023
06ec325
chore: address pr review
yhafez Jul 21, 2023
33f2899
chore: address pr review
yhafez Jul 21, 2023
d89bf65
chore: address pr review
yhafez Jul 21, 2023
6a48424
chore: address pr review
yhafez Jul 21, 2023
1829f02
chore: address pr review
yhafez Jul 21, 2023
a88ae17
Update packages/styles/forms.css
yhafez Jul 21, 2023
574ddd0
chore: revert change
yhafez Jul 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions docs/pages/components/Checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,48 @@ import { Checkbox } from '@deque/cauldron-react'
</FieldWrap>
```

### Checkbox List

```jsx example
<FieldWrap>
<Checkbox
id="checkbox-list-unchecked"
label="Unchecked Checkbox"
name="unchecked-checkbox-list"
value="1"
/>
<Checkbox
checked
id="checkbox-list-checked"
label="Checked Checkbox"
name="checked-checkbox-list"
value="1"
/>
<Checkbox
disabled
id="checkbox-list-checkbox-disabled-unchecked"
label="Checked Disabled Checkbox"
name="disabled-checkbox-list-unchecked"
value="1"
/>
<Checkbox
disabled
checked
id="checkbox-list-checkbox-disabled-checked"
label="Unchecked Disabled Checkbox"
name="disabled-checkbox-list-checked"
value="1"
/>
yhafez marked this conversation as resolved.
Show resolved Hide resolved
<Checkbox
error="You must check this checkbox to continue"
id="checkbox-error-list"
label="Error Checkbox"
name="error-checkbox-list"
value="1"
/>
</FieldWrap>
```

### Checkbox with Description

```jsx example
Expand Down Expand Up @@ -115,6 +157,53 @@ import { Checkbox } from '@deque/cauldron-react'
</FieldWrap>
```

### Checkbox with Description List

```jsx example
<FieldWrap>
<Checkbox
id="description-checkbox-list-unchecked"
label="Description Checkbox Unchecked"
labelDescription="Additional text to describe the checkbox"
name="description-checkbox-list-unchecked"
value="1"
/>
<Checkbox
checked
id="description-checkbox-list-checked"
label="Description Checkbox Checked"
labelDescription="Additional text to describe the checkbox"
name="description-checkbox-list-checked"
value="1"
/>
<Checkbox
disabled
id="description-checkbox-list-disabled-unchecked"
label="Description Checkbox Disabled Unchecked"
labelDescription="Additional text to describe the checkbox"
name="description-checkbox-list-disabled-unchecked"
value="1"
/>
<Checkbox
disabled
checked
id="description-checkbox-list-disabled-checked"
label="Description Checkbox Disabled Checked"
labelDescription="Additional text to describe the checkbox"
name="description-checkbox-list-disabled-checked"
value="1"
/>
<Checkbox
error="You must check this checkbox to continue"
id="description-error-checkbox-list"
label="Description Error Checkbox"
labelDescription="Additional text to describe the checkbox"
name="description-error-checkbox-list"
value="1"
/>
</FieldWrap>
```

## Props

<ComponentProps
Expand Down
26 changes: 13 additions & 13 deletions packages/react/src/components/Checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
}

return (
<>
<div className="Checkbox__wrap">
<div className={classNames('Checkbox is--flex-row', className)}>
<input
id={id}
Expand Down Expand Up @@ -101,7 +101,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
{...other}
/>
<label
className={classNames('Field__label', {
className={classNames('Field__label', 'Checkbox__label', {
'Field__label--disabled': disabled
})}
htmlFor={id}
Expand All @@ -124,18 +124,18 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
}
}}
/>
{labelDescription && (
<span id={labelDescriptionId} className="Field__labelDescription">
{labelDescription}
</span>
)}
{error && (
<div id={errorId} className="Error">
{error}
</div>
)}
</div>
</>
{labelDescription && (
<span id={labelDescriptionId} className="Field__labelDescription">
{labelDescription}
</span>
)}
{error && (
<div id={errorId} className="Error">
{error}
</div>
)}
</div>
);
}
);
Expand Down
84 changes: 43 additions & 41 deletions packages/react/src/components/RadioGroup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,47 +71,49 @@ const RadioGroup = ({
const isFocused = focusIndex === index;

return (
<div className={classNames('Radio is--flex-row', className)} key={id}>
<input
type="radio"
name={name}
value={radioValue}
id={id}
ref={input => {
if (!input) {
return;
}

inputs.current.push(input);
}}
onFocus={() => onRadioFocus(index)}
onBlur={() => onRadioBlur()}
onChange={() => {
handleChange(radioValue);
onChange(radio, inputs.current?.[index]);
}}
disabled={disabled}
checked={isChecked}
aria-describedby={labelDescription ? `${id}Desc` : undefined}
{...other}
/>
<label
htmlFor={id}
className={classNames('Field__label', {
'Field__label--disabled': disabled
})}
>
{label}
</label>
<Icon
className={classNames('Radio__overlay', {
'Radio__overlay--focused': isFocused,
'Radio__overlay--disabled': disabled
})}
type={isChecked ? 'radio-checked' : 'radio-unchecked'}
aria-hidden="true"
onClick={() => onRadioClick(index)}
/>
<div className="Radio__wrap" key={id}>
<div className={classNames('Radio is--flex-row', className)}>
<input
type="radio"
name={name}
value={radioValue}
id={id}
ref={input => {
if (!input) {
return;
}

inputs.current.push(input);
}}
onFocus={() => onRadioFocus(index)}
onBlur={() => onRadioBlur()}
onChange={() => {
handleChange(radioValue);
onChange(radio, inputs.current?.[index]);
}}
disabled={disabled}
checked={isChecked}
aria-describedby={labelDescription ? `${id}Desc` : undefined}
{...other}
/>
<label
htmlFor={id}
className={classNames('Field__label', 'Radio__label', {
'Field__label--disabled': disabled
})}
>
{label}
</label>
<Icon
className={classNames('Radio__overlay', {
'Radio__overlay--focused': isFocused,
'Radio__overlay--disabled': disabled
})}
type={isChecked ? 'radio-checked' : 'radio-unchecked'}
aria-hidden="true"
onClick={() => onRadioClick(index)}
/>
</div>
{labelDescription && (
<span
id={`${id}Desc`}
Expand Down
Loading