[enh] Remove Mui overrides for Select and TextField Mui components

The default behavior for Select and TextField components is the variant "outline" with Mui v5 while it was "standard" in Mui v4. We have preferred to set the variant attribute everywhere it is needed instead of overriding the default variant value. Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
AresEkb · Aug 8, 2024 · 20197bd · 20197bd
1 parent 5b3e7e4
commit 20197bd
Show file tree

Hide file tree

Showing 27 changed files with 95 additions and 457 deletions.
diff --git a/...s/frontend/sirius-components-diagrams/src/renderer/direct-edit/DiagramDirectEditInput.tsx b/...s/frontend/sirius-components-diagrams/src/renderer/direct-edit/DiagramDirectEditInput.tsx
@@ -194,6 +194,7 @@ export const DiagramDirectEditInput = ({ labelId, editingKey, onClose }: Diagram
   return (
     <>
       <TextField
+        variant="standard"
         name="name"
         size="small"
         inputRef={textInput}

diff --git a/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/DateTimeWidget.tsx b/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/DateTimeWidget.tsx
@@ -74,6 +74,7 @@ export const DateTimeWidget = ({ widget }: DateTimeWidgetProps) => {
         {widget.hasHelpText ? <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} /> : null}
       </div>
       <TextField
+        variant="standard"
         id="datetime"
         type={type}
         value={value}

diff --git a/...iptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx b/...iptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx
@@ -85,6 +85,7 @@ export const MultiSelectWidget = ({ widget }: MultiSelectWidgetProps) => {
         {widget.hasHelpText ? <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} /> : null}
       </div>
       <Select
+        variant="standard"
         data-testid={widget.label}
         label={widget.label}
         multiple

diff --git a/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx b/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx
@@ -85,6 +85,7 @@ export const SelectWidget = ({ widget }: SelectWidgetProps) => {
         {widget.hasHelpText ? <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} /> : null}
       </div>
       <Select
+        variant="standard"
         data-testid={widget.label}
         label={widget.label}
         fullWidth

diff --git a/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx b/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx
@@ -74,6 +74,7 @@ export const TextAreaWidget = ({ widget }: TextareaWidgetProps) => {
         {widget.hasHelpText ? <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} /> : null}
       </div>
       <TextField
+        variant="standard"
         data-testid={widget.label}
         multiline
         minRows={3}

diff --git a/...criptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx b/...criptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx
@@ -74,6 +74,7 @@ export const TextfieldWidget = ({ widget }: TextfieldWidgetProps) => {
         {widget.hasHelpText ? <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} /> : null}
       </div>
       <TextField
+        variant="standard"
         data-testid={widget.label}
         fullWidth
         inputRef={ref}

diff --git a/...s/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx b/...s/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx
@@ -137,6 +137,7 @@ export const DateTimeWidgetPropertySection: PropertySectionComponent<GQLDateTime
       }}>
       <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
       <TextField
+        variant="standard"
         id="datetime"
         disabled={readOnly || widget.readOnly}
         value={convertToLocalDateTimeString(widget.type, state.editedValue)}

diff --git a/...orms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx b/...orms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx
@@ -130,6 +130,7 @@ export const MultiSelectPropertySection: PropertySectionComponent<GQLMultiSelect
     <FormControl error={widget.diagnostics.length > 0}>
       <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
       <Select
+        variant="standard"
         value={widget.values}
         onChange={onChange}
         displayEmpty

