feat(DataToolbar): Add Data Toolbar component to experimental #2861

nicolethoen · 2019-09-06T02:58:29Z

#2009

patternfly-build · 2019-09-06T03:22:08Z

PatternFly-React preview: https://patternfly-react-pr-2861.surge.sh

karelhala

Thank you so much for this PR! It's a great start, we just have to remove the isExpanded from state and some variable renames and we are good to go!

karelhala · 2019-09-06T08:24:55Z

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx

+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.closeExpandableContent);


Please do not listen on resize events and close expandable content. This is css breakpoints work, no need to close the content on each window resize. It adds performance issues and plus unwanted behavior.

@karelhala There's an issue where if the toggle drawer is open and the window is resized when the breakpoint is hit the content will not layout correctly. We're looking for a solution to make it behave the same way that dropdown does. Will look at that code to see how that one works to see if there's a better solution.

This is really unaesthetic because imagine that you are looking at table with this on mobile, click on the expand button, realise that landscape view might be better for this and once you flip the phone this expanded menu is lost and user has to click on it once again.

If the layout is not rendered correctly on window resize I think that is more of a issue in PF core and we shouldn't try to fix it here.

@mcarrano Any thoughts on the behavior with the toggle?

This is a tough one to answer because it's not clear what the best approach is. I agree that just collapsing the drawer on resize it not great. Maybe if the drawer is open and a breakpoint is crossed, the content should not reconfigure itself (i.e. suppress the behavior in this case). Is that even possible? @mattnolting any thoughts here?

@mcarrano - matt nolting is on PTO until Tuesday.

regarding that being possible, yes I believe it is, but we'd have to use the breakpoint passed in by the user and look up the global size of that breakpoint and make it reconfigure itself based on the global size (hopefully no one will have over written it). I may not have time to figure that out today - but I can try. Would that be an acceptable approach @dlabaj?

@mcarrano I think, when using a toggle group, the content should reconfigure at the specified breakpoint if expanded content is .pf-m-expanded.

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarGroup.tsx

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx

mattnolting

Well done @nicolethoen!!! It's really exciting to see all the great work you've done in action. Left some comments.

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarUtils.tsx

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarItem.tsx

mturley

Awesome work @nicolethoen !

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx

...s/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx

mturley · 2019-09-09T18:09:02Z

...s/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx

+                  {toggleIcon}
+                </Button>
+              </div>
+              { isExpanded ? ReactDOM.createPortal(children, expandableContentRef.current): children }


I'm so glad this worked! For a while there I thought there might not be a declarative way to achieve this... but context, refs and portals = magic ✨

mturley

Noticed a few non-blocking things, but this looks good to me.

mturley · 2019-09-10T14:34:45Z

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md

+        </Select>
+     </DataToolbarItem>
+     <DataToolbarItem>
+        <Select


There's some inconsistent indentation/spacing here and elsewhere in this file, but I don't think we need to hold up the PR for it. I'll address cases like this when I rebase #2810 after the release, but I'm not sure if Prettier will run on the JSX in our Markdown files, so that's something else I want to look into.

mturley · 2019-09-10T14:46:48Z

...s/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx

+                  variant="plain"
+                  onClick={toggleIsExpanded}
+                  {...isExpanded && { 'aria-expanded': true }}
+                  // TODO aria-haspopup when isExpanded = true && viewport is smaller than lg global breakpoint


Is this something we need to implement with this PR, and if not can we open an issue to track it?

good thought

Let's open an issue for this.

Issue created

mattnolting

@nicolethoen Again, great work! Can we add an example of .pf-m-space-items on a group to the Data toolbar spacers example? Perhaps the last two action buttons?

@nicolethoen can we add a horizontal divider to the Data toolbar group stacked example?

@mcarrano @mceledonia should we add a horizontal divider to the Data toolbar group stacked example?

nicolethoen · 2019-09-10T15:08:35Z

