From 2bce01c3652132e2c8fed72d7a4d67518abfde1a Mon Sep 17 00:00:00 2001 From: Issermann Hannah Date: Thu, 28 Nov 2024 17:59:44 +0100 Subject: [PATCH] Add icon buttons --- scss/_buttons.scss | 48 +++-- scss/_variables.scss | 9 +- site/content/docs/0.0/components/buttons.md | 201 +++++++++--------- .../docs/0.0/assets/img/ouds-web-sprite.svg | 3 + 4 files changed, 132 insertions(+), 129 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 63372b772a..c21bac5148 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -23,7 +23,7 @@ --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; // TODO to check --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} var(--#{$prefix}btn-focus-shadow-rgb); // OUDS mod - --#{$prefix}icon-spacing: #{$btn-icon-padding-x}; // OUDS mod TODO to check + --#{$prefix}icon-spacing: #{$btn-icon-padding-left}; // OUDS mod TODO to check // scss-docs-end btn-css-vars display: inline-block; @@ -83,6 +83,7 @@ // OUDS mod: no `.btn-check:checked:focus-visible + &` to handle box shadow // OUDS mod: selectors are slightly different to handle `.btn-check` + // TODO how to handle to disable links with aria-disabled only .btn-check:disabled + &, &:disabled, &.disabled, @@ -97,11 +98,14 @@ } // End mod - // OUDS mod: with icon - &:not(.btn-icon) > svg { - transform: translateY(1px); + &:not(.btn-icon) > svg, + &:not(.btn-icon) > img, + &:not(.btn-icon) > .bm-short-icon { + @extend .bm-short-icon; + margin-right: $ouds-button-space-column-gap-icon; + margin-left: subtract(var(--#{$prefix}icon-spacing), var(--#{$prefix}btn-padding-x)); + vertical-align: text-bottom; } - // End mod } @@ -211,15 +215,11 @@ } } -@each $color, $value in $theme-colors { - .btn-outline-#{$color} { - $btn-outline-hover-color: var(--#{$prefix}highlight-color); - @if index(("primary", "warning", "light"), #{$color}) { - $btn-outline-hover-color: $black; - } @else if (#{$color} == "dark") { - $btn-outline-hover-color: $white; +@if $enable-bootstrap-compatibility { // OUDS mod + @each $color, $value in $theme-colors { + .btn-outline-#{$color} { + @extend .btn-default; // OUDS mod } - @include button-outline-variant(var(--#{$prefix}#{$color}), $btn-outline-hover-color); } } // scss-docs-end btn-variant-loops @@ -321,18 +321,24 @@ // OUDS mod: 6th argument to set .btn-icon padding // OUDS mod: 7th argument to set .btn-letter-spacing -.btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg, $btn-line-height-lg, $btn-icon-padding-x-lg, $btn-letter-spacing-lg); -} - -.btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm, $btn-line-height-sm, $btn-icon-padding-x-sm, $btn-letter-spacing-sm); -} +//.btn-lg { +// @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg, $btn-line-height-lg, $btn-icon-padding-x-lg, $btn-letter-spacing-lg); +//} +// +//.btn-sm { +// @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm, $btn-line-height-sm, $btn-icon-padding-x-sm, $btn-letter-spacing-sm); +//} // OUDS mod: icon button .btn-icon { - padding: var(--#{$prefix}icon-spacing); + --#{$prefix}btn-padding-x: #{$ouds-button-space-inset-icon-alone}; + + > svg, + > img, + > .bm-medium-icon { + @extend .bm-medium-icon; + } } // End mod diff --git a/scss/_variables.scss b/scss/_variables.scss index 47fab10d3d..fc876305a0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -992,9 +992,10 @@ $btn-transition: $transition-focus !default; // OUDS mod // scss-docs-end btn-variables // OUDS mod: icon button -$btn-icon-padding-x: subtract($spacer * .5, var(--#{$prefix}border-width)) !default; -$btn-icon-padding-x-sm: $spacer * .25 !default; -$btn-icon-padding-x-lg: add($spacer * .5, calc(var(--#{$prefix}border-width) * 1.5)) !default; // stylelint-disable-line function-disallowed-list +$btn-icon-padding-x: subtract($ouds-button-space-padding-inline-icon-start, var(--#{$prefix}border-width)) !default; +$btn-icon-padding-left: $ouds-button-space-padding-inline-icon-start !default; +// TODO to confirm to delete $btn-icon-padding-x-sm: $spacer * .25 !default; +// TODO to confirm to delete $btn-icon-padding-x-lg: add($spacer * .5, calc(var(--#{$prefix}border-width) * 1.5)) !default; // stylelint-disable-line function-disallowed-list // OUDS mod: social button // scss-docs-start social-buttons $btn-social-networks: ( @@ -2296,7 +2297,7 @@ $quantity-selector-width: 7.5rem !default; $quantity-selector-sm-width: 5.625rem !default; $quantity-selector-btn-padding-x: add($btn-icon-padding-x, 2px) !default; -$quantity-selector-btn-padding-x-sm: add($btn-icon-padding-x-sm, 2px) !default; +$quantity-selector-btn-padding-x-sm: add($btn-icon-padding-x, 2px) !default; $quantity-selector-btn-bg: var(--#{$prefix}body-bg) !default; $quantity-selector-btn-border: var(--#{$prefix}border-width) solid var(--#{$prefix}color-border-emphasized) !default; diff --git a/site/content/docs/0.0/components/buttons.md b/site/content/docs/0.0/components/buttons.md index b8e0abb087..fa90e702d0 100644 --- a/site/content/docs/0.0/components/buttons.md +++ b/site/content/docs/0.0/components/buttons.md @@ -51,34 +51,52 @@ Boosted includes several button variants, each serving its own semantic purpose, {{< /callout >}} + +## Loading state + +{{< example >}} + +{{< /example >}} + ## With icon The recommended way of using an icon in a button is [an embedded SVG]({{< docsref "/extend/icons" >}}). You need to: -- set its dimensions to `1.25rem` to match button size—except for `.btn-sm` where you should use `1rem`, -- apply `.me-1` on it to get consistent spacing, -- fill it using `currentColor` to respect button color scheme, +- set its dimensions to default `1rem` size, the icon will adapt automatically, +- fill it using `currentColor` to respect button color scheme. + +You don't need to apply `.me-shorter` class on the icon to get consistent spacing, as the margin is already handled by Boosted. Please note that if you experience a problem with a cropped SVG, we recommend using the `.overflow-visible` utility on the SVG to fix its rendering. +If really needed, you can use a font icon associated the `.bm-short-icon` class to explicitly set the size. + {{< example >}} - + - - + + {{< /example >}} @@ -87,48 +105,34 @@ Primary Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sure to provide an accessible name to your button, either using a `.visually-hidden` content or a `aria-label` attribute. {{< example >}} - - - -{{< /example >}} - -### No outline - -Use `.btn-no-outline` to get a borderless button as default state, and a consistent gray border for other states. - -{{< example >}} - - - {{< /example >}} @@ -154,11 +158,13 @@ Supported social networks are declared in a dedicated Sass map—meaning you're {{< scss-docs name="social-buttons" file="scss/_variables.scss" >}} + ## Disable text wrapping @@ -172,29 +178,18 @@ The `.btn` classes are designed to be used with the ` - - - +Link + + + + {{< /example >}} ## Outline buttons -In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button. - -{{< example >}} - -{{< /example >}} - -
-See Bootstrap examples that are incompatible with Orange Design System. -
-{{< design-callout-alert >}} -The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap. +{{< bootstrap-compatibility >}} -Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website. -{{< /design-callout-alert >}} +Outline buttons are now the default ones. For mor convenience in need of `.btn-outline-*` classes, you can simply use them and obtain an equivalent of `.btn-default`. {{< example >}} {{< buttons.inline >}} @@ -204,23 +199,20 @@ Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af1 {{< /buttons.inline >}} {{< /example >}} -{{< callout info >}} -Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. -{{< /callout >}} -
+{{< /bootstrap-compatibility >}} ## Sizes Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. {{< example >}} - - + + {{< /example >}} {{< example >}} - - + + {{< /example >}} You can even roll your own custom sizing with CSS variables: @@ -235,7 +227,7 @@ Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af1 {{< /design-callout-alert >}} {{< example >}} - @@ -248,9 +240,10 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any ` {{< example >}} - - - + + + + {{< /example >}} Disabled buttons using the `` element behave a bit different: @@ -261,8 +254,8 @@ Disabled buttons using the `` element behave a bit different: - Disabled buttons using `` *should not* include the `href` attribute. {{< example >}} -Primary link -Link +Primary link +Link {{< /example >}} ### Link functionality caveat @@ -270,8 +263,8 @@ Disabled buttons using the `` element behave a bit different: To cover cases where you have to keep the `href` attribute on a disabled link, the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether. {{< example >}} -Primary link -Link +Primary link +Link {{< /example >}} ## Block buttons @@ -289,8 +282,8 @@ Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af1 {{< example >}}
- - + +
{{< /example >}} @@ -299,8 +292,8 @@ Here we create a responsive variation, starting with vertically stacked buttons {{< example >}}
- - + +
{{< /example >}} @@ -308,8 +301,8 @@ You can adjust the width of your block buttons with grid column width classes. F {{< example >}}
- - + +
{{< /example >}} @@ -317,8 +310,8 @@ Additional utilities can be used to adjust the alignment of buttons when horizon {{< example >}}
- - + +
{{< /example >}} @@ -344,15 +337,15 @@ Instead, consider using our [Checks component]({{< docsref "/forms/checks-radios {{< /design-callout-alert >}} {{< example >}} - - - + + + {{< /example >}} {{< example >}} -Toggle link -Active toggle link -Disabled toggle link +Toggle link +Active toggle link +Disabled toggle link {{< /example >}} diff --git a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg index d290d24ced..0cea478439 100644 --- a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg +++ b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg @@ -2,4 +2,7 @@ + + +