refactor: button component (css rewrite + remove button-style prop) (#…

…450) * feat: update token package * refactor: CSS rewrite * refactor: remove button-style prop from button component
cds-snc · Feb 21, 2024 · f7d4ce4 · f7d4ce4
1 parent f3a052b
commit f7d4ce4
Show file tree

Hide file tree

Showing 11 changed files with 2,363 additions and 621 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts
@@ -80,15 +80,15 @@ export declare interface GcdsBreadcrumbsItem extends Components.GcdsBreadcrumbsI
 
 
 @ProxyCmp({
-  inputs: ['blurHandler', 'buttonId', 'buttonRole', 'buttonStyle', 'clickHandler', 'disabled', 'download', 'focusHandler', 'href', 'name', 'rel', 'size', 'target', 'type'],
+  inputs: ['blurHandler', 'buttonId', 'buttonRole', 'clickHandler', 'disabled', 'download', 'focusHandler', 'href', 'name', 'rel', 'size', 'target', 'type'],
   methods: ['focusElement']
 })
 @Component({
   selector: 'gcds-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['blurHandler', 'buttonId', 'buttonRole', 'buttonStyle', 'clickHandler', 'disabled', 'download', 'focusHandler', 'href', 'name', 'rel', 'size', 'target', 'type'],
+  inputs: ['blurHandler', 'buttonId', 'buttonRole', 'clickHandler', 'disabled', 'download', 'focusHandler', 'href', 'name', 'rel', 'size', 'target', 'type'],
 })
 export class GcdsButton {
   protected el: HTMLElement;

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -43,7 +43,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
-    "@cdssnc/gcds-tokens": "^1.11.0",
+    "@cdssnc/gcds-tokens": "^1.11.1",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "^0.8.1",
     "@stencil/postcss": "^2.1.0",

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
@@ -68,10 +68,6 @@ export namespace Components {
     | 'secondary'
     | 'danger'
     | 'skip-to-content';
-        /**
-          * Set the style variant
-         */
-        "buttonStyle": 'solid' | 'text-only';
         /**
           * Custom callback function on click event
          */
@@ -1824,10 +1820,6 @@ declare namespace LocalJSX {
     | 'secondary'
     | 'danger'
     | 'skip-to-content';
-        /**
-          * Set the style variant
-         */
-        "buttonStyle"?: 'solid' | 'text-only';
         /**
           * Custom callback function on click event
          */

diff --git a/packages/web/src/components/gcds-button/gcds-button.css b/packages/web/src/components/gcds-button/gcds-button.css
@@ -1,192 +1,143 @@
-:host button,
-:host a {
-  cursor: pointer;
-  font: var(--gcds-button-font);
-  padding: var(--gcds-button-padding);
-  border: var(--gcds-button-border-width) solid transparent;
-  text-decoration: none;
-  border-radius: var(--gcds-button-border-radius);
-  box-sizing: border-box;
-  display: inline-block;
-  width: var(--gcds-button-width);
-  text-align: center;
-  transition: all 0.15s ease-in-out;
-
-  slot {
-    display: initial;
-  }
-
-  /* Button Role Styles */
-  &.button--role-danger {
-    background-color: var(--gcds-button-danger-default-background);
-    color: var(--gcds-button-danger-default-text);
+@layer reset, default, roles, size, disabled, hover, focus, active, mobile;
 
-    &:hover {
-      background-color: var(--gcds-button-danger-hover-background);
-    }
+@layer reset {
+  :host {
+    display: inline-block;
 
-    &:focus {
-      background-color: var(--gcds-button-shared-focus-background);
-      color: var(--gcds-button-shared-focus-text);
-      outline: var(--gcds-button-shared-focus-outline-width) solid
-        var(--gcds-button-shared-focus-background);
-      outline-offset: var(--gcds-button-border-width);
-      border-color: var(--gcds-button-shared-focus-background);
-      box-shadow: var(--gcds-button-shared-focus-box-shadow);
+    .gcds-button {
+      box-sizing: border-box;
+      cursor: pointer;
+      text-decoration: none;
     }
 
-    &:active {
-      background-color: var(--gcds-button-shared-active-background);
-      border-color: var(--gcds-button-shared-active-background);
+    slot {
+      display: initial;
     }
   }
+}
 
-  &.button--role-primary {
-    background-color: var(--gcds-button-primary-default-background);
-    color: var(--gcds-button-primary-default-text);
-
-    &:hover {
-      background-color: var(--gcds-button-primary-hover-background);
-    }
+@layer default {
+  :host .gcds-button {
+    display: inline-block;
+    width: var(--gcds-button-width);
+    font: var(--gcds-button-font);
+    text-align: center;
+    text-wrap: balance;
+    padding: var(--gcds-button-padding);
+    border: var(--gcds-button-border-width) solid transparent;
+    border-radius: var(--gcds-button-border-radius);
+    transition: all 0.15s ease-in-out;
+  }
+}
 
-    &:focus {
-      background-color: var(--gcds-button-shared-focus-background);
-      color: var(--gcds-button-shared-focus-text);
-      outline: var(--gcds-button-shared-focus-outline-width) solid
-        var(--gcds-button-shared-focus-background);
-      outline-offset: var(--gcds-button-border-width);
-      border-color: var(--gcds-button-shared-focus-background);
-      box-shadow: var(--gcds-button-shared-focus-box-shadow);
+@layer roles {
+  :host .gcds-button {
+    /* Button danger */
+    &.button--role-danger {
+      background-color: var(--gcds-button-danger-default-background);
+      color: var(--gcds-button-danger-default-text);
     }
 
-    &:active {
-      background-color: var(--gcds-button-shared-active-background);
-      border-color: var(--gcds-button-shared-active-background);
+    /* Button primary */
+    &.button--role-primary {
+      background-color: var(--gcds-button-primary-default-background);
+      color: var(--gcds-button-primary-default-text);
     }
-  }
 
-  &.button--role-secondary {
-    background-color: var(--gcds-button-secondary-default-background);
-    color: var(--gcds-button-secondary-default-text);
-    border: var(--gcds-button-border-width) solid currentColor;
-
-    &:hover {
-      background-color: var(--gcds-button-secondary-hover-background);
-      border-color: var(--gcds-button-secondary-default-text);
+    /* Button secondary */
+    &.button--role-secondary {
+      background-color: var(--gcds-button-secondary-default-background);
       color: var(--gcds-button-secondary-default-text);
-    }
-
-    &:focus {
-      background-color: var(--gcds-button-shared-focus-background);
-      color: var(--gcds-button-shared-focus-text);
-      outline: var(--gcds-button-shared-focus-outline-width) solid
-        var(--gcds-button-shared-focus-background);
-      outline-offset: var(--gcds-button-border-width);
-      border-color: var(--gcds-button-shared-focus-background);
-      box-shadow: var(--gcds-button-shared-focus-box-shadow);
-
-      &:hover {
-        border-color: var(--gcds-button-shared-focus-background);
+      border: var(--gcds-button-border-width) solid currentColor;
+    }
+
+    /* Button skip to content */
+    &.button--role-skip-to-content {
+      position: absolute;
+      top: var(--gcds-button-skip-top);
+      left: 0;
+      width: inherit;
+      z-index: 3;
+
+      &:not(:focus) {
+        clip: rect(0, 0, 0, 0);
+        height: 0;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        width: 0;
       }
     }
-
-    &:active {
-      background-color: var(--gcds-button-shared-active-background);
-      border-color: var(--gcds-button-shared-active-background) !important;
-    }
   }
+}
 
-  &.button--text-only {
-    background-color: var(--gcds-button-text-only-default-background);
-    color: var(--gcds-button-text-only-default-text);
-
-    &:not([aria-disabled='true']) {
-      text-decoration: underline;
-      text-underline-offset: 0.2em;
-      text-decoration-color: currentColor;
-      text-decoration-thickness: var(
-        --gcds-button-text-only-default-decoration-thickness
-      );
-    }
-
-    &:hover {
-      background-color: var(--gcds-button-text-only-default-background);
-      color: var(--gcds-button-text-only-hover-text);
-      text-decoration-thickness: var(
-        --gcds-button-text-only-hover-decoration-thickness
-      );
-    }
-
-    &:focus {
-      background-color: var(--gcds-button-shared-focus-background);
-      color: var(--gcds-button-shared-focus-text);
-      outline: var(--gcds-button-shared-focus-outline-width) solid
-        var(--gcds-button-shared-focus-background);
-      outline-offset: var(--gcds-button-border-width);
-      border-color: var(--gcds-button-shared-focus-background);
-      box-shadow: var(--gcds-button-shared-focus-box-shadow);
-      text-decoration: none;
-    }
+@layer size {
+  :host .gcds-button.button--small {
+    font: var(--gcds-button-small-font);
+    padding: var(--gcds-button-small-padding);
+  }
+}
 
-    &:active {
-      background-color: var(--gcds-button-shared-active-background);
-      border-color: var(--gcds-button-shared-active-background);
-    }
+@layer disabled {
+  :host .gcds-button[aria-disabled='true'] {
+    background-color: var(--gcds-button-shared-disabled-background);
+    color: var(--gcds-button-shared-disabled-text);
+    cursor: not-allowed;
+    border: var(--gcds-button-border-width) solid currentColor;
+    pointer-events: none;
   }
+}
 
-  &.button--role-skip-to-content {
-    position: absolute;
-    top: var(--gcds-button-skip-top);
-    left: 0;
-    width: inherit;
-    z-index: 3;
-
-    &:not(:focus) {
-      clip: rect(0, 0, 0, 0);
-      height: 0;
-      margin: 0;
-      overflow: hidden;
-      padding: 0;
-      width: 0;
-    }
+@layer hover {
+  @media (hover: hover) {
+    :host .gcds-button:hover {
+      /* Danger button */
+      &.button--role-danger {
+        background-color: var(--gcds-button-danger-hover-background);
+      }
 
-    &:focus {
-      background-color: var(--gcds-button-shared-focus-background);
-      color: var(--gcds-button-shared-focus-text);
-      outline: var(--gcds-button-shared-focus-outline-width) solid
-        var(--gcds-button-shared-focus-background);
-      outline-offset: var(--gcds-button-border-width);
-      border-color: var(--gcds-button-shared-focus-background);
-      box-shadow: var(--gcds-button-shared-focus-box-shadow);
-      text-decoration: none;
-    }
+      /* Primary button */
+      &.button--role-primary {
+        background-color: var(--gcds-button-primary-hover-background);
+      }
 
-    &:active {
-      background-color: var(--gcds-button-shared-active-background);
-      border-color: var(--gcds-button-shared-active-background);
+      /* Secondary button */
+      &.button--role-secondary {
+        background-color: var(--gcds-button-secondary-hover-background);
+      }
     }
   }
+}
 
-  /* Shared Styles */
-  &[aria-disabled='true'] {
-    background-color: var(--gcds-button-shared-disabled-background);
-    color: var(--gcds-button-shared-disabled-text);
-    cursor: not-allowed;
-    border: var(--gcds-button-border-width) solid currentColor;
-    pointer-events: none;
+@layer focus {
+  :host .gcds-button:focus {
+    background-color: var(--gcds-button-shared-focus-background);
+    color: var(--gcds-button-shared-focus-text);
+    outline: var(--gcds-button-shared-focus-outline-width) solid
+      var(--gcds-button-shared-focus-background);
+    outline-offset: var(--gcds-button-border-width);
+    border-color: var(--gcds-button-shared-focus-background);
+    box-shadow: var(--gcds-button-shared-focus-box-shadow);
   }
+}
 
-  /* Small button styling */
-  &.button--small {
-    font: var(--gcds-button-small-font);
-    padding: var(--gcds-button-small-padding);
+@layer active {
+  :host .gcds-button:active {
+    background-color: var(--gcds-button-shared-active-background);
+    border-color: var(--gcds-button-shared-active-background);
   }
 }
 
-@media screen and (max-width: 30rem) {
-  :host button:not(.button--text-only),
-  :host a:not(.button--text-only) {
-    width: var(--gcds-button-mobile-width);
-    margin: var(--gcds-button-mobile-margin);
+/* Note: mobile specific style decision */
+@layer mobile {
+  @media screen and (max-width: 30rem) {
+    :host {
+      display: block;
+
+      .gcds-button {
+        width: var(--gcds-button-mobile-width);
+        margin: var(--gcds-button-mobile-margin);
+      }
+    }
   }
 }