Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(react): fix padding issue in TextField #295

Merged
merged 5 commits into from
Oct 23, 2024
Merged

fix(react): fix padding issue in TextField #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bdf8804
fix(react): fix `Dialog` className composition issue
brionmario Oct 22, 2024
559796f
fix(react): remove `MuiOutlinedInput` unwanted padding override
brionmario Oct 22, 2024
ab542a2
ci: stop dependencies from version bumps
brionmario Oct 23, 2024
677d9f1
chore: update lockfile
brionmario Oct 23, 2024
046963d
chore(react): update snapshots
brionmario Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/multi-brand-identity/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions ...ages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
4 changes: 2 additions & 2 deletions ...ges/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
/>
Expand Down
8 changes: 4 additions & 4 deletions ...act/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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=""
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
10 changes: 5 additions & 5 deletions packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
14 changes: 11 additions & 3 deletions packages/react/src/components/TextField/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down
7 changes: 0 additions & 7 deletions packages/react/src/theme/default-theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,13 +153,6 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
},
},
},
MuiOutlinedInput: {
styleOverrides: {
input: {
padding: '0.67857143em 1em',
},
},
},
MuiTypography: {
defaultProps: {
variantMapping: {
Expand Down
6 changes: 3 additions & 3 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions release/scripts/workspaces.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading