Skip to content

Commit

Permalink
feat: generalize menu component (#8169)
Browse files Browse the repository at this point in the history 
* refactor: rename ContextMenu into Menu

* refactor: extract storybook utils for building menus

* feat: add experimental menu-based OverflowMenu component

* chore: merge updates from context-menu

* feat(menu): add support for target boundaries

* fix(menu): fix overflowmenu-v2 not closing on first outsideclick

* fix(context-menu): remove merge relics

* fix: update public api snapshot to reflect menu changes

* refactor: use feature flag for overflowmenu-next

* fix: update data table snapshots

* docs: use danger kind in context menu story

* fix(overflow-menu): update feature flag name in export

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@janhassel @kodiakhq
janhassel and kodiakhq[bot] authored May 19, 2021
1 parent 63dabc3 commit 39393f7
Show file tree
Hide file tree
Showing 29 changed files with 1,162 additions and 816 deletions.
49 changes: 27 additions & 22 deletions ...omponents/context-menu/_context-menu.scss → ...components/src/components/menu/_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/helper-mixins';

/// Context Menu styles
/// Menu styles
/// @access private
/// @group context-menu
@mixin context-menu {
.#{$prefix}--context-menu {
/// @group menu
@mixin menu {
.#{$prefix}--menu {
@include box-shadow;

position: fixed;
Expand All @@ -25,19 +25,19 @@
visibility: hidden;
}

.#{$prefix}--context-menu--open {
.#{$prefix}--menu--open {
visibility: visible;

&:focus {
@include focus-outline('border');
}
}

.#{$prefix}--context-menu--invisible {
.#{$prefix}--menu--invisible {
opacity: 0;
}

.#{$prefix}--context-menu-option {
.#{$prefix}--menu-option {
position: relative;
height: $spacing-07;
background-color: $layer;
Expand All @@ -50,41 +50,46 @@
}
}

.#{$prefix}--context-menu-option--active,
.#{$prefix}--context-menu-option:hover {
.#{$prefix}--menu-option--active,
.#{$prefix}--menu-option:hover {
background-color: $layer-hover;
}

.#{$prefix}--context-menu-option--danger:hover,
.#{$prefix}--context-menu-option--danger:focus {
.#{$prefix}--menu-option--danger:hover,
.#{$prefix}--menu-option--danger:focus {
background-color: $button-danger-primary;
color: $text-on-color;
}

.#{$prefix}--context-menu-option > .#{$prefix}--context-menu {
.#{$prefix}--menu-option > .#{$prefix}--menu {
margin-top: calc(#{$spacing-02} * -1);
}

.#{$prefix}--context-menu-option__content {
.#{$prefix}--menu-option__content {
display: flex;
height: 100%;
align-items: center;
justify-content: space-between;
padding: 0 $spacing-05;
}

.#{$prefix}--context-menu-option__content--disabled {
.#{$prefix}--menu-option__content--disabled {
background-color: $layer;
color: $text-disabled;
cursor: not-allowed;
}

.#{$prefix}--context-menu-option__content--indented
.#{$prefix}--context-menu-option__label {
.#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__label,
.#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__info,
.#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__icon {
color: $text-disabled;
}

.#{$prefix}--menu-option__content--indented .#{$prefix}--menu-option__label {
margin-left: $spacing-05;
}

.#{$prefix}--context-menu-option__label {
.#{$prefix}--menu-option__label {
@include type-style('body-short-01');

overflow: hidden;
Expand All @@ -96,27 +101,27 @@
white-space: nowrap;
}

.#{$prefix}--context-menu-option__info {
.#{$prefix}--menu-option__info {
display: inline-flex;
margin-left: $spacing-05;
}

.#{$prefix}--context-menu-option__icon {
.#{$prefix}--menu-option__icon {
display: flex;
width: 1rem;
height: 1rem;
align-items: center;
margin-right: $spacing-03;
}

.#{$prefix}--context-menu-divider {
.#{$prefix}--menu-divider {
width: 100%;
height: 1px;
margin: $spacing-02 0;
background-color: $border-subtle;
}
}

