Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(nav): added drilldown menu to nav #4458

Merged
merged 4 commits into from Nov 11, 2021
Merged

feat(nav): added drilldown menu to nav #4458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2afdd46
feat(nav): added drilldown menu to nav
Oct 15, 2021
f99f25a
feat(nav): updated css
Nov 10, 2021
dd21647
feat(nav): updated css vars
Nov 10, 2021
08a707c
feat(nav): updated list padding
Nov 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/patternfly/components/Menu/examples/Menu.css
View file
Open in desktop
@@ -1,4 +1,5 @@
[id^="ws-core-c-menu-with-flyout"] {
[id^="ws-core-c-menu-with-flyout"],
[id^="ws-core-c-menu-standard-menu-flyout-child"] {
display: flex;
height: 400px;
}
Expand Down
145 changes: 145 additions & 0 deletions src/patternfly/components/Menu/examples/Menu.md
View file
Open in desktop
Expand Up @@ -694,6 +694,150 @@ import './Menu.css'
{{/menu}}
```

### Standard menu, flyout child
```hbs
{{#> menu}}
{{#> menu-content}}
{{#> menu-list}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Start rollout
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Pause rollouts
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item menu-item--attribute='aria-expanded="false"'}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Add storage
{{/menu-item-text}}
{{> menu-item-toggle-icon}}
{{/menu-item-main}}
{{/menu-item}}
{{#> menu menu--attribute="hidden" menu--modifier="pf-m-flyout"}}
{{#> menu-content}}
{{#> menu-list}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Application grouping
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Count
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Labels
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Annotations
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{/menu-list}}
{{/menu-content}}
{{/menu}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item menu-item--attribute='aria-expanded="true"'}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Edit
{{/menu-item-text}}
{{> menu-item-toggle-icon}}
{{/menu-item-main}}
{{#> menu-item-description}}
Description
{{/menu-item-description}}
{{/menu-item}}
{{#> menu menu--modifier="pf-m-flyout"}}
{{#> menu-content}}
{{#> menu-list}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Application grouping
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Count
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Labels
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Annotations
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{/menu-list}}
{{/menu-content}}
{{/menu}}
{{/menu-list-item}}
{{#> menu-list-item}}
{{#> menu-item}}
{{#> menu-item-main}}
{{#> menu-item-text}}
Delete deployment config
{{/menu-item-text}}
{{/menu-item-main}}
{{/menu-item}}
{{/menu-list-item}}
{{/menu-list}}
{{/menu-content}}
{{/menu}}
```

### Drilldown
```hbs isBeta
{{> menu--Drilldown menu--Drilldown--id="drilldown-default"}}
Expand Down Expand Up @@ -1607,6 +1751,7 @@ import './Menu.css'
| `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
| `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
| `.pf-m-scrollable` | `.pf-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
| `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
| `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
| `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
| `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/components/Menu/menu-item.hbs
View file
Open in desktop
@@ -1,4 +1,4 @@
<{{# if menu-item--IsLink}}a{{else if menu-item--type}}{{menu-item--type}}{{else}}button{{/if}} class="pf-c-menu__item{{#if menu-item--modifier}} {{menu-item--modifier}}{{/if}}"
<{{# if menu-item--IsLink}}a{{else if menu-item--type}}{{menu-item--type}}{{else}}button{{/if}} class="pf-c-menu__item{{#if menu-item--modifier}} {{menu-item--modifier}}{{/if}}{{#if menu-list-item--IsCurrent}} pf-m-current{{/if}}"
{{#if menu-item--IsLink}}
href="#"
{{#if menu-list-item--IsDisabled}}
Expand Down
53 changes: 29 additions & 24 deletions src/patternfly/components/Menu/menu.scss
View file
Open in desktop
Expand Up @@ -10,6 +10,8 @@

// Flyout
--pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
--pf-c-menu--m-flyout__menu--Right: auto;
--pf-c-menu--m-flyout__menu--Bottom: auto;
--pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
--pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
--pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
Expand Down Expand Up @@ -54,7 +56,6 @@
--pf-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
--pf-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);


// Search
--pf-c-menu__search--PaddingTop: var(--pf-global--spacer--md);
--pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
Expand Down Expand Up @@ -190,8 +191,6 @@
box-shadow: var(--pf-c-menu--BoxShadow);

.pf-c-menu__content {
overflow-y: auto;

& & {
overflow: visible;
}
Expand All @@ -202,33 +201,29 @@
margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
}

&.pf-m-flyout {
overflow: visible;

.pf-c-menu {
position: absolute;
top: var(--pf-c-menu--m-flyout__menu--Top);
right: auto;
left: var(--pf-c-menu--m-flyout__menu--Left);

&.pf-m-top {
top: auto;
bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
}
// nested flyout menu
& &.pf-m-flyout,
&.pf-m-flyout & {
position: absolute;
top: var(--pf-c-menu--m-flyout__menu--Top);
right: var(--pf-c-menu--m-flyout__menu--Right);
bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
left: var(--pf-c-menu--m-flyout__menu--Left);

&.pf-m-left {
right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
left: auto;
}
}

.pf-c-menu__content {
overflow-y: visible;
}
}

.pf-c-menu__list-item {
position: relative;
}
&.pf-m-top {
--pf-c-menu--m-flyout__menu--Top: auto;
--pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
}

&.pf-m-left {
--pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
--pf-c-menu--m-flyout__menu--Left: auto;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also have .pf-m-top and .pf-m-left defined twice in the nav css. Are we able to just define the modifier classes here and use vars in the nav css if we need to change something?

}

&.pf-m-drilldown {
Expand Down Expand Up @@ -276,6 +271,11 @@
position: relative;
overflow: hidden;
transition: var(--pf-c-menu--m-drilldown__list--Transition);

& .pf-c-menu__list {
--pf-c-menu__list--PaddingTop: 0;
--pf-c-menu__list--PaddingBottom: 0;
}
}

// stylelint-disable selector-max-class, max-nesting-depth
Expand Down Expand Up @@ -329,6 +329,10 @@
--pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
--pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
--pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);

.pf-c-menu__content {
overflow-y: auto;
}
}
}

Expand Down Expand Up @@ -414,6 +418,7 @@
.pf-c-menu__list-item {
@include pf-hidden-visible(var(--pf-c-menu__list-item--Display));

position: relative;
color: var(--pf-c-menu__list-item--Color);
background-color: var(--pf-c-menu__list-item--BackgroundColor);

Expand Down
3 changes: 3 additions & 0 deletions src/patternfly/components/Menu/templates/menu--Drilldown.hbs
View file
Open in desktop
Expand Up @@ -3,6 +3,9 @@
{{#> menu-list menu-content--attribute=''}}
{{> menu-list-item menu-list-item--text="Start rollout"}}
{{> menu-list-item menu-list-item--text="Pause rollout"}}
{{#if menu--Drilldown--HasCurrentMenuItem}}
{{> menu-list-item menu-list-item--IsCurrent="true" menu-list-item--text="Current link"}}
{{/if}}
{{> menu-list-item menu-list-item--text="Add storage"}}
{{#> menu-list-item menu-list-item--IsCurrentPath=menu--Drilldown--IsDrilledIn--list-1 menu-list-item--IsExpandable="true" menu-item--IsExpanded=menu--Drilldown--IsDrilledIn--list-1 menu-list-item--text="Edit" menu-list-item--IsDrillDown="true"}}
{{#> menu menu--IsSubmenu="true" menu--IsDrilledIn=menu--Drilldown--IsDrilledIn--list-2 menu--modifier="" menu--id=(concat menu--Drilldown--id '-list-1') menu--attribute=''}}
Expand Down
13 changes: 7 additions & 6 deletions src/patternfly/components/Nav/examples/Navigation.css
View file
Open in desktop
Expand Up @@ -5,14 +5,16 @@
#ws-core-c-navigation-expanded,
#ws-core-c-navigation-expanded-with-subnav-titles,
#ws-core-c-navigation-mixed,
#ws-core-c-navigation-flyout-with-menu-component,
#ws-core-c-navigation-horizontal,
#ws-core-c-navigation-horizontal-overflow,
#ws-core-c-navigation-horizontal-subnav,
#ws-core-c-navigation-horizontal-subnav-overflow,
#ws-core-c-navigation-drilldown,
#ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
#ws-core-c-navigation-level-2-drilldown,
#ws-core-c-navigation-level-3-drilldown {
#ws-core-c-navigation-level-3-drilldown,
#ws-core-c-navigation-nav-with-flyout .pf-c-nav,
#ws-core-c-navigation-nav-with-menu-and-flyout .pf-c-nav {
padding: 0;
background-color: var(--pf-global--BackgroundColor--dark-300);
}
Expand Down Expand Up @@ -44,9 +46,8 @@
grid-row: 1;
}

#ws-core-c-navigation-flyout-with-menu-component,
#ws-core-c-navigation-drilldown,
#ws-core-c-navigation-level-2-drilldown,
#ws-core-c-navigation-level-3-drilldown {
#ws-core-c-navigation-nav-with-flyout .ws-preview-html,
[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html,
#ws-core-c-navigation-nav-with-menu-and-flyout .ws-preview-html {
width: 260px;
}
27 changes: 15 additions & 12 deletions src/patternfly/components/Nav/examples/Navigation.md
View file
Open in desktop
Expand Up @@ -637,27 +637,30 @@ import './Navigation.css'
{{/nav}}
```

### Flyout with menu component
### Nav with flyout
```hbs isBeta
{{> nav--flyout nav--flyout--id="menu-flyout-example" nav--flyout--submenu--IsExpanded="true" nav--IsMenuFlyout="true"}}
```

<!--
### Drilldown
```hbs
{{> nav--drilldown nav--drilldown--id="basic-drilldown-example"}}
### Nav with menu and flyout
```hbs isBeta
{{> nav--menu nav--menu--id="menu-flyout-with-menu-example" nav--menu--submenu--IsExpanded="true"}}
```

### Level 2 drilldown
```hbs
{{> nav--drilldown nav--drilldown--id="level-2-drilldown-example" nav--drilldown--level-2="true"}}
### Nav with drilldown menu
```hbs isBeta
{{> nav--drilldown nav--drilldown--id="basic-drilldown-example" menu--Drilldown--HasCurrentMenuItem="true"}}
```

### Level 3 drilldown
```hbs
{{> nav--drilldown nav--drilldown--id="level-2-drilldown-example" nav--drilldown--level-2="true" nav--drilldown--level-3="true"}}
### Nav with drilldown menu level two
```hbs isBeta
{{> nav--drilldown nav--drilldown--id="level-two-drilldown-example" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--menu__content--attribute='style="--pf-c-menu__content--Height: 226px;"' menu--Drilldown--HasCurrentMenuItem="true"}}
```

### Nav with drilldown menu level three
```hbs isBeta
{{> nav--drilldown nav--drilldown--id="level-three-drilldown-example" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--menu__content--attribute='style="--pf-c-menu__content--Height: 282px;"' menu--Drilldown--HasCurrentMenuItem="true"}}
```
-->

## Documentation

Expand Down