Add New Button Styles

Resolves #63 New buttonStyle property on the modus-button allows for borderless, fill (default), or outline. Add accessibility attributes.
trimble-oss · Jun 22, 2021 · 7294cd8 · 7294cd8
1 parent a2a7765
commit 7294cd8
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 115 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trimble-oss/modus-web-components",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Trimble Modus Web Component Library",
   "repository": {
     "type": "git",

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -43,15 +43,19 @@ export namespace Components {
     }
     interface ModusButton {
         /**
-          * (optional) The color of the button
+          * (optional) The style of the button
+         */
+        "buttonStyle": 'borderless' | 'fill' | 'outline';
+        /**
+          * (optional) The color of the button.
          */
         "color": 'danger' | 'default' | 'primary' | 'secondary' | 'warning';
         /**
-          * (optional) Disables the button
+          * (optional) Disables the button.
          */
         "disabled": boolean;
         /**
-          * (optional) The size of the button
+          * (optional) The size of the button.
          */
         "size": 'small' | 'medium' | 'large';
     }
@@ -427,19 +431,23 @@ declare namespace LocalJSX {
     }
     interface ModusButton {
         /**
-          * (optional) The color of the button
+          * (optional) The style of the button
+         */
+        "buttonStyle"?: 'borderless' | 'fill' | 'outline';
+        /**
+          * (optional) The color of the button.
          */
         "color"?: 'danger' | 'default' | 'primary' | 'secondary' | 'warning';
         /**
-          * (optional) Disables the button
+          * (optional) Disables the button.
          */
         "disabled"?: boolean;
         /**
-          * (optional) An event that fires on button click
+          * (optional) An event that fires on button click.
          */
         "onButtonClick"?: (event: CustomEvent<any>) => void;
         /**
-          * (optional) The size of the button
+          * (optional) The size of the button.
          */
         "size"?: 'small' | 'medium' | 'large';
     }

diff --git a/src/components/modus-button/modus-button.e2e.ts b/src/components/modus-button/modus-button.e2e.ts
@@ -9,6 +9,19 @@ describe('modus-button', () => {
     expect(element).toHaveClass('hydrated');
   });
 
+  it('renders changes to the buttonStyle prop', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<modus-button></modus-button>');
+    const component = await page.find('modus-button');
+    const element = await page.find('modus-button >>> button');
+    expect(element).toHaveClass('style-fill');
+
+    component.setProperty('buttonStyle', 'borderless');
+    await page.waitForChanges();
+    expect(element).toHaveClass('style-borderless');
+  });
+
   it('renders changes to the color prop', async () => {
     const page = await newE2EPage();
 

diff --git a/src/components/modus-button/modus-button.scss b/src/components/modus-button/modus-button.scss
@@ -1,18 +1,18 @@
 button {
   align-items: center;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  cursor: pointer;
+  border: $rem-1px solid transparent;
+  border-radius: $rem-2px;
+  cursor: default;
   display: inline-flex;
   font-weight: $btn-font-weight;
-  text-align: center;
+  justify-content: center;
+  padding: 0;
+  position: relative;
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   user-select: none;
   white-space: nowrap;
-  vertical-align: middle;
 
   &:disabled {
-    cursor: default;
     opacity: .3;
   }
 
@@ -34,88 +34,139 @@ button {
     padding: 0 24px;
   }
 
-  &.color-danger {
-    background-color: $col_red;
-    border-color: $col_red;
-    color: $col_white;
-    fill: $col_white;
-  }
-
-  &.color-danger:hover {
-    background-color: $col_red_light;
-    border-color: $col_red_light;
-  }
-
-  &.color-danger:active {
-    background-color: $col_red_dark;
-    border-color: $col_red_dark;
-  }
-
-  &.color-primary {
-    background-color: $col_blue;
-    border-color: $col_blue;
-    color: $col_white;
-    fill: $col_white;
-  }
-
-  &.color-primary:hover {
-    background-color: $col_blue_light;
-    border-color: $col_blue_light;
-  }
-
-  &.color-primary:active {
-    background-color: $col_blue_dark;
-    border-color: $col_blue_dark;
-  }
-
-  &.color-secondary {
-    background-color: $secondary;
-    border-color: $secondary;
-    color: $col_white;
-    fill: $col_white;
-  }
-
-  &.color-secondary:hover {
-    background-color: $col_gray_6;
-    border-color: $col_gray_6;
-  }
-
-  &.color-secondary:active {
-    background-color: $col_gray_8;
-    border-color: $col_gray_8;
-  }
-
-  &.color-tertiary {
-    background-color: $tertiary;
-    border-color: $tertiary;
-    color: $col_gray_dark_3;
-    fill: $col_gray_dark_3;
-  }
-
-  &.color-tertiary:hover {
-    background-color: $col_gray_0;
-    border-color: $col_gray_0;
-  }
-
-  &.color-tertiary:active {
-    background-color: $col_gray_2;
-    border-color: $col_gray_2;
-  }
-
-  &.color-warning {
-    background-color: $col_yellow;
-    border-color: $col_yellow;
-    color: $col_white;
-    fill: $col_white;
-  }
-
-  &.color-warning:hover {
-    background-color: $col_yellow_light;
-    border-color: $col_yellow_light;
-  }
-
-  &.color-warning:active {
-    background-color: $col_yellow_dark;
-    border-color: $col_yellow_dark;
+  &.style-borderless {
+    background-color: transparent;
+    color: $col_blue_dark;
+    fill: $col_blue_dark;
+
+    &:hover:not([disabled]) {
+      background-color: $col_gray_light;
+    }
+
+    &:active:not([disabled]) {
+      background-color: $col_blue_pale;
+    }
+  }
+
+  &.style-fill {
+    &.color-danger {
+      background-color: $col_red;
+      border-color: $col_red;
+      color: $col_white;
+      fill: $col_white;
+    }
+
+    &.color-danger:hover:not([disabled]) {
+      background-color: $col_red_light;
+      border-color: $col_red_light;
+    }
+
+    &.color-danger:active:not([disabled]) {
+      background-color: $col_red_dark;
+      border-color: $col_red_dark;
+    }
+
+    &.color-primary {
+      background-color: $col_blue;
+      border-color: $col_blue;
+      color: $col_white;
+      fill: $col_white;
+    }
+
+    &.color-primary:hover:not([disabled]) {
+      background-color: $col_blue_light;
+      border-color: $col_blue_light;
+    }
+
+    &.color-primary:active:not([disabled]) {
+      background-color: $col_blue_dark;
+      border-color: $col_blue_dark;
+    }
+
+    &.color-secondary {
+      background-color: $secondary;
+      border-color: $secondary;
+      color: $col_white;
+      fill: $col_white;
+    }
+
+    &.color-secondary:hover:not([disabled]) {
+      background-color: $col_gray_6;
+      border-color: $col_gray_6;
+    }
+
+    &.color-secondary:active:not([disabled]) {
+      background-color: $col_gray_8;
+      border-color: $col_gray_8;
+    }
+
+    &.color-tertiary {
+      background-color: $tertiary;
+      border-color: $tertiary;
+      color: $col_gray_dark_3;
+      fill: $col_gray_dark_3;
+    }
+
+    &.color-tertiary:hover:not([disabled]) {
+      background-color: $col_gray_0;
+      border-color: $col_gray_0;
+    }
+
+    &.color-tertiary:active:not([disabled]) {
+      background-color: $col_gray_2;
+      border-color: $col_gray_2;
+    }
+
+    &.color-warning {
+      background-color: $col_yellow;
+      border-color: $col_yellow;
+      color: $col_white;
+      fill: $col_white;
+    }
+
+    &.color-warning:hover:not([disabled]) {
+      background-color: $col_yellow_light;
+      border-color: $col_yellow_light;
+    }
+
+    &.color-warning:active:not([disabled]) {
+      background-color: $col_yellow_dark;
+      border-color: $col_yellow_dark;
+    }
+  }
+
+  &.style-outline {
+    &.color-primary {
+      background-color: transparent;
+      border-color: $col_trimble_blue_mid;
+      color: $col_trimble_blue_mid;
+      fill: $col_trimble_blue_mid;
+    }
+
+    &.color-primary:hover:not([disabled]) {
+      background-color: #DDE7F1;
+      border-color: #017ED1;
+    }
+
+    &.color-primary:active:not([disabled]) {
+      background-color: #D2DFEC;
+      border-color: #005085;
+    }
+
+    &.color-secondary {
+      background-color: transparent;
+      border-color: $col_trimble_gray;
+      color: $col_trimble_gray;
+      fill: $col_trimble_gray;
+    }
+
+    &.color-secondary:hover:not([disabled]) {
+      background-color: #E0E0E4;
+    }
+
+    &.color-secondary:active:not([disabled]) {
+      background-color: $col_gray_2;
+      border-color: $col_gray_8;
+    }
   }
 }
diff --git a/src/components/modus-button/modus-button.spec.ts b/src/components/modus-button/modus-button.spec.ts
@@ -10,7 +10,7 @@ describe('modus-button', () => {
     expect(root).toEqualHtml(`
       <modus-button>
         <mock:shadow-root>
-          <button class="size-medium color-tertiary">
+          <button aria-label="" class="size-medium color-tertiary style-fill" role="button">
             <slot></slot>
           </button>
         </mock:shadow-root>
@@ -26,7 +26,7 @@ describe('modus-button', () => {
     expect(root).toEqualHtml(`
       <modus-button>
         <mock:shadow-root>
-          <button class="size-medium color-tertiary">
+          <button aria-label="Button" class="size-medium color-tertiary style-fill" role="button">
             <slot></slot>
           </button>
         </mock:shadow-root>
@@ -35,7 +35,19 @@ describe('modus-button', () => {
     `);
   });
 
-  it('should get the correct class by type', async () => {
+  it('should get the correct class by buttonStyle', async () => {
+    const modusButton = new ModusButton();
+    let className = modusButton.classByButtonStyle.get(modusButton.buttonStyle);
+    expect(className).toEqual('style-fill');
+
+    className = modusButton.classByButtonStyle.get('borderless');
+    expect(className).toEqual('style-borderless');
+
+    className = modusButton.classByButtonStyle.get('outline');
+    expect(className).toEqual('style-outline');
+  });
+
+  it('should get the correct class by color', async () => {
     const modusButton = new ModusButton();
     let className = modusButton.classByColor.get(modusButton.color);
     expect(className).toEqual('color-tertiary');