Merge pull request #680 from qld-gov-au/QOLDEV-35-secondary-buttons

[QOLDEV-35] use standard underline thickness and offset for secondary buttons
qld-gov-au · Dec 19, 2022 · 32eaa15 · 32eaa15
2 parents c0041dd + 204729e
commit 32eaa15
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/src/assets/_project/_blocks/components/buttons/_qg-buttons.scss b/src/assets/_project/_blocks/components/buttons/_qg-buttons.scss
@@ -75,19 +75,16 @@
     color: $qg-outline-dark;
     background-color: transparent !important;
     border:3px solid $qg-outline-dark;
-    &:hover:not(:disabled), &:active:not(:disabled), &:focus:not(:disabled), &.hover:not(:disabled), &.active:not(:disabled), &.focus:not(:disabled) {
+    @include qg-underline-on-highlight-decoration {
       border:3px solid $qg-outline-dark-hover;
       color: $qg-outline-dark-hover;
-      text-decoration-line: underline;
     }
   }
   &.btn-outline-light{
     color: #ffffff !important;
-    background-color: transparent;
+    background-color: transparent !important;
     border:3px solid #ffffff;
-    &:hover, &:active, &:focus, &.hover, &.active, &.focus {
-      text-decoration-line: underline;
-    }
+    @include qg-underline-on-highlight-decoration;
   }
   &.btn-link.light{
     color:#ffffff;

diff --git a/src/stories/components/Buttons/Buttons.stories.mdx b/src/stories/components/Buttons/Buttons.stories.mdx
@@ -6,6 +6,7 @@ import { getDecoratedParameters } from "../../helpers";
 import Primary from "./templates/Primary.html";
 import Secondary from "./templates/Secondary.html";
 import Tertiary from "./templates/Tertiary.html";
+import Outline from "./templates/Outline.html";
 import Loading from "./templates/Loading.html";
 import States from "./templates/States.html";
 import Links from "./templates/Links.html";
@@ -38,6 +39,14 @@ import Links from "./templates/Links.html";
   </Story>
 </Canvas>
 
+## Outline
+
+<Canvas withSource="open">
+  <Story name="Outline" parameters={getDecoratedParameters(Outline)}>
+    {() => Outline}
+  </Story>
+</Canvas>
+
 ## Loading
 
 <Canvas withSource="open">

diff --git a/src/stories/components/Buttons/templates/Outline.html b/src/stories/components/Buttons/templates/Outline.html
@@ -0,0 +1,4 @@
+<button type="button" class="qg-btn btn-outline-dark">Dark outline</button>
+<div style="padding: 5px; margin-top: 5px; background-color: #4a4a4a">
+  <button type="button" class="qg-btn btn-outline-light">Light outline</button>
+</div>
diff --git a/src/stories/components/Buttons/templates/States.html b/src/stories/components/Buttons/templates/States.html
@@ -28,6 +28,22 @@
 <button type="button" class="qg-btn btn-outline-dark active">btn-outline-dark</button>
 <button type="button" class="qg-btn btn-outline-dark" disabled>btn-outline-dark</button>
 
+<div style="padding: 5px; margin-top: 5px; background-color: #4a4a4a">
+<button type="button" class="qg-btn btn-outline-light">btn-outline-light</button>
+</div>
+<div style="padding: 5px; margin-top: 5px; background-color: #4a4a4a">
+<button type="button" class="qg-btn btn-outline-light hover">btn-outline-light</button>
+</div>
+<div style="padding: 5px; margin-top: 5px; background-color: #4a4a4a">
+<button type="button" class="qg-btn btn-outline-light focus">btn-outline-light</button>
+</div>
+<div style="padding: 5px; margin-top: 5px; background-color: #4a4a4a">
+<button type="button" class="qg-btn btn-outline-light active">btn-outline-light</button>
+</div>
+<div style="padding: 5px; margin-top: 5px; background-color: #4a4a4a">
+<button type="button" class="qg-btn btn-outline-light" disabled>btn-outline-light</button>
+</div>
+
 <button type="button" class="qg-btn btn-link">btn-link</button>
 <button type="button" class="qg-btn btn-link hover">btn-link</button>
 <button type="button" class="qg-btn btn-link focus">btn-link</button>