feat(buttons): buttons with icon, branded 🎉

Using SVG spriteand, well, nothing else. But added docs.
Orange-OpenSource · Feb 8, 2021 · d399331 · d399331
1 parent d742e1c
commit d399331
Show file tree

Hide file tree

Showing 6 changed files with 358 additions and 12 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -54,6 +54,12 @@
     opacity: $btn-disabled-opacity;
     @include box-shadow(none);
   }
+
+  // Boosted mod: with icon
+  > svg {
+    transform: translateY(1px);
+  }
+  // End mod
 }
 
 
@@ -84,6 +90,8 @@
 .btn-danger {
   @include button-variant($danger, $danger);
 }
+// End mod
+
 
 // Boosted mod: no .btn-outline
 
@@ -118,12 +126,43 @@
 
 //
 // Button Sizes
-//
+// Boosted mod: 6th argument to set .btn-icon padding
 
 .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);
+  @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-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm, $btn-line-height-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);
+}
+
+
+//
+// Boosted mod: icon button
+//
+.btn-icon {
+  padding-right: var(--#{$boosted-variable-prefix}icon-spacing);
+  padding-left: var(--#{$boosted-variable-prefix}icon-spacing);
+}
+
+// Boosted mod: border-only on :hover, :focus and :active
+.btn-no-outline {
+  border-color: transparent;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    border-color: $gray-500;
+  }
+
+  &:active,
+  &.active {
+    color: $primary;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $gray-500;
+  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -704,6 +704,10 @@ $btn-border-radius-lg:        $border-radius-lg !default;
 
 $btn-transition:              $transition-focus !default;
 
+// Boosted: icon button
+$btn-icon-padding-x:          subtract($spacer / 2, $border-width) !default;
+$btn-icon-padding-x-sm:       $spacer / 4 !default;
+$btn-icon-padding-x-lg:       add($spacer / 2, $border-width * 1.5) !default;
 
 // Forms
 

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -64,7 +64,8 @@
 // Boosted mod: no .btn-outline
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null) {
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null, $icon-spacing: $btn-icon-padding-x) {
+  --#{$boosted-variable-prefix}icon-spacing: #{$icon-spacing}; // Boosted mod: used for icons
   padding: subtract($padding-y, 1px) $padding-x add($padding-y, 1px);
   @include font-size($font-size);
   line-height: $line-height;

diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md
@@ -24,6 +24,89 @@ Boosted includes several predefined button styles, each serving its own semantic
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
+<!-- Boosted mod -->
+## 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,
+- finally add `.overflow-visible` utility to prevent SVG content from being cropped.
+
+{{< example >}}
+<button type="button" class="btn btn-primary btn-sm">
+  <svg width="1rem" height="1rem" fill="currentColor" class="me-1 overflow-visible">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  Secondary
+</button>
+<button type="button" class="btn btn-primary">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" class="me-1">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  Secondary
+</button>
+<button type="button" class="btn btn-primary btn-lg">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" class="me-1 overflow-visible">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  Secondary
+</button>
+{{< /example >}}
+
+### Icon only
+
+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 >}}
+<button type="button" class="btn btn-icon btn-secondary btn-sm">
+  <svg width="1rem" height="1rem" fill="currentColor" class="overflow-visible">
+   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <span class="visually-hidden">Secondary</span>
+</button>
+<button type="button" class="btn btn-icon btn-secondary">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <span class="visually-hidden">Secondary</span>
+</button>
+<button type="button" class="btn btn-icon btn-secondary btn-lg">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" class="overflow-visible">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <span class="visually-hidden">Secondary</span>
+</button>
+{{< /example >}}
+
+### No outline
+
+Use `.btn-no-outline` to get a borderless button as default state, and a consistent gray border for other states.
+
+{{< example >}}
+<button type="button" class="btn btn-icon btn-no-outline btn-sm">
+  <svg width="1rem" height="1rem" fill="currentColor" class="overflow-visible">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <span class="visually-hidden">No outline</span>
+</button>
+<button type="button" class="btn btn-icon btn-no-outline">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <span class="visually-hidden">No outline</span>
+</button>
+<button type="button" class="btn btn-icon btn-no-outline btn-lg">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" class="overflow-visible">
+   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+  </svg>
+  <span class="visually-hidden">No outline</span>
+</button>
+{{< /example >}}
+
+<!-- End mod -->
+
 ## Disable text wrapping
 
 If you don't want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.