syndesisio / syndesis-react

[FORK] A flexible, customizable, open source platform that provides core integration capabilities as a service.
Apache License 2.0
3 stars 19 forks source link

fix(wiz-toggle): fix wizard toggle icon click-ability #431

Closed seanforyou23 closed 5 years ago

seanforyou23 commented 5 years ago

This PR updates the header to more seamlessly collapse/consolidate the user menu at smaller viewports. Previously we would collapse logout into the help menu (keeping the help icon) and later convert that icon to kebab. After further reviewing this interaction, we realized it seems strange and a better experience is to convert the icon to a kebab at the same time we move/consolidate the two menus.

Also fixes a bug where selecting the collapse "toggle" icon for wizard wasn't actually collapsing the menu. Now it does.

One question that came up along the way was "how are we achieving this collapse functionality for the PF3 Wiz steps?". I don't see this capability in the PF3 react implementation;

http://patternfly-react.surge.sh/patternfly-3/index.html?selectedKind=patternfly-react%2FCommunication%2FWizard%2FComponents&selectedStory=Wizard&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

But it does seem to be a thing in core;

https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/wizard.html

Should help close https://github.com/syndesisio/syndesis-react/issues/425

allow pointer events to pass through for wiz toggle icon introduce tabletView mode where we can update aspects of the UI based on viewport size update header icons depending on viewport size

mcoker commented 5 years ago

looks like you have a build error

ERR! => Failed to build the preview
ERR! [at-loader] ./stories/Shared/HelpDropdown.stories.tsx:13:10 
ERR!     TS2322: Type '{ dropdownDirection: any; dropdownPosition: any; isMobileView: any; launchConnectorsGuide: any; launchContactUs: any; launchSampleIntegrationTutorials: any; launchSupportPage: any; launchUserGuide: any; launchAboutModal: any; isOpen: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<HelpDropdown> & Readonly<IHelpDropdownProps> & Readonly<{ children?: ReactNode; }>'.
ERR!   Property 'isMobileView' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<HelpDropdown> & Readonly<IHelpDropdownProps> & Readonly<{ children?: ReactNode; }>'.
(node:2332) UnhandledPromiseRejectionWarning: [object Object]
(node:2332) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:2332) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error Command failed with exit code 1.
riccardo-forina commented 5 years ago

PR Storybook available here

mcoker commented 5 years ago

LGTM!

riccardo-forina commented 5 years ago

PR Storybook available here

pure-bot[bot] commented 5 years ago

Pull request approved by @riccardo-forina - applying approved label