@include exports('context-menu') {
@include context-menu;
@include exports('menu') {
@include menu;
}
54 changes: 27 additions & 27 deletions packages/components/src/globals/scss/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,49 +116,49 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
// 🍕 Components
//-------------------------

@import '../../components/accordion/accordion';
@import '../../components/breadcrumb/breadcrumb';
@import '../../components/button/button';
@import '../../components/copy-button/copy-button';
@import '../../components/file-uploader/file-uploader';
@import '../../components/checkbox/checkbox';
@import '../../components/code-snippet/code-snippet';
@import '../../components/combo-box/combo-box';
@import '../../components/radio-button/radio-button';
@import '../../components/toggle/toggle';
@import '../../components/search/search';
@import '../../components/select/select';
@import '../../components/text-input/text-input';
@import '../../components/text-area/text-area';
@import '../../components/number-input/number-input';
@import '../../components/content-switcher/content-switcher';
@import '../../components/copy-button/copy-button';
@import '../../components/data-table/data-table';
@import '../../components/date-picker/date-picker';
@import '../../components/dropdown/dropdown';
@import '../../components/file-uploader/file-uploader';
@import '../../components/form/form';
@import '../../components/inline-loading/inline-loading';
@import '../../components/link/link';
@import '../../components/list-box/list-box';
@import '../../components/list/list';
@import '../../components/data-table/data-table';
@import '../../components/structured-list/structured-list';
@import '../../components/code-snippet/code-snippet';
@import '../../components/overflow-menu/overflow-menu';
@import '../../components/content-switcher/content-switcher';
@import '../../components/context-menu/context-menu';
@import '../../components/date-picker/date-picker';
@import '../../components/dropdown/dropdown';
@import '../../components/loading/loading';
@import '../../components/menu/menu';
@import '../../components/modal/modal';
@import '../../components/multi-select/multi-select';
@import '../../components/notification/inline-notification';
@import '../../components/notification/toast-notification';
@import '../../components/tooltip/tooltip';
@import '../../components/tabs/tabs';
@import '../../components/tag/tag';
@import '../../components/number-input/number-input';
@import '../../components/overflow-menu/overflow-menu';
@import '../../components/pagination-nav/pagination-nav';
@import '../../components/pagination/pagination';
@import '../../components/accordion/accordion';
@import '../../components/progress-indicator/progress-indicator';
@import '../../components/breadcrumb/breadcrumb';
@import '../../components/toolbar/toolbar';
@import '../../components/time-picker/time-picker';
@import '../../components/radio-button/radio-button';
@import '../../components/search/search';
@import '../../components/select/select';
@import '../../components/skeleton/skeleton';
@import '../../components/slider/slider';
@import '../../components/structured-list/structured-list';
@import '../../components/tabs/tabs';
@import '../../components/tag/tag';
@import '../../components/text-area/text-area';
@import '../../components/text-input/text-input';
@import '../../components/tile/tile';
@import '../../components/skeleton/skeleton';
@import '../../components/inline-loading/inline-loading';
@import '../../components/pagination-nav/pagination-nav';
@import '../../components/time-picker/time-picker';
@import '../../components/toggle/toggle';
@import '../../components/toolbar/toolbar';
@import '../../components/tooltip/tooltip';

//-------------------------------------
// 🔬 Experimental
Expand Down
54 changes: 27 additions & 27 deletions packages/react/.storybook/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,51 +30,51 @@ $prefix: 'bx';
@import '~carbon-components/src/globals/scss/functions';

@import '~carbon-components/src/components/accordion/accordion';
@import '~carbon-components/src/components/breadcrumb/breadcrumb';
@import '~carbon-components/src/components/button/button';
@import '~carbon-components/src/components/copy-button/copy-button';
@import '~carbon-components/src/components/file-uploader/file-uploader';
@import '~carbon-components/src/components/checkbox/checkbox';
@import '~carbon-components/src/components/code-snippet/code-snippet';
@import '~carbon-components/src/components/combo-box/combo-box';
@import '~carbon-components/src/components/radio-button/radio-button';
@import '~carbon-components/src/components/toggle/toggle';
@import '~carbon-components/src/components/search/search';
@import '~carbon-components/src/components/select/select';
@import '~carbon-components/src/components/text-input/text-input';
@import '~carbon-components/src/components/text-area/text-area';
@import '~carbon-components/src/components/number-input/number-input';
@import '~carbon-components/src/components/content-switcher/content-switcher';
@import '~carbon-components/src/components/copy-button/copy-button';
@import '~carbon-components/src/components/data-table/data-table';
@import '~carbon-components/src/components/date-picker/date-picker';
@import '~carbon-components/src/components/dropdown/dropdown';
@import '~carbon-components/src/components/file-uploader/file-uploader';
@import '~carbon-components/src/components/form/form';
@import '~carbon-components/src/components/inline-loading/inline-loading';
@import '~carbon-components/src/components/link/link';
@import '~carbon-components/src/components/list-box/list-box';
@import '~carbon-components/src/components/list/list';
@import '~carbon-components/src/components/data-table/data-table';
@import '~carbon-components/src/components/structured-list/structured-list';
@import '~carbon-components/src/components/code-snippet/code-snippet';
@import '~carbon-components/src/components/overflow-menu/overflow-menu';
@import '~carbon-components/src/components/content-switcher/content-switcher';
@import '~carbon-components/src/components/context-menu/context-menu';
@import '~carbon-components/src/components/date-picker/date-picker';
@import '~carbon-components/src/components/dropdown/dropdown';
@import '~carbon-components/src/components/loading/loading';
@import '~carbon-components/src/components/menu/menu';
@import '~carbon-components/src/components/modal/modal';
@import '~carbon-components/src/components/multi-select/multi-select';
@import '~carbon-components/src/components/notification/inline-notification';
@import '~carbon-components/src/components/notification/toast-notification';
@import '~carbon-components/src/components/tooltip/tooltip';
@import '~carbon-components/src/components/tabs/tabs';
@import '~carbon-components/src/components/tag/tag';
@import '~carbon-components/src/components/treeview/treeview';
@import '~carbon-components/src/components/number-input/number-input';
@import '~carbon-components/src/components/overflow-menu/overflow-menu';
@import '~carbon-components/src/components/pagination-nav/pagination-nav';
@import '~carbon-components/src/components/pagination/pagination';
@import '~carbon-components/src/components/pagination/unstable_pagination';
@import '~carbon-components/src/components/popover/popover';
@import '~carbon-components/src/components/progress-indicator/progress-indicator';
@import '~carbon-components/src/components/breadcrumb/breadcrumb';
@import '~carbon-components/src/components/toolbar/toolbar';
@import '~carbon-components/src/components/time-picker/time-picker';
@import '~carbon-components/src/components/radio-button/radio-button';
@import '~carbon-components/src/components/search/search';
@import '~carbon-components/src/components/select/select';
@import '~carbon-components/src/components/skeleton/skeleton';
@import '~carbon-components/src/components/slider/slider';
@import '~carbon-components/src/components/structured-list/structured-list';
@import '~carbon-components/src/components/tabs/tabs';
@import '~carbon-components/src/components/tag/tag';
@import '~carbon-components/src/components/text-area/text-area';
@import '~carbon-components/src/components/text-input/text-input';
@import '~carbon-components/src/components/tile/tile';
@import '~carbon-components/src/components/skeleton/skeleton';
@import '~carbon-components/src/components/inline-loading/inline-loading';
@import '~carbon-components/src/components/pagination-nav/pagination-nav';
@import '~carbon-components/src/components/time-picker/time-picker';
@import '~carbon-components/src/components/toggle/toggle';
@import '~carbon-components/src/components/toolbar/toolbar';
@import '~carbon-components/src/components/tooltip/tooltip';
@import '~carbon-components/src/components/treeview/treeview';
@import '~carbon-components/src/components/ui-shell/ui-shell';

@if feature-flag-enabled('enable-css-custom-properties') {
Expand Down
Loading

0 comments on commit 39393f7

Please sign in to comment.