refactor(button, fab, split-button)!: Update properties and values (#…

…6062) BREAKING CHANGE: Removed deprecated properties and values. - `button`: Removed the property `form`, this property is no longer needed if the component is placed inside a form. - `button`, `fab`, `split-button`: Renamed the property `color`, use `kind` instead. - `button`, `fab`, `split-button`: Updated the accepted values of `kind` to `brand` (default), `danger`, `inverse`, and `neutral`. - `button`, `split-button`: Updated the accepted values of `appearance` to `outline`, `outline-fill` and `solid` (default). - `fab`: Updated the accepted values of `appearance` to `outline-fill` and `solid` (default).
Esri · Dec 15, 2022 · 969a2eb · 969a2eb
1 parent cffec1b
commit 969a2eb
Show file tree

Hide file tree

Showing 49 changed files with 1,072 additions and 1,014 deletions.
diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx
@@ -144,7 +144,7 @@ export const Template = () =>
             </calcite-dropdown-group>
           </calcite-dropdown>
           <calcite-button appearance="outline">Outline</calcite-button>
-          <calcite-button color="red">Red</calcite-button>
+          <calcite-button kind="danger">Red</calcite-button>
         </div>
         <div>
           <label>

diff --git a/src/components/button/button.e2e.ts b/src/components/button/button.e2e.ts
@@ -20,8 +20,8 @@ describe("calcite-button", () => {
         defaultValue: undefined
       },
       {
-        propertyName: "color",
-        defaultValue: "blue"
+        propertyName: "kind",
+        defaultValue: "brand"
       },
       {
         propertyName: "disabled",
@@ -99,7 +99,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(element).toEqualAttribute("appearance", "solid");
     expect(element).toEqualAttribute("scale", "m");
     expect(element).toEqualAttribute("width", "auto");
@@ -115,7 +115,7 @@ describe("calcite-button", () => {
   it("is accessible: href", async () => accessible(`<calcite-button href="/">Continue</calcite-button>`));
 
   it("is accessible: style props", async () =>
-    accessible(`<calcite-button color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`));
+    accessible(`<calcite-button kind="danger" scale="l" width="half" appearance="outline">Continue</calcite-button>`));
 
   it("is accessible: href and target", async () =>
     accessible(
@@ -160,7 +160,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(element).toEqualAttribute("appearance", "solid");
     expect(element).toEqualAttribute("scale", "m");
     expect(element).toEqualAttribute("width", "auto");
@@ -174,7 +174,7 @@ describe("calcite-button", () => {
   it("renders as a button with requested props", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-button color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`
+      `<calcite-button kind="danger" scale="l" width="half" appearance="outline">Continue</calcite-button>`
     );
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
@@ -184,7 +184,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "red");
+    expect(element).toEqualAttribute("kind", "danger");
     expect(element).toEqualAttribute("appearance", "outline");
     expect(element).toEqualAttribute("scale", "l");
     expect(element).toEqualAttribute("width", "half");
@@ -198,7 +198,7 @@ describe("calcite-button", () => {
   it("renders as a link with requested props", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-button href="/" color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`
+      `<calcite-button href="/" kind="danger" scale="l" width="half" appearance="outline">Continue</calcite-button>`
     );
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
@@ -208,7 +208,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "red");
+    expect(element).toEqualAttribute("kind", "danger");
     expect(element).toEqualAttribute("appearance", "outline");
     expect(element).toEqualAttribute("scale", "l");
     expect(element).toEqualAttribute("width", "half");
@@ -421,7 +421,7 @@ describe("calcite-button", () => {
         icon-start="layer"
         icon-end="chevron-down"
         appearance="transparent"
-        color="blue"
+        kind="brand"
       >
         Layers
       </calcite-button>

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -238,7 +238,7 @@
   }
 }
 
-:host([color="blue"]) {
+:host([kind="brand"]) {
   button,
   a {
     @apply text-color-inverse bg-brand;
@@ -254,7 +254,7 @@
     }
   }
 }
-:host([color="red"]) {
+:host([kind="danger"]) {
   button,
   a {
     @apply text-color-inverse bg-danger;
@@ -270,7 +270,7 @@
     }
   }
 }
-:host([color="neutral"]) {
+:host([kind="neutral"]) {
   button,
   a {
     @apply text-color-1 bg-foreground-3;
@@ -286,7 +286,7 @@
     }
   }
 }
-:host([color="inverse"]) {
+:host([kind="inverse"]) {
   button,
   a {
     @apply text-color-inverse;
@@ -304,14 +304,14 @@
   }
 }
 // outline
-:host([appearance="outline"]) {
+:host([appearance="outline-fill"]) {
   button,
   a {
     @apply bg-foreground-1 border border-solid;
     box-shadow: inset 0 0 0 1px transparent;
   }
 }
-:host([appearance="outline"][color="blue"]) {
+:host([appearance="outline-fill"][kind="brand"]) {
   button,
   a {
     @apply border-color-brand bg-foreground-1;
@@ -336,7 +336,7 @@
     }
   }
 }
-:host([appearance="outline"][color="red"]) {
+:host([appearance="outline-fill"][kind="danger"]) {
   button,
   a {
     @apply border-color-danger bg-foreground-1;
@@ -361,7 +361,7 @@
     }
   }
 }
-:host([appearance="outline"][color="neutral"]) {
+:host([appearance="outline-fill"][kind="neutral"]) {
   button,
   a {
     @apply text-color-1 bg-foreground-1;
@@ -380,7 +380,7 @@
     }
   }
 }
-:host([appearance="outline"][color="inverse"]) {
+:host([appearance="outline-fill"][kind="inverse"]) {
   button,
   a {
     @apply text-color-1 bg-foreground-1;
@@ -402,17 +402,14 @@
     }
   }
 }
-// clear is deprecated. use minimal instead
-:host([appearance="clear"]),
-:host([appearance="minimal"]) {
+:host([appearance="outline"]) {
   button,
   a {
     @apply border border-solid bg-transparent;
     box-shadow: inset 0 0 0 1px transparent;
   }
 }
-:host([appearance="clear"][color="blue"]),
-:host([appearance="minimal"][color="blue"]) {
+:host([appearance="outline"][kind="brand"]) {
   button,
   a {
     @apply border-color-brand bg-transparent;
@@ -437,8 +434,7 @@
     }
   }
 }
-:host([appearance="clear"][color="red"]),
-:host([appearance="minimal"][color="red"]) {
+:host([appearance="outline"][kind="danger"]) {
   button,
   a {
     @apply border-color-danger bg-transparent;
@@ -463,8 +459,7 @@
     }
   }
 }
-:host([appearance="clear"][color="neutral"]),
-:host([appearance="minimal"][color="neutral"]) {
+:host([appearance="outline"][kind="neutral"]) {
   button,
   a {
     @apply text-color-1  bg-transparent;
@@ -483,8 +478,7 @@
     }
   }
 }
-:host([appearance="clear"][color="inverse"]),
-:host([appearance="minimal"][color="inverse"]) {
+:host([appearance="outline"][kind="inverse"]) {
   button,
   a {
     @apply text-color-1  bg-transparent;
@@ -507,16 +501,14 @@
   }
 }
 
-:host([appearance="outline"][split-child="primary"]) button,
-:host([appearance="clear"][split-child="primary"]) button,
-:host([appearance="minimal"][split-child="primary"]) button {
+:host([appearance="outline-fill"][split-child="primary"]) button,
+:host([appearance="outline"][split-child="primary"]) button {
   border-inline-end-width: 0;
   border-inline-start-width: theme("borderWidth.DEFAULT");
 }
 
-:host([appearance="outline"][split-child="secondary"]) button,
-:host([appearance="clear"][split-child="secondary"]) button,
-:host([appearance="minimal"][split-child="secondary"]) button {
+:host([appearance="outline-fill"][split-child="secondary"]) button,
+:host([appearance="outline"][split-child="secondary"]) button {
   border-inline-start-width: 0;
   border-inline-end-width: theme("borderWidth.DEFAULT");
 }
@@ -535,7 +527,7 @@
     }
   }
 }
-:host([appearance="transparent"][color="blue"]) {
+:host([appearance="transparent"][kind="brand"]) {
   button,
   a {
     color: theme("colors.brand");
@@ -554,7 +546,7 @@
   }
 }
 
-:host([appearance="transparent"][color="red"]) {
+:host([appearance="transparent"][kind="danger"]) {
   button,
   a {
     color: theme("colors.danger");
@@ -573,15 +565,15 @@
   }
 }
 
-:host([appearance="transparent"][color="neutral"]:not(.cancel-editing-button)) {
+:host([appearance="transparent"][kind="neutral"]:not(.cancel-editing-button)) {
   button,
   a,
   calcite-loader {
     @apply text-color-1;
   }
 }
 
-:host([appearance="transparent"][color="neutral"].cancel-editing-button) {
+:host([appearance="transparent"][kind="neutral"].cancel-editing-button) {
   button {
     @apply text-color-3
       border-t-color-input
@@ -600,7 +592,7 @@
   }
 }
 
-:host([appearance="transparent"][color="neutral"].enable-editing-button) {
+:host([appearance="transparent"][kind="neutral"].enable-editing-button) {
   button {
     @apply bg-transparent;
   }
@@ -616,7 +608,7 @@
   }
 }
 
-:host([appearance="transparent"][color="inverse"]) {
+:host([appearance="transparent"][kind="inverse"]) {
   button,
   a,
   calcite-loader {

diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts
@@ -14,8 +14,8 @@ export default {
 
 export const simple = (): string => html`
   <calcite-button
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
     href="${text("href", "")}"
@@ -34,8 +34,8 @@ export const withIconStart = (): string => html`
       ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
       "center"
     )}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     icon-start="${select("icon-start", iconNames, iconNames[0])}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
@@ -56,9 +56,9 @@ export const withIconEnd = (): string => html`
       ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
       "center"
     )}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
     icon-end="${select("icon-end", iconNames, iconNames[0])}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
     href="${text("href", "")}"
@@ -79,8 +79,8 @@ export const withIconStartAndIconEnd = (): string => html`
       ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
       "center"
     )}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     icon-start="${select("icon-start", iconNames, iconNames[0])}"
     icon-end="${select("icon-end", iconNames, iconNames[0])}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
@@ -121,15 +121,15 @@ export const sideBySide_TestOnly = (): string => html`
   <div style="width: 300px; max-width: 100%; display: flex; flex-direction: row; background-color: #fff">
     <calcite-button
       width="half"
-      appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "outline")}"
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "outline-fill")}"
+      kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     >
       ${text("text", "Back")}
     </calcite-button>
     <calcite-button
       width="half"
-      appearance="${select("appearance-2", ["solid", "clear", "outline", "transparent"], "solid")}"
-      color="${select("color-2", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance-2", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+      kind="${select("kind-2", ["brand", "danger", "inverse", "neutral"], "brand")}"
       icon-start="${select("icon-start", iconNames, iconNames[0])}"
     >
       ${text("text-2", "Some long string")}
@@ -141,8 +141,8 @@ export const darkThemeRTL_TestOnly = (): string => html`
   <calcite-button
     class="calcite-theme-dark"
     dir="rtl"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
     href="${text("href", "")}"