fix(pie-icons-webc): DSW-1539 Remove :host-context usage for icon siz…

…ing (#1107) * fix(pie-icons-webc): DSW-1539 atempt to resolve icon sizing issue * fix(pie-icons-webc): DSW-1539 test fix * fix(pie-icons-webc): DSW-1539 rename class * Update .changeset/few-gifts-shop.md Co-authored-by: Ashley Watson-Nolan <[email protected]> * fix(pie-icons-webc): DSW-1539 removes js and uses css to fix host styling * fix(pie-icon-button): DSW-1539 remove snapshot ref * fix(pie-icons-webc): DSW-1539 revert js changes * Update .changeset/few-gifts-shop.md Co-authored-by: Ashley Watson-Nolan <[email protected]> * fix(pie-icon-button): DSW-1539 provide fallback for button icon host --------- Co-authored-by: Ashley Watson-Nolan <[email protected]>
justeattakeaway · Dec 20, 2023 · 270b467 · 270b467
1 parent 373503f
commit 270b467
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/.changeset/few-gifts-shop.md b/.changeset/few-gifts-shop.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-icons-webc": minor
+---
+
+[Fixed] - Remove `:host-context` usage for icon sizing
diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss
@@ -38,6 +38,7 @@ $breakpoint-wide: 768px;
     --btn-height--small: 40px;
     --btn-height--medium: 48px;
     --btn-height--large: 56px;
+    --btn-icon-display: block;
 
     /**
     * Mixin for updating the button styles based on the size passed in.

diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss
@@ -3,20 +3,21 @@
 // Normally we don't expect consumers to override these, but there are situations where it may be necessary
 :host {
     // The base values are set to the size default, which is for the medium button size
-    --btn-dimension: 48px;
+    --btn-dimension-default: 48px;
 
     // Sizing is set to Medium button icon size, as that is the default
-    --btn-icon-size: 24px;
+    --btn-icon-size-default: 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;
 
-    block-size: var(--btn-dimension);
-    inline-size: var(--btn-dimension);
+    block-size: var(--btn-dimension, var(--btn-dimension-default));
+    inline-size: var(--btn-dimension, var(--btn-dimension-default));
 
     border-color: var(--btn-border-color);
     border-radius: var(--btn-border-radius);
@@ -36,8 +37,8 @@
     }
 
     svg {
-        height: var(--btn-icon-size);
-        width: var(--btn-icon-size);
+        height: var(--btn-icon-size, var(--btn-icon-size-default));
+        width: var(--btn-icon-size, var(--btn-icon-size-default));
     }
 
     &[variant='primary'] {

diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js
@@ -38,11 +38,10 @@ const componentSelector = '${kebabCase(name)}';
 export class ${name} extends LitElement implements IconProps {
     // The following styles make sure that the icon will be sized correctly
     static styles = css\`
-        :host-context(pie-icon-button) svg,
-        :host-context(pie-button) svg {
-            display: block;
-            width: var(--btn-icon-size);
-            height: var(--btn-icon-size);
+        :host svg {
+            display: var(--btn-icon-display, inline);
+            width: var(--btn-icon-size, 24px);
+            height: var(--btn-icon-size, 24px);
         }
     \`;