feat(drawer): Added the drawer component to experimental by dlabaj · Pull Request #2633 · patternfly/patternfly-react · GitHub

Fixes #1938

Added drawer component to experimental features similar to what was done for core (https://pf4.patternfly.org/components/Drawer/examples/)

TODO:

Adding unit and component tests now will update this PR with those tests.

#1938

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

Can't vouch for styles, but LGTM.

This looks good @dlabaj , but I'm a bit confused about what's different about the two examples. The first one should overlay content on the page and the second would push page content into a smaller container, right? I can't really tell from these examples if that's what's happening since it looks like the page content and the drawer are not competing for the same space.

This looks good @dlabaj , but I'm a bit confused about what's different about the two examples. The first one should overlay content on the page and the second would push page content into a smaller container, right? I can't really tell from these examples if that's what's happening since it looks like the page content and the drawer are not competing for the same space.

@mcarrano The styles are messed up due to the import of pattternfly.css and base.css coming before the drawer component. Trying to figure out how to fix it now.

@mcarrano It's fixed now can you take another look at the docs.

Sentence case her please

Done.

Updates look good @dlabaj . This may be more of a CSS issue, but ion the second (inline) example, should there be some padding between the edge of the drawer and the content area? Thoughts @mcoker ?

This may be more of a CSS issue, but ion the second (inline) example, should there be some padding between the edge of the drawer and the content area?

@mcarrano that's a good point. On second thought, seems like both the main element (holds the main content) and drawer element (hold's the drawer panel's content) should have padding by default, and the option to remove it, if the user wants to add their own layout that has its own padding. What do you think of that?

looks like this just adds the modifier? It should be a prop you can define for the panel content that applies this class. Without the prop defined (default), or set to false, the panel should have padding. With the prop defined and not set to false, the panel should have no padding around it (as it does right now).

FWIW, we'll be adding the same type of prop for the drawer content element, too, but I need to make that change in core first.

okay will make this update

should be optional?

…rawer/DrawerPanelContent.tsx Co-Authored-By: Joachim <jschuler@redhat.com>

…rawer/Drawer.tsx Co-Authored-By: Joachim <jschuler@redhat.com>

LGTM

nice!!

Your changes have been released in:

@patternfly/react-core@3.85.0
@patternfly/react-docs@4.10.0
@patternfly/react-inline-edit-extension@2.9.73
demo-app-ts@2.18.0
@patternfly/react-integration@2.18.0
@patternfly/react-table@2.16.12
@patternfly/react-topology@2.7.21
@patternfly/react-virtualized-extension@1.1.107

Thanks for your contribution! 🎉

LGTM

feat(react-core): Added the drawer component to experimental

0827d7c

#1938

dlabaj added Do Not Merge css review labels Aug 2, 2019

dlabaj requested review from jschuler, mcarrano, mcoker, redallen and tlabaj August 2, 2019 15:00

Additional updates.

6a891d8

redallen previously approved these changes Aug 2, 2019

View reviewed changes

mcarrano reviewed Aug 2, 2019

View reviewed changes

Added Jest tests.

69dde23

dlabaj dismissed redallen’s stale review via 69dde23 August 5, 2019 14:30

dlabaj added 3 commits August 5, 2019 10:47

Added integration tests.

3bad867

Fixed file name.

683a08f

Fixed issue with styles being overriden.

1249832

dlabaj removed the Do Not Merge label Aug 5, 2019

tlabaj suggested changes Aug 5, 2019

View reviewed changes

Fixed Page to have drawerPanelContent be of type React.ReactNode

d06f6d0

tlabaj added the Do Not Merge label Aug 5, 2019

dlabaj added 2 commits August 5, 2019 12:57

Updated with review comments.

d701969

Removed experimental page compoent.

4ef1dbe

dlabaj removed the Do Not Merge label Aug 5, 2019

dlabaj dismissed stale reviews from mcarrano and tlabaj via f1d719c August 8, 2019 16:16

mcoker reviewed Aug 8, 2019

View reviewed changes

jschuler reviewed Aug 8, 2019

View reviewed changes

Comment thread packages/patternfly-4/react-core/src/experimental/components/Drawer/Drawer.md Outdated

jschuler reviewed Aug 8, 2019

View reviewed changes

Comment thread packages/patternfly-4/react-core/src/experimental/components/Drawer/Drawer.tsx Outdated

jschuler reviewed Aug 8, 2019

View reviewed changes

Comment thread packages/patternfly-4/react-core/src/experimental/components/Drawer/Drawer.tsx Outdated

jschuler reviewed Aug 8, 2019

View reviewed changes

Comment thread packages/patternfly-4/react-core/src/experimental/components/Drawer/DrawerPanelContent.tsx Outdated

dlabaj and others added 8 commits August 8, 2019 14:32

Update packages/patternfly-4/react-core/src/experimental/components/D…

7c70244

…rawer/DrawerPanelContent.tsx Co-Authored-By: Joachim <jschuler@redhat.com>

Update packages/patternfly-4/react-core/src/experimental/components/D…

4ce2804

…rawer/Drawer.tsx Co-Authored-By: Joachim <jschuler@redhat.com>

Update packages/patternfly-4/react-core/src/experimental/components/D…

1cbed3d

…rawer/Drawer.tsx Co-Authored-By: Joachim <jschuler@redhat.com>

Made optional fields optional.

59cd8ee

Update Drawer.md

7bbb5dc

Added prop to apply padding around the drawer.

bc8f6aa

fixed default value

7c4aec7

Update Drawer.md

31bb15e

jschuler previously approved these changes Aug 9, 2019

View reviewed changes

tlabaj previously approved these changes Aug 9, 2019

View reviewed changes

mcoker reviewed Aug 9, 2019

View reviewed changes

Comment thread packages/patternfly-4/react-core/src/experimental/components/Drawer/DrawerPanelContent.tsx Outdated

Update DrawerPanelContent.tsx

4e9e48e

dlabaj dismissed stale reviews from tlabaj and jschuler via 4e9e48e August 9, 2019 16:43

jschuler previously approved these changes Aug 9, 2019

View reviewed changes

Update Drawer.md

72c1459

dlabaj dismissed jschuler’s stale review via 72c1459 August 9, 2019 17:38

mcoker approved these changes Aug 9, 2019

View reviewed changes

jschuler approved these changes Aug 9, 2019

View reviewed changes

jschuler merged commit ff6d905 into patternfly:master Aug 9, 2019

tlabaj approved these changes Aug 9, 2019

View reviewed changes

               }: DrawerPanelContentProps) => (
                     <aside className={css(styles.drawerPanel, className)} {...props}>
-                      <div className={css(styles.drawerPanelBody)}>
+                      <div className={css(styles.drawerPanelBody, styles.modifiers.noPadding)}>

+                /** Indicate if the drawer is expanded */
+                isExpanded: boolean;
+                /** Indicates if the content element and panel element are displayed side by side. */
+                isInline: boolean;

+              </Alert>
+              <br />
+              ## Simple Drawer Component

feat(drawer): Added the drawer component to experimental by dlabaj · Pull Request #2633 · patternfly/patternfly-react · GitHub

Uh oh!

feat(drawer): Added the drawer component to experimental - #2633

feat(drawer): Added the drawer component to experimental#2633jschuler merged 20 commits intopatternfly:masterpatternfly/patternfly-react:masterfrom dlabaj:drawer-componentCopy head branch name to clipboard

Conversation

dlabaj commented Aug 2, 2019

Uh oh!

patternfly-build commented Aug 2, 2019

Uh oh!

redallen left a comment

Choose a reason for hiding this comment

Uh oh!

mcarrano left a comment

Choose a reason for hiding this comment

Uh oh!

dlabaj commented Aug 2, 2019

Uh oh!

dlabaj commented Aug 5, 2019

Uh oh!

tlabaj Aug 5, 2019

Choose a reason for hiding this comment

Uh oh!

dlabaj Aug 5, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcarrano commented Aug 5, 2019

Uh oh!

mcoker commented Aug 5, 2019

Uh oh!

mcoker Aug 8, 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!

dlabaj Aug 9, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jschuler Aug 8, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Aug 9, 2019

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

feat(drawer): Added the drawer component to experimental#2633
jschuler merged 20 commits into
patternfly:masterfrom
dlabaj:drawer-component

mcoker Aug 8, 2019 •
edited
Loading