fix: fixed a number of logistical issues

okta · Jan 6, 2023 · 48a95e1 · 48a95e1
1 parent 1a73aa8
commit 48a95e1
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 75 deletions.
diff --git a/packages/odyssey-react-mui/src/components/TextField/TextField.tsx b/packages/odyssey-react-mui/src/components/TextField/TextField.tsx
@@ -14,8 +14,8 @@ import {
   ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
-  MouseEvent,
   ReactNode,
+  useCallback,
   useState,
 } from "react";
 import {
@@ -129,14 +129,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     } = props;
 
     const [inputType, setInputType] = useState(inType);
-    const handleClickShowPassword = () => {
+
+    const togglePasswordVisibility = useCallback(() => {
       setInputType((currentType) =>
         currentType === "password" ? "text" : "password"
       );
-    };
-    const handleMouseDownPassword = (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-    };
+    }, []);
 
     const id = useUniqueId(idOverride);
     const hintId = hintText ? `${id}-hint` : undefined;
@@ -160,8 +158,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
                 <IconButton
                   aria-label="toggle password visibility"
                   edge="end"
-                  onClick={handleClickShowPassword}
-                  onMouseDown={handleMouseDownPassword}
+                  onClick={togglePasswordVisibility}
                 >
                   {inputType === "password" ? <EyeIcon /> : <EyeOffIcon />}
                 </IconButton>

diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
@@ -107,6 +107,7 @@ export type {
   TableProps,
   TableRowProps,
   TableSortLabelProps,
+  ThemeOptions,
   TooltipProps,
   TypographyProps,
   useThemeProps,

diff --git a/packages/odyssey-storybook/src/components/customization/CustomTheme.stories.tsx b/packages/odyssey-storybook/src/components/customization/CustomTheme.stories.tsx
@@ -13,88 +13,79 @@
 import type { Story } from "@storybook/react";
 import {
   Button,
-  InputBase,
   FormControlLabel,
-  RadioGroup,
-  Radio,
   OdysseyThemeProvider,
+  Radio,
+  RadioGroup,
+  TextField,
+  ThemeOptions,
 } from "@okta/odyssey-react-mui";
+
 import CustomThemeMdx from "./CustomTheme.mdx";
 
 export default {
-  title: `Customization/components`,
-  component: Button,
+  title: "Customization/Components",
   parameters: {
     docs: {
       page: CustomThemeMdx,
     },
   },
 };
 
-const Template: Story = (props) => {
-  const customTheme = {
-    palette: {
-      primary: {
-        main: "rgba(233, 0, 0, 1)", // THIS IS A SAMPLE.
-      },
+const customTheme: ThemeOptions = {
+  palette: {
+    primary: {
+      main: "rgba(233, 0, 0, 1)", // THIS IS A SAMPLE. DO NOT USE!
     },
-  };
-
-  return (
-    <OdysseyThemeProvider customTheme={customTheme}>
-      <div>
-        {props.button && <Button variant="primary">Primary</Button>}
-        {props.input && (
-          <InputBase
-            autoComplete="name"
-            endAdornment={null}
-            id="demo-text-field"
-            inputProps={{
-              "aria-describedby": "textfield-hint textfield-error",
-            }}
-            startAdornment={null}
-            type="text"
-          />
-        )}
-        {props.radio && (
-          <RadioGroup
-            defaultValue="Lightspeed"
-            name="radio-buttons-group"
-            aria-describedby="radio-hint radio-error"
-          >
-            <FormControlLabel
-              value="Lightspeed"
-              control={<Radio />}
-              label="Lightspeed"
-            />
-            <FormControlLabel
-              value="Warp speed"
-              control={<Radio />}
-              label="Warp speed"
-            />
-            <FormControlLabel
-              value="Ludicrous speed"
-              control={<Radio />}
-              label="Ludicrous speed"
-            />
-          </RadioGroup>
-        )}
-      </div>
-    </OdysseyThemeProvider>
-  );
+  },
 };
 
-export const ButtonPrimary = Template.bind({});
-ButtonPrimary.args = {
-  button: true,
-};
+export const ButtonStory: Story = () => (
+  <OdysseyThemeProvider customTheme={customTheme}>
+    <div>
+      <Button variant="primary">Primary</Button>
+    </div>
+  </OdysseyThemeProvider>
+);
 
-export const InputDefault = Template.bind({});
-InputDefault.args = {
-  input: true,
-};
+ButtonStory.name = "Button";
 
-export const RadioDefault = Template.bind({});
-RadioDefault.args = {
-  radio: true,
-};
+export const TextFieldStory: Story = () => (
+  <OdysseyThemeProvider customTheme={customTheme}>
+    <div>
+      <TextField autoCompleteType="name" type="text" />
+    </div>
+  </OdysseyThemeProvider>
+);
+
+TextFieldStory.name = "TextField";
+
+export const RadioGroupStory: Story = () => (
+  <OdysseyThemeProvider customTheme={customTheme}>
+    <div>
+      <RadioGroup
+        defaultValue="Lightspeed"
+        name="radio-buttons-group"
+        aria-describedby="radio-hint radio-error"
+      >
+        <FormControlLabel
+          value="Lightspeed"
+          control={<Radio />}
+          label="Lightspeed"
+        />
+        <FormControlLabel
+          value="Warp speed"
+          control={<Radio />}
+          label="Warp speed"
+        />
+        <FormControlLabel
+          value="Ludicrous speed"
+          control={<Radio />}
+          label="Ludicrous speed"
+        />
+      </RadioGroup>
+    </div>
+  </OdysseyThemeProvider>
+);
+
+RadioGroupStory.name = "RadioGroup";