Merge pull request #168 from brionmario/feat-add-components

fix(react): fix `Select` component issues
wso2 · Oct 24, 2023 · 84a2947 · 84a2947
2 parents d7249d0 + 8bbc829
commit 84a2947
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 72 deletions.
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -21,37 +21,52 @@ import clsx from 'clsx';
 import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
 import {WithWrapperProps} from '../../models';
 import {composeComponentDisplayName} from '../../utils';
-import Box from '../Box';
 import InputLabel, {InputLabelProps as MuiInputLabelProps} from '../InputLabel';
-import './select.scss';
 
 export interface SelectProps extends MuiSelectProps {
+  /**
+   * Props for the `InputLabel` component.
+   */
   InputLabelProps?: MuiInputLabelProps;
 }
 
 const COMPONENT_NAME: string = 'Select';
 
 const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwardRef(
   (props: SelectProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, InputLabelProps, label, id, ...rest} = props;
+    const {className, InputLabelProps, label, name, required, ...rest} = props;
 
     const classes: string = clsx('oxygen-select', className);
 
+    const labelProps: MuiInputLabelProps = {
+      ...{
+        disableAnimation: true,
+        required,
+        shrink: false,
+      },
+      ...InputLabelProps,
+    };
+
     return (
-      <Box className={classes}>
+      <>
         {label && (
-          <InputLabel id={id} {...InputLabelProps}>
+          <InputLabel id={name} htmlFor={name} {...labelProps}>
             {label}
           </InputLabel>
         )}
-        <MuiSelect ref={ref} labelId={id} {...rest} />
-      </Box>
+        <MuiSelect ref={ref} labelId={name} className={classes} {...rest} />
+      </>
     );
   },
 ) as ForwardRefExoticComponent<SelectProps> & WithWrapperProps;
 
 Select.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Select.muiName = COMPONENT_NAME;
-Select.defaultProps = {};
+Select.defaultProps = {
+  InputLabelProps: {
+    disableAnimation: true,
+    shrink: false,
+  },
+};
 
 export default Select;
diff --git a/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -4,56 +4,52 @@ exports[`Select should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="oxygen-box oxygen-select MuiBox-root css-0"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-saqlya-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary  css-saqlya-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1d3lhbp-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+        role="button"
+        tabindex="0"
       >
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1d3lhbp-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
-          role="button"
-          tabindex="0"
+        <span
+          class="notranslate"
+        >
+          
+        </span>
+      </div>
+      <input
+        aria-hidden="true"
+        class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
+        tabindex="-1"
+        value=""
+      />
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-j9wse9-MuiSvgIcon-root-MuiSelect-icon"
+        data-testid="ArrowDropDownIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7 10l5 5 5-5z"
+        />
+      </svg>
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline css-116asjz-MuiOutlinedInput-notchedOutline"
+      >
+        <legend
+          class="css-ihdtdm"
         >
           <span
             class="notranslate"
           >
             
           </span>
-        </div>
-        <input
-          aria-hidden="true"
-          class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
-          tabindex="-1"
-          value=""
-        />
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-j9wse9-MuiSvgIcon-root-MuiSelect-icon"
-          data-testid="ArrowDropDownIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M7 10l5 5 5-5z"
-          />
-        </svg>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-116asjz-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-ihdtdm"
-          >
-            <span
-              class="notranslate"
-            >
-              
-            </span>
-          </legend>
-        </fieldset>
-      </div>
+        </legend>
+      </fieldset>
     </div>
   </div>
 </body>

diff --git a/packages/react/src/components/Select/select.scss b/packages/react/src/components/Select/select.scss
diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx
@@ -33,7 +33,7 @@ const Skeleton: FC<SkeletonProps> & WithWrapperProps = <C extends ElementType>(
 ): ReactElement => {
   const {className, ...rest} = props;
 
-  const classes: string = clsx('oxygen-Skeleton', className);
+  const classes: string = clsx('oxygen-skeleton', className);
 
   return <MuiSkeleton className={classes} {...rest} />;
 };

diff --git a/packages/react/src/components/Skeleton/__test__/__snapshots__/Skeleton.test.tsx.snap b/packages/react/src/components/Skeleton/__test__/__snapshots__/Skeleton.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Skeleton should match the snapshot 1`] = `
 <body>
   <div>
     <span
-      class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse oxygen-Skeleton css-abjlxe-MuiSkeleton-root"
+      class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse oxygen-skeleton css-abjlxe-MuiSkeleton-root"
     />
   </div>
 </body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ exports[`Skeleton should match the snapshot 1`] = ` @@
     <body>
       <div>
         <span
-          class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse oxygen-Skeleton css-abjlxe-MuiSkeleton-root"
+          class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse oxygen-skeleton css-abjlxe-MuiSkeleton-root"
         />
       </div>
     </body>
@@ Expand Down @@