Skip to content

feat(component): Add Checkbox component #2874

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

Merged
vprothais merged 38 commits into from
Mar 31, 2025
Merged

feat(component): Add Checkbox component #2874

Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
74c8be4
Add Checkbox component
louismaximepiton Mar 7, 2025
f140b26
Working `control-item`
louismaximepiton Mar 12, 2025
6d667d3
Reorganize docs and CSS, fix some small issues
louismaximepiton Mar 12, 2025
a6ccf36
Fix issues
louismaximepiton Mar 13, 2025
cc36ea9
feat: add grouped checkbox example
MaxLardenois Mar 13, 2025
e5229bf
feat: rename form-check to checkbox
MaxLardenois Mar 13, 2025
4b05d07
doc: update tac with new checkbox, add form overview
MaxLardenois Mar 13, 2025
f6b4166
doc: added migration guide for Checkbox
MaxLardenois Mar 13, 2025
6d1ca53
doc: updated migration.md
MaxLardenois Mar 13, 2025
ad34e9a
doc: remove link to Validation page from checkbox
MaxLardenois Mar 13, 2025
ff16b90
fix: repetition in commented doc
MaxLardenois Mar 13, 2025
001878f
feat: rename checkbox-item-text to checkbox-item-text-container and m…
MaxLardenois Mar 17, 2025
f21ba68
feat: put interactivity directly into control-item
MaxLardenois Mar 17, 2025
f83febb
fix: include divider inside component height by sustracting its heigh…
MaxLardenois Mar 18, 2025
c858532
fix: keep default word-break, add a long label example in docs
MaxLardenois Mar 18, 2025
594cdbd
feat: make control-item classes user facing
MaxLardenois Mar 19, 2025
66b389b
feat: update after review
MaxLardenois Mar 20, 2025
67fb8a4
refactor: use pseudo-element for icon display
MaxLardenois Mar 20, 2025
71ff97d
refactor: split checked and indeterminate states in css, set border s…
MaxLardenois Mar 21, 2025
1cd5d40
fix: typo
MaxLardenois Mar 21, 2025
47bed74
fix: typo
MaxLardenois Mar 21, 2025
f935549
fix: forgotten callout rewrite
MaxLardenois Mar 21, 2025
c3273f2
doc: remove done todo
MaxLardenois Mar 21, 2025
83ce464
feat: rename Inverse to Reverse
MaxLardenois Mar 25, 2025
21181de
Simplify CSS
louismaximepiton Mar 25, 2025
289d4a9
feat(component): Add Checkbox component
louismaximepiton Mar 25, 2025
1bed904
Revert last changes but better the extend
louismaximepiton Mar 25, 2025
4f535b4
Fix class in the dom
louismaximepiton Mar 25, 2025
a6c14e8
feat: use custom property for indicator color, add bootstrap compat e…
MaxLardenois Mar 26, 2025
5a6ac1d
Merge branch 'ouds/main' into ouds/main-lmp-checkbox-components
MaxLardenois Mar 27, 2025
1cf81e8
refactor: review modif
MaxLardenois Mar 28, 2025
2449101
doc: remove draft toggle on validation page
MaxLardenois Mar 28, 2025
d07b571
fix: Boosted -> OUDS
MaxLardenois Mar 28, 2025
7850c39
refactor: use input instead of [type] to select indicator
MaxLardenois Mar 28, 2025
df41862
fix: faulty comment
MaxLardenois Mar 31, 2025
44bfd28
refactor: remove unused check-icon
MaxLardenois Mar 31, 2025
8b7a94f
fix: remove faulty control-item in docs
MaxLardenois Mar 31, 2025
27a9932
Merge branch 'ouds/main' into ouds/main-lmp-checkbox-components
MaxLardenois Mar 31, 2025
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
52 changes: 0 additions & 52 deletions .github/workflows/node-sass.yml
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/control-item";
@import "forms/form-range";
// OUDS mod: no floating-labels
@import "forms/input-group";
Expand Down
24 changes: 12 additions & 12 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,14 +420,14 @@
// scss-docs-end root-focus-variables

// scss-docs-start root-form-validation-variables
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
@if $enable-bootstrap-compatibility {
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
}
// scss-docs-end root-form-validation-variables

--#{$prefix}form-check-filter: #{$form-check-filter}; // OUDS mod
--#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color}; // OUDS mod
--#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter}; // OUDS mod
--#{$prefix}form-select-indicator: #{$form-select-indicator}; // OUDS mod
--#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator}; // OUDS mod
Expand Down Expand Up @@ -516,12 +516,12 @@

--#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // OUDS mod

