diff --git a/src/auro-button.js b/src/auro-button.js index 7234a3f..ed83536 100644 --- a/src/auro-button.js +++ b/src/auro-button.js @@ -17,8 +17,10 @@ import '@alaskaairux/auro-loader'; * @attr {Boolean} ondark - Set value for on-dark version of auro-button * @attr {Boolean} secondary - DEPRECATED * @attr {Boolean} tertiary - DEPRECATED + * @attr {Boolean} rounded - If set to true, the button will have a rounded shape * @attr {Boolean} slim - Set value for slim version of auro-button * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container + * @attr {Boolean} toggleText - If set to true, a hover event will be added to hide/show button text * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. * @attr {String} id - Set the unique ID of an element. @@ -29,11 +31,13 @@ import '@alaskaairux/auro-loader'; * @prop {Boolean} ready - When false the component API should not be called. * @fires auroButton-ready - Notifies that the component has finished initializing. * - * @slot - Provide text for the button. + * @slot - Default slot for the text of the button. + * @slot icon - Slot to provide auro-icon for the button. */ + +/* eslint-disable max-statements, one-var, no-magic-numbers */ export class AuroButton extends LitElement { - /* eslint max-statements: ["error", 11] */ constructor() { super(); this.autofocus = false; @@ -44,8 +48,10 @@ export class AuroButton extends LitElement { this.ready = false; this.secondary = false; this.tertiary = false; + this.rounded = false; this.slim = false; this.fluid = false; + this.toggleText = undefined; } static get styles() { @@ -86,10 +92,18 @@ export class AuroButton extends LitElement { type: Boolean, reflect: true }, + rounded: { + type: Boolean, + reflect: true + }, slim: { type: Boolean, reflect: true }, + toggleText: { + type: Boolean, + reflect: true + }, arialabel: { type: String, reflect: true @@ -110,7 +124,7 @@ export class AuroButton extends LitElement { type: String, reflect: true }, - variant: { + variant: { type: String, reflect: true }, @@ -159,6 +173,7 @@ export class AuroButton extends LitElement { 'auro-buttonOndark--secondary': this.secondary && this.ondark, 'auro-button--tertiary': this.tertiary, 'auro-buttonOndark--tertiary': this.tertiary && this.ondark, + 'auro-button--rounded': this.rounded, 'auro-button--slim': this.slim, 'auro-button--iconOnly': this.iconOnly, 'auro-button--iconOnlySlim': this.iconOnly && this.slim, @@ -180,7 +195,9 @@ export class AuroButton extends LitElement { @click="${() => {}}" > ${ifDefined(this.loading ? html`` : undefined)} - + + ${this.iconOnly ? undefined : html``} + `; } diff --git a/src/style.scss b/src/style.scss index b7dae46..5bbeb66 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,12 +1,14 @@ -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. +/* Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license */ +/* See LICENSE in the project root for license information. */ -// --------------------------------------------------------------------- +/* --------------------------------------------------------------------- */ -// Import Auro Sass variables +/* stylelint-disable at-rule-no-unknown */ + +/* Import Auro Sass variables */ @import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables"; -// general WCSS imports +/* general WCSS imports */ @import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; @import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/core"; @import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/animation"; @@ -16,27 +18,27 @@ $auro-inset-spacing-options: lg; $auro-inset-directions:'--squish'; -// TO-DO -// Sass and CSS variables do not process together -// These values should be moved to Auro Design Tokens for use +/* TO-DO */ +/* Sass and CSS variables do not process together */ +/* These values should be moved to Auro Design Tokens for use */ $auro-rgb-color-base-black-03: rgba(0, 0, 0, .03); $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03); @import "./../node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/insetUtility"; -// focus-visible mixin +/* focus-visible mixin */ @mixin focus-visible { outline: 3px solid transparent; box-shadow: inset 0 0 0 1px var(--auro-color-border-focus-on-dark), inset 0 0 0 3px var(--auro-color-background-lightest); - // auro-button--secondary + /* auro-button--secondary */ &[variant='secondary'], &--secondary { background-color: var(--auro-color-background-lighter); box-shadow: inset 0 0 0 3px var(--auro-color-ui-default-on-light); } - // auro-button--tertiary + /* auro-button--tertiary */ &[variant='tertiary'], &--tertiary { background-color: var(--auro-color-background-lighter); @@ -44,12 +46,12 @@ $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 3px var(--auro-color-ui-default-on-light); } - // auro-buttonOndark + /* auro-buttonOndark */ &Ondark { background-color: var(--auro-color-ui-default-on-dark); box-shadow: inset 0 0 0 3px var(--auro-color-border-focus-on-dark); - // auro-buttonOndark--secondary + /* auro-buttonOndark--secondary */ &[variant='secondary'], &--secondary { background-color: var(--auro-color-base-black-opacity-15); @@ -57,7 +59,7 @@ $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03); border: 1px solid var(--auro-color-ui-active-on-dark); } - // auro-buttonOndark--tertiary + /* auro-buttonOndark--tertiary */ &[variant='tertiary'], &--tertiary { background-color: var(--auro-color-base-black-opacity-15); @@ -79,17 +81,17 @@ $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03); } } -// adjust alignment for slotted SVG icon +/* adjust alignment for slotted SVG icon */ ::slotted(svg) { vertical-align: middle; } -// Note: without this, events on a disabled element will still fire +/* Note: without this, events on a disabled element will still fire */ slot { pointer-events: none; } -// Button styles +/* Button styles */ .auro-button { @include auro_transition(all, 0.15s, ease); $disabledOPacity: .4; @@ -120,15 +122,15 @@ slot { justify-content: center; gap: var(--auro-size-xxs); - // removes margins around button in Safari + /* removes margins around button in Safari */ margin: 0; - // macOS / iOS agents + /* macOS / iOS agents -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; - // handle hover state auro-button + /* handle hover state auro-button */ @media (hover: hover) { &:active, &:hover { @@ -137,7 +139,7 @@ slot { } } - // handle active state + /* handle active state */ &:active { background-color: var(--auro-color-ui-active-on-light); border: 1px solid var(--auro-color-ui-active-on-light); @@ -182,7 +184,7 @@ slot { } } - // auro-button--secondary + /* auro-button--secondary */ &[variant='secondary'], &--secondary { background-color: var(--auro-color-background-lightest); @@ -220,7 +222,7 @@ slot { } } - // auro-button--tertiary + /* auro-button--tertiary */ &[variant='tertiary'], &--tertiary { background-color: $auro-rgb-color-base-black-03; @@ -262,7 +264,7 @@ slot { border: 1px solid var(--auro-color-ui-default-on-dark); color: var(--auro-color-text-primary-on-light); - // auro-buttonOndark hover + /* auro-buttonOndark hover */ @media (hover: hover) { &:active, &:hover { @@ -293,7 +295,7 @@ slot { } } - // auro-buttonOndark--secondary + /* auro-buttonOndark--secondary */ &[variant='secondary'], &--secondary { background-color: var(--auro-color-background-darker); @@ -339,7 +341,7 @@ slot { } } - // auro-button--tertiary + /* auro-button--tertiary */ &[variant='tertiary'], &--tertiary { background-color: $auro-rgb-color-base-white-03; @@ -378,7 +380,8 @@ slot { } } } - // auro-button--slim + + /* auro-button--slim */ &--slim { padding: var(--auro-size-xs) var(--auro-size-md); font-size: var(--auro-text-body-size-sm); @@ -389,24 +392,59 @@ slot { &--iconOnly { ::slotted(auro-icon) { - width: var(--auro-size-300, 24px); - height: var(--auro-size-300, 24px); + width: var(--auro-size-300); + height: var(--auro-size-300); } - padding-left: calc(var(--auro-size-100, 8px) - 2px); - padding-right: calc(var(--auro-size-100, 8px) - 2px); + padding-left: calc(var(--auro-size-100) - var(--auro-size-25)); + padding-right: calc(var(--auro-size-100) - var(--auro-size-25)); + border-radius: 100px; min-width: unset; } &--iconOnlySlim { ::slotted(auro-icon) { - width: calc(var(--auro-size-300, 24px) - 4px); - height: calc(var(--auro-size-300, 24px) - 4px); + width: calc(var(--auro-size-300) - var(--auro-size-50)); + height: calc(var(--auro-size-300) - var(--auro-size-50)); } - padding-left: var(--auro-size-50, 4px); - padding-right: var(--auro-size-50, 4px); + padding-left: var(--auro-size-50); + padding-right: var(--auro-size-50); + } + + /* auro-button--rounded */ + &--rounded { + border-radius: 100px; + box-shadow: var(--auro-elevation-300); + + height: var(--auro-size-500); + min-width: unset; + + ::slotted(auro-icon) { + width: var(--auro-size-300); + height: var(--auro-size-300); + } + } +} + +:host([rounded][iconOnly]) { + ::slotted(*):not(auro-icon) { + opacity: 0; + } + + .auro-button { + min-width: unset; + padding: unset; + + width: var(--auro-size-600); + } +} + +:host([rounded]) { + .auro-button { + transition: all 300ms ease-out; + opacity: 1; } }