feat(wizard): add wizard component #1404

mcoker · 2019-02-09T17:28:35Z

fixes #755

need to figure out a good way to have ellipsis overflow on the mobile steps toggle button

patternfly-build · 2019-02-09T17:32:38Z

Deploy preview for pf-next ready!

Built with commit 35839cb

https://deploy-preview-1404--pf-next.netlify.com

mcarrano · 2019-02-11T15:28:51Z

This is looking good @mcoker . Just a few questions for you and @kybaker .

When I hover over a step item, I see that the text label turns blue, but the step number is static. Should that have a hover state, too? I think it should.
I notice that the current step is implemented as a link. But we are already on that page. In general, I would not expect the selected item in a Nav menu to have a hover.
Should the step number in the disabled state have a circular background like the others? Looks strange without it. I'm thinking just a gray circle with no fill. What do you guys think?

kybaker · 2019-02-11T15:40:28Z

When I hover over a step item, I see that the text label turns blue, but the step number is static. Should that have a hover state, too? I think it should.
KB - I don't think so. I think just changing text color it is a great way to differentiate hover from selected without having to deal with color contrast.
I notice that the current step is implemented as a link. But we are already on that page. In general, I would not expect the selected item in a Nav menu to have a hover.
KB - Agreed.
Should the step number in the disabled state have a circular background like the others? Looks strange without it. I'm thinking just a gray circle with no fill. What do you guys think?
KB - We should have the filled circle just use the next step lighter gray than the unselected filled circle.

mcoker · 2019-02-11T19:00:33Z

We should have the filled circle just use the next step lighter gray than the unselected filled circle.

@mcarrano @kybaker

The non-current bg color is $pf-color-black-200, so using $pf-color-black-100, though it's barely visible. We have $pf-color-black-150 (#f5f5f5) but we haven't introduced that var into the system as a standard global var yet.

If you'd like me to use black-150, would this be a one-off use, or should that color be added as an additional global background-color var to use system-wide?

mcarrano · 2019-02-11T19:20:30Z

Wow. That is pretty perceptible. @kybaker thoughts?

srambach · 2019-02-11T20:58:27Z

src/patternfly/components/Wizard/examples/wizard-example.hbs

