From 028fb9b19b66dd8b3ec0778550e0a3570700874e Mon Sep 17 00:00:00 2001 From: Priscila Moneo Date: Mon, 1 Jun 2026 18:28:52 -0300 Subject: [PATCH 1/3] fix: match inputs with figma styles Signed-off-by: Priscila Moneo --- src/components/index.js | 1 + src/components/mui/dropdown-checkbox.js | 2 ++ .../mui/formik-inputs/mui-formik-dropdown-checkbox.js | 2 ++ .../mui/formik-inputs/mui-formik-dropdown-radio.js | 2 ++ .../mui/formik-inputs/mui-formik-select-v2.js | 2 ++ src/components/mui/formik-inputs/mui-formik-select.js | 2 ++ src/components/mui/input-border.less | 11 +++++++++++ src/components/mui/search-input.js | 5 ++++- 8 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 src/components/mui/input-border.less diff --git a/src/components/index.js b/src/components/index.js index 7cea9067..fbad5456 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ +import './mui/input-border.less'; export {default as AjaxLoader} from './ajaxloader'; export {default as RawHTML} from './raw-html'; export {default as FreeTextSearch} from './free-text-search'; diff --git a/src/components/mui/dropdown-checkbox.js b/src/components/mui/dropdown-checkbox.js index be7c64d5..5e5d9632 100644 --- a/src/components/mui/dropdown-checkbox.js +++ b/src/components/mui/dropdown-checkbox.js @@ -22,6 +22,7 @@ import { OutlinedInput, Select } from "@mui/material"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; const DropdownCheckbox = ({ name, @@ -65,6 +66,7 @@ const DropdownCheckbox = ({ labelId={`${name}_label`} name={name} multiple + IconComponent={KeyboardArrowDownIcon} value={value} onChange={handleChange} {...rest} diff --git a/src/components/mui/formik-inputs/mui-formik-dropdown-checkbox.js b/src/components/mui/formik-inputs/mui-formik-dropdown-checkbox.js index 997f3ecc..29a241e0 100644 --- a/src/components/mui/formik-inputs/mui-formik-dropdown-checkbox.js +++ b/src/components/mui/formik-inputs/mui-formik-dropdown-checkbox.js @@ -21,6 +21,7 @@ import { MenuItem, Select } from "@mui/material"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import { useField } from "formik"; import T from "i18n-react/dist/i18n-react"; @@ -59,6 +60,7 @@ const MuiFormikDropdownCheckbox = ({ name, label, placeholder, options, ...rest label={label} labelId={`${name}-label`} multiple + IconComponent={KeyboardArrowDownIcon} value={field.value || []} onChange={handleChange} onBlur={field.onBlur} diff --git a/src/components/mui/formik-inputs/mui-formik-dropdown-radio.js b/src/components/mui/formik-inputs/mui-formik-dropdown-radio.js index f983431d..abdb6faf 100644 --- a/src/components/mui/formik-inputs/mui-formik-dropdown-radio.js +++ b/src/components/mui/formik-inputs/mui-formik-dropdown-radio.js @@ -20,6 +20,7 @@ import { Radio, Select } from "@mui/material"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import { useField } from "formik"; import T from "i18n-react/dist/i18n-react"; @@ -44,6 +45,7 @@ const MuiFormikDropdownRadio = ({ name, label, options, placeholder, ...rest }) name={name} label={label} labelId={`${name}-label`} + IconComponent={KeyboardArrowDownIcon} value={field.value || ""} onChange={handleChange} displayEmpty diff --git a/src/components/mui/formik-inputs/mui-formik-select-v2.js b/src/components/mui/formik-inputs/mui-formik-select-v2.js index e17a3854..7ad4eb9a 100644 --- a/src/components/mui/formik-inputs/mui-formik-select-v2.js +++ b/src/components/mui/formik-inputs/mui-formik-select-v2.js @@ -8,6 +8,7 @@ import { MenuItem, InputLabel } from "@mui/material"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import { useField } from "formik"; const MuiFormikSelectV2 = ({ name, label, placeholder, options, ...rest }) => { @@ -23,6 +24,7 @@ const MuiFormikSelectV2 = ({ name, label, placeholder, options, ...rest }) => { label={label} labelId={`${name}-label`} displayEmpty + IconComponent={KeyboardArrowDownIcon} // eslint-disable-next-line react/jsx-props-no-spreading {...field} // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/components/mui/formik-inputs/mui-formik-select.js b/src/components/mui/formik-inputs/mui-formik-select.js index 32294681..66442ee8 100644 --- a/src/components/mui/formik-inputs/mui-formik-select.js +++ b/src/components/mui/formik-inputs/mui-formik-select.js @@ -22,6 +22,7 @@ import { InputLabel } from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import { useField } from "formik"; const MuiFormikSelect = ({ @@ -52,6 +53,7 @@ const MuiFormikSelect = ({ handleChange(ev.target.value)} onKeyDown={handleKeyDown} fullWidth - sx={{ + sx={(theme) => ({ "& .MuiOutlinedInput-root": { height: "36px", - paddingX: 1 - }, - "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, - "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, - "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main" } - }} + paddingX: 1, + "--TextField-brandBorderColor": "rgba(0, 0, 0, 0.23)", + "--TextField-brandBorderHoverColor": "rgba(0, 0, 0, 0.23)", + "--TextField-brandBorderFocusedColor": theme.palette.primary.main + } + })} /> ); }; diff --git a/src/utils/theme.js b/src/utils/theme.js new file mode 100644 index 00000000..b8689919 --- /dev/null +++ b/src/utils/theme.js @@ -0,0 +1,49 @@ +/** + * Copyright 2026 OpenStack Foundation + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * */ + +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; + +export const MuiBaseCustomTheme = { + components: { + MuiOutlinedInput: { + styleOverrides: { + root: { + "--TextField-brandBorderColor": "#000", + "--TextField-brandBorderHoverColor": "#000", + "--TextField-brandBorderFocusedColor": "#000", + "& .MuiOutlinedInput-notchedOutline": { + borderColor: "var(--TextField-brandBorderColor)" + }, + "&:hover:not(.Mui-disabled, .Mui-error) .MuiOutlinedInput-notchedOutline": { + borderColor: "var(--TextField-brandBorderHoverColor)" + }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + borderColor: "var(--TextField-brandBorderFocusedColor)" + } + } + } + }, + MuiSelect: { + defaultProps: { + IconComponent: KeyboardArrowDownIcon + }, + styleOverrides: { + icon: { + fontSize: "24px", + width: "24px", + height: "24px" + } + } + } + } +}; diff --git a/webpack.common.js b/webpack.common.js index fddd1a4e..3ca9aea1 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -168,6 +168,7 @@ module.exports = { 'utils/money': './src/utils/money.js', 'utils/use-event-callback': './src/utils/use-event-callback.js', 'utils/external-store': './src/utils/external-store.js', + 'utils/theme': './src/utils/theme.js', }, output: { path: path.resolve(__dirname, 'lib'), From c85ca8aa336070f2d5802cbb77f622e96b964d2b Mon Sep 17 00:00:00 2001 From: Priscila Moneo Date: Wed, 17 Jun 2026 10:29:21 -0300 Subject: [PATCH 3/3] fix: feedback from PR Signed-off-by: Priscila Moneo --- src/components/index.js | 1 + src/{utils/theme.js => components/mui/MuiBaseCustomTheme.js} | 0 webpack.common.js | 2 +- 3 files changed, 2 insertions(+), 1 deletion(-) rename src/{utils/theme.js => components/mui/MuiBaseCustomTheme.js} (100%) diff --git a/src/components/index.js b/src/components/index.js index 7cea9067..9f323720 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -124,6 +124,7 @@ export {default as MuiDropdown} from './mui/Dropdown' export {default as MuiRoundButton} from './mui/RoundButton' export {default as MuiToggleButtons} from './mui/ToggleButtons' export {GridFilter as MuiGridFilter, OPERATORS as FILTER_OPERATORS, JOIN_OPERATORS as FILTER_JOIN_OPERATORS, EMPTY_FILTER as FILTER_EMPTY_FILTER, useGridFilter, allFiltersReducer, saveFilters as saveGridFilters, SAVE_FILTERS } from './mui/GridFilter' +export {MuiBaseCustomTheme} from './mui/MuiBaseCustomTheme' // these include 3rd party deps // export {default as ExtraQuestionsForm } from './extra-questions/index.js'; diff --git a/src/utils/theme.js b/src/components/mui/MuiBaseCustomTheme.js similarity index 100% rename from src/utils/theme.js rename to src/components/mui/MuiBaseCustomTheme.js diff --git a/webpack.common.js b/webpack.common.js index 3ca9aea1..f1bba5b6 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -168,7 +168,7 @@ module.exports = { 'utils/money': './src/utils/money.js', 'utils/use-event-callback': './src/utils/use-event-callback.js', 'utils/external-store': './src/utils/external-store.js', - 'utils/theme': './src/utils/theme.js', + 'utils/theme': './src/components/mui/MuiBaseCustomTheme.js', }, output: { path: path.resolve(__dirname, 'lib'),