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/components/mui/MuiBaseCustomTheme.js b/src/components/mui/MuiBaseCustomTheme.js new file mode 100644 index 00000000..b8689919 --- /dev/null +++ b/src/components/mui/MuiBaseCustomTheme.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/src/components/mui/search-input.js b/src/components/mui/search-input.js index 428d1235..be1bb8c7 100644 --- a/src/components/mui/search-input.js +++ b/src/components/mui/search-input.js @@ -79,12 +79,15 @@ const SearchInput = ({ term, onSearch, placeholder = "Search...", debounced }) = onChange={(ev) => handleChange(ev.target.value)} onKeyDown={handleKeyDown} fullWidth - sx={{ + sx={(theme) => ({ "& .MuiOutlinedInput-root": { height: "36px", - paddingX: 1 - }, - }} + 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/webpack.common.js b/webpack.common.js index fddd1a4e..f1bba5b6 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/components/mui/MuiBaseCustomTheme.js', }, output: { path: path.resolve(__dirname, 'lib'),