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

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

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/chilled-snails-cry.md b/.changeset/chilled-snails-cry.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-icon-button": patch
+---
+
+[Changed] - `--btn-icon-display`, `--btn-icon-size` and `--btn-icon-size-default` to `--icon-display-override` and `--icon-size-override` variables
diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss
@@ -6,15 +6,15 @@
     --btn-dimension-default: 48px;
 
     // Sizing is set to Medium button icon size, as that is the default
-    --btn-icon-size-default: 24px;
+    --icon-size-override: 24px;
 }
 
 // Base button styles
 .o-iconBtn {
     --btn-border-radius: var(--dt-radius-rounded-e);
     --btn-bg-color: var(--dt-color-interactive-brand);
     --btn-icon-fill: var(--dt-color-content-interactive-primary);
-    --btn-icon-display: block;
+    --icon-display-override: block;
 
     block-size: var(--btn-dimension, var(--btn-dimension-default));
     inline-size: var(--btn-dimension, var(--btn-dimension-default));
@@ -37,8 +37,8 @@
     }
 
     svg {
-        height: var(--btn-icon-size, var(--btn-icon-size-default));
-        width: var(--btn-icon-size, var(--btn-icon-size-default));
+        height: var(--icon-size-override);
+        width: var(--icon-size-override);
     }
 
     &[variant='primary'] {
@@ -109,7 +109,7 @@
 
     &[size='xsmall'] {
         --btn-dimension: 32px;
-        --btn-icon-size: 20px;
+        --icon-size-override: 20px;
     }
 
     &[size='small'] {
@@ -122,7 +122,7 @@
 
     &[size='large'] {
         --btn-dimension: 56px;
-        --btn-icon-size: 28px;
+        --icon-size-override: 28px;
     }
 }