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 <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> 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> smaller + </gn-ui-button> + <gn-ui-button [type]="type" [disabled]="disabled" [extraClass]="extraClass + ' !px-[3em] !py-[0.5em]'"> + different <mat-icon class="material-symbols-outlined">waves</mat-icon> 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' }