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.

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

Add storybook story to the Tooltip component #20322

Merged
merged 5 commits into from Feb 25, 2020
Merged

Conversation

@brentswisher
Copy link
Contributor

brentswisher commented Feb 20, 2020

Description

Add a story for the tooltip component

How has this been tested?

Run storybook and see the new tooltip option under the Components section

Screenshots

Fullscreen_2_19_20__8_23_PM

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Feb 20, 2020

Size Change: 0 B

Total Size: 864 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.01 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 104 kB 0 B
build/block-editor/style-rtl.css 9.78 kB 0 B
build/block-editor/style.css 9.77 kB 0 B
build/block-library/editor-rtl.css 7.67 kB 0 B
build/block-library/editor.css 7.67 kB 0 B
build/block-library/index.js 114 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.49 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.6 kB 0 B
build/components/index.js 190 kB 0 B
build/components/style-rtl.css 16.1 kB 0 B
build/components/style.css 16 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.36 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 90.7 kB 0 B
build/edit-post/style-rtl.css 8.7 kB 0 B
build/edit-post/style.css 8.69 kB 0 B
build/edit-site/index.js 4.58 kB 0 B
build/edit-site/style-rtl.css 2.77 kB 0 B
build/edit-site/style.css 2.76 kB 0 B
build/edit-widgets/index.js 4.36 kB 0 B
build/edit-widgets/style-rtl.css 2.8 kB 0 B
build/edit-widgets/style.css 2.79 kB 0 B
build/editor/editor-styles-rtl.css 327 B 0 B
build/editor/editor-styles.css 328 B 0 B
build/editor/index.js 45.1 kB 0 B
build/editor/style-rtl.css 4.13 kB 0 B
build/editor/style.css 4.11 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 kB 0 B
build/format-library/style-rtl.css 500 B 0 B
build/format-library/style.css 501 B 0 B
build/hooks/index.js 1.92 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.45 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 215 B 0 B
build/list-reusable-blocks/style.css 216 B 0 B
build/media-utils/index.js 4.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 878 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

const tooltipText = text( 'Text', 'More information' );
return (
<Tooltip text={ tooltipText }>
<Button isSecondary>Hover for more information</Button>

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 20, 2020

Contributor

I wonder if we should use a Button in the example or just some random div. The reason is the Button already supports a "tooltip" prop (and label) which should have the same behavior.

This comment has been minimized.

Copy link
@brentswisher

brentswisher Feb 20, 2020

Author Contributor

Yeah, that makes sense, should I update the readme too? That's where I usually pull the examples from.

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 20, 2020

Contributor

Yes, why not

<Button isSecondary>Hover for more information</Button>
</Tooltip>
);
};

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 20, 2020

Contributor

Do you think it would be good to show multiple variations on the same story (top, left, right, bottom) like we do for the "buttons" story. Or we could use a knob for the position.

This comment has been minimized.

Copy link
@brentswisher

brentswisher Feb 20, 2020

Author Contributor

Yeah, I started to do that but because storybook renders without any padding, changing the position didn't have any effect. I can add a wrapper element that positions the tooltip in the center, so you could see the difference?

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 20, 2020

Contributor

Sounds like a good plan to me.

@brentswisher brentswisher force-pushed the add/tooltip-storybook branch from 89b5ca3 to 9fbd6b7 Feb 21, 2020
@brentswisher

This comment has been minimized.

Copy link
Contributor Author

brentswisher commented Feb 21, 2020

Screenshot with div instead of a button:
Fullscreen_2_21_20__5_06_PM

I'm working on updating the snapshot that is failing, but for some reason, test-unit isn't finding any tests to run 🤷‍♂

<Tooltip text={ tooltipText } position={ position }>
<div
style={ {
margin: '100px',

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 24, 2020

Contributor

Maybe more something like that

Suggested change
margin: '100px',
margin: '50px auto',
width: '200px',
padding: '20px'

This comment has been minimized.

Copy link
@brentswisher

brentswisher Feb 24, 2020

Author Contributor

Works for me, thanks

component: Tooltip,
};

export const _default = () => {

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 24, 2020

Contributor

Maybe we can just remove this one and just keep the "withPosition" one as default?

This comment has been minimized.

Copy link
@brentswisher

brentswisher Feb 24, 2020

Author Contributor

No problem, updated

@brentswisher brentswisher force-pushed the add/tooltip-storybook branch from 89c560e to 67ae82c Feb 24, 2020
Copy link
Contributor

youknowriad left a comment

Thanks 👍

@brentswisher brentswisher merged commit 4758992 into master Feb 25, 2020
3 checks passed
3 checks passed
build
Details
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@brentswisher brentswisher deleted the add/tooltip-storybook branch Feb 25, 2020
@youknowriad youknowriad added this to the Gutenberg 7.7 milestone Mar 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.