From 1d4ff141f9af93e838163ff5b3986aa10d2f2e23 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Sat, 9 Sep 2023 12:42:31 +0200
Subject: [PATCH] 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.
---
 .../src/lib/button/button.component.css       |  5 +++++
 .../lib/button/button.component.stories.ts    | 21 +++++++++++++++++--
 .../inputs/src/lib/button/button.component.ts |  2 +-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/libs/ui/inputs/src/lib/button/button.component.css b/libs/ui/inputs/src/lib/button/button.component.css
index e69de29bb2..05ae636417 100644
--- 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
index a106ef86ea..af7bee315b 100644
--- 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
index 65935b7a59..46764cb0d4 100644
--- 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'
     }