feat(ui): better handle icons in buttons

This commit makes icons showing up better by default inside buttons, by not making the button grow vertically.
geonetwork · Sep 9, 2023 · 1d4ff14 · 1d4ff14
1 parent dcc1f6a
commit 1d4ff14
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/libs/ui/inputs/src/lib/button/button.component.css b/libs/ui/inputs/src/lib/button/button.component.css
@@ -0,0 +1,5 @@
+/* makes sure icons will not make the buttons grow vertically */
+::ng-deep mat-icon.mat-icon {
+  margin-top: -0.3em;
+  margin-bottom: -0.3em;
+}
diff --git a/libs/ui/inputs/src/lib/button/button.component.stories.ts b/libs/ui/inputs/src/lib/button/button.component.stories.ts
@@ -5,6 +5,7 @@ import {
   TRANSLATE_DEFAULT_CONFIG,
   UtilI18nModule,
 } from '@geonetwork-ui/util/i18n'
+import { MatIconModule } from '@angular/material/icon'
 
 export default {
   title: 'Inputs/ButtonComponent',
@@ -14,6 +15,7 @@ export default {
       imports: [
         UtilI18nModule,
         TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),
+        MatIconModule,
       ],
     }),
   ],
@@ -36,7 +38,22 @@ export const Primary: StoryObj<ButtonComponentWithContent> = {
   },
   render: (args) => ({
     props: args,
-    template:
-      '<gn-ui-button [type]="type" [disabled]="disabled" [extraClass]="extraClass">{{ content }}</gn-ui-button>',
+    template: `<div class='flex flex-row gap-5'>
+  <gn-ui-button [type]="type" [disabled]="disabled" [extraClass]="extraClass">
+    {{ content }}
+  </gn-ui-button>
+  <gn-ui-button [type]="type" [disabled]="disabled" [extraClass]="extraClass">
+    with an icon&nbsp;<mat-icon class="material-symbols-outlined">downloading</mat-icon>
+  </gn-ui-button>
+  <gn-ui-button class="text-[1.5em]" [type]="type" [disabled]="disabled" [extraClass]="extraClass">
+    <mat-icon class='material-symbols-outlined'>globe_asia</mat-icon>&nbsp;bigger
+  </gn-ui-button>
+  <gn-ui-button class="text-[0.7em]" [type]="type" [disabled]="disabled" [extraClass]="extraClass">
+    <mat-icon class='material-symbols-outlined'>pest_control</mat-icon>&nbsp;smaller
+  </gn-ui-button>
+  <gn-ui-button [type]="type" [disabled]="disabled" [extraClass]="extraClass + ' !px-[3em] !py-[0.5em]'">
+    different&nbsp;<mat-icon class="material-symbols-outlined">waves</mat-icon>&nbsp;shape
+  </gn-ui-button>
+</div>`,
   }),
 }
diff --git a/libs/ui/inputs/src/lib/button/button.component.ts b/libs/ui/inputs/src/lib/button/button.component.ts
@@ -61,7 +61,7 @@ export class ButtonComponent {
       case 'primary':
         return 'focus:ring-4 focus:ring-primary-lightest'
       case 'outline':
-        return 'border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
+        return 'border border-gray-300 -m-[1px] hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
       case 'light':
         return 'focus:ring-4 focus:ring-gray-300'
     }