diff --git a/...ges/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx b/...ges/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx
@@ -124,6 +124,7 @@ export const SelectPropertySection: PropertySectionComponent<GQLSelect> = ({
     <FormControl error={widget.diagnostics.length > 0}>
       <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
       <Select
+        variant="standard"
         value={widget.value || ''}
         onChange={onChange}
         displayEmpty

diff --git a/.../forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx b/.../forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx
@@ -320,6 +320,7 @@ export const TextfieldPropertySection: PropertySectionComponent<GQLTextfield | G
       <TextField
         name={widget.label}
         placeholder={widget.label}
+        variant="standard"
         value={value}
         spellCheck={false}
         margin="dense"

diff --git a/...rms/src/propertysections/__tests__/__snapshots__/MultiSelectPropertySection.test.tsx.snap b/...rms/src/propertysections/__tests__/__snapshots__/MultiSelectPropertySection.test.tsx.snap
@@ -19,15 +19,15 @@ exports[`should render a readOnly multiselect from widget properties 1`] = `
         />
       </div>
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl  css-1ualgfl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl  css-u5kk7y-MuiInputBase-root-MuiInput-root-MuiSelect-root"
         data-testid="MultiSelectLabel"
       >
         <div
           aria-controls="mui-6"
           aria-disabled="true"
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-outlined Mui-disabled MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input Mui-disabled css-1i556zm-style css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiSelect-select MuiSelect-standard Mui-disabled MuiSelect-multiple MuiInputBase-input MuiInput-input Mui-disabled css-1i556zm-style css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
           role="combobox"
         >
           <span
@@ -46,7 +46,7 @@ exports[`should render a readOnly multiselect from widget properties 1`] = `
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined Mui-disabled css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard Mui-disabled css-pqjvzy-MuiSvgIcon-root-MuiSelect-icon"
           data-testid="ArrowDropDownIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -55,20 +55,6 @@ exports[`should render a readOnly multiselect from widget properties 1`] = `
             d="M7 10l5 5 5-5z"
           />
         </svg>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-ihdtdm"
-          >
-            <span
-              class="notranslate"
-            >
-              
-            </span>
-          </legend>
-        </fieldset>
       </div>
       <p
         class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained css-1wc848c-MuiFormHelperText-root"
@@ -112,14 +98,14 @@ exports[`should render the multiSelect help hint 1`] = `
         </div>
       </div>
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-1ualgfl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-u5kk7y-MuiInputBase-root-MuiInput-root-MuiSelect-root"
         data-testid="MultiSelectLabel"
       >
         <div
           aria-controls="mui-5"
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input css-ozvo75-style css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input css-ozvo75-style css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
           role="combobox"
           tabindex="0"
         >
@@ -138,7 +124,7 @@ exports[`should render the multiSelect help hint 1`] = `
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard css-pqjvzy-MuiSvgIcon-root-MuiSelect-icon"
           data-testid="ArrowDropDownIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -147,20 +133,6 @@ exports[`should render the multiSelect help hint 1`] = `
             d="M7 10l5 5 5-5z"
           />
         </svg>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-ihdtdm"
-          >
-            <span
-              class="notranslate"
-            >
-              
-            </span>
-          </legend>
-        </fieldset>
       </div>
       <p
         class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained css-1wc848c-MuiFormHelperText-root"
@@ -189,14 +161,14 @@ exports[`should render the multiSelect with empty style 1`] = `
         />
       </div>
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-1ualgfl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-u5kk7y-MuiInputBase-root-MuiInput-root-MuiSelect-root"
         data-testid="MultiSelectLabel"
       >
         <div
           aria-controls="mui-3"
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input css-ozvo75-style css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input css-ozvo75-style css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
           role="combobox"
           tabindex="0"
         >
@@ -215,7 +187,7 @@ exports[`should render the multiSelect with empty style 1`] = `
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard css-pqjvzy-MuiSvgIcon-root-MuiSelect-icon"
           data-testid="ArrowDropDownIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -224,20 +196,6 @@ exports[`should render the multiSelect with empty style 1`] = `
             d="M7 10l5 5 5-5z"
           />
         </svg>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-ihdtdm"
-          >
-            <span
-              class="notranslate"
-            >
-              
-            </span>
-          </legend>
-        </fieldset>
       </div>
       <p
         class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained css-1wc848c-MuiFormHelperText-root"
@@ -266,14 +224,14 @@ exports[`should render the multiSelect with style 1`] = `
         />
       </div>
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-1ualgfl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-u5kk7y-MuiInputBase-root-MuiInput-root-MuiSelect-root"
         data-testid="MultiSelectLabel"
       >
         <div
           aria-controls="mui-2"
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input css-1i556zm-style css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input css-1i556zm-style css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
           role="combobox"
           tabindex="0"
         >
@@ -292,7 +250,7 @@ exports[`should render the multiSelect with style 1`] = `
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard css-pqjvzy-MuiSvgIcon-root-MuiSelect-icon"
           data-testid="ArrowDropDownIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -301,20 +259,6 @@ exports[`should render the multiSelect with style 1`] = `
             d="M7 10l5 5 5-5z"
           />
         </svg>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-ihdtdm"
-          >
-            <span
-              class="notranslate"
-            >
-              
-            </span>
-          </legend>
-        </fieldset>
       </div>
       <p
         class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained css-1wc848c-MuiFormHelperText-root"
@@ -343,14 +287,14 @@ exports[`should render the multiSelect without style 1`] = `
         />
       </div>
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-1ualgfl-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl  css-u5kk7y-MuiInputBase-root-MuiInput-root-MuiSelect-root"
         data-testid="MultiSelectLabel"
       >
         <div
           aria-controls="mui-1"
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input css-ozvo75-style css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input css-ozvo75-style css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
           role="combobox"
           tabindex="0"
         >
@@ -369,7 +313,7 @@ exports[`should render the multiSelect without style 1`] = `
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard css-pqjvzy-MuiSvgIcon-root-MuiSelect-icon"
           data-testid="ArrowDropDownIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -378,20 +322,6 @@ exports[`should render the multiSelect without style 1`] = `
             d="M7 10l5 5 5-5z"
           />
         </svg>
-        <fieldset
-          aria-hidden="true"
-          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-        >
-          <legend
-            class="css-ihdtdm"
-          >
-            <span
-              class="notranslate"
-            >
-              
-            </span>
-          </legend>
-        </fieldset>
       </div>
       <p
         class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained css-1wc848c-MuiFormHelperText-root"