Skip to content

Commit

Permalink
feat(rounded): implement new rounded button #212
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanjones243
jordanjones243 committed Jun 14, 2023
1 parent fd18d9e commit ca37d40
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 39 deletions.
48 changes: 44 additions & 4 deletions src/auro-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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;
Expand All @@ -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() {
Expand Down Expand Up @@ -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
Expand All @@ -110,7 +124,7 @@ export class AuroButton extends LitElement {
type: String,
reflect: true
},
variant: {
variant: {
type: String,
reflect: true
},
Expand Down Expand Up @@ -140,6 +154,29 @@ export class AuroButton extends LitElement {
}));
}

/**
* @private
* @returns {void} Hides/shows button text for rounded buttons.
*/
handleIconSlotChange() {
if (this.rounded && this.toggleText) {
const iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
const defaultSlot = this.shadowRoot.querySelector('slot:not([name])');

if (defaultSlot.assignedNodes().length > 0 && iconSlot.assignedNodes().length > 0 && iconSlot.assignedNodes()[0].nodeName === 'AURO-ICON') {
this.iconOnly = true;

this.addEventListener('mouseover', () => {
this.iconOnly = false;
});

this.addEventListener('mouseout', () => {
this.iconOnly = true;
});
}
}
}

firstUpdated() {
this.notifyReady();
}
Expand All @@ -159,6 +196,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,
Expand All @@ -180,7 +218,9 @@ export class AuroButton extends LitElement {
@click="${() => {}}"
>
${ifDefined(this.loading ? html`<auro-loader pulse></auro-loader>` : undefined)}
<slot></slot>
${this.iconOnly ? undefined : html`<slot></slot>`}
<slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot>
</button>
`;
}
Expand Down
99 changes: 64 additions & 35 deletions src/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
// 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
/* 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";
Expand All @@ -16,48 +16,48 @@
$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);
border-color: var(--auro-color-ui-default-on-light);
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);
box-shadow: inset 0 0 0 3px var(--auro-color-ui-active-on-dark);
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);
Expand All @@ -79,17 +79,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;
Expand Down Expand Up @@ -120,15 +120,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 {
Expand All @@ -137,7 +137,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);
Expand Down Expand Up @@ -182,7 +182,7 @@ slot {
}
}

// auro-button--secondary
/* auro-button--secondary */
&[variant='secondary'],
&--secondary {
background-color: var(--auro-color-background-lightest);
Expand Down Expand Up @@ -220,7 +220,7 @@ slot {
}
}

// auro-button--tertiary
/* auro-button--tertiary */
&[variant='tertiary'],
&--tertiary {
background-color: $auro-rgb-color-base-black-03;
Expand Down Expand Up @@ -262,7 +262,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 {
Expand Down Expand Up @@ -293,7 +293,7 @@ slot {
}
}

// auro-buttonOndark--secondary
/* auro-buttonOndark--secondary */
&[variant='secondary'],
&--secondary {
background-color: var(--auro-color-background-darker);
Expand Down Expand Up @@ -339,7 +339,7 @@ slot {
}
}

// auro-button--tertiary
/* auro-button--tertiary */
&[variant='tertiary'],
&--tertiary {
background-color: $auro-rgb-color-base-white-03;
Expand Down Expand Up @@ -378,7 +378,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);
Expand All @@ -389,24 +390,52 @@ 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);
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) {
display: none;
}

.auro-button {
min-width: unset;
padding: unset;

padding-left: var(--auro-size-50, 4px);
padding-right: var(--auro-size-50, 4px);
width: var(--auro-size-600);
}
}

Expand Down

0 comments on commit ca37d40

Please sign in to comment.