+            {{/wizard-nav-item}}
+            {{#> wizard-nav-item}}
+              {{#> wizard-nav-link}}
+                Subs-tep C


On a roll today... typo here.

i'm grate at teh spel-ling.

christiemolloy

Looks really good fantastic work!! Left some comments

christiemolloy · 2019-02-12T15:25:31Z

src/patternfly/components/Wizard/wizard.scss

+
+  // Close
+  --pf-c-wizard__close--Top: calc(var(--pf-global--spacer--lg) - var(--pf-global--spacer--form-element));
+  --pf-c-wizard__close--Right: calc(var(--pf-global--spacer--xl) - var(--pf-global--spacer--md));


Is there any reason why this isn't just var(--pf-global--spacer--md)

Yep, that's a good idea. I originally wrote it this way to represent that the right value is the right padding of the container minus the right padding of the button. But unless we wrote it like --pf-c-wizard__close--Right: calc(var(--pf-c-wizard__header--PaddingRight) - var(--pf-c-button--PaddingRight));, I don't think it makes sense to have this calc()

christiemolloy · 2019-02-12T15:27:31Z

src/patternfly/components/Wizard/docs/code.md

+| -- | -- | -- |
+| `.pf-c-wizard` | `<div>` | Initiates the wizard component. |
+| `.pf-c-wizard__header` | `<header>` | Initiates the header . |
+| `.pf-c-wizard__close` | `.pf-c-button.pf-m-plain` | Initiates the close button. |


Since .pf-c-wizard__close , .pf-c-wizard__title and .pf-c-wizard__description are nested inside of the header I feel as though their naming should be .pf-c-wizard__header-close , .pf-c-wizard__header-title and .pf-c-wizard__header-description

We can, but per the BEM guidelines

If we were to add another Element—called, let’s say, .person__eye {}—to this .person {} component, we would not need to step through every layer of the DOM. That is to say, the correct notation would be .person__eye {}, and not .person__head__eye {}. Your classes do not reflect the full paper-trail of the DOM.

If there were more than 1 description, close, and title, it would make sense to use header-[element], but in this case there aren't. Even then, I think we could add .pf-c-wizard__footer-description and leave .pf-c-wizard__description and it wouldn't be confusing. Some of our classes get unnecessarily long :) But I'm fine with it either way. What do you think, still want to change it?

Oh I never knew this I thought it was a hard rule. I'm definitely fine with leaving this!

christiemolloy · 2019-02-12T15:46:24Z

src/patternfly/components/Wizard/docs/code.md

+| `.pf-c-wizard__description` | `<p>` | Initiates the description. |
+| `.pf-c-wizard__steps` | `<div>` | Initiates the steps container. |
+| `.pf-c-wizard__toggle` | `<button>` | Initiates the mobile steps menu toggle button. |
+| `.pf-c-wizard__toggle-label` | `<div>` | Initiates the label area in the toggle. |


The breadcrumb component uses <nav> and a <list> here. Since this is just for display purposes I get that the nav might not be needed but I think a list could work really well here rather than the spans.

christiemolloy · 2019-02-12T15:49:03Z

src/patternfly/components/Wizard/examples/wizard-expanded-example.hbs

+        {{#> wizard-toggle-num}}2{{/wizard-toggle-num}}
+        {{#> wizard-toggle-step}}Configuration{{/wizard-toggle-step}}
+        {{> wizard-toggle-divider}}
+        {{#> wizard-toggle-substep}}Substep A{{/wizard-toggle-substep}}


substep B has the pf-m-current modifier so might be good to update this text.

christiemolloy · 2019-02-12T16:01:50Z

src/patternfly/components/Wizard/wizard.scss

+  --pf-c-wizard__toggle--ZIndex: var(--pf-global--ZIndex--sm);
+
+  // Toggle Label
+  --pf-c-wizard__toggle-label--MarginRight: var(--pf-global--spacer--sm);


should this instead have a (max-width of 100% - width of icon), so that the text truncates rather than cutting off? Not sure what design calls for.

jgiardino · 2019-02-12T20:11:53Z

src/patternfly/components/Wizard/wizard.scss

+      transform: rotate(180deg);
+    }
+
+    + .pf-c-wizard__nav {


It might be worth checking with a react dev on this, but using the + in this selector makes it dependent on HTML structure, and it would be ideal to have styles applied that are not dependent on HTML structure.

For example, something I'd like to test for components like this menu is if we can implement them in a way that is similar to how we handle popovers (wrt handling and trapping focus). Currently, the Popover displays in a separate section of the DOM from the toggle

Yep, good call! Updated the toggle/menu expanded styles to respond to a class on their parent element instead that can be toggled in react.

jgiardino · 2019-02-12T20:16:38Z

src/patternfly/components/Wizard/examples/wizard-example.hbs

+  {{#> wizard-footer}}
+    {{#> form}}
+      {{#> form-actions}}
+        {{#> button button--modifier="pf-m-primary"}}


I'm not sure if this is easy to do, or something we want to show here, but when I use this component in my product, I think I would want this button to be type="submit" so that I can hit Enter in the context of the form to move on to the next page. Is that something we would want to document here, or is that something that we handle when building the React component?

I agree. Do you think type="submit" should be optional, or can we just ship it that way? Seems to me like the primary action in the wizard (including if it changes from "next" to "review" or "finish") should always have type="submit", so I would be fine just adding it. We do that with the Login component's form button currently. It's type="submit" in core and react, but not documented in either. Do you think this (and the login form button?) should be documented as needing type="submit"?

I can't think of a reason why you wouldn't want type="submit" (or if there's a reason to use input type="submit" instead) so I think it would be fine to just ship it that way.

I don't think it hurts to document that, but at the same time, I don't know that we need to document it—it seems like basic, standard HTML stuff and I'm not sure where that would live in our current document structure.

Cool! Added that in my last commit.

mcoker · 2019-02-12T22:53:47Z

Thanks @christiemolloy @jgiardino, made those updates.

jgiardino · 2019-02-12T22:57:43Z

src/patternfly/components/Wizard/examples/wizard-example.hbs

+              {{/wizard-nav-link}}
+            {{/wizard-nav-item}}
+            {{#> wizard-nav-item}}
+              {{#> wizard-nav-link wizard-nav-link--modifier="pf-m-current"}}


Similar to our Nav component, we should include aria-current="page for the current selected page.

jgiardino · 2019-02-12T23:06:48Z

src/patternfly/components/Wizard/wizard-toggle.hbs

+<button class="pf-c-wizard__toggle{{#if wizard-toggle--modifier}} {{wizard-toggle--modifier}}{{/if}}"
+  aria-expanded="{{#if wizard--IsExpanded}}true{{else}}false{{/if}}"
+  aria-controls="{{id}}-nav"
+  aria-haspopup="true"


I'm finding that this attribute in JAWS is really weird when you use it outside the context of a form. For example, if I'm navigating a form in JAWS, the components we have with aria-haspopup work great. But if you encounter this component outside of a form, it's behavior is a little janky.

I'm hoping that what we have labeled as "Basic Dropdown" (without aria-haspopup, and implemented with similar keyboard interaction of a popover) will work for these use cases of Dropdowns and Selects that are not embedded in a form, but I haven't been able to test a POC of that to know for sure. For now, I'd suggest just keeping aria-expanded and removing aria-haspopup.

Aaaaand I've been commenting on all the PRs that I think we can remove aria-controls from cases like this. I think we only need it for things like Tabs or buttons in a toolbar, where the controlled element is not immediately after the toggle (or focus isn't automatically shifted like in a modal or popover). Currently this attribute only seems to benefit JAWS users, where JAWS provides a way to navigate to the controlled element.

mcoker · 2019-02-13T00:05:33Z

thanks @jgiardino! made those updates.

christiemolloy · 2019-02-13T14:25:32Z

Hey Coker, still seeing this run off the page

mcoker · 2019-02-13T16:23:58Z

@christiemolloy updated

jgiardino

LGTM! Thanks!

christiemolloy · 2019-02-18T15:43:55Z

src/patternfly/components/Wizard/examples/wizard-expanded-example.hbs

+  {{#> wizard-main}}
+    <p>wizard step content</p>
+  {{/wizard-main}}
+  {{#> wizard-footer wizard-footer--modifier="pf-m-align-right"}}


What is the reason behind the footer switching alignments across the two examples?

To show the modifier class in use. Do you think it shouldn't?

I would confirm with design that it the position of these buttons can vary

christiemolloy · 2019-02-18T15:51:46Z

src/patternfly/components/Wizard/wizard.scss

+  }
+}
+
+.pf-c-wizard__toggle-list {


When the first list overflows, it drops to the second line, but the arrow doesn't, which I think is confusing for the user. Could you use an inline list, and have the arrow be a list item. Not sure, I know this one is difficult. But i think the wrapping to the next line works well!

christiemolloy · 2019-02-18T15:58:11Z

src/patternfly/components/Wizard/wizard.scss

+
+.pf-c-wizard__main {
+  flex-grow: 1;
+  padding-top: var(--pf-c-wizard__main--PaddingTop);


From what I can see in the inVision files it looks as though theres a larger padding size on desktop and then on mobile you need to increase the padding top. It would be helpful to get the actual specs from Kyle.

I'll setup a meeting with @kybaker and go over all of the spacing and the dropdown menu height (that's matched from the context selector)

Updated the spacing. The header left/right padding, main padding, and nav padding should match the page component.

christiemolloy · 2019-02-18T15:59:47Z

src/patternfly/components/Wizard/wizard-toggle-icon.hbs

@@ -0,0 +1 @@
+<i class="fas fa-chevron-down pf-c-wizard__toggle-icon" aria-hidden="true"></i>


The toggle icon looks different in the invision file

christiemolloy · 2019-02-18T16:03:21Z

src/patternfly/components/Wizard/wizard.scss

+
+  // Nav
+  --pf-c-wizard__nav--Top: 100%;
+  --pf-c-wizard__nav--MaxHeight: #{pf-size-prem(200px)};


Looks like the max height is larger in the invision file and has more padding

Talked to @kybaker and just allowing this to consume the available area when the nav is open.

christiemolloy · 2019-02-18T16:05:46Z

src/patternfly/components/Wizard/wizard.scss

+  }
+
+  // Nav List (nested)
+  --pf-c-wizard__nav--nested--MarginLeft: calc(var(--pf-c-wizard__nav-link--PaddingLeft) + var(--pf-global--spacer--md));


Where is this variable - --pf-c-wizard__nav-link--PaddingLeft. Might be wrong but I can't see it

nice, the build was failing because of the missing var :) that's a leftover from a previous change. addressed that and another var.

christiemolloy · 2019-02-18T16:08:00Z

src/patternfly/components/Wizard/wizard.scss

+  --pf-c-wizard--GridTemplateRows: auto auto 1fr auto;
+  --pf-c-wizard--md--GridTemplateRows: auto 1fr auto;
+  --pf-c-wizard--md--GridTemplateColumns: 300px 1fr;
+  --pf-c-wizard--Width: calc(100% - var(--pf-global--spacer--xl) * 2);


Does it need a width and height?

It's similar to a modal, so I think it would. That said, I'll verify with Kyle that it will always present as a modal, and assuming it fits in a .pf-l-bullseye I'll make sure the height/width works the same as a modal

@kybaker said to match about modal box sizing. updated to match.

christiemolloy · 2019-02-18T16:08:42Z

src/patternfly/components/Wizard/wizard.scss

+  --pf-c-wizard__description--Color: var(--pf-global--Color--400);
+
+  // Steps
+  --pf-c-wizard__steps--md--BoxShadow: var(--pf-global--BoxShadow--md-right);


does the md refer to the box shadow size?

it's because it's a var in the md media query: @media screen and (min-width: $pf-global--breakpoint--md)

christiemolloy · 2019-02-19T15:20:46Z

src/patternfly/components/Wizard/wizard.scss

+  --pf-c-wizard--lg--GridTemplateColumns: 300px 1fr;
+  --pf-c-wizard--Height: 100%;
+  --pf-c-wizard--Width: 100vw;
+  --pf-c-wizard--lg--Height: #{pf-size-prem(762px)}; // Shares height with about modal


The way that the wizard truncates when the viewport height reduces is different to the about modal. Not sure if the content should remain and the buttons are hidden or vice versa. But I think we should decide here and then create an issue to update the about modal.

fwiw, your screenshot is of the normal modal, not the about modal.

@kybaker what do you think? This is on the edge case that a person has a super short viewport.

Here are some screenshots:

normal height

super short height

I think the way the wizard responds is ok. @christiemolloy We could open an issue to investigate the modal though.

christiemolloy · 2019-02-19T15:21:38Z

src/patternfly/components/Wizard/examples/wizard-example.hbs

+    {{/wizard-steps}}
+    {{#> wizard-main}}
+      {{#> wizard-body}}
+        wizard content goes were


christiemolloy · 2019-02-19T15:29:03Z

src/patternfly/components/Wizard/examples/wizard-example.hbs

+      {{/wizard-body}}
+    {{/wizard-main}}
+    {{#> wizard-footer}}
+      {{#> form}}


Should we remove the form from the footer and add custom spacing

christiemolloy · 2019-02-19T15:32:55Z

src/patternfly/components/Wizard/docs/code.md

+| Class | Applied To | Outcome |
+| -- | -- | -- |
+| `.pf-c-wizard` | `<div>` | Initiates the wizard component. **Required** |
+| `.pf-c-wizard__header` | `<header>` | Initiates the header . **Required** |


change to - header.

christiemolloy · 2019-02-19T15:38:47Z

src/patternfly/components/Wizard/docs/code.md

+| `.pf-c-wizard__nav-list` | `<ol>` | Initiates a list of steps. **Required** |
+| `.pf-c-wizard__nav-item` | `<li>` | Initiates a step list item. **Required** |
+| `.pf-c-wizard__nav-link` | `<a>` | Initiates a step link. **Required** |
+| `.pf-c-wizard__main` | `<main>` | Initiates the main container. **Required** |


Could .pf-c-wizard__main take on the padding of .pf-c-wizard__body. I don't see styles for .pf-c-wizard__main so I don't see the need for both of these classes, but let me know if I'm wrong :)

I talked to @kybaker and we're treating this similar to a card. With the body element, you get the proper spacing that allows you just to put content in it and it works. Without that element, the main area is just a container where you can put anything you want, and we don't impose padding or anything.

Ok that sounds good to me

christiemolloy

Nice work!!!

matthewcarleton

This looks solid! Only a few comments :)
Also, I've noticed in the design the expanded steps don't take full height in mobile but they do in yours, was this changed?

matthewcarleton · 2019-02-20T17:41:56Z

src/patternfly/components/Wizard/wizard.scss

+  --pf-c-wizard__toggle-list-item--MarginBottom: var(--pf-global--spacer--xs);
+
+  // Toggle Number
+  --pf-c-wizard__toggle-num--MarginRight: var(--pf-global--spacer--sm);


This isn't being used

matthewcarleton · 2019-02-20T17:51:53Z

src/patternfly/components/Wizard/docs/code.md

+| `aria-expanded="true"` | `.pf-c-wizard__toggle` | Indicates that the steps menu is visible. **Required** |
+| `aria-expanded="false"` | `.pf-c-wizard__toggle` | Indicates that the steps menu is hidden. **Required** |
+| `aria-label="close"` | `.pf-c-wizard__toggle-icon` | Gives the close button an accessible name. **Required** |
+| `aria-hidden="true"` | `.pf-c-wizard__toggle-icon`, `.pf-c-wizard__toggle-divider` | Hides the icon from assistive technologies. |


Should this be required?

matthewcarleton · 2019-02-20T18:01:02Z

src/patternfly/components/Wizard/examples/wizard-example.hbs

+  {{#> wizard}}
+    {{#> background-image}}{{/background-image}}
+    {{#> wizard-header}}
+      {{#> button button--modifier="pf-m-plain pf-c-wizard__close" button--attribute='aria-list="Close"'}}


aria-label="close"?

matthewcarleton · 2019-02-20T19:28:30Z

src/patternfly/components/Wizard/wizard.scss

+  --pf-c-wizard__toggle-list--MarginBottom: calc(var(--pf-c-wizard__toggle-list-item--MarginBottom) * -1);
+
+  // Toggle List Item
+  --pf-c-wizard__toggle-list-item--not-first-child--FontSize: var(--pf-global--FontSize--sm);


This is 16px in the design and the first child is actually 18px. You could target just the :first-child though and use --pf-global--FontSize--lg

oh good catch!

matthewcarleton · 2019-02-20T20:48:34Z

src/patternfly/components/Wizard/wizard.scss

+  --pf-c-wizard--lg--GridTemplateColumns: 300px 1fr;
+  --pf-c-wizard--Height: 100%;
+  --pf-c-wizard--Width: 100vw;
+  --pf-c-wizard--lg--Height: #{pf-size-prem(762px)}; // Shares height with about modal


I think the way the wizard responds is ok. @christiemolloy We could open an issue to investigate the modal though.

matthewcarleton · 2019-02-20T21:20:33Z

src/patternfly/components/Wizard/wizard.scss

+
+    // Reset styles for nested nav links
+    .pf-c-wizard__nav-link {
+      padding-left: 0;


do you need to reset padding here? I don't see it being set anywhere else.

nope! that's leftover from a previous iteration.

src/patternfly/components/Wizard/wizard.scss

matthewcarleton · 2019-02-20T21:35:10Z

src/patternfly/components/Wizard/wizard.scss

+  .pf-c-background-image {
+    &::before {
+      position: absolute;
+      top: 0;


Shouldn't you only need to redefine position here?

matthewcarleton · 2019-02-20T21:36:29Z

src/patternfly/components/Wizard/examples/wizard-expanded-example.hbs

+  {{#> wizard wizard--IsExpanded="true"}}
+    {{#> background-image}}{{/background-image}}
+    {{#> wizard-header}}
+      {{#> button button--modifier="pf-m-plain pf-c-wizard__close" button--attribute='aria-list="Close"'}}


aria-label="close"?

mcoker · 2019-02-20T23:10:58Z

thanks @matthewcarleton! updated.

matthewcarleton · 2019-02-21T00:30:45Z

nice! Did you see my comment above too?

I've noticed in the design the expanded steps don't take full height in mobile but they do in yours, was this changed?

mcoker · 2019-02-23T19:30:01Z

@matthewcarleton refactored the layout to support the mobile expanded nav state. mind looking at it again?

matthewcarleton · 2019-02-25T13:44:42Z

@mcoker ya I think that works. Although did you notice that you can scroll the content behind outside of that area? So if I drag overtop the expanded menu it still scrolls the content. This is only an issue when the expanded area isn't taking full height.

mcoker · 2019-02-25T23:17:19Z

@matthewcarleton today I learned that webkit-overflow-scrolling: touch; creates a new stacking context, but it seems to ignore z-index. On top of that, I moved the scrolling behavior of the nav to the nav-list, then gave nav (which is adjacent to main) a higher z-index than main, so that main's stacking context shouldn't compete with nav-list and it still didn't work! As best I can tell, if an element that doesn't scroll, either at all, or hasn't overflowed any content_, is displayed on top of another element with webkit-overflow-scrolling: touch;, the underlying element will scroll when you drag the element on top of it.

After spending way too much time trying workarounds I saw posted online and having no luck, I just removed webkit-overflow-scrolling: touch; from .pf-c-wizard__main and will open a follow up issue to investigate this later so that this bug isn't blocking the component.

mcoker requested review from kybaker and mcarrano February 9, 2019 17:28

mcoker force-pushed the issue-755 branch 5 times, most recently from 018d5fb to 7c34c0d Compare February 11, 2019 15:19

mcoker force-pushed the issue-755 branch 2 times, most recently from 4c10bec to 8577348 Compare February 11, 2019 17:05

mcoker requested review from matthewcarleton, christiemolloy, jgiardino and srambach February 11, 2019 17:07

srambach reviewed Feb 11, 2019

View reviewed changes

christiemolloy requested changes Feb 12, 2019

View reviewed changes

jgiardino reviewed Feb 12, 2019

View reviewed changes

mcoker force-pushed the issue-755 branch from 0670b05 to b483182 Compare February 12, 2019 22:34

jgiardino reviewed Feb 12, 2019

View reviewed changes

jgiardino approved these changes Feb 13, 2019

View reviewed changes

christiemolloy requested changes Feb 18, 2019

View reviewed changes

mcoker force-pushed the issue-755 branch from 5581e90 to fbf86a1 Compare February 19, 2019 00:48

christiemolloy requested changes Feb 19, 2019

View reviewed changes

christiemolloy approved these changes Feb 20, 2019

View reviewed changes

matthewcarleton reviewed Feb 20, 2019

View reviewed changes

mcoker force-pushed the issue-755 branch from 144b2db to d66b216 Compare February 23, 2019 19:28

mcoker mentioned this pull request Feb 25, 2019

Investigate -webkit-overflow-scrolling in wizard #1481

Closed

feat(wizard): add wizard component

35839cb

mcoker force-pushed the issue-755 branch from f883d86 to 35839cb Compare February 27, 2019 18:24

matthewcarleton merged commit 79a9bad into patternfly:master Feb 27, 2019

jtomasek mentioned this pull request Mar 11, 2019

Two items instead one are highlighted at the navigation pane if we try to navigate between them openshift-assisted/assisted-ui#44

Closed

mcoker deleted the issue-755 branch December 16, 2019 23:22

		@@ -0,0 +1 @@
		<i class="fas fa-chevron-down pf-c-wizard__toggle-icon" aria-hidden="true"></i>

feat(wizard): add wizard component #1404

feat(wizard): add wizard component #1404

Conversation

mcoker commented Feb 9, 2019 • edited Loading

patternfly-build commented Feb 9, 2019 • edited Loading

mcarrano commented Feb 11, 2019

kybaker commented Feb 11, 2019 • edited Loading

mcoker commented Feb 11, 2019

mcarrano commented Feb 11, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

christiemolloy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker commented Feb 12, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker commented Feb 13, 2019

christiemolloy commented Feb 13, 2019

mcoker commented Feb 13, 2019

jgiardino left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

normal height

super short height

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

christiemolloy left a comment

Choose a reason for hiding this comment

matthewcarleton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker commented Feb 9, 2019 •

edited

Loading

patternfly-build commented Feb 9, 2019 •

edited

Loading

kybaker commented Feb 11, 2019 •

edited

Loading