test(fab): add demo stories and e2e

packages/calcite-components/src/components/fab/fab.e2e.ts

@@ -167,6 +167,10 @@ describe("calcite-fab", () => {
           shadowSelector: "calcite-button",
           targetProp: "--calcite-button-border-color",
         },
+        "--calcite-fab-shadow-color": {
+          shadowSelector: "calcite-button",
+          targetProp: "boxShadow",
+        },
       });
     });
   });

packages/calcite-components/src/custom-theme.stories.ts

@@ -10,16 +10,18 @@ import {
   actionPadTokens,
   actionGroupTokens,
 } from "./custom-theme/action";
-import { alertTokens, alert } from "./custom-theme/alert";
-import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { accordion, accordionTokens } from "./custom-theme/accordion";
+import { accordionItemTokens } from "./custom-theme/accordion-item";
+import { alertTokens, alert } from "./custom-theme/alert";
+import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
 import { buttons, buttonTokens } from "./custom-theme/button";
 import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
 import { chips, chipTokens } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
+import { fabGroup as fab, fabTokens } from "./custom-theme/fab";
 import { handle, handleTokens } from "./custom-theme/handle";
 import { icon } from "./custom-theme/icon";
 import { input, inputTokens } from "./custom-theme/input";
@@ -39,7 +41,6 @@ import { switchTokens } from "./custom-theme/switch";
 import { tabs } from "./custom-theme/tabs";
 import { textArea, textAreaTokens } from "./custom-theme/text-area";
 import { tooltip, tooltipTokens } from "./custom-theme/tooltip";
-import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
 import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
 
@@ -70,24 +71,34 @@ const globalTokens = {
 };
 
 const componentTokens = {
-  ...accordionTokens,
+  ...globalTokens,
   ...accordionItemTokens,
-  ...actionTokens,
+  ...accordionTokens,
   ...actionBarTokens,
   ...actionGroupTokens,
   ...actionMenuTokens,
   ...actionPadTokens,
+  ...actionTokens,
+  ...alertTokens,
   ...avatarTokens,
   ...buttonTokens,
   ...cardTokens,
-  ...alertTokens,
-  ...chipTokens,
   ...checkboxTokens,
+  ...chipTokens,
+  ...fabTokens,
   ...handleTokens,
+  ...inputTokens,
+  ...labelTokens,
+  ...linkTokens,
+  ...listTokens,
+  ...navigationTokens,
   ...popoverTokens,
   ...progressTokens,
-  ...inputTokens,
+  ...sliderTokens,
+  ...switchTokens,
   ...textAreaTokens,
+  ...tileTokens,
+  ...tooltipTokens,
 };
 
 function convertToParamCase(str) {
@@ -139,7 +150,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       <div class="demo-column">
         <div>${card}</div>
         ${cardThumbnail}
-        <div>${dropdown} ${buttons}</div>
+        <div>${dropdown} ${buttons} ${fab}</div>
         <div>${checkbox}</div>
         ${chips} ${pagination} ${slider}
       </div>
@@ -151,35 +162,6 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     </div>
   </div>`;
 
-const componentTokens = {
-  ...globalTokens,
-  ...accordionTokens,
-  ...accordionItemTokens,
-  ...actionTokens,
-  ...actionBarTokens,
-  ...actionGroupTokens,
-  ...actionMenuTokens,
-  ...actionPadTokens,
-  ...avatarTokens,
-  ...cardTokens,
-  ...alertTokens,
-  ...chipTokens,
-  ...checkboxTokens,
-  ...handleTokens,
-  ...labelTokens,
-  ...linkTokens,
-  ...listTokens,
-  ...popoverTokens,
-  ...progressTokens,
-  ...inputTokens,
-  ...switchTokens,
-  ...textAreaTokens,
-  ...tooltipTokens,
-  ...tileTokens,
-  ...navigationTokens,
-  ...sliderTokens,
-};
-
 export default {
   title: "Theming/Custom Theme",
   args: {

packages/calcite-components/src/custom-theme/fab.ts

@@ -0,0 +1,25 @@
+import { html } from "../../support/formatting";
+
+const fabProps: [args: string, content: string] = ["", ""];
+
+export const fabTokens = {
+  calciteFabBackgroundColor: "",
+  calciteFabBorderColor: "",
+  calciteFabTextColor: "",
+  calciteFabCornerRadius: "",
+  calciteFabShadowColor: "",
+};
+
+export const fab = (props: { kind?: string; appearance?: string }): string => {
+  const [fabArgs, content] = Object.entries(props)
+    .filter(([key, value]) => key && value && value !== "")
+    .reduce(([args, content], [key, value]) => {
+      args += `${key}="${value}" `;
+      content += `${value} `;
+      return [args, content];
+    }, fabProps);
+
+  return html`<calcite-fab ${fabArgs.trim()}>${content.trim()}</calcite-fab>`;
+};
+
+export const fabGroup = html`${fab({ appearance: "outline" })} ${fab({ kind: "danger" })}`;

packages/calcite-components/src/demos/fab.html

@@ -595,5 +595,34 @@
         </div>
       </div>
     </demo-dom-swapper>
+    <demo-dom-swapper>
+      <demo-theme
+        tokens="
+          --calcite-fab-background-color
+          --calcite-fab-border-color
+          --calcite-fab-corner-radius
+          --calcite-fab-shadow-color
+          --calcite-fab-text-color
+        "
+      >
+        <div>
+          <p class="right-align">Custom Theme</p>
+        </div>
+
+        <div class="child-flex">
+          <div>
+            <calcite-fab scale="s" icon="arrow-right" label="FAB" kind="danger" appearance="solid"></calcite-fab>
+          </div>
+
+          <div>
+            <calcite-fab scale="m" icon="arrow-right" label="FAB" kind="danger" appearance="solid"></calcite-fab>
+          </div>
+
+          <div>
+            <calcite-fab scale="l" icon="arrow-right" label="FAB" kind="danger" appearance="solid"></calcite-fab>
+          </div>
+        </div>
+      </demo-theme>
+    </demo-dom-swapper>
   </body>
 </html>