fix(pie-icons-webc): DSW-1539 icon display and size override variables

justeattakeaway · Dec 22, 2023 · dc5af10 · dc5af10
1 parent 077747d
commit dc5af10
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/.changeset/fluffy-dolls-flash.md b/.changeset/fluffy-dolls-flash.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-icons-webc": patch
+---
+
+[Changed] - `--btn-icon-size` and `--btn-icon-display` to `--icon-display-override` and `--icon-size-override` variable for display, width and height icon styles for `:host svg`
diff --git a/.changeset/hip-files-wash.md b/.changeset/hip-files-wash.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-button": patch
+---
+
+[Changed] - `--btn-icon-display` and `--btn-icon-size` to `--icon-display-override` and `--icon-size-override` variables
diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss
@@ -38,7 +38,7 @@ $breakpoint-wide: 768px;
     --btn-height--small: 40px;
     --btn-height--medium: 48px;
     --btn-height--large: 56px;
-    --btn-icon-display: block;
+    --icon-display-override: block;
 
     /**
     * Mixin for updating the button styles based on the size passed in.
@@ -50,31 +50,31 @@ $breakpoint-wide: 768px;
             --btn-padding: 6px var(--dt-spacing-b);
             --btn-font-size: #{p.font-size(--dt-font-size-14)};
             --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
-            --btn-icon-size: 16px;
+            --icon-size-override: 16px;
         } @else if $size == 'small-expressive' {
             --btn-height: var(--btn-height--small);
             --btn-padding: 6px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-            --btn-icon-size: 20px;
+            --icon-size-override: 20px;
         } @else if $size == 'small-productive' {
             --btn-height: var(--btn-height--small);
             --btn-padding: 8px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-16)};
             --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
-            --btn-icon-size: 20px;
+            --icon-size-override: 20px;
         } @else if $size == 'medium' {
             --btn-height: var(--btn-height--medium);
             --btn-padding: 10px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-            --btn-icon-size: 24px;
+            --icon-size-override: 24px;
         } @else if $size == 'large' {
             --btn-height: var(--btn-height--large);
             --btn-padding: 14px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-            --btn-icon-size: 24px;
+            --icon-size-override: 24px;
         }
     }
 
@@ -255,6 +255,6 @@ $breakpoint-wide: 768px;
 
 // Used to size an SVG if one is passed in (when not using the component icons)
 ::slotted(svg) {
-    height: var(--btn-icon-size);
-    width: var(--btn-icon-size);
+    height: var(--icon-size-override);
+    width: var(--icon-size-override);
 }
diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js
@@ -39,9 +39,9 @@ export class ${name} extends LitElement implements IconProps {
     // The following styles make sure that the icon will be sized correctly
     static styles = css\`
         :host svg {
-            display: var(--btn-icon-display, inline);
-            width: var(--btn-icon-size, 24px);
-            height: var(--btn-icon-size, 24px);
+            display: var(--icon-display-override);
+            width: var(--icon-size-override);
+            height: var(--icon-size-override);
         }
     \`;