feat: inlineloadingindicator custom props (#911)

Introduces custom color, size, and data-cy props.
d2iq · Dec 20, 2022 · 405aacf · 405aacf
1 parent 5a3e31e
commit 405aacf
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 27 deletions.
diff --git a/packages/loadingIndicator/components/InlineLoadingIndicator.tsx b/packages/loadingIndicator/components/InlineLoadingIndicator.tsx
@@ -1,12 +1,31 @@
 import * as React from "react";
 import { Icon } from "../../icon";
 import { SystemIcons } from "../../icons/dist/system-icons-enum";
+import { IconSize } from "../../shared/types/iconSize";
 
-const InlineLoadingIndicator = () => (
+const DEFAULT_ICON_SIZE: IconSize = "xs";
+
+export interface InlineLoadingIndicatorProps {
+  /**
+   * The fill color of the spinner.
+   */
+  color?: string;
+  /** Which icon size to use for the width and height of the icon. */
+  size?: IconSize;
+  /** Human-readable selector used for writing tests. */
+  "data-cy"?: string;
+}
+
+const InlineLoadingIndicator = ({
+  size = DEFAULT_ICON_SIZE,
+  "data-cy": dataCy = "inlineLoadingIndicator",
+  color = "inherit"
+}) => (
   <Icon
     shape={SystemIcons.Spinner}
-    size="xs"
-    data-cy="inlineLoadingIndicator"
+    size={size}
+    data-cy={dataCy}
+    color={color}
   />
 );
 

diff --git a/packages/loadingIndicator/stories/InlineLoadingIndicator.stories.tsx b/packages/loadingIndicator/stories/InlineLoadingIndicator.stories.tsx
@@ -9,33 +9,48 @@ import {
 } from "../../configurationmap";
 
 import { InlineLoadingIndicator } from "..";
+import { spacingSizeValues } from "../../storybookHelpers/controlConstants";
 
 export default {
   title: "Feedback/Loading Indicators/Inline Loading Indicator",
-  component: InlineLoadingIndicator
+  component: InlineLoadingIndicator,
+  argTypes: {
+    color: {
+      control: { type: "color" }
+    },
+    size: {
+      options: spacingSizeValues,
+      control: {
+        type: "select"
+      }
+    },
+    "data-cy": {
+      control: { disable: true }
+    }
+  }
 } as Meta;
 
-const Template: Story = args => (
-  <>
-    <ConfigurationMap>
-      <ConfigurationMapSection>
-        <ConfigurationMapRow>
-          <ConfigurationMapLabel>Name</ConfigurationMapLabel>
-          <ConfigurationMapValue>
-            <InlineLoadingIndicator {...args} />
-          </ConfigurationMapValue>
-        </ConfigurationMapRow>
-        <ConfigurationMapRow>
-          <ConfigurationMapLabel>Role</ConfigurationMapLabel>
-          <ConfigurationMapValue>UX Designer</ConfigurationMapValue>
-        </ConfigurationMapRow>
-        <ConfigurationMapRow>
-          <ConfigurationMapLabel>City</ConfigurationMapLabel>
-          <ConfigurationMapValue>San Francisco</ConfigurationMapValue>
-        </ConfigurationMapRow>
-      </ConfigurationMapSection>
-    </ConfigurationMap>
-  </>
-);
+const Template: Story = args => <InlineLoadingIndicator {...args} />;
 
 export const Default = Template.bind({});
+
+export const InlineWithinComponent = args => (
+  <ConfigurationMap>
+    <ConfigurationMapSection>
+      <ConfigurationMapRow>
+        <ConfigurationMapLabel>Name</ConfigurationMapLabel>
+        <ConfigurationMapValue>
+          <InlineLoadingIndicator {...args} />
+        </ConfigurationMapValue>
+      </ConfigurationMapRow>
+      <ConfigurationMapRow>
+        <ConfigurationMapLabel>Role</ConfigurationMapLabel>
+        <ConfigurationMapValue>UX Designer</ConfigurationMapValue>
+      </ConfigurationMapRow>
+      <ConfigurationMapRow>
+        <ConfigurationMapLabel>City</ConfigurationMapLabel>
+        <ConfigurationMapValue>San Francisco</ConfigurationMapValue>
+      </ConfigurationMapRow>
+    </ConfigurationMapSection>
+  </ConfigurationMap>
+);
diff --git a/packages/loadingIndicator/tests/__snapshots__/loadingIndicator.test.tsx.snap b/packages/loadingIndicator/tests/__snapshots__/loadingIndicator.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Loading indicators renders SectionLoadingIndicator 1`] = `
 <DocumentFragment>
   <svg
     aria-label="system-spinner icon"
-    class="css-jbdp75"
+    class="css-1naj4ae"
     data-cy="icon inlineLoadingIndicator"
     height="16"
     preserveAspectRatio="xMinYMin meet"