feat(core): action button

- adds new action button types
- refactors existing buttons to use same consistent action type

Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>

packages/angular/projects/cds-angular/src/all.spec.ts

@@ -12,8 +12,12 @@ import {
   CdsAlertDirective,
   CdsBadgeDirective,
   CdsButtonDirective,
+  CdsButtonActionDirective,
+  CdsButtonExpandDirective,
+  CdsButtonHandleDirective,
+  CdsButtonInlineDirective,
+  CdsButtonSortDirective,
   CdsIconButtonDirective,
-  CdsInlineButtonDirective,
   CdsCheckboxGroupDirective,
   CdsCheckboxDirective,
   CdsDatalistDirective,
@@ -251,23 +255,103 @@ describe('CDS Icon Button', () => {
   });
 });
 
-describe('CDS Inline Button', () => {
+describe('CDS Button Action', () => {
   let fixture: ComponentFixture<any>;
-  let instance: InlineButtonTestComponent;
+  let instance: ButtonActionTestComponent;
 
   beforeEach(function () {
     TestBed.configureTestingModule({
       imports: [CdsModule],
-      declarations: [InlineButtonTestComponent],
+      declarations: [ButtonActionTestComponent],
     });
 
-    fixture = TestBed.createComponent(InlineButtonTestComponent);
+    fixture = TestBed.createComponent(ButtonActionTestComponent);
     fixture.detectChanges();
     instance = fixture.componentInstance;
   });
 
-  it('cds-inline-button should be defined', () => {
-    expect(instance.vcCdsInlineButtonDirective).toBeDefined();
+  it('cds-button-inline should be defined', () => {
+    expect(instance.vcCdsButtonActionDirective).toBeDefined();
+  });
+});
+
+describe('CDS Button Expand', () => {
+  let fixture: ComponentFixture<any>;
+  let instance: ButtonExpandTestComponent;
+
+  beforeEach(function () {
+    TestBed.configureTestingModule({
+      imports: [CdsModule],
+      declarations: [ButtonExpandTestComponent],
+    });
+
+    fixture = TestBed.createComponent(ButtonExpandTestComponent);
+    fixture.detectChanges();
+    instance = fixture.componentInstance;
+  });
+
+  it('cds-button-expand should be defined', () => {
+    expect(instance.vcCdsButtonExpandDirective).toBeDefined();
+  });
+});
+
+describe('CDS Button Handle', () => {
+  let fixture: ComponentFixture<any>;
+  let instance: ButtonHandleTestComponent;
+
+  beforeEach(function () {
+    TestBed.configureTestingModule({
+      imports: [CdsModule],
+      declarations: [ButtonHandleTestComponent],
+    });
+
+    fixture = TestBed.createComponent(ButtonHandleTestComponent);
+    fixture.detectChanges();
+    instance = fixture.componentInstance;
+  });
+
+  it('cds-button-handle should be defined', () => {
+    expect(instance.vcCdsButtonHandleDirective).toBeDefined();
+  });
+});
+
+describe('CDS Button Inline', () => {
+  let fixture: ComponentFixture<any>;
+  let instance: ButtonInlineTestComponent;
+
+  beforeEach(function () {
+    TestBed.configureTestingModule({
+      imports: [CdsModule],
+      declarations: [ButtonInlineTestComponent],
+    });
+
+    fixture = TestBed.createComponent(ButtonInlineTestComponent);
+    fixture.detectChanges();
+    instance = fixture.componentInstance;
+  });
+
+  it('cds-button-inline should be defined', () => {
+    expect(instance.vcCdsButtonInlineDirective).toBeDefined();
+  });
+});
+
+describe('CDS Button Sort', () => {
+  let fixture: ComponentFixture<any>;
+  let instance: ButtonSortTestComponent;
+
+  beforeEach(function () {
+    TestBed.configureTestingModule({
+      imports: [CdsModule],
+      declarations: [ButtonSortTestComponent],
+    });
+
+    fixture = TestBed.createComponent(ButtonSortTestComponent);
+    fixture.detectChanges();
+    instance = fixture.componentInstance;
+  });
+
+  it('cds-button-handle should be defined', () => {
+    expect(instance.vcCdsButtonSortDirective).toBeDefined();
   });
 });
 
@@ -1044,10 +1128,38 @@ class IconButtonTestComponent {
 }
 
 @Component({
-  template: ` <cds-inline-button></cds-inline-button> `,
+  template: ` <cds-button-action></cds-button-action> `,
+})
+class ButtonActionTestComponent {
+  @ViewChild(CdsButtonActionDirective) vcCdsButtonActionDirective: CdsButtonActionDirective;
+}
+
+@Component({
+  template: ` <cds-button-expand></cds-button-expand> `,
+})
+class ButtonExpandTestComponent {
+  @ViewChild(CdsButtonExpandDirective) vcCdsButtonExpandDirective: CdsButtonExpandDirective;
+}
+
+@Component({
+  template: ` <cds-button-handle></cds-button-handle> `,
+})
+class ButtonHandleTestComponent {
+  @ViewChild(CdsButtonHandleDirective) vcCdsButtonHandleDirective: CdsButtonHandleDirective;
+}
+
+@Component({
+  template: ` <cds-button-inline></cds-button-inline> `,
+})
+class ButtonInlineTestComponent {
+  @ViewChild(CdsButtonInlineDirective) vcCdsButtonInlineDirective: CdsButtonInlineDirective;
+}
+
+@Component({
+  template: ` <cds-button-sort></cds-button-sort> `,
 })
-class InlineButtonTestComponent {
-  @ViewChild(CdsInlineButtonDirective) vcCdsInlineButtonDirective: CdsInlineButtonDirective;
+class ButtonSortTestComponent {
+  @ViewChild(CdsButtonSortDirective) vcCdsButtonSortDirective: CdsButtonSortDirective;
 }
 
 @Component({

packages/core/.eslintrc.js

@@ -12,6 +12,8 @@ const bannedTSTypes = {
 
 // only adding rules that override the defaults or enforce new standards
 const rules = {
+  'no-unused-vars': 'off', // tsc checks this
+  '@typescript-eslint/no-unused-vars': [ERROR, { varsIgnorePattern: 'Demo|Test' }], // ignore side effect demo custom element definition classes
   '@typescript-eslint/explicit-function-return-type': OFF, // too much work at the moment
   '@typescript-eslint/no-explicit-any': OFF, // would LOVE to turn this on
   // cause slow analysis on TS files with Storybook, see

packages/core/src/accordion/accordion-header.element.scss

@@ -10,16 +10,15 @@
   --background: #{$cds-alias-object-container-background-tint};
   --font-size: #{$cds-global-typography-secondary-font-size};
   --font-weight: #{$cds-global-typography-secondary-font-weight};
-  --icon-color: var(--color);
-  --icon-transform: rotate(90deg);
+  --padding: calc(#{$cds-global-space-5} + #{$cds-global-space-2});
   cursor: pointer;
   width: 100%;
   contain: inherit;
 }
 
 .private-host {
   background: var(--background);
-  padding: #{$cds-global-space-6};
+  padding: var(--padding);
   cursor: inherit;
   border: 0;
   font-size: var(--font-size);
@@ -36,10 +35,3 @@
   --color: #{$cds-alias-object-interaction-color-active};
   --background: #{$cds-alias-object-interaction-background-active};
 }
-
-cds-icon {
-  --color: var(--icon-color);
-  cursor: inherit;
-  transform: var(--icon-transform);
-  transition: transform var(--animation-duration);
-}

packages/core/src/accordion/accordion-header.element.spec.ts

@@ -32,4 +32,13 @@ describe('accordion-header element', () => {
     expect(component.hasAttribute('slot')).toBe(true);
     expect(component.getAttribute('slot')).toEqual('accordion-header');
   });
+
+  it('should set action pressed state when panel is expanded', async () => {
+    await componentIsStable(component);
+    expect(component.shadowRoot.querySelector('cds-button-expand').pressed).toBe(false);
+
+    component.expanded = true;
+    await componentIsStable(component);
+    expect(component.shadowRoot.querySelector('cds-button-expand').pressed).toBe(true);
+  });
 });

packages/core/src/accordion/accordion-header.element.ts

@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { baseStyles, createId } from '@cds/core/internal';
+import { baseStyles, createId, state } from '@cds/core/internal';
 import { html, LitElement } from 'lit';
 import styles from './accordion-header.element.scss';
 
@@ -41,6 +41,9 @@ import styles from './accordion-header.element.scss';
  * @cssprop --icon-transform
  */
 export class CdsAccordionHeader extends LitElement {
+  /** @private */
+  @state() expanded = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('slot', 'accordion-header');
@@ -52,7 +55,7 @@ export class CdsAccordionHeader extends LitElement {
 
   render() {
     return html`<div class="private-host" cds-layout="horizontal gap:md align:vertical-center wrap:none">
-      <cds-icon class="accordion-angle" shape="angle" size="9" inner-offset="2"></cds-icon>
+      <cds-button-expand .pressed=${this.expanded} readonly action="vertical"></cds-button-expand>
       <div cds-layout="align:stretch"><slot></slot></div>
     </div>`;
   }

packages/core/src/accordion/accordion-panel.element.scss

@@ -55,7 +55,6 @@
 
   ::slotted(cds-accordion-header) {
     --background: #{$cds-alias-object-interaction-background-selected};
-    --icon-transform: rotate(180deg);
   }
 }
 

packages/core/src/accordion/accordion-panel.element.ts

@@ -15,6 +15,7 @@ import {
   property,
   querySlot,
 } from '@cds/core/internal';
+import { CdsAccordionHeader } from './accordion-header.element.js';
 import styles from './accordion-panel.element.scss';
 
 /**
@@ -66,7 +67,7 @@ export class CdsAccordionPanel extends LitElement {
 
   @property({ type: Boolean }) expanded = false;
 
-  @querySlot('cds-accordion-header') private header: HTMLElement;
+  @querySlot('cds-accordion-header') private header: CdsAccordionHeader;
 
   @querySlot('cds-accordion-content') private content: HTMLElement;
 
@@ -82,6 +83,7 @@ export class CdsAccordionPanel extends LitElement {
     if (this.content && this.header) {
       this.content.setAttribute('aria-labelledby', this.header.id);
       this.header.setAttribute('aria-controls', this.content.id);
+      this.header.expanded = this.expanded;
     }
   }
 

packages/core/src/accordion/register.ts

@@ -13,16 +13,14 @@ import { CdsAccordion } from './accordion.element.js';
 import { CdsAccordionPanel } from './accordion-panel.element.js';
 import { CdsAccordionContent } from './accordion-content.element.js';
 import { CdsAccordionHeader } from './accordion-header.element.js';
-import { ClarityIcons } from '@cds/core/icon/icon.service.js';
-import { angleIcon } from '@cds/core/icon/shapes/angle.js';
 import '@cds/core/icon/register.js';
+import '@cds/core/button-expand/register.js';
 
 registerElementSafely('cds-accordion', CdsAccordion);
 registerElementSafely('cds-accordion-panel', CdsAccordionPanel);
 registerElementSafely('cds-accordion-content', CdsAccordionContent);
 registerElementSafely('cds-accordion-header', CdsAccordionHeader);
 
-ClarityIcons.addIcons(angleIcon);
 ClarityMotion.add(AnimationAccordionPanelOpenName, AnimationAccordionPanelOpenConfig);
 declare global {
   interface HTMLElementTagNameMap {

packages/core/src/alert/alert.element.spec.ts

@@ -8,7 +8,6 @@ import { html } from 'lit';
 import '@cds/core/alert/register.js';
 import '@cds/core/icon/register.js';
 import { CdsAlert, getIconStatusTuple, iconShapeIsAlertStatusType } from '@cds/core/alert';
-import { CdsIcon } from '@cds/core/icon/icon.element.js';
 import { infoStandardIcon } from '@cds/core/icon/shapes/info-standard.js';
 import {
   componentIsStable,
@@ -235,13 +234,6 @@ describe('Alert element – ', () => {
       expect(slots.default.trim()).toBe(`${placeholderText}`);
     });
 
-    it('close-button should be size "20"', async () => {
-      await componentIsStable(component);
-      const closeBtn = component.shadowRoot.querySelector<CdsInternalCloseButton>('cds-internal-close-button');
-      expect(!!closeBtn).not.toBe(false, 'close-button should exist');
-      expect(closeBtn.iconSize).toBe('20', 'close-button icon size should be 20');
-    });
-
     it('should show neutral spinner if set to loading status', async () => {
       await componentIsStable(component);
       component.setAttribute('status', 'loading');
@@ -309,19 +301,6 @@ describe('Alert element – ', () => {
       getCloseButton().click();
       expect((await event).detail).toBe(true);
     });
-
-    it('sets 16 as the default icon size', async () => {
-      await componentIsStable(component);
-
-      component.closable = true;
-      component.type = 'default';
-      await componentIsStable(component);
-
-      const icon = getCloseButton().shadowRoot.querySelector<CdsIcon>('cds-icon');
-      expect(icon).not.toBeNull();
-      expect(icon.hasAttribute('size')).toBe(true);
-      expect(icon.getAttribute('size')).toBe('16');
-    });
   });
 
   describe('Aria: ', () => {

packages/core/src/alert/alert.element.ts

@@ -195,7 +195,7 @@ export class CdsAlert extends LitElement {
       <div
         class="private-host"
         cds-layout="${this.type === 'banner'
-          ? 'horizontal wrap:none gap:sm align:vertical-center align:horizontal-center'
+          ? 'horizontal wrap:none gap:sm align:center'
           : 'horizontal wrap:none gap:sm'}"
       >
         ${this.type === 'banner' && !this.parentGroupHasPager
@@ -251,14 +251,13 @@ export class CdsAlert extends LitElement {
           ? html`<span class="alert-spacer" cds-layout="align:stretch">&nbsp;</span>`
           : html``}
         ${this.type !== 'light' && this.closable
-          ? html`<span class="alert-close-wrapper"
-              ><slot name="close-button"
-                ><cds-internal-close-button
-                  icon-size="${this.type === 'banner' ? '20' : '16'}"
-                  @click="${() => this.closeAlert()}"
-                  aria-label="${this.i18n.closeButtonAriaLabel}"
-                ></cds-internal-close-button></slot
-            ></span>`
+          ? html`<slot name="close-button">
+              <cds-internal-close-button
+                icon-size="${this.type === 'banner' ? '20' : '16'}"
+                @click="${() => this.closeAlert()}"
+                aria-label="${this.i18n.closeButtonAriaLabel}"
+              ></cds-internal-close-button
+            ></slot>`
           : html``}
       </div>
     `;