feat(ld-button): add ghost on brand variant

BREAKING CHANGE
emdgroup-liquid · Dec 8, 2021 · 2540246 · 2540246
1 parent d468293
commit 2540246
Show file tree

Hide file tree

Showing 70 changed files with 1,743 additions and 950 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
diff --git a/screenshot/images/0198b4848ebf96fb9c62bffa936ee989.png b/screenshot/images/0198b4848ebf96fb9c62bffa936ee989.png
diff --git a/screenshot/images/097d49136d5ede6189fc93a63c059ff7.png b/screenshot/images/097d49136d5ede6189fc93a63c059ff7.png
diff --git a/screenshot/images/0bc81aab1ffed0296438862eb2d93ae9.png b/screenshot/images/0bc81aab1ffed0296438862eb2d93ae9.png
diff --git a/screenshot/images/0c2691f76f77c80944a5eef29e86805c.png b/screenshot/images/0c2691f76f77c80944a5eef29e86805c.png
diff --git a/screenshot/images/10b9d06ee3d4115fdb79e70df4393698.png b/screenshot/images/10b9d06ee3d4115fdb79e70df4393698.png
diff --git a/screenshot/images/12e9c8dcefc1501dac4c782666c3cf4e.png b/screenshot/images/12e9c8dcefc1501dac4c782666c3cf4e.png
diff --git a/screenshot/images/163f5ade6f0eb84e9ba255b8e611432b.png b/screenshot/images/163f5ade6f0eb84e9ba255b8e611432b.png
diff --git a/screenshot/images/1fbe58b4b23f9e0203ced81812921c2a.png b/screenshot/images/1fbe58b4b23f9e0203ced81812921c2a.png
diff --git a/screenshot/images/20d25ff3afafd74992cee51e1b074d0b.png b/screenshot/images/20d25ff3afafd74992cee51e1b074d0b.png
diff --git a/screenshot/images/26fdf821abcb8d851d0df87aaa423b12.png b/screenshot/images/26fdf821abcb8d851d0df87aaa423b12.png
diff --git a/screenshot/images/283a16e79cff2ebf21df5562ca399f52.png b/screenshot/images/283a16e79cff2ebf21df5562ca399f52.png
diff --git a/...ages/aeae40721ca14e0b8263a2f246bf91d8.png → ...ages/2848d0e4f9369be5aebcc6647399cd8c.png b/...ages/aeae40721ca14e0b8263a2f246bf91d8.png → ...ages/2848d0e4f9369be5aebcc6647399cd8c.png
diff --git a/screenshot/images/290fb621bcec877e177a2db7a4cdd2ea.png b/screenshot/images/290fb621bcec877e177a2db7a4cdd2ea.png
diff --git a/screenshot/images/29c4b7a67343f2bd6c2731685cae0730.png b/screenshot/images/29c4b7a67343f2bd6c2731685cae0730.png
diff --git a/screenshot/images/358e4a18a3282e7eec11c058d72d5795.png b/screenshot/images/358e4a18a3282e7eec11c058d72d5795.png
diff --git a/screenshot/images/3cc2e83ef2043fca23febf3ac6ed6251.png b/screenshot/images/3cc2e83ef2043fca23febf3ac6ed6251.png
diff --git a/screenshot/images/3e63d0cd81417003ec0206740827d5cc.png b/screenshot/images/3e63d0cd81417003ec0206740827d5cc.png
diff --git a/screenshot/images/3f221c51bfd2a963ac9a0036d9028f3b.png b/screenshot/images/3f221c51bfd2a963ac9a0036d9028f3b.png
diff --git a/screenshot/images/4567cae87cc4fcec8247dcf1c5aaea4b.png b/screenshot/images/4567cae87cc4fcec8247dcf1c5aaea4b.png
diff --git a/screenshot/images/4666c1b61920046c62a199a0827a4fc7.png b/screenshot/images/4666c1b61920046c62a199a0827a4fc7.png
diff --git a/screenshot/images/4e55b4fdfda45a9d29abc604159aec42.png b/screenshot/images/4e55b4fdfda45a9d29abc604159aec42.png
diff --git a/screenshot/images/59c89cf98309c1d584a36a4f0759e771.png b/screenshot/images/59c89cf98309c1d584a36a4f0759e771.png
diff --git a/screenshot/images/63c1663086d9b842be18f2a9ac130d20.png b/screenshot/images/63c1663086d9b842be18f2a9ac130d20.png
diff --git a/...ages/81cb8e13259c35735818ac541914f214.png → ...ages/67a92c335300e5400260becd432e2d6c.png b/...ages/81cb8e13259c35735818ac541914f214.png → ...ages/67a92c335300e5400260becd432e2d6c.png
diff --git a/...ages/c887f125986d10587a5b3253634773c0.png → ...ages/688c01a9fe4f2a10dcffe5a5ae3a9acd.png b/...ages/c887f125986d10587a5b3253634773c0.png → ...ages/688c01a9fe4f2a10dcffe5a5ae3a9acd.png
diff --git a/screenshot/images/6959b8a8f4788bdaa384cb58b4765348.png b/screenshot/images/6959b8a8f4788bdaa384cb58b4765348.png
diff --git a/screenshot/images/77225b691c8b29ef7d4d0e44bd61bf9a.png b/screenshot/images/77225b691c8b29ef7d4d0e44bd61bf9a.png
diff --git a/...ages/ef04d8c96d7cd21f5dc08537bff48c22.png → ...ages/7a1a0aaca441487bffdd962d07f1bb58.png b/...ages/ef04d8c96d7cd21f5dc08537bff48c22.png → ...ages/7a1a0aaca441487bffdd962d07f1bb58.png
diff --git a/screenshot/images/7c1ce3757c1f789f796bbadfba32e414.png b/screenshot/images/7c1ce3757c1f789f796bbadfba32e414.png
diff --git a/screenshot/images/8005256ba45d9d05ad142109416554e2.png b/screenshot/images/8005256ba45d9d05ad142109416554e2.png
diff --git a/screenshot/images/81708467fd1882862661baa133b637ea.png b/screenshot/images/81708467fd1882862661baa133b637ea.png
diff --git a/screenshot/images/8277462b81eaa71e32a1b87811fa7c91.png b/screenshot/images/8277462b81eaa71e32a1b87811fa7c91.png
diff --git a/screenshot/images/88164cb26db12536206782d6bd989269.png b/screenshot/images/88164cb26db12536206782d6bd989269.png
diff --git a/screenshot/images/8cd5872d628d66c8e4b4882c10859927.png b/screenshot/images/8cd5872d628d66c8e4b4882c10859927.png
diff --git a/screenshot/images/8d503085c88747011c8a12f8ea4c2197.png b/screenshot/images/8d503085c88747011c8a12f8ea4c2197.png
diff --git a/screenshot/images/8da289be661b649ba920ce93adb4eb77.png b/screenshot/images/8da289be661b649ba920ce93adb4eb77.png
diff --git a/...ages/73322ff5333b5b340cf50500f6bbbb6b.png → ...ages/8df3f8ba954e6252f9b40607784d02b8.png b/...ages/73322ff5333b5b340cf50500f6bbbb6b.png → ...ages/8df3f8ba954e6252f9b40607784d02b8.png
diff --git a/screenshot/images/968cad673ba4e13684548840af4a1390.png b/screenshot/images/968cad673ba4e13684548840af4a1390.png
diff --git a/screenshot/images/9d82496ae17b2370a225a4485cf75325.png b/screenshot/images/9d82496ae17b2370a225a4485cf75325.png
diff --git a/screenshot/images/a05008aaeef508ba500bcdf9412d0614.png b/screenshot/images/a05008aaeef508ba500bcdf9412d0614.png
diff --git a/screenshot/images/ad170cefee526e5c0973717efe443c8a.png b/screenshot/images/ad170cefee526e5c0973717efe443c8a.png
diff --git a/screenshot/images/ae2a046aff437d4bc5b0a9679e98f193.png b/screenshot/images/ae2a046aff437d4bc5b0a9679e98f193.png
diff --git a/screenshot/images/b2446711b789fffece779d953284b89d.png b/screenshot/images/b2446711b789fffece779d953284b89d.png
diff --git a/screenshot/images/b3175af8a42e099ec8d1c70182acc733.png b/screenshot/images/b3175af8a42e099ec8d1c70182acc733.png
diff --git a/screenshot/images/b7920c7ddd4b0f32e324116a2de51759.png b/screenshot/images/b7920c7ddd4b0f32e324116a2de51759.png
diff --git a/screenshot/images/c24112e3d6a207b43f9e98bf4a5e9202.png b/screenshot/images/c24112e3d6a207b43f9e98bf4a5e9202.png
diff --git a/screenshot/images/cb155284ec6a7ee54dfb91ce9546a628.png b/screenshot/images/cb155284ec6a7ee54dfb91ce9546a628.png
diff --git a/screenshot/images/cd6c307427e030b3986e2b98971e6534.png b/screenshot/images/cd6c307427e030b3986e2b98971e6534.png
diff --git a/screenshot/images/d0811535a0bb7961581368f3c8253bb8.png b/screenshot/images/d0811535a0bb7961581368f3c8253bb8.png
diff --git a/screenshot/images/d0b2da8f36ea499b426255620f952a14.png b/screenshot/images/d0b2da8f36ea499b426255620f952a14.png
diff --git a/screenshot/images/dbc9440d95e9ddae2f8e998b2e3425c8.png b/screenshot/images/dbc9440d95e9ddae2f8e998b2e3425c8.png
diff --git a/screenshot/images/e0a2be33daf296200f2262a40733c4ca.png b/screenshot/images/e0a2be33daf296200f2262a40733c4ca.png
diff --git a/screenshot/images/e317e5b117e0875e503a422f46e34f55.png b/screenshot/images/e317e5b117e0875e503a422f46e34f55.png
diff --git a/...ages/73ed997c7498b796e754b8eed5be40a3.png → ...ages/e348ca24cacd57a6d113c6c0144d9130.png b/...ages/73ed997c7498b796e754b8eed5be40a3.png → ...ages/e348ca24cacd57a6d113c6c0144d9130.png
diff --git a/screenshot/images/e4cfada339991289beeba319deddcb46.png b/screenshot/images/e4cfada339991289beeba319deddcb46.png
diff --git a/screenshot/images/e4f7fe0ce907f4c7850ac32bd5a2b698.png b/screenshot/images/e4f7fe0ce907f4c7850ac32bd5a2b698.png
diff --git a/screenshot/images/eb5ba305035736554a474dcbdb112dd0.png b/screenshot/images/eb5ba305035736554a474dcbdb112dd0.png
diff --git a/screenshot/images/f05bc1df89d04e84a00082ce4f2dd95e.png b/screenshot/images/f05bc1df89d04e84a00082ce4f2dd95e.png
diff --git a/screenshot/images/f690d90401888167a0fcaca057a5fc90.png b/screenshot/images/f690d90401888167a0fcaca057a5fc90.png
diff --git a/screenshot/images/f759097d1a720cd9767fbe6fd57588cb.png b/screenshot/images/f759097d1a720cd9767fbe6fd57588cb.png
diff --git a/screenshot/images/f8cda65279835dfe52d22226de972c0b.png b/screenshot/images/f8cda65279835dfe52d22226de972c0b.png
diff --git a/screenshot/images/fa7b19ae697c84f184ec65f5db5217f9.png b/screenshot/images/fa7b19ae697c84f184ec65f5db5217f9.png
diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css
@@ -391,86 +391,92 @@
   }
 }
 
