fix(split-button): fix width layout (#8133)

**Related Issue:** #7692 ## Summary This fixes an issue where styles related to `width` were being applied internally and had no impact on the component.
Esri · Nov 7, 2023 · 051f332 · 051f332
1 parent 76dca36
commit 051f332
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 53 deletions.
diff --git a/packages/calcite-components/src/components/split-button/resources.ts b/packages/calcite-components/src/components/split-button/resources.ts
@@ -1,7 +1,7 @@
 export const CSS = {
-  container: "split-button__container",
-  dividerContainer: "split-button__divider-container",
-  divider: "split-button__divider",
+  container: "container",
+  dividerContainer: "divider-container",
+  divider: "divider",
   widthAuto: "width-auto",
   widthHalf: "width-half",
   widthFull: "width-full",

diff --git a/packages/calcite-components/src/components/split-button/split-button.e2e.ts b/packages/calcite-components/src/components/split-button/split-button.e2e.ts
@@ -1,7 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import { accessible, defaults, disabled, focusable, hidden, renders } from "../../tests/commonTests";
-import { CSS } from "./resources";
 
 describe("calcite-split-button", () => {
   describe("defaults", () => {
@@ -212,24 +211,6 @@ describe("calcite-split-button", () => {
     expect(dropdownButton).toEqualAttribute("split-child", "secondary");
   });
 
-  it("adds the relevant CSS class based on the width attribute", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-split-button width="auto"></calcite-split-button>`);
-
-    const element = await page.find(`calcite-split-button`);
-    const container = await page.find(`calcite-split-button >>> .${CSS.widthAuto}`);
-    expect(container).not.toBeNull();
-    expect(container).toHaveClass(CSS.widthAuto);
-
-    element.setAttribute("width", "half");
-    await page.waitForChanges();
-    expect(container).toHaveClass(CSS.widthHalf);
-
-    element.setAttribute("width", "full");
-    await page.waitForChanges();
-    expect(container).toHaveClass(CSS.widthFull);
-  });
-
   it("should support dropdown item keyboard navigation", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-split-button scale="s" primary-text="Button">

diff --git a/packages/calcite-components/src/components/split-button/split-button.scss b/packages/calcite-components/src/components/split-button/split-button.scss
@@ -2,13 +2,16 @@
   @apply inline-block;
 }
 
-:host {
-  .split-button__container {
-    @apply flex items-stretch;
-    > calcite-dropdown > calcite-button {
-      @apply h-full align-top;
-    }
-  }
+:host([width="auto"]) {
+  @apply w-auto;
+}
+
+:host([width="half"]) {
+  @apply w-2/4;
+}
+
+:host([width="full"]) {
+  @apply w-full;
 }
 
 :host {
@@ -74,41 +77,36 @@
   }
 }
 
-.width-auto {
-  @apply w-auto;
-}
-
-.width-half {
-  @apply w-1/2;
-}
-
-.width-full {
-  @apply w-full;
+.container {
+  @apply flex items-stretch;
+  > calcite-dropdown > calcite-button {
+    @apply h-full align-top;
+  }
 }
 
-.split-button__divider-container {
+.divider-container {
   @apply transition-default flex w-px items-stretch;
   background-color: var(--calcite-split-button-background);
 }
 
-.split-button__divider {
+.divider {
   @apply my-1 inline-block w-px;
   background-color: var(--calcite-split-button-divider);
 }
 
 :host([appearance="outline-fill"]),
 :host([appearance="outline"]) {
-  .split-button__divider-container {
+  .divider-container {
     border-block: 1px solid var(--calcite-split-button-divider);
   }
-  &:hover .split-button__divider-container {
+  &:hover .divider-container {
     background-color: var(--calcite-split-button-divider);
   }
 }
 
 :host([appearance="outline-fill"]:hover),
 :host([appearance="outline"]:hover) {
-  .split-button__divider-container {
+  .divider-container {
     background-color: var(--calcite-split-button-divider);
   }
 }
@@ -121,13 +119,13 @@
   &:host([kind="danger"]) {
     --calcite-split-button-divider: theme("colors.danger-press");
   }
-  .split-button__divider-container {
+  .divider-container {
     background-color: var(--calcite-split-button-divider);
   }
 }
 
 @include disabled() {
-  .split-button__divider-container {
+  .divider-container {
     @apply opacity-disabled;
   }
 

diff --git a/packages/calcite-components/src/components/split-button/split-button.stories.ts b/packages/calcite-components/src/components/split-button/split-button.stories.ts
@@ -37,6 +37,41 @@ export const simple = (): string => html`
   </div>
 `;
 
+export const allWidths_TestOnly = (): string => html`
+  <div style="width:70vw;">
+    <calcite-split-button primary-text="auto" width="auto">
+      <calcite-dropdown-group selection-mode="none" group-title="Veggies">
+        <calcite-dropdown-item>Pea</calcite-dropdown-item>
+        <calcite-dropdown-item>Parsnip</calcite-dropdown-item>
+        <calcite-dropdown-item>Radish</calcite-dropdown-item>
+        <calcite-dropdown-item>Tomato</calcite-dropdown-item>
+        <calcite-dropdown-item>Rutabaga</calcite-dropdown-item>
+        <calcite-dropdown-item>Bean</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+    <calcite-split-button primary-text="half width" width="half">
+      <calcite-dropdown-group selection-mode="none" group-title="Veggies">
+        <calcite-dropdown-item>Pea</calcite-dropdown-item>
+        <calcite-dropdown-item>Parsnip</calcite-dropdown-item>
+        <calcite-dropdown-item>Radish</calcite-dropdown-item>
+        <calcite-dropdown-item>Tomato</calcite-dropdown-item>
+        <calcite-dropdown-item>Rutabaga</calcite-dropdown-item>
+        <calcite-dropdown-item>Bean</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+    <calcite-split-button primary-text="full width" width="full">
+      <calcite-dropdown-group selection-mode="none" group-title="Veggies">
+        <calcite-dropdown-item>Pea</calcite-dropdown-item>
+        <calcite-dropdown-item>Parsnip</calcite-dropdown-item>
+        <calcite-dropdown-item>Radish</calcite-dropdown-item>
+        <calcite-dropdown-item>Tomato</calcite-dropdown-item>
+        <calcite-dropdown-item>Rutabaga</calcite-dropdown-item>
+        <calcite-dropdown-item>Bean</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+  </div>
+`;
+
 export const iconEnd_TestOnly = (): string => html`
   <div style="width:70vw;">
     <calcite-split-button

diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -179,16 +179,10 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
   }
 
   render(): VNode {
-    const widthClasses = {
-      [CSS.container]: true,
-      [CSS.widthAuto]: this.width === "auto",
-      [CSS.widthHalf]: this.width === "half",
-      [CSS.widthFull]: this.width === "full",
-    };
     const buttonWidth = this.width === "auto" ? "auto" : "full";
 
     return (
-      <div class={widthClasses}>
+      <div class={CSS.container}>
         <calcite-button
           appearance={this.appearance}
           disabled={this.disabled}