Skip to content

Commit

Permalink
Merge branch 'main' into safari-disabled-text-input
Browse files Browse the repository at this point in the history
  • Loading branch information
sstrubberg authored Jul 19, 2021
2 parents e3c75db + 263d0d9 commit 1effd01
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 11 deletions.
14 changes: 13 additions & 1 deletion packages/components/src/components/menu/_menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -39,7 +40,7 @@

.#{$prefix}--menu-option {
position: relative;
height: $spacing-07;
height: $size-sm;
background-color: $layer;
color: $text-primary;
cursor: pointer;
Expand Down Expand Up @@ -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') {
Expand Down
10 changes: 10 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -7730,6 +7730,16 @@ Map {
"open": Object {
"type": "bool",
},
"size": Object {
"args": Array [
Array [
"sm",
"md",
"lg",
],
],
"type": "oneOf",
},
"x": Object {
"args": Array [
Array [
Expand Down
23 changes: 17 additions & 6 deletions packages/react/src/components/Menu/Menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,15 @@ 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,
children,
id,
level = 1,
open,
size = defaultSize,
x = 0,
y = 0,
onClose = () => {},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
*/
Expand Down
19 changes: 16 additions & 3 deletions packages/react/src/components/OverflowMenu/next/OverflowMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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 (
<div className={containerClasses} aria-owns={id}>
Expand All @@ -86,6 +93,7 @@ function OverflowMenu({
</button>
<Menu
id={id}
size={size}
open={open}
onClose={closeMenu}
x={position[0]}
Expand All @@ -106,6 +114,11 @@ OverflowMenu.propTypes = {
* Function called to override icon rendering.
*/
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

/**
* Specify the size of the menu, from a list of available sizes.
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),
};

export default OverflowMenu;
16 changes: 15 additions & 1 deletion packages/styles/scss/components/menu/_menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@

.#{$prefix}--menu-option {
position: relative;
height: $spacing-07;
// $size-sm
height: 2rem;
background-color: $layer;
color: $text-primary;
cursor: pointer;
Expand Down Expand Up @@ -126,4 +127,17 @@
margin: $spacing-02 0;
background-color: $border-subtle;
}

$supported-sizes: (
// $size-md
'md': 2.5rem,
// $size-lg
'lg': 3rem
);

@each $size, $value in $supported-sizes {
.#{$prefix}--menu--#{$size} .#{$prefix}--menu-option {
height: $value;
}
}
}

0 comments on commit 1effd01

Please sign in to comment.