Merge pull request #162 from ASU/uds-459

fix(bootstrap4-theme): update icon-only buttons
ASU · Apr 21, 2021 · f97fc67 · f97fc67
2 parents 8d8f61d + eb048b6
commit f97fc67
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 4 deletions.
diff --git a/packages/bootstrap4-theme/src/scss/design-tokens/_variables.scss b/packages/bootstrap4-theme/src/scss/design-tokens/_variables.scss
@@ -428,4 +428,4 @@ $uds-component-tab-container-border-color: #747474;
 $uds-component-tab-container-border-width-px: 1px;
 $uds-component-tab-active-border-bottom: 8px solid #8c1d40;
 $uds-component-tab-active-color: #8c1d40;
-$uds-component-tab-disabled-opacity: 50%;
+$uds-component-tab-disabled-opacity: 50%;
diff --git a/packages/bootstrap4-theme/src/scss/extends/_buttons.scss b/packages/bootstrap4-theme/src/scss/extends/_buttons.scss
@@ -53,6 +53,11 @@
       height: $uds-size-spacing-8;
       font-size: 1.5rem;
     }
+    &.btn-circle-x-large {
+      width: 6.5rem;
+      height: 6.5rem;
+      font-size: 3rem;
+    }
   }
   &:hover {
     transform: none;
@@ -62,6 +67,10 @@
   }
 }
 
+.bg-light-gray {
+  background-color: $gray-1;
+}
+
 // Remove background changing hover effects from all buttons
 @each $color, $value in $theme-colors {
   .btn-#{$color} {

diff --git a/packages/bootstrap4-theme/stories/components/buttons/buttons.stories.js b/packages/bootstrap4-theme/stories/components/buttons/buttons.stories.js
@@ -85,9 +85,107 @@ storiesOf('Components/Buttons', module)
 `
   )
 
-  .add(
-    'Prev/next buttons',
-    () => `
+  .add('Icon-only buttons - Color and sizes', () => `
+<div class="container-fluid">
+  <div class="row">
+    <div class="col col-12 col-lg-4 bg-white p-3">
+      <button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+    </div>
+    
+        <div class="col col-12 col-lg-4 bg-white p-3">
+      <button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+    </div>
+  </div>
+</div>
+`)
+
+
+.add('Icon-only buttons - Color Combinations', () => `
+<div class="container-fluid">
+  <div class="row">
+    <div class="col col-12 col-lg-4 bg-white p-3">
+      <button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+    </div>
+    <div class="col col-12 col-lg-4 bg-light-gray p-3">
+      <button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-alt-white">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>   
+    </div>
+    <div class="col col-12 col-lg-4 bg-light p-3">
+      <button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+    </div>
+    <div class="col col-12 col-lg-4 bg-dark p-3">
+      <button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>
+      <button type="button" class="btn btn-circle btn-circle-alt-gray">
+        <i class="fas fa-times"></i>
+        <span class="sr-only" >Close</span>
+      </button>   
+    </div>
+  </div>
+</div>
+`)
+
+.add('Prev/next buttons', () => `
 <div class="container-fluid">
   <div class="row">
     <div class="col col-12 col-lg-4 bg-white p-3">