-.ld-button--on-brand-color {
-  background-color: var(--ld-button-on-brand-bg-color, var(--ld-col-wht));
-  color: var(--ld-button-on-brand-text-color, var(--ld-thm-primary));
+.ld-button--brand-color {
+  &:where(:not(.ld-button--secondary):not(.ld-button--ghost)) {
+    background-color: var(--ld-button-brand-bg-color, var(--ld-col-wht));
+    color: var(--ld-button-brand-text-color, var(--ld-thm-primary));
 
-  &:where(&:not(:disabled):not([aria-disabled='true'])) {
-    &:where(:focus:focus-visible) {
-      color: var(
-        --ld-button-on-brand-text-color-focus,
-        var(--ld-thm-primary-focus)
-      );
-    }
-    @media (hover: hover) {
-      &:where(:hover) {
+    &:where(&:not(:disabled):not([aria-disabled='true'])) {
+      &:where(:focus:focus-visible) {
+        color: var(
+          --ld-button-brand-text-color-focus,
+          var(--ld-thm-primary-focus)
+        );
+      }
+      @media (hover: hover) {
+        &:where(:hover) {
+          background-color: var(
+            --ld-button-brand-bg-color-hover,
+            var(--ld-col-wht-alpha-high)
+          );
+        }
+      }
+      &:where(:active),
+      &:where(:active:focus-visible) {
         background-color: var(
-          --ld-button-on-brand-bg-color-hover,
-          var(--ld-col-wht-alpha-high)
+          --ld-button-brand-bg-color-active,
+          var(--ld-col-wht-alpha-medium)
         );
       }
     }
-    &:where(:active),
-    &:where(:active:focus-visible) {
-      background-color: var(
-        --ld-button-on-brand-bg-color-active,
-        var(--ld-col-wht-alpha-medium)
-      );
-    }
   }
-}
 
-.ld-button--secondary-on-brand-color {
-  background-color: transparent;
-  color: var(--ld-button-secondary-on-brand-text-color, var(--ld-col-wht));
-  box-shadow: inset 0px 0px 0px 2px;
+  &.ld-button--secondary,
+  &.ld-button--ghost {
+    background-color: transparent;
+    color: var(--ld-button-secondary-brand-text-color, var(--ld-col-wht));
 
-  .ld-button__progress::after {
-    background-color: var(
-      --ld-button-secondary-on-brand-progress-color,
-      var(--ld-col-wht)
-    );
-  }
-
-  &:where(&:not(:disabled):not([aria-disabled='true'])) {
-    &:where(:focus:focus-visible) {
-      color: var(
-        --ld-button-secondary-on-brand-text-color,
-        var(--ld-col-wht-alpha-high)
+    .ld-button__progress::after {
+      background-color: var(
+        --ld-button-secondary-brand-progress-color,
+        var(--ld-col-wht)
       );
+    }
 
-      .ld-button__progress::after {
-        background-color: var(
-          --ld-button-secondary-on-brand-progress-color-focus,
+    &:where(&:not(:disabled):not([aria-disabled='true'])) {
+      &:where(:focus:focus-visible) {
+        color: var(
+          --ld-button-secondary-brand-text-color,
           var(--ld-col-wht-alpha-high)
         );
+
+        .ld-button__progress::after {
+          background-color: var(
+            --ld-button-secondary-brand-progress-color-focus,
+            var(--ld-col-wht-alpha-high)
+          );
+        }
       }
-    }
-    @media (hover: hover) {
-      &:where(:hover) {
-        background-color: var(
-          --ld-button-secondary-on-brand-bg-color-hover,
-          var(--ld-col-wht-alpha-low)
-        );
+      @media (hover: hover) {
+        &:where(:hover) {
+          background-color: var(
+            --ld-button-secondary-brand-bg-color-hover,
+            var(--ld-col-wht-alpha-low)
+          );
+        }
       }
-    }
-    &:where(:active),
-    &:where(:active:focus-visible) {
-      background-color: var(
-        --ld-button-secondary-on-brand-bg-color-active,
-        var(--ld-col-wht-alpha-lowest)
-      );
-      color: var(
-        --ld-button-secondary-on-brand-text-color,
-        var(--ld-col-wht-alpha-highest)
-      );
-
-      .ld-button__progress::after {
+      &:where(:active),
+      &:where(:active:focus-visible) {
         background-color: var(
-          --ld-button-secondary-on-brand-progress-color-active,
+          --ld-button-secondary-brand-bg-color-active,
+          var(--ld-col-wht-alpha-lowest)
+        );
+        color: var(
+          --ld-button-secondary-brand-text-color,
           var(--ld-col-wht-alpha-highest)
         );
+
+        .ld-button__progress::after {
+          background-color: var(
+            --ld-button-secondary-brand-progress-color-active,
+            var(--ld-col-wht-alpha-highest)
+          );
+        }
       }
     }
   }
+
+  &.ld-button--secondary {
+    box-shadow: inset 0px 0px 0px 2px;
+  }
 }
diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx
@@ -60,17 +60,15 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
   @Prop({ mutable: true }) justifyContent?: 'start' | 'end' | 'between'
 
   /** Display mode. */
-  @Prop() mode?:
-    | 'highlight'
-    | 'secondary'
-    | 'ghost'
-    | 'danger'
-    | 'on-brand-color'
-    | 'secondary-on-brand-color'
+  @Prop() mode?: 'highlight' | 'secondary' | 'ghost' | 'danger'
 
   /** Used to specify the name of the control. */
   @Prop() name?: string
 
+  // `onBrandColor` is not possible, as Stencil expects `on*` props to be events.
+  /** Style the button so that it looks good on the current theme's primary color. */
+  @Prop() brandColor?: boolean
+
   /** Displays a progress bar at the bottom of the button. */
   @Prop() progress?: 'pending' | number
 
@@ -122,7 +120,6 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
   }
 
   private clickHiddenButton() {
-    console.log('drin')
     const button = document.createElement('button')
 
     button.style.pointerEvents = 'none'
@@ -199,10 +196,11 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
   render() {
     const cl = getClassNames([
       'ld-button',
-      this.size && `ld-button--${this.size}`,
-      this.mode && `ld-button--${this.mode}`,
       this.alignText && `ld-button--align-text-${this.alignText}`,
       this.justifyContent && `ld-button--justify-${this.justifyContent}`,
+      this.mode && `ld-button--${this.mode}`,
+      this.brandColor && `ld-button--brand-color`,
+      this.size && `ld-button--${this.size}`,
     ])
 
     const Tag = this.href ? 'a' : 'button'