Skip to content

Commit

Permalink
feat: button component implementation (squashed)
Browse files Browse the repository at this point in the history 
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

chore: update tokens (#2777)

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

chore(merge main): patched Boosted commit → be8268e (#2778)

chore: update tokens (#2780)

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>

feat: add Dimension tokens, utilities and documentation (#2754)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Hannah Issermann <hannah.issermann@orange.com>
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>

tmp

changed display classname and reordering of tables and small definition

Some modifs + some OUDS mods

Add some OUDS mod, remove .initialism, add some documentation

Thiner handle of OUDS mod + small tweaks of the doc.

Adapting documentation with `px` and right values.

First version with icon, missing links and the end of the icon page

Remove '-web' from tokens, use mixin rather than extend, handle the icon size a bit differently and add documentation

------------

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Hannah Issermann <hannah.issermann@orange.com>
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>

Fix ci

chore: update tokens (#2790)

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

Remove useless classes, Add font references everywhere, Add doc about the new mixin, Remove all `_config.scss` references, Add `.mw-none` utility, Update Scss tests

chore: update tokens (#2793)

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>

Small tweaks of font-stack

Fix CI

migration guide (from v0.0.3)

fix(review)

------------

Co-authored-by: Hannah Issermann <hannah.issermann@orange.com>

chore: update tokens (#2794)

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>

Align with mobile apps presentation

css and sass vars and maps and mixins in both guides + first version of migration guide from Boosted

last fixes about bootstrap-compat migration doc

fix docs job (indentation)

Review migration guides and doc with LM

Update site/content/docs/0.0/helpers/icon.md

Remove Label font-size classes

Adding examples inside the doc, and small css tweaks

New ways to architect the icon + text

Adding migration guides

fix(ci)

Start button component

Add minimal, strong and negative variants

Fix css-test

All btn color variants

fix(design): after design review

Small tweak for forgotten `.text-*` and some spacings.

Add color tokens in OUDS Web

Align bootstrap compat buttons strictly to designed buttons

Add icon buttons

feat: add Typography tokens, utilities and documentation (#2774)

------------

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Hannah Issermann <hannah.issermann@orange.com>
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>

First try for loading button

Add color tokens in OUDS Web

Restore all custom examples from Bootstrap

Add Bootstrap basic logo for examples

Rewrite all button documentation. Determinate loading, skeleton and buttons on colored background must still be implemented

remove unused button-outline-variant

fix(CI)

fix(docs): add the forgotten `.border-*`, `.opacity-*` and a `.ms-auto` misplaced in the previous PRs (#2806)

fix(docs): change the font example thumbnails (#2806)

chore: update tokens (#2805)

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>
Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>

chore: update tokens (#2816)

---------

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>
Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>

First draft on new colors

fix(ci)

fix merge issues + enhance color palette

Use new color tokens + add mono (on colored bg) variants

Check mono tokens against bad values + implement loading button example

comment mixin button-outline-variant since vars are not defined

use $ouds-button-size-loader token

fix css-lint

continue doc and laoding/skeleton states

fix btn ids

start migration guides, enhance doc, bootstrap-compat

fix(review)

Adapt to some of the new decisions made on buttons (to be finalized), variant loader-indeterminate with span

chore: update tokens (#2829)

---------

Co-authored-by: boosted-bot <boosted-bot@users.noreply.github.com>
Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>

Add elevation color

[OUDS] Add background utilities to the Colors tokens PR (#2807)

change  $ouds-button-space-inset-icon-alone to $ouds-button-space-inset-icon-only

tokens: use new token $ouds-button-border-width-default-interaction-mono

tokens: $ouds-button-color-border-default-disabled-mono well synchronized, so remove comment

tokens: use new token $ouds-button-border-width-default-interaction-mono

tokens: use --#{$prefix}color-opacity-transparent instead of --#{$prefix}color-opacity-invisible-black and  --#{$prefix}color-content-on-status-emphasized-alt instead of --#{$prefix}color-content-on-action-negative

For now, we chose to use two classes for variants on colored bg, e.g. `.btn-default.btn-on-colored-bg`

Negative and colored bg

Negative and colored bg

Loading buttons!!!

fix CI (ids)

fix CI (cspell)

Add border color utilities to the Colors tokens PR (#2823)

Finalize loading buttons doc and example

Fixes after first comments (review)

Fixes after first comments (review)

Fixes after first comments (review)

Fixes after first comments (review)

- change colored-bg with utility and add data-bs-theme + ex

- change colored-bg with utility and add data-bs-theme + example with negative bg
- replace old boosted btn-* by new classes in docs

Replace old boosted btn-* by new classes everywhere

btn-primary => btn-strong and btn-secondary and btn-outline-secondary => btn-default

update tarteaucitron styles (buttons and modal size)

revert examples

Move Bootstrap examples into the right category

after loading, put the focus back on the button

Handle Bootstrap examples correctly

chore(merge main): patched Boosted commit → 7bde599 (#2827)

chore: update tokens (#2834)

Add text color utilities to the Colors tokens PR

Add color background helpers to the Colors tokens PR (#2831)

changes after merge + add link to buttons guidelines

First reviews from LM

Proposal for new CSS Animation, closer to the previous DS one

Update scss/_buttons.scss

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

fix: several updates to take PR review comments into account

fix: additional fixes on PR Buttons
  • Loading branch information
@hannahiss @nilloq
hannahiss authored and nilloq committed Feb 5, 2025
1 parent 05a2d0a commit 43d8740
Show file tree
Hide file tree
Showing 106 changed files with 14,050 additions and 340 deletions.
1 change: 1 addition & 0 deletions .cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@
"urlquery",
"vbtn",
"Versión",
"viewbox",
"viewports",
"Vite",
"vstack",
Expand Down
2 changes: 1 addition & 1 deletion js/tests/unit/modal.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -995,7 +995,7 @@ describe('Modal', () => {
it('should open modal, having special characters in its id', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#j_id22:exampleModal">',
'<button class="btn btn-strong" data-bs-toggle="modal" data-bs-target="#j_id22:exampleModal">',
' Launch demo modal',
'</button>',
'<div class="modal fade" id="j_id22:exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">',
Expand Down
36 changes: 18 additions & 18 deletions js/tests/unit/quantity-selector.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -106,10 +106,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -127,10 +127,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -154,10 +154,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -181,10 +181,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.25" min="0" max="10" step="0.5" data-bs-round="1" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -204,10 +204,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -229,10 +229,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="8.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -254,10 +254,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand All @@ -282,10 +282,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="quantity-selector">',
' <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
' <span class="visually-hidden">Step down</span>',
' </button>',
' <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <button type="button" class="btn btn-icon btn-default" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
' <span class="visually-hidden">Step up</span>',
' </button>',
'</div>'
Expand Down
8 changes: 4 additions & 4 deletions js/tests/visual/alert.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</p>
<p>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-negative">Danger</button>
<button type="button" class="btn btn-default">Secondary</button>
</p>
</div>

Expand All @@ -32,8 +32,8 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-primary">Or do this</button>
<button type="button" class="btn btn-negative">Take this action</button>
<button type="button" class="btn btn-strong">Or do this</button>
</p>
</div>

Expand Down
14 changes: 7 additions & 7 deletions js/tests/visual/button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,35 @@
<div class="container-fluid">
<h1>Button <small>Bootstrap Visual Test</small></h1>

<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
<button type="button" class="btn btn-strong" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>

<p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
<p>Navigate to the checkboxes with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>), and ensure that <kbd>Space</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>Space</kbd> toggles the checkbox again.</p>

<div class="btn-group" data-bs-toggle="buttons">
<label class="btn btn-primary active">
<label class="btn btn-strong active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<label class="btn btn-strong">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<label class="btn btn-strong">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>

<p>Navigate to the radio button group with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>Tab</kbd> or "backwards" using <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>

<div class="btn-group" data-bs-toggle="buttons">
<label class="btn btn-primary active">
<label class="btn btn-strong active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<label class="btn btn-strong">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<label class="btn btn-strong">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
Expand Down
Loading

0 comments on commit 43d8740

Please # to comment.