fix(Buttons): Merged the two button components (#112)

IgniteUI · Nov 8, 2021 · b5fe006 · b5fe006
1 parent 9d69829
commit b5fe006
Show file tree

Hide file tree

Showing 14 changed files with 382 additions and 386 deletions.
diff --git a/src/components/button/button-base.ts b/src/components/button/button-base.ts
@@ -1,10 +1,11 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { alternateName } from '../common/decorators';
 import { Constructor } from '../common/mixins/constructor.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
-import { styles } from './button.material.css';
 
 export interface IgcButtonEventMap {
   igcFocus: CustomEvent<void>;
@@ -17,24 +18,41 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   /**
    * @private
    */
-  public static styles = [styles];
+  @query('[part="base"]', true)
+  private nativeElement!: HTMLElement;
 
   /**
-   * @private
+   * The type of the button. Defaults to undefined.
    */
-  @query('.native', true)
-  private nativeElement!: HTMLElement;
+  @alternateName('displayType')
+  @property()
+  public type!: 'button' | 'reset' | 'submit';
+
+  /** The URL the button points to. */
+  @property()
+  public href!: string;
+
+  /** Prompts to save the linked URL instead of navigating to it. */
+  @property()
+  public download!: string;
+
+  /** Where to display the linked URL, as the name for a browsing context. */
+  @property()
+  public target!: '_blank' | '_parent' | '_self' | '_top' | undefined;
+
+  /**
+   * The relationship of the linked URL.
+   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
+   */
+  @property()
+  public rel!: string;
 
   /**
    * Determines whether the button is disabled.
    */
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
-  /** Sets the variant of the button. */
-  @property({ reflect: true })
-  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'flat';
-
   /** Sets focus in the button. */
   @alternateName('focusComponent')
   public focus(options?: FocusOptions) {
@@ -56,30 +74,47 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   }
 
   protected get classes() {
-    const { size, variant } = this;
-
-    return {
-      native: true,
-      flat: variant === 'flat',
-      outlined: variant === 'outlined',
-      contained: variant === 'contained',
-      fab: variant === 'fab',
-      small: size === 'small',
-      medium: size === 'medium',
-      large: size === 'large',
-      disabled: this.disabled,
-    };
+    return {};
+  }
+
+  private renderButton() {
+    return html`
+      <button
+        part="base"
+        .disabled=${this.disabled}
+        class=${classMap(this.classes)}
+        type=${ifDefined(this.type)}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        ${this.renderContent()}
+      </button>
+    `;
   }
 
-  protected renderContent() {
+  private renderLinkButton() {
     return html`
-      <span part="prefix">
-        <slot name="prefix"></slot>
-      </span>
-      <slot></slot>
-      <span part="suffix">
-        <slot name="suffix"></slot>
-      </span>
+      <a
+        part="base"
+        role="button"
+        href=${ifDefined(this.href)}
+        target=${ifDefined(this.target)}
+        download=${ifDefined(this.download)}
+        rel=${ifDefined(this.rel)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        class=${classMap(this.classes)}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        ${this.renderContent()}
+      </a>
     `;
   }
+
+  protected abstract renderContent(): TemplateResult;
+
+  protected render() {
+    const link = this.href !== undefined;
+    return link ? this.renderLinkButton() : this.renderButton();
+  }
 }
diff --git a/src/components/button/button.bootstrap.scss b/src/components/button/button.bootstrap.scss
@@ -1,44 +1,36 @@
 @use '../../styles/utilities' as utils;
 
 @mixin theme() {
-    igc-button[size='large']::part(base),
-    igc-link-button[size='large']::part(base) {
+    igc-button[size='large']::part(base) {
         --size: #{utils.rem(48px)};
     }
 
-    igc-button[size='medium']::part(base),
-    igc-link-button[size='medium']::part(base) {
+    igc-button[size='medium']::part(base) {
         --size: #{utils.rem(40px)};
     }
 
-    igc-button[size='small']::part(base),
-    igc-link-button[size='small']::part(base) {
+    igc-button[size='small']::part(base) {
         --size: #{utils.rem(32px)};
     }
 
-    igc-button[variant='flat'][disabled]::part(base),
-    igc-link-button[variant='flat'][disabled]::part(base) {
+    igc-button[variant='flat'][disabled]::part(base) {
         background: transparent;
         color: #{utils.color(primary, 100)};
     }
 
     igc-button[variant='fab'][disabled]::part(base),
-    igc-button[variant='contained'][disabled]::part(base),
-    igc-link-button[variant='fab'][disabled]::part(base),
-    igc-link-button[variant='contained'][disabled]::part(base) {
+    igc-button[variant='contained'][disabled]::part(base) {
         background: #{utils.color(primary, 100)};
         color: #{utils.color(primary, 300)};
     }
 
-    igc-button[variant='outlined'][disabled]::part(base),
-    igc-link-button[variant='outlined'][disabled]::part(base) {
+    igc-button[variant='outlined'][disabled]::part(base) {
         color: #{utils.color(primary, 100)};
         box-shadow: 0 0 0 1px utils.color(primary, 100);
         background: transparent;
     }
 
-    igc-button[variant='flat']:not([disabled])::part(base),
-    igc-link-button[variant='flat']:not([disabled])::part(base) {
+    igc-button[variant='flat']:not([disabled])::part(base) {
         color: #{utils.color(primary, 500)};
 
         &:hover {
@@ -61,8 +53,7 @@
         }
     }
 
-    igc-button[variant='contained']:not([disabled])::part(base),
-    igc-link-button[variant='contained']:not([disabled])::part(base) {
+    igc-button[variant='contained']:not([disabled])::part(base) {
         color: #{utils.contrast-color(primary, 600)};
 
         &:hover {
@@ -88,8 +79,7 @@
         }
     }
 
-    igc-button[variant='outlined']:not([disabled])::part(base),
-    igc-link-button[variant='outlined']:not([disabled])::part(base) {
+    igc-button[variant='outlined']:not([disabled])::part(base) {
         color: #{utils.color(primary, 500)};
         transition: color .15s ease-out;
         box-shadow: 0 0 0 1px utils.color(primary, 500);
@@ -130,23 +120,19 @@
         }
     }
 
-    igc-button[variant='fab'][size='large']::part(base),
-    igc-link-button[variant='fab'][size='large']::part(base) {
+    igc-button[variant='fab'][size='large']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 8);
     }
 
-    igc-button[variant='fab'][size='medium']::part(base),
-    igc-link-button[variant='fab'][size='medium']::part(base) {
+    igc-button[variant='fab'][size='medium']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 6);
     }
 
-    igc-button[variant='fab'][size='small']::part(base),
-    igc-link-button[variant='fab'][size='small']::part(base) {
+    igc-button[variant='fab'][size='small']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 4);
     }
 
-    igc-button[variant='fab']:not([disabled])::part(base),
-    igc-link-button[variant='fab']:not([disabled])::part(base) {
+    igc-button[variant='fab']:not([disabled])::part(base) {
         color: #{utils.contrast-color(primary, 600)};
 
         &:hover {
@@ -173,9 +159,7 @@
     }
 
     igc-button[variant='contained']::part(base),
-    igc-button[variant='fab']::part(base),
-    igc-link-button[variant='contained']::part(base),
-    igc-link-button[variant='fab']::part(base) {
+    igc-button[variant='fab']::part(base) {
         box-shadow: var(--igc-elevation-0);
     }
 }
diff --git a/src/components/button/button.fluent.scss b/src/components/button/button.fluent.scss
@@ -2,33 +2,27 @@
 
 @mixin theme() {
     igc-button[variant='contained']::part(base),
-    igc-link-button[variant='contained']::part(base),
-    igc-button[variant='fab']::part(base),
-    igc-link-button[variant='fab']::part(base) {
+    igc-button[variant='fab']::part(base) {
         box-shadow: var(--igc-elevation-0);
     }
 
-    igc-button[size='small']::part(base),
-    igc-link-button[size='small']::part(base) {
+    igc-button[size='small']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 1);
         --size: #{utils.rem(24px)};
     }
 
-    igc-button[size='medium']::part(base),
-    igc-link-button[size='medium']::part(base) {
+    igc-button[size='medium']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 1);
         --size: #{utils.rem(28px)};
     }
 
-    igc-button[size='large']::part(base),
-    igc-link-button[size='large']::part(base) {
+    igc-button[size='large']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 1);
         --size: #{utils.rem(32px)};
     }
 
     // FLAT
-    igc-button[variant='flat']:not([disabled])::part(base),
-    igc-link-button[variant='flat']:not([disabled])::part(base) {
+    igc-button[variant='flat']:not([disabled])::part(base) {
         color: #{utils.color(gray, 900)};
 
         &:hover {
@@ -49,8 +43,7 @@
     }
 
     // OUTLINED
-    igc-button[variant='outlined']:not([disabled])::part(base),
-    igc-link-button[variant='outlined']:not([disabled])::part(base) {
+    igc-button[variant='outlined']:not([disabled])::part(base) {
         color: #{utils.color(gray, 900)};
         transition: color .15s ease-out;
         box-shadow: 0 0 0 1px #{utils.color(gray, 700)};
@@ -103,9 +96,7 @@
 
     // FLAT & OUTLINED
     igc-button[variant='flat']:not([disabled])::part(base),
-    igc-link-button[variant='flat']:not([disabled])::part(base),
-    igc-button[variant='outlined']:not([disabled])::part(base),
-    igc-link-button[variant='outlined']:not([disabled])::part(base) {
+    igc-button[variant='outlined']:not([disabled])::part(base) {
         &:focus-visible {
             position: relative;
 
@@ -128,9 +119,7 @@
 
     // FAB & CONTAINED
     igc-button[variant='contained']:not([disabled])::part(base),
-    igc-link-button[variant='contained']:not([disabled])::part(base),
-    igc-button[variant='fab']:not([disabled])::part(base),
-    igc-link-button[variant='fab']:not([disabled])::part(base) {
+    igc-button[variant='fab']:not([disabled])::part(base) {
         color: #{utils.contrast-color(primary, 600)};
 
         &:hover,
@@ -181,8 +170,7 @@
         }
     }
 
-    igc-button[variant='fab']:not([disabled])::part(base),
-    igc-link-button[variant='fab']:not([disabled])::part(base) {
+    igc-button[variant='fab']:not([disabled])::part(base) {
         border-radius: calc(#{var(--igc-border-radius)} * 7);
 
         &::after {
@@ -191,16 +179,13 @@
     }
 
     // DISABLED START
-    igc-button[variant='flat'][disabled]::part(base),
-    igc-link-button[variant='flat'][disabled]::part(base){
+    igc-button[variant='flat'][disabled]::part(base) {
         color: #{utils.color(gray, 400)};
         background: transparent;
     }
 
     igc-button[variant='fab'][disabled]::part(base),
-    igc-link-button[variant='fab'][disabled]::part(base),
-    igc-button[variant='contained'][disabled]::part(base),
-    igc-link-button[variant='contained'][disabled]::part(base) {
+    igc-button[variant='contained'][disabled]::part(base) {
         color: #{utils.color(gray, 400)};
 
         &::before {
@@ -209,8 +194,7 @@
         }
     }
 
-    igc-button[variant='outlined'][disabled]::part(base),
-    igc-link-button[variant='outlined'][disabled]::part(base) {
+    igc-button[variant='outlined'][disabled]::part(base) {
         box-shadow: none;
         color: #{utils.color(gray, 500, 8)};
         background: #{utils.color(gray, 200)};