diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index ea91c03dd87d..64f58ceb9e7b 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -701,8 +701,8 @@ $list-box-menu-width: rem(300px); .#{$prefix}--list-box__menu-item--active:hover, .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted { - border-bottom-color: $selected-ui; - background-color: $selected-ui; + border-bottom-color: $hover-selected-ui; + background-color: $hover-selected-ui; } .#{$prefix}--list-box__menu-item--active diff --git a/packages/components/src/components/menu/_menu.scss b/packages/components/src/components/menu/_menu.scss index 4e52601098ca..e591f1c79a4a 100644 --- a/packages/components/src/components/menu/_menu.scss +++ b/packages/components/src/components/menu/_menu.scss @@ -6,6 +6,7 @@ // @import '../../globals/scss/vars'; +@import '../../globals/scss/vendor/@carbon/layout/scss/generated/size'; @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/helper-mixins'; @@ -39,7 +40,7 @@ .#{$prefix}--menu-option { position: relative; - height: $spacing-07; + height: $size-sm; background-color: $layer; color: $text-primary; cursor: pointer; @@ -120,6 +121,17 @@ margin: $spacing-02 0; background-color: $border-subtle; } + + $supported-sizes: ( + 'md': $size-md, + 'lg': $size-lg, + ); + + @each $size, $value in $supported-sizes { + .#{$prefix}--menu--#{$size} .#{$prefix}--menu-option { + height: $value; + } + } } @include exports('menu') { diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss index 7489ee168bc5..7e72973b41ed 100644 --- a/packages/components/src/components/text-input/_text-input.scss +++ b/packages/components/src/components/text-input/_text-input.scss @@ -214,7 +214,7 @@ color: $text-disabled; cursor: not-allowed; // Needed to fix disabled text in Safari #6673 - -webkit-text-fill-color: currentColor; + -webkit-text-fill-color: $disabled-02; } .#{$prefix}--text-input--light:disabled { diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index aa858308a13a..71e341fc95d8 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -7733,6 +7733,16 @@ Map { "open": Object { "type": "bool", }, + "size": Object { + "args": Array [ + Array [ + "sm", + "md", + "lg", + ], + ], + "type": "oneOf", + }, "x": Object { "args": Array [ Array [ diff --git a/packages/react/src/components/Menu/Menu.js b/packages/react/src/components/Menu/Menu.js index 7afff88f8af0..51d223554071 100644 --- a/packages/react/src/components/Menu/Menu.js +++ b/packages/react/src/components/Menu/Menu.js @@ -33,6 +33,7 @@ import MenuSelectableItem from './MenuSelectableItem'; const { prefix } = settings; const margin = 16; // distance to keep to body edges, in px +const defaultSize = 'sm'; const Menu = function Menu({ autoclose = true, @@ -40,6 +41,7 @@ const Menu = function Menu({ id, level = 1, open, + size = defaultSize, x = 0, y = 0, onClose = () => {}, @@ -263,12 +265,16 @@ const Menu = function Menu({ } }); - const classes = classnames(`${prefix}--menu`, { - [`${prefix}--menu--open`]: open, - [`${prefix}--menu--invisible`]: - open && position[0] === 0 && position[1] === 0, - [`${prefix}--menu--root`]: isRootMenu, - }); + const classes = classnames( + `${prefix}--menu`, + { + [`${prefix}--menu--open`]: open, + [`${prefix}--menu--invisible`]: + open && position[0] === 0 && position[1] === 0, + [`${prefix}--menu--root`]: isRootMenu, + }, + size !== defaultSize && `${prefix}--menu--${size}` + ); const ulAttributes = { id, @@ -355,6 +361,11 @@ Menu.propTypes = { */ open: PropTypes.bool, + /** + * Specify the size of the menu, from a list of available sizes. + */ + size: PropTypes.oneOf(['sm', 'md', 'lg']), + /** * Specify the x position where this menu is rendered */ diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu.js index bb706df459cd..5fc974e887eb 100644 --- a/packages/react/src/components/OverflowMenu/next/OverflowMenu.js +++ b/packages/react/src/components/OverflowMenu/next/OverflowMenu.js @@ -15,9 +15,12 @@ import Menu from '../../Menu'; const { prefix } = settings; +const defaultSize = 'md'; + function OverflowMenu({ children, renderIcon: IconElement = OverflowMenuVertical16, + size = defaultSize, ...rest }) { const id = useId('overflowmenu'); @@ -67,9 +70,13 @@ function OverflowMenu({ const containerClasses = classNames(`${prefix}--overflow-menu__container`); - const triggerClasses = classNames(`${prefix}--overflow-menu`, { - [`${prefix}--overflow-menu--open`]: open, - }); + const triggerClasses = classNames( + `${prefix}--overflow-menu`, + { + [`${prefix}--overflow-menu--open`]: open, + }, + size !== defaultSize && `${prefix}--overflow-menu--${size}` + ); return (