feat(context-menu-item): add support for danger kind
MODIFY
packages/components/src/components/context-menu/_context-menu.scss
packages/components/src/components/context-menu/_context-menu.scss
.#{$prefix}--context-menu-option {
position: relative;
height: $spacing-07;
+ color: $text-01;
background-color: $ui-01;
cursor: pointer;
transition: background-color $duration--fast-01 motion(standard, productive);
background-color: $hover-ui;
}
+ .#{$prefix}--context-menu-option--danger:hover,
+ .#{$prefix}--context-menu-option--danger:focus {
+ color: $text-04;
+ background-color: $danger-01;
+ }
+
.#{$prefix}--context-menu-option > .#{$prefix}--context-menu {
margin-top: calc(#{$spacing-02} * -1);
}
}
.#{$prefix}--context-menu-option__content--disabled {
+ color: $disabled-02;
background-color: $ui-01;
cursor: not-allowed;
}
- .#{$prefix}--context-menu-option__content--disabled
- .#{$prefix}--context-menu-option__label,
- .#{$prefix}--context-menu-option__content--disabled
- .#{$prefix}--context-menu-option__info,
- .#{$prefix}--context-menu-option__content--disabled
- .#{$prefix}--context-menu-option__icon {
- color: $disabled-02;
- }
-
.#{$prefix}--context-menu-option__content--indented
.#{$prefix}--context-menu-option__label {
margin-left: $spacing-05;
// add top/bottom padding to make sure letters are not cut off by hidden overflow
padding: $spacing-02 0;
overflow: hidden;
- color: $text-01;
white-space: nowrap;
text-align: start;
text-overflow: ellipsis;
.#{$prefix}--context-menu-option__info {
display: inline-flex;
margin-left: $spacing-05;
- color: $icon-01;
}
.#{$prefix}--context-menu-option__icon {
width: 1rem;
height: 1rem;
margin-right: $spacing-03;
- color: $icon-01;
}
.#{$prefix}--context-menu-divider {

MODIFY
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7682,6 +7682,15 @@ Map {
"disabled": Object {
"type": "bool",
},
+ "kind": Object {
+ "args": Array [
+ Array [
+ "default",
+ "danger",
+ ],
+ ],
+ "type": "oneOf",
+ },
"label": Object {
"isRequired": true,
"type": "node",
@@ -7769,6 +7778,15 @@ Map {
"disabled": Object {
"type": "bool",
},
+ "kind": Object {
+ "args": Array [
+ Array [
+ "default",
+ "danger",
+ ],
+ ],
+ "type": "oneOf",
+ },
"label": Object {
"isRequired": true,
"type": "node",

MODIFY
packages/react/src/components/ContextMenu/ContextMenu-test.js
packages/react/src/components/ContextMenu/ContextMenu-test.js
@@ -87,6 +87,31 @@ describe('ContextMenu', () => {
).toBe(true);
});
+ it('supports danger kind', () => {
+ const wrapper = mount(<ContextMenuItem label="Delete" kind="danger" />);
+ const option = wrapper.find(`.${prefix}--context-menu-option`);
+
+ expect(option.hasClass(`${prefix}--context-menu-option--danger`)).toBe(
+ true
+ );
+ });
+
+ it('ignores danger kind when it has children', () => {
+ const wrapper = mount(
+ <ContextMenu>
+ <ContextMenuItem label="Remove" kind="danger">
+ <ContextMenuItem label="Move to trash" />
+ <ContextMenuItem label="Delete" />
+ </ContextMenuItem>
+ </ContextMenu>
+ );
+ const option = wrapper.find(`.${prefix}--context-menu-option`).at(0);
+
+ expect(option.hasClass(`${prefix}--context-menu-option--danger`)).toBe(
+ false
+ );
+ });
+
it('renders props.children as submenu', () => {
const wrapper = mount(
<ContextMenu>

MODIFY
packages/react/src/components/ContextMenu/ContextMenuItem.js
packages/react/src/components/ContextMenu/ContextMenuItem.js
@@ -10,12 +10,20 @@ import PropTypes from 'prop-types';
import ContextMenuOption from './ContextMenuOption';
-function ContextMenuItem({ label, children, disabled, shortcut, ...rest }) {
+function ContextMenuItem({
+ label,
+ children,
+ disabled,
+ kind = 'default',
+ shortcut,
+ ...rest
+}) {
return (
<ContextMenuOption
{...rest}
label={label}
disabled={disabled}
+ kind={kind}
shortcut={shortcut}>
{children}
</ContextMenuOption>
@@ -33,6 +41,11 @@ ContextMenuItem.propTypes = {
*/
disabled: PropTypes.bool,
+ /**
+ * Optional prop to specify the kind of the ContextMenuItem
+ */
+ kind: PropTypes.oneOf(['default', 'danger']),
+
/**
* Rendered label for the ContextMenuItem
*/

MODIFY
packages/react/src/components/ContextMenu/ContextMenuOption.js
packages/react/src/components/ContextMenu/ContextMenuOption.js
@@ -55,6 +55,7 @@ function ContextMenuOption({
children,
disabled,
indented,
+ kind = 'default',
label,
level,
onClick = () => {},
@@ -133,6 +134,8 @@ function ContextMenuOption({
const classes = classnames(`${prefix}--context-menu-option`, {
[`${prefix}--context-menu-option--disabled`]: disabled,
[`${prefix}--context-menu-option--active`]: subOptions && submenuOpen,
+ [`${prefix}--context-menu-option--danger`]:
+ !subOptions && kind === 'danger',
});
const allowedRoles = ['menuitemradio', 'menuitemcheckbox'];
@@ -233,6 +236,11 @@ ContextMenuOption.propTypes = {
*/
indented: PropTypes.bool,
+ /**
+ * Optional prop to specify the kind of the ContextMenuOption
+ */
+ kind: PropTypes.oneOf(['default', 'danger']),
+
/**
* Rendered label for the ContextMenuOption
*/

feat(context-menu-item): add support for danger kind (#8195)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>