feat(components): define html type

gecut · Jul 17, 2024 · d763ae0 · d763ae0
1 parent ab5d5c1
commit d763ae0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/components/src/button/button.ts b/packages/components/src/button/button.ts
@@ -20,6 +20,8 @@ export interface ButtonContent {
    */
   type: 'elevated' | 'filled' | 'filledTonal' | 'outlined' | 'text';
 
+  htmlType?: HTMLButtonElement['type'];
+
   disabled?: boolean;
   loading?: boolean;
   loader?: IconContent;
@@ -74,6 +76,7 @@ export class GecutButtonDirective extends GecutDirective {
       <${tag}
         class=${classMap(this.getRenderClasses())}
         role="button"
+        type=${ifDefined(this.type === 'button' ? this.content.htmlType : undefined)}
         href=${ifDefined(this.content.href)}
         target=${ifDefined(this.content.target)}
         tabindex="${this.content.disabled ? -1 : 0}"
@@ -92,7 +95,7 @@ export class GecutButtonDirective extends GecutDirective {
       <div class="gecut-button-body">
         ${when(this.content.icon?.svg, () => icon(this.content!.icon!))}
 
-        <span class="text-labelLarge">${this.content.label}</span>
+        <span class="gecut-button-body-label">${this.content.label}</span>
 
         ${when(this.content.trailingIcon?.svg, () => icon(this.content!.trailingIcon!))}
       </div>

diff --git a/packages/styles/src/components/button.css b/packages/styles/src/components/button.css
@@ -29,6 +29,10 @@
     }
 
     & &-body {
+      .gecut-button-body-label {
+        @apply text-labelLarge empty:hidden;
+      }
+
       @apply flex items-center justify-center h-full w-full gap-2 transition-opacity duration-300 opacity-100;
     }