@nicolethoen Again, great work! Can we add an example of .pf-m-space-items on a group to the Data toolbar spacers example? Perhaps the last two action buttons?

@nicolethoen can we add a horizontal divider to the Data toolbar group stacked example?

Yes and Yes!

mcarrano · 2019-09-10T15:33:50Z

@nicolethoen This is looking great. Agree with adding the horizontal divider to the stacked example. The only other thing I found is that for the Consumer managed toggle group example, I can get into a situation where the drawer remains open but the toggle disappears by opening the drawer and then stretching the window. See below.

If this is not easy to fix. I'd be OK to approve this and come back to address this as a bug in the next release.

karelhala · 2019-09-10T15:40:03Z

@mcarrano that's exactly what is discussed in #2861 (comment)

Consumers should be rensponsible when the pane is hidden and shown in this example. So if you open this toggle change the screen size and want to close the pane consumer is responsible for that. It's actually expected bahavior.

nicolethoen · 2019-09-10T15:43:33Z

@nicolethoen This is looking great. Agree with adding the horizontal divider to the stacked example. The only other thing I found is that for the Consumer managed toggle group example, I can get into a situation where the drawer remains open but the toggle disappears by opening the drawer and then stretching the window. See below.

If this is not easy to fix. I'd be OK to approve this and come back to address this as a bug in the next release.

I noted this issue in the documentation above the example.

dlabaj

A few comments but looks good otherwise.

dlabaj · 2019-09-10T14:53:33Z

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.tsx

+  className?: string;
+  /** Content to be rendered as rows in the Data toolbar */
+  children?: React.ReactNode;
+  /** Flag indicating if a Data toolbar toggle group's expandable content is expanded */


We should add a comment that setting this means that the consumer will be responsible for managing the toogle group expansion. Also how would a consumer find out if the toogle group is currently expanded after construction??? Can we use a getter to return the correct value.

If the consumer is managing the expansion, they would already know, right? If the consumer is not managing the expansion, why do they need to be able to find out if it's currently expanded?

There is some documentation just before the toggle group examples that i believe explains this? should I add more info to that documentation?

dlabaj · 2019-09-10T17:02:03Z

...s/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbarToggleGroup.tsx

+                  variant="plain"
+                  onClick={toggleIsExpanded}
+                  {...isExpanded && { 'aria-expanded': true }}
+                  // TODO aria-haspopup when isExpanded = true && viewport is smaller than lg global breakpoint


Let's open an issue for this.

mcarrano

Looks great @nicolethoen !

mattnolting

Just two more comments 😄

mattnolting · 2019-09-10T18:12:08Z

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md

+          <DataToolbarItem spacers={fifthSpacers}><Button variant="secondary">Action</Button></DataToolbarItem>
+          <DataToolbarItem><Button variant="primary">Action</Button></DataToolbarItem>
+          <DataToolbarItem variant="separator"></DataToolbarItem>
+          <DataToolbarGroup itemSpacers={[{spacerSize: 'lg'}]} spacers={[{spacerSize: 'lg'}]}>


Can you remove spacers={[{spacerSize: 'lg'}]}

mattnolting · 2019-09-10T18:12:36Z

packages/patternfly-4/react-core/src/experimental/components/DataToolbar/DataToolbar.md

