Boxel UI/refactor icon button (#1747)

* prevent icon overflow in icon-button component, use icon button wrapper width & height as max constraints * add boxel-icon-button-background cssvar * fix typo * remove hasCustomSizeAttributes and minor css changes --------- Co-authored-by: tintinthong <[email protected]>
cardstack · Nov 6, 2024 · 8168783 · 8168783
1 parent 6feb97a
commit 8168783
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/packages/boxel-ui/addon/src/components/icon-button/index.gts b/packages/boxel-ui/addon/src/components/icon-button/index.gts
@@ -38,27 +38,28 @@ class IconButton extends Component<Signature> {
       {{on 'mouseleave' this.onMouseLeaveButton}}
       ...attributes
     >
-      {{! Using inline style attribute because targeting the svg using <style scoped> does not work - css scoping works incorrectly }}
-      {{! template-lint-disable no-inline-styles }}
       {{#if @icon}}
         <@icon
           width={{if @width @width '16px'}}
           height={{if @height @height '16px'}}
-          style='margin: auto;'
+          class='svg-icon'
         />
       {{/if}}
     </button>
     <style scoped>
       button {
         --inner-boxel-icon-button-width: var(--boxel-icon-button-width, 40px);
         --inner-boxel-icon-button-height: var(--boxel-icon-button-height, 40px);
-
         width: var(--inner-boxel-icon-button-width);
         height: var(--inner-boxel-icon-button-height);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         padding: 0;
         background: var(--boxel-icon-button-background, none);
         border: 1px solid transparent;
         z-index: 0;
+        overflow: hidden;
       }
 
       button:hover {
@@ -76,15 +77,19 @@ class IconButton extends Component<Signature> {
 
       .secondary {
         --icon-color: var(--boxel-highlight);
-
         border: 1px solid rgb(255 255 255 / 35%);
         border-radius: 100px;
-        background-color: #41404d;
+        background-color: var(--boxel-icon-button-background, #41404d);
       }
 
       .secondary:hover {
         background-color: var(--boxel-purple-800);
       }
+
+      .svg-icon {
+        width: auto;
+        height: auto;
+      }
     </style>
   </template>
 }

diff --git a/packages/boxel-ui/addon/src/components/icon-button/usage.gts b/packages/boxel-ui/addon/src/components/icon-button/usage.gts
@@ -18,15 +18,16 @@ import BoxelIconButton from './index.gts';
 export default class IconButtonUsage extends Component {
   @tracked icon: Icon = IconPlusCircle;
   @tracked variant?: string;
-  @tracked width = '40px';
-  @tracked height = '40px';
+  @tracked width = '16px';
+  @tracked height = '16px';
 
   @tracked showIconBorders = false;
   @tracked hideIconOverflow = false;
 
   cssClassName = 'boxel-icon-button';
   @cssVariable declare boxelIconButtonWidth: CSSVariableInfo;
   @cssVariable declare boxelIconButtonHeight: CSSVariableInfo;
+  @cssVariable declare boxelIconButtonBackground: CSSVariableInfo;
 
   @action log(message: string): void {
     // eslint-disable-next-line no-console
@@ -54,6 +55,7 @@ export default class IconButtonUsage extends Component {
           style={{cssVar
             boxel-icon-button-width=this.boxelIconButtonWidth.value
             boxel-icon-button-height=this.boxelIconButtonHeight.value
+            boxel-icon-button-background=this.boxelIconButtonBackground.value
           }}
         />
       </:example>
@@ -75,16 +77,16 @@ export default class IconButtonUsage extends Component {
           @onInput={{fn (mut this.variant)}}
           @defaultValue='<undefined>'
         />
-        <Args.Number
+        <Args.String
           @name='width'
-          @description='used to size the SVG rendering'
+          @description='used to size the SVG rendering (only accepts px values)'
           @defaultValue={{'16px'}}
           @value={{this.width}}
           @onInput={{fn (mut this.width)}}
         />
-        <Args.Number
+        <Args.String
           @name='height'
-          @description='used to size the SVG rendering'
+          @description='used to size the SVG rendering (only accepts px values)'
           @defaultValue={{'16px'}}
           @value={{this.height}}
           @onInput={{fn (mut this.height)}}
@@ -107,6 +109,14 @@ export default class IconButtonUsage extends Component {
           @value={{this.boxelIconButtonHeight.value}}
           @onInput={{this.boxelIconButtonHeight.update}}
         />
+        <Css.Basic
+          @name='boxel-icon-button-background'
+          @type='color'
+          @description='Background color of the icon button'
+          @defaultValue={{this.boxelIconButtonBackground.defaults}}
+          @value={{this.boxelIconButtonBackground.value}}
+          @onInput={{this.boxelIconButtonBackground.update}}
+        />
       </:cssVars>
     </FreestyleUsage>