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 · bb15c8e · bb15c8e
1 parent dcc1f6a
commit bb15c8e
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 7 deletions.
diff --git a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css
@@ -0,0 +1,3 @@
+mat-icon {
+  font-variation-settings: 'FILL' 1;
+}
diff --git a/apps/datahub/src/app/home/search/search-filters/search-filters.component.html b/apps/datahub/src/app/home/search/search-filters/search-filters.component.html
@@ -81,7 +81,7 @@ <h2 class="text-xl mr-4 font-title" translate>
         *ngIf="!isOpen"
         (buttonClick)="open()"
         type="outline"
-        extraClass="!p-[8px]"
+        extraClass="!px-[8px]"
         data-cy="filters-expand"
       >
         <mat-icon class="material-symbols-outlined">more_horiz</mat-icon>

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 */
+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'
     }

diff --git a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css
@@ -9,6 +9,12 @@ mat-icon {
   width: 1em;
   height: 1em;
   font-size: 1.5em;
+  margin-top: -0.1em;
+  font-variation-settings: 'opsz' 40;
+}
+
+.star-filled {
+  font-variation-settings: 'FILL' 1;
 }
 
 .star-toggle-overlay {

diff --git a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html
@@ -9,9 +9,11 @@
       'cursor-default': disabled
     }"
   >
-    <mat-icon class="material-symbols-outlined">{{
-      toggled ? 'star' : 'star_outline'
-    }}</mat-icon>
+    <mat-icon
+      class="material-symbols-outlined"
+      [ngClass]="{ 'star-filled': toggled }"
+      >star</mat-icon
+    >
   </button>
   <svg
     #starOverlay