Merge pull request #295 from brionmario/migrate-default-props

fix(react): fix padding issue in `TextField`
wso2 · Oct 23, 2024 · e7bf716 · e7bf716
2 parents 50235a5 + 046963d
commit e7bf716
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 33 deletions.
diff --git a/examples/multi-brand-identity/package.json b/examples/multi-brand-identity/package.json
@@ -32,8 +32,8 @@
   "dependencies": {
     "@fontsource/inter": "^4.5.14",
     "@fontsource/montserrat": "^4.5.13",
-    "@oxygen-ui/primitives": "1.15.1",
-    "@oxygen-ui/react": "1.15.1",
+    "@oxygen-ui/primitives": "workspace:*",
+    "@oxygen-ui/react": "workspace:../../packages/react/dist",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/...ages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/...ages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -21,15 +21,15 @@ exports[`Alert should match the snapshot 1`] = `
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root OxygenTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-118ft55-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-115mmlx-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-autocomplete="list"
               aria-expanded="false"
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1d0o5yu-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1h5lv9e-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r2:"
               role="combobox"
               spellcheck="false"

diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
@@ -56,7 +56,7 @@ const Dialog: ForwardRefExoticComponent<DialogProps> = forwardRef(
   <C extends ElementType = ElementType>(
     {className, ...rest}: DialogProps<C>,
     ref: Ref<HTMLDivElement>,
-  ): ReactElement => <MuiDialog ref={ref} className={clsx('OxygenDialog-root')} {...rest} />,
+  ): ReactElement => <MuiDialog ref={ref} className={clsx('OxygenDialog-root', className)} {...rest} />,
 ) as ForwardRefExoticComponent<DialogProps>;
 
 export default Dialog;
diff --git a/...ges/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap b/...ges/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
@@ -4,10 +4,10 @@ exports[`OutlinedInput should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-sc35us-MuiInputBase-root-MuiOutlinedInput-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-9s98je-MuiInputBase-root-MuiOutlinedInput-root"
     >
       <input
-        class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
         type="text"
         value=""
       />

diff --git a/...act/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap b/...act/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -17,13 +17,13 @@ exports[`TextField should match the snapshot 1`] = `
         class="oxygen-box oxygen-select-input MuiBox-root css-0"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-z48p9p-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-saqlya-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
         >
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
             aria-labelledby="phone-number-label phone-number-select"
-            class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input oxygen-select-input-root css-cu70ox-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input oxygen-select-input-root css-1d3lhbp-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
             id="phone-number-select"
             role="button"
             tabindex="0"
@@ -72,10 +72,10 @@ exports[`TextField should match the snapshot 1`] = `
           </fieldset>
         </div>
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-sc35us-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-outlined-input css-9s98je-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
-            class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input css-d9o7zs-MuiInputBase-input-MuiOutlinedInput-input"
             id="phone-number-input"
             type="tel"
             value=""

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,12 +4,12 @@ exports[`Select should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-z48p9p-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary oxygen-select css-saqlya-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
     >
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-cu70ox-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+        class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1d3lhbp-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
         role="button"
         tabindex="0"
       >

diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
@@ -36,11 +36,11 @@ exports[`SignIn should match the snapshot 1`] = `
               class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root OxygenTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-wyl8kf-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl MuiInputBase-sizeSmall css-e1xd3c-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-18xv68w-MuiInputBase-input-MuiOutlinedInput-input"
                   id="name"
                   name="text"
                   placeholder="Enter your username"
@@ -79,12 +79,12 @@ exports[`SignIn should match the snapshot 1`] = `
               class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-118ft55-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-115mmlx-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
                   autocomplete="current-password"
-                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-1d0o5yu-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-1h5lv9e-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r4:"
                   name="password"
                   placeholder="Enter your password"
@@ -93,7 +93,7 @@ exports[`SignIn should match the snapshot 1`] = `
                   value=""
                 />
                 <div
-                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium oxygen-input-adornment css-103jkr5-MuiInputAdornment-root"
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall oxygen-input-adornment css-103jkr5-MuiInputAdornment-root"
                 >
                   <button
                     aria-label="toggle password visibility"

diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
@@ -175,7 +175,7 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> = for
  */
 const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> = forwardRef(
   <C extends ElementType = ElementType>(
-    {className, id, label, type, InputLabelProps, variant, ...rest}: TextFieldProps<C>,
+    {className, id, label, type, InputLabelProps, variant, size = 'small', ...rest}: TextFieldProps<C>,
     ref: Ref<HTMLDivElement>,
   ): ReactElement => {
     const classes: string = clsx('oxygen-text-field', className);
@@ -186,9 +186,17 @@ const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> = forw
           {label}
         </InputLabel>
         {type === TextFieldInputTypes.INPUT_PASSWORD ? (
-          <PasswordFieldWithCriteria ref={ref} id={id} variant={variant} type={type} {...rest} />
+          <PasswordFieldWithCriteria ref={ref} id={id} variant={variant} type={type} size={size} {...rest} />
         ) : (
-          <MuiTextField ref={ref} id={id} variant={variant} className="OxygenTextField-root" type={type} {...rest} />
+          <MuiTextField
+            ref={ref}
+            id={id}
+            variant={variant}
+            className="OxygenTextField-root"
+            type={type}
+            size={size}
+            {...rest}
+          />
         )}
       </div>
     );

diff --git a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
@@ -13,11 +13,11 @@ exports[`TextField should match the snapshot 1`] = `
         class="MuiFormControl-root MuiTextField-root OxygenTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-sc35us-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall css-9s98je-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input css-1gmaq6h-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-18xv68w-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r1:"
             type="text"
             value=""

diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
@@ -153,13 +153,6 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
         },
       },
     },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        input: {
-          padding: '0.67857143em 1em',
-        },
-      },
-    },
     MuiTypography: {
       defaultProps: {
         variantMapping: {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/release/scripts/workspaces.mjs b/release/scripts/workspaces.mjs
@@ -336,6 +336,13 @@ export default class WorkspacesPlugin extends Plugin {
         for (let dependency in dependencies) {
           if (workspaces.find((w) => w.name === dependency)) {
             const existingVersion = dependencies[dependency];
+
+            // ignore workspace dependencies.
+            // Workaround for https://github.com/wso2/oxygen-ui/issues/297.
+            if (existingVersion.includes('workspace')) {
+              return;
+            }
+
             const replacementVersion = this._buildReplacementDepencencyVersion(
               existingVersion,
               newVersion