--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
--#{$prefix}form-check-filter: #{$form-check-filter-dark}; // OUDS mod
--#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color-dark}; // OUDS mod
@if $enable-bootstrap-compatibility {
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
}
--#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // OUDS mod
--#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // OUDS mod
--#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};
Expand Down
10 changes: 4 additions & 6 deletions scss/_variables-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,6 @@ $svg-as-custom-props-dark: (
// Forms
//

$form-check-filter-dark: none !default; // OUDS mod
$form-check-input-disabled-color-dark: $gray-700 !default; // OUDS mod
$form-color-disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // OUDS mod
$form-switch-square-bg-dark: $ouds-color-functional-dark-gray-880 !default; // OUDS mod

Expand All @@ -111,10 +109,10 @@ $form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,<svg
// OUDS mod: no $form-switch-bg-image-dark

// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: var(--#{$prefix}success-text-emphasis) !default; // OUDS mod: instead of `$green-300`
$form-valid-border-color-dark: var(--#{$prefix}success) !default; // OUDS mod: instead of `$green-300`
$form-invalid-color-dark: var(--#{$prefix}danger-text-emphasis) !default; // OUDS mod: instead of `$red-300`
$form-invalid-border-color-dark: var(--#{$prefix}danger) !default; // OUDS mod: instead of `$red-300`
$form-valid-color-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$green-300`
$form-valid-border-color-dark: $ouds-color-border-emphasized-dark !default; // OUDS mod: instead of `$green-300`
$form-invalid-color-dark: $ouds-color-action-negative-enabled-dark !default; // OUDS mod: instead of `$red-300`
$form-invalid-border-color-dark: $ouds-color-action-negative-enabled-dark !default; // OUDS mod: instead of `$red-300`
$form-switch-unchecked-invalid-border-color-dark: $form-invalid-border-color-dark !default; // OUDS mod
// scss-docs-end form-validation-colors-dark

Expand Down
85 changes: 41 additions & 44 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ $escaped-characters: (
$chevron-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M597.22 225 402.78 421.43 325 500l77.78 78.57L597.22 775 675 696.43 480.56 500 675 303.57z'/></svg>") !default;
$cross-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
$cross-icon-stroke: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='116 116 767 767' fill='#{$black}'><path d='M817.493 676.165a49.977 49.977 0 0 1 0 70.664l-70.664 70.664a49.977 49.977 0 0 1-70.664 0L499.5 640.828 322.835 817.493a49.977 49.977 0 0 1-70.664 0l-70.664-70.664a49.977 49.977 0 0 1 0-70.664L358.172 499.5 181.507 322.835a49.977 49.977 0 0 1 0-70.664l70.664-70.664a49.977 49.977 0 0 1 70.664 0L499.5 358.172l176.665-176.665a49.977 49.977 0 0 1 70.664 0l70.664 70.664a49.977 49.977 0 0 1 0 70.664L640.828 499.5Z'/></svg>") !default;
$check-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$black}' d='M13 0 5 8 2 5 0 7l5 5L15 2z'/></svg>") !default;
$check-icon: url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path fill='#000' fill-rule='evenodd' d='M875,240a64.568,64.568,0,0,0-108.864-47.408l-0.011-.012L383.621,565,257.594,424.648l-0.011.014a64.372,64.372,0,0,0-87.784,3.375l-25.862,26a65.23,65.23,0,0,0-4.758,86.56l-0.011.008,206.9,260,0.01-.008a64.407,64.407,0,0,0,100.953,0l0.011,0.009,413.793-520-0.011-.008A64.916,64.916,0,0,0,875,240Z' transform='scale(.1)'/></svg>") !default;
$burger-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='M28 21v2H2v-2h26Zm0-7v2H2v-2h26Zm0-7v2H2V7h26Z'/></svg>") !default;
$burger-icon-small: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='#{$black}'><path d='M2 19h21v-2H2v2Zm0-6h21v-2H2v2Zm0-6h21V5H2v2Z'/></svg>") !default;
$success-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$success}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default;
Expand Down Expand Up @@ -1054,44 +1054,40 @@ $form-color-disabled-filter: brightness(0) invert(1) brightness(.8) !
// scss-docs-end form-input-variables

// scss-docs-start form-check-variables
$form-check-input-width: 1em !default;
$form-check-min-height: calc(#{$font-size-base} * #{$input-btn-line-height}) !default; // stylelint-disable-line function-disallowed-list
$form-check-padding-start: $form-check-input-width + .5em !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-padding-top: .4375rem !default; // OUDS mod
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
$form-check-transition: null !default;
$form-check-filter: $invert-filter !default; // OUDS mod

$form-check-input-active-filter: null !default;
$form-check-input-active-bg-color: $component-active-bg !default; // OUDS mod

$form-check-input-bg: $input-bg !default;
$form-check-input-border: var(--#{$prefix}border-width) solid $input-border-color !default; // OUDS mod: instead of `var(--#{$prefix}border-width) solid var(--#{$prefix}border-color)`
$form-check-input-border-radius: 0 !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: null !default;
$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;

$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: var(--#{$prefix}check-icon) !default;
$form-check-input-disabled-color: $gray-900 !default; // OUDS mod
$form-check-input-disabled-filter: var(--#{$prefix}form-check-filter) !default; // OUDS mod
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

$form-check-input-indeterminate-color: $form-check-input-checked-color !default;
$form-check-input-indeterminate-bg-color: $form-check-input-checked-bg-color !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3'><path fill='#{$form-check-input-indeterminate-color}' d='M0 0h10v3H0z'/></svg>") !default;

$form-check-input-disabled-opacity: null !default;
$form-check-label-disabled-opacity: null !default;
$form-check-btn-check-disabled-opacity: null !default;

$form-check-inline-margin-end: 1rem !default;
$form-check-input-width: $ouds-checkbox-size-indicator !default; // OUDS mod: instead of `1em`
$form-check-min-height: $ouds-control-item-size-min-height !default; // OUDS mod: instead of `$font-size-base * $line-height-base`
// OUDS mod: no `$form-check-padding-start`
// OUDS mod: no `$form-check-margin-bottom`
// OUDS mod: no `$form-check-label-color`
$form-check-label-cursor: pointer !default; // OUDS mod: instead of `null`
// OUDS mod: no `$form-check-transition`
// OUDS mod: no `$form-check-filter`

// OUDS mod: no `$form-check-input-active-filter`

// ouds mod: no `$form-check-input-color`
// OUDS mod: no `$form-check-input-border`
$form-check-input-border-radius: $ouds-checkbox-border-radius !default; // OUDS mod: instead of `0`
// OUDS mod: no `$form-check-radio-border-radius`
// OUDS mod: no `$form-check-input-focus-border`
// OUDS mod: no `$form-check-input-focus-box-shadow`

// OUDS mod: no `$form-check-input-checked-color`
// OUDS mod: no `$form-check-input-checked-bg-color`
// OUDS mod: no `$form-check-input-checked-border-color`
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='m15.262 7.047-6.034 7a.97.97 0 0 1-.737.328.97.97 0 0 1-.736-.329l-3.017-3.5A.833.833 0 0 1 4.53 10c0-.242.106-.46.276-.619l.378-.35a.978.978 0 0 1 .666-.256c.235 0 .449.08.614.21l1.838 1.89 5.578-5.013a.98.98 0 0 1 .645-.237c.52 0 .943.392.943.875a.833.833 0 0 1-.207.547Z'/></svg>") !default; // OUDS mod: custom SVG
// OUDS mod: no `$form-check-radio-checked-bg-image`

// OUDS mod: no `$form-check-input-indeterminate-color`
// OUDS mod: no `$form-check-input-indeterminate-bg-color`
// OUDS mod: no `$form-check-input-indeterminate-border-color`
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='M4.5 9.375c0-.345.28-.625.625-.625h9.75c.345 0 .625.28.625.625v1.25c0 .345-.28.625-.625.625h-9.75a.625.625 0 0 1-.625-.625v-1.25Z'/></svg>") !default; // OUDS mod: custom SVG

// OUDS mod: no `$form-check-input-disabled-opacity`
// OUDS mod: no `$form-check-label-disabled-opacity`
// OUDS mod: no `$form-check-btn-check-disabled-opacity`

// OUDS mod: no `$form-check-inline-margin-end`

// OUDS mod: Star rating
$form-star-size: 1.5625rem !default;
Expand All @@ -1107,10 +1103,10 @@ $form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,<svg
$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#{$black}' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
$form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#{$black}' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
$form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='transparent' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;

// End mod
// scss-docs-end form-check-variables

// fusv-disable
// scss-docs-start form-switch-variables
// OUDS mod: no $form-switch-color
$form-switch-width: $spacer * 3 !default; // OUDS mod
Expand Down Expand Up @@ -1146,6 +1142,7 @@ $form-switch-checked-focus-inner: var(--#{$prefix}color-border-foc
$form-switch-checked-focus-outer: var(--#{$prefix}color-border-focus) !default; // OUDS mod
$form-switch-unchecked-invalid-border-color: #31c3eb !default; // OUDS mod: will be rendered red when mixed with the filter
// scss-docs-end form-switch-variables
// fusv-enable

// scss-docs-start input-group-variables
$input-group-addon-padding-y: $input-padding-y !default;
Expand Down Expand Up @@ -1253,10 +1250,10 @@ $form-feedback-color: null !default; // OUDS mod
// scss-docs-end form-feedback-variables

// scss-docs-start form-validation-colors
$form-valid-color: var(--#{$prefix}success-text-emphasis) !default; // OUDS mod: instead of `$form-feedback-valid-color`
$form-valid-border-color: var(--#{$prefix}success) !default; // OUDS mod: instead of `$form-feedback-valid-color`
$form-invalid-color: var(--#{$prefix}danger-text-emphasis) !default; // OUDS mod: instead of `$form-feedback-invalid-color`
$form-invalid-border-color: var(--#{$prefix}danger) !default; // OUDS mod: instead of `$form-feedback-invalid-color`
$form-valid-color: $ouds-color-content-default-light !default; // OUDS mod: instead of `$form-feedback-valid-color`
$form-valid-border-color: $ouds-color-border-emphasized-light !default; // OUDS mod: instead of `$form-feedback-valid-color`
$form-invalid-color: $ouds-color-action-negative-enabled-light !default; // OUDS mod: instead of `$form-feedback-invalid-color`
$form-invalid-border-color: $ouds-color-action-negative-enabled-light !default; // OUDS mod: instead of `$form-feedback-invalid-color`
// scss-docs-end form-validation-colors

// scss-docs-start form-validation-states
Expand Down
Loading
Loading