feat(segmentedcontrol): add disabled state in button definition and c…

…ontrolled/uncontrolled state (#869)
chanzuckerberg · Oct 9, 2024 · d59af72 · d59af72
1 parent d7be2ca
commit d59af72
Show file tree

Hide file tree

Showing 6 changed files with 440 additions and 41 deletions.
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/index.stories.tsx b/packages/components/src/core/SegmentedControl/__storybook__/index.stories.tsx
@@ -3,6 +3,7 @@ import { BADGE } from "@geometricpanda/storybook-addon-badges";
 import { SegmentedControl } from "./stories/default";
 import { SEGMENTED_CONTROL_EXCLUDED_CONTROLS } from "./constants";
 import { TestDemo } from "./stories/test";
+import { ControlledSegmentedControlDemo } from "./stories/controlledSegmentedControl";
 
 export default {
   argTypes: {
@@ -24,15 +25,92 @@ export default {
 export const Default = {
   args: {
     buttonDefinition: [
-      { icon: "List", tooltipText: "List A", value: "A" },
-      { icon: "List", tooltipText: "List B", value: "B" },
-      { icon: "List", tooltipText: "List C", value: "C" },
-      { icon: "List", tooltipText: "List D", value: "D" },
+      {
+        icon: "List",
+        tooltipText: "List A",
+        value: "A",
+      },
+      {
+        icon: "List",
+        tooltipText: "List B",
+        value: "B",
+      },
+      {
+        icon: "List",
+        tooltipText: "List C",
+        value: "C",
+      },
+      {
+        icon: "List",
+        tooltipText: "List D",
+        value: "D",
+      },
     ],
   },
   render: SegmentedControl,
 };
 
+// Disabled Buttons
+
+export const WithDisabledButton = {
+  args: {
+    buttonDefinition: [
+      {
+        icon: "LinesHorizontal3",
+        tooltipText: "List A",
+        value: "A",
+      },
+      {
+        disabled: true,
+        icon: "LinesHorizontal3",
+        tooltipText: "List B",
+        value: "B",
+      },
+      {
+        icon: "LinesHorizontal3",
+        tooltipText: "List C",
+        value: "C",
+      },
+      {
+        icon: "LinesHorizontal3",
+        tooltipText: "List D",
+        value: "D",
+      },
+    ],
+  },
+  render: SegmentedControl,
+};
+
+// Controlled
+
+export const ControlledSegmentedControl = {
+  args: {
+    buttonDefinition: [
+      {
+        icon: "List",
+        tooltipText: "List A",
+        value: "A",
+      },
+      {
+        icon: "List",
+        tooltipText: "List B",
+        value: "B",
+      },
+      {
+        icon: "List",
+        tooltipText: "List C",
+        value: "C",
+      },
+      {
+        icon: "List",
+        tooltipText: "List D",
+        value: "D",
+      },
+    ],
+  },
+  render: ControlledSegmentedControlDemo,
+};
+
 // Test
 
 export const Test = {

diff --git a/...components/src/core/SegmentedControl/__storybook__/stories/controlledSegmentedControl.tsx b/...components/src/core/SegmentedControl/__storybook__/stories/controlledSegmentedControl.tsx
@@ -0,0 +1,20 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import RawSegmentedControl from "src/core/SegmentedControl";
+
+export const ControlledSegmentedControlDemo = (props: Args): JSX.Element => {
+  const { buttonDefinition, ...rest } = props;
+
+  const [value, setValue] = useState("C");
+  return (
+    <RawSegmentedControl
+      buttonDefinition={buttonDefinition}
+      onChange={(_event, newValue) => {
+        console.log(newValue);
+        setValue(newValue);
+      }}
+      value={value}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/stories/default.tsx b/packages/components/src/core/SegmentedControl/__storybook__/stories/default.tsx
@@ -4,11 +4,5 @@ import RawSegmentedControl from "src/core/SegmentedControl";
 export const SegmentedControl = (props: Args): JSX.Element => {
   const { buttonDefinition, ...rest } = props;
 
-  return (
-    <RawSegmentedControl
-      buttonDefinition={buttonDefinition}
-      color="error"
-      {...rest}
-    />
-  );
+  return <RawSegmentedControl buttonDefinition={buttonDefinition} {...rest} />;
 };