+          <DataToolbarItem variant="separator"></DataToolbarItem>
+          <DataToolbarGroup itemSpacers={[{spacerSize: 'lg'}]} spacers={[{spacerSize: 'lg'}]}>
+            <DataToolbarItem><Button variant="secondary">Action</Button></DataToolbarItem>
+ `          <DataToolbarItem><Button variant="secondary">Action</Button></DataToolbarItem>


looks like you have a floating tick mark ^^

mattnolting

I love it!! 🎉 LGTM

tlabaj

LGTM

mturley

LGTM!

patternfly-build · 2019-09-10T20:24:30Z

Your changes have been released in:

@patternfly/react-core@3.104.0
@patternfly/react-docs@4.13.0
@patternfly/react-inline-edit-extension@2.11.35
demo-app-ts@2.24.8
@patternfly/react-table@2.20.15
@patternfly/react-topology@2.8.34
@patternfly/react-virtualized-extension@1.2.23

Thanks for your contribution! 🎉

nicolethoen added enhancement 🚀 labels Sep 6, 2019

nicolethoen requested review from dgutride, dlabaj, jessiehuff, jgiardino, karelhala, mattnolting and mturley September 6, 2019 02:58

karelhala reviewed Sep 6, 2019

View reviewed changes

mattnolting reviewed Sep 6, 2019

View reviewed changes

mturley reviewed Sep 9, 2019

View reviewed changes

nicolethoen changed the title ~~[WIP] feat(DataToolbar): Add Data Toolbar component to experimental~~ feat(DataToolbar): Add Data Toolbar component to experimental Sep 9, 2019

nicolethoen added 15 commits September 9, 2019 16:46

first steps

45d3001

make children into arrays of reactNodes

c3b0153

add comments and continue iterating on components

ab00d13

add context provider and consumers

926dc17

working toggle group

ba067ab

fix pf4 docs build

a5d6dca

address first PR comments

80204b0

add stacked example

8e6e359

return to use of DatabarContext.Consumer

194da1f

first steps

2b50f75

make children into arrays of reactNodes

6c92f99

add comments and continue iterating on components

e98968e

add context provider and consumers

bb66af1

working toggle group

c678b01

fix pf4 docs build

0ad8af3

address first PR comments

b112b4f

nicolethoen force-pushed the toolbar_component branch from 97e8bed to b112b4f Compare September 9, 2019 20:48

nicolethoen added 4 commits September 9, 2019 16:55

clean up my git mess

eb272c0

more fixing of my git mess

a103af9

clean up example

04ffdfc

change alert at top of experimental DataToolbar documentation

f44297e

mturley previously approved these changes Sep 10, 2019

View reviewed changes

mattnolting reviewed Sep 10, 2019

View reviewed changes

update examples for PR comments

f2ccde8

nicolethoen dismissed mturley’s stale review via f2ccde8 September 10, 2019 15:59

dlabaj approved these changes Sep 10, 2019

View reviewed changes

dlabaj previously approved these changes Sep 10, 2019

View reviewed changes

mcarrano previously approved these changes Sep 10, 2019

View reviewed changes

mcarrano added ux approved and removed ux review labels Sep 10, 2019

mattnolting reviewed Sep 10, 2019

View reviewed changes

two small tweaks

abe78d6

nicolethoen dismissed stale reviews from mcarrano and dlabaj via abe78d6 September 10, 2019 18:54

mattnolting approved these changes Sep 10, 2019

View reviewed changes

tlabaj approved these changes Sep 10, 2019

View reviewed changes

mturley approved these changes Sep 10, 2019

View reviewed changes

dlabaj approved these changes Sep 10, 2019

View reviewed changes

dlabaj merged commit 6ec0ce4 into patternfly:master Sep 10, 2019

nicolethoen deleted the toolbar_component branch February 8, 2023 13:46

feat(DataToolbar): Add Data Toolbar component to experimental #2861

feat(DataToolbar): Add Data Toolbar component to experimental #2861

Uh oh!

Conversation

nicolethoen commented Sep 6, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Sep 6, 2019

Uh oh!

karelhala left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mattnolting Sep 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mattnolting left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mturley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mturley left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mattnolting left a comment

Choose a reason for hiding this comment

Uh oh!

nicolethoen commented Sep 10, 2019

Uh oh!

mcarrano commented Sep 10, 2019

Uh oh!

karelhala commented Sep 10, 2019

Uh oh!

nicolethoen commented Sep 10, 2019

Uh oh!

dlabaj left a comment

Choose a reason for hiding this comment

nicolethoen commented Sep 6, 2019 •

edited

Loading

mattnolting Sep 10, 2019 •

edited

Loading