diff --git a/package.json b/package.json index 25cbb458..8d3fd44c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openstack-uicore-foundation", - "version": "5.0.68", + "version": "5.0.69-beta.1", "description": "ui reactjs components for openstack marketing site", "main": "lib/openstack-uicore-foundation.js", "scripts": { diff --git a/src/components/inputs/upload-input-v3/index.js b/src/components/inputs/upload-input-v3/index.js index 6b9bf3e5..6abccce4 100644 --- a/src/components/inputs/upload-input-v3/index.js +++ b/src/components/inputs/upload-input-v3/index.js @@ -429,7 +429,7 @@ const UploadInputV3 = ({ /> ) : ( - + )} @@ -479,7 +479,7 @@ const UploadInputV3 = ({ sx={fileRowSx} > - + @@ -501,14 +501,14 @@ const UploadInputV3 = ({ title={T.translate("upload_input_v3.retry")} sx={{ color: 'primary.main' }} > - + handleDismissError(file)} sx={{ color: 'error.main' }} > - + ))} diff --git a/src/components/mui/AuthButton/index.js b/src/components/mui/AuthButton/index.js index f6360d15..06acef6c 100644 --- a/src/components/mui/AuthButton/index.js +++ b/src/components/mui/AuthButton/index.js @@ -40,8 +40,8 @@ const AuthButton = ({ const anchorRef = useRef(null); const [menuOpen, setMenuOpen] = useState(false); - const menuFontSize = theme?.custom?.menu?.fontSize || "1.4rem"; - const menuLineHeight = theme?.custom?.menu?.lineHeight || "2rem"; + const menuFontSize = theme?.custom?.menu?.fontSize || "0.875rem"; + const menuLineHeight = theme?.custom?.menu?.lineHeight || "1.25rem"; const menuIconColor = theme?.custom?.menu?.icon || theme.palette.text.secondary; const openMenu = () => { diff --git a/src/components/mui/BulkEditTable/components/Row.js b/src/components/mui/BulkEditTable/components/Row.js index cae9d2f4..e20c7718 100644 --- a/src/components/mui/BulkEditTable/components/Row.js +++ b/src/components/mui/BulkEditTable/components/Row.js @@ -121,7 +121,7 @@ const Row = (props) => { sx={{ padding: 0 }} aria-label={`Edit row ${row[idKey]}`} > - + )} {onDelete && ( @@ -131,7 +131,7 @@ const Row = (props) => { sx={{ padding: 0 }} aria-label={`Delete row ${row[idKey]}`} > - + )} diff --git a/src/components/mui/CustomDialog/index.js b/src/components/mui/CustomDialog/index.js index 32b235a5..5ed09d72 100644 --- a/src/components/mui/CustomDialog/index.js +++ b/src/components/mui/CustomDialog/index.js @@ -91,7 +91,7 @@ const CustomDialog = ({ color: theme.palette.grey[500] })} > - + {children} diff --git a/src/components/mui/FormItemTable/index.js b/src/components/mui/FormItemTable/index.js index dc936c00..b96f11ff 100644 --- a/src/components/mui/FormItemTable/index.js +++ b/src/components/mui/FormItemTable/index.js @@ -308,7 +308,7 @@ const FormItemTable = ({ aria-label="Toggle row details" onClick={() => toggleRow(row.form_item_id)} > - + ) : ( diff --git a/src/components/mui/GridFilter/components/Filter.jsx b/src/components/mui/GridFilter/components/Filter.jsx index 9996237b..158e332d 100644 --- a/src/components/mui/GridFilter/components/Filter.jsx +++ b/src/components/mui/GridFilter/components/Filter.jsx @@ -123,7 +123,7 @@ const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => { onClick={() => onDelete(value)} size="large" > - + ) : ( { disabled={isAddDisabled} sx={{ ml: "4px" }} > - + )} diff --git a/src/components/mui/GridFilter/components/FilterButton.jsx b/src/components/mui/GridFilter/components/FilterButton.jsx index 3c499e4c..54d0534d 100644 --- a/src/components/mui/GridFilter/components/FilterButton.jsx +++ b/src/components/mui/GridFilter/components/FilterButton.jsx @@ -21,7 +21,7 @@ const FilterButton = ({ filterCount, onClick, onDelete, iconSx }) => { if (filterCount > 0) { return ( } + icon={} label={`${filterCount} ${T.translate("grid_filter.filters")}`} onClick={onClick} onDelete={onDelete} @@ -46,7 +46,7 @@ const FilterButton = ({ filterCount, onClick, onDelete, iconSx }) => { onClick={onClick} sx={{ mr: 1, top: 0, position: "relative", padding: 0, ...iconSx }} > - + ); }; diff --git a/src/components/mui/InfoNote/index.jsx b/src/components/mui/InfoNote/index.jsx index de97eaf1..8af6d27b 100644 --- a/src/components/mui/InfoNote/index.jsx +++ b/src/components/mui/InfoNote/index.jsx @@ -6,7 +6,8 @@ import Box from "@mui/material/Box"; const InfoNote = ({ message, sx }) => ( {message} diff --git a/src/components/mui/MuiBaseCustomTheme.js b/src/components/mui/MuiBaseCustomTheme.js index 7f2f1228..240b8ade 100644 --- a/src/components/mui/MuiBaseCustomTheme.js +++ b/src/components/mui/MuiBaseCustomTheme.js @@ -14,6 +14,10 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; export const MuiBaseCustomTheme = { + // must match the apps' html font-size so MUI's rem values render at their designed px + typography: { + htmlFontSize: 16 + }, components: { MuiOutlinedInput: { styleOverrides: { @@ -50,5 +54,15 @@ export const MuiBaseCustomTheme = { tooltip: { fontSize: "1em", fontWeight: "400" } } }, + // icon scale with medium at 22px, keeping MUI's small/large proportions (18 / 22 / 32px) + MuiSvgIcon: { + styleOverrides: { + root: ({ ownerState }) => ({ + ...(ownerState.fontSize === "small" && { fontSize: "1.125rem" }), + ...(ownerState.fontSize === "medium" && { fontSize: "1.375rem" }), + ...(ownerState.fontSize === "large" && { fontSize: "2rem" }) + }) + } + }, } }; diff --git a/src/components/mui/SponsorOrderGrid/index.js b/src/components/mui/SponsorOrderGrid/index.js index ae7f6fa7..76125a03 100644 --- a/src/components/mui/SponsorOrderGrid/index.js +++ b/src/components/mui/SponsorOrderGrid/index.js @@ -253,7 +253,7 @@ const SponsorOrderGrid = ({ > setChangeQuantityRow(row)}> - + diff --git a/src/components/mui/formik-inputs/mui-formik-datepicker.js b/src/components/mui/formik-inputs/mui-formik-datepicker.js index 0e20c80f..3c81ae9e 100644 --- a/src/components/mui/formik-inputs/mui-formik-datepicker.js +++ b/src/components/mui/formik-inputs/mui-formik-datepicker.js @@ -37,14 +37,13 @@ const MuiFormikDatepicker = ({ slotProps={{ day: { sx: { - fontSize: "1.2rem", fontWeight: 600 } }, layout: { sx: { "& .MuiDayCalendar-weekDayLabel": { - fontSize: "1rem" + fontSize: "0.625rem" } } }, diff --git a/src/components/mui/formik-inputs/mui-formik-select.js b/src/components/mui/formik-inputs/mui-formik-select.js index 32294681..8f57cd72 100644 --- a/src/components/mui/formik-inputs/mui-formik-select.js +++ b/src/components/mui/formik-inputs/mui-formik-select.js @@ -68,7 +68,7 @@ const MuiFormikSelect = ({ isClearable && field.value ? ( - + ) : null diff --git a/src/components/mui/formik-inputs/mui-formik-textfield.js b/src/components/mui/formik-inputs/mui-formik-textfield.js index b8526fb3..90c3155a 100644 --- a/src/components/mui/formik-inputs/mui-formik-textfield.js +++ b/src/components/mui/formik-inputs/mui-formik-textfield.js @@ -51,7 +51,7 @@ const MuiFormikTextField = ({ {...props} /> {maxLength && ( - + {`${maxLength - currentLength} characters left`} )} diff --git a/src/components/mui/tables/components/row-actions-menu.js b/src/components/mui/tables/components/row-actions-menu.js index 2007154c..1fc1d4f8 100644 --- a/src/components/mui/tables/components/row-actions-menu.js +++ b/src/components/mui/tables/components/row-actions-menu.js @@ -30,7 +30,7 @@ const RowActionsMenu = ({ actions }) => { onClick={(e) => setAnchorEl(e.currentTarget)} data-testid="row-actions-menu-trigger" > - + { col.render(row) ) : isBoolean(row[col.columnKey]) ? ( row[col.columnKey] ? ( - + ) : ( - + ) ) : col.truncateText ? ( diff --git a/src/components/mui/tables/editable-table/index.js b/src/components/mui/tables/editable-table/index.js index 23af2512..70bb5625 100644 --- a/src/components/mui/tables/editable-table/index.js +++ b/src/components/mui/tables/editable-table/index.js @@ -123,7 +123,6 @@ const EditableCell = ({ value, isEditing, onBlur, validation }) => { {value} {isHovering && ( onArchive(row)} sx={{ - fontSize: "1.3rem", + fontSize: "0.875rem", fontWeight: "normal", - lineHeight: "2.2rem", + lineHeight: "1.375rem", padding: "4px 5px", color: "rgba(0,0,0,0.56)" }} diff --git a/src/components/mui/tables/mui-table/index.js b/src/components/mui/tables/mui-table/index.js index 84af26a3..fa34da32 100644 --- a/src/components/mui/tables/mui-table/index.js +++ b/src/components/mui/tables/mui-table/index.js @@ -219,7 +219,7 @@ const MuiTable = ({ data-testid="action-edit" disabled={options.disableProp && row[options.disableProp]} > - + @@ -255,9 +255,9 @@ const MuiTable = ({ } > {row.is_archived ? ( - + ) : ( - + )} @@ -284,7 +284,7 @@ const MuiTable = ({ sx={{ padding: 0 }} disabled={options.disableProp && row[options.disableProp]} > - + diff --git a/src/components/mui/tables/sortable-table-v2/mui-table-sortable-v2.js b/src/components/mui/tables/sortable-table-v2/mui-table-sortable-v2.js index deeb9d6f..aaf1225a 100644 --- a/src/components/mui/tables/sortable-table-v2/mui-table-sortable-v2.js +++ b/src/components/mui/tables/sortable-table-v2/mui-table-sortable-v2.js @@ -218,7 +218,7 @@ const MuiTableSortableV2 = ({ onClick={() => onEdit(row)} sx={{ padding: 0 }} > - + )} @@ -234,7 +234,7 @@ const MuiTableSortableV2 = ({ onClick={() => handleDelete(row)} sx={{ padding: 0 }} > - + )} @@ -246,7 +246,7 @@ const MuiTableSortableV2 = ({ className={styles.dottedBorderLeft} > - + )} diff --git a/src/components/mui/tables/sortable-table/index.js b/src/components/mui/tables/sortable-table/index.js index 3edd703a..4f411558 100644 --- a/src/components/mui/tables/sortable-table/index.js +++ b/src/components/mui/tables/sortable-table/index.js @@ -188,7 +188,7 @@ const MuiTableSortable = ({ onClick={() => onEdit(row)} sx={{ padding: 0 }} > - + )} @@ -204,7 +204,7 @@ const MuiTableSortable = ({ onClick={() => handleDelete(row)} sx={{ padding: 0 }} > - + )} @@ -217,7 +217,7 @@ const MuiTableSortable = ({ {...provided.dragHandleProps} > - + )} diff --git a/src/components/mui/truncate-text.js b/src/components/mui/truncate-text.js index f3d09e9a..ded8dff1 100644 --- a/src/components/mui/truncate-text.js +++ b/src/components/mui/truncate-text.js @@ -13,7 +13,7 @@ const TruncateText = ({ children, charLimit }) => { const tooltipTitle = isTruncated ? children : isOverflowing ? children : ""; return ( - + { diff --git a/src/components/table-sortable/SortableTableRow.js b/src/components/table-sortable/SortableTableRow.js index a00711a6..b4660557 100644 --- a/src/components/table-sortable/SortableTableRow.js +++ b/src/components/table-sortable/SortableTableRow.js @@ -7,8 +7,8 @@ const SortableTableRow = ({ text, even, id, index, moveCard, dropItem, children, const style = { border: '1px dashed gray', - padding: '0.5rem 1rem', - marginBottom: '.5rem', + padding: '0.25rem 0.625rem', + marginBottom: '0.25rem', backgroundColor: 'white', cursor: 'move', };