From 68c27710dbe71f20c6c144c15e2de3b3bfd96071 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 15 Jul 2019 11:31:31 +0200 Subject: [PATCH 01/15] -added button with tooltip usage example --- .../Usage/ButtonExampleWithTooltip.shorthand.tsx | 11 +++++++++++ docs/src/examples/components/Button/Usage/index.tsx | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.tsx diff --git a/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.tsx new file mode 100644 index 0000000000..394c3ef4c5 --- /dev/null +++ b/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.tsx @@ -0,0 +1,11 @@ +import * as React from 'react' +import { Button, Tooltip } from '@stardust-ui/react' + +const ButtonExampleWithTooltip = () => ( + } + content="This is an actionable element." + /> +) + +export default ButtonExampleWithTooltip diff --git a/docs/src/examples/components/Button/Usage/index.tsx b/docs/src/examples/components/Button/Usage/index.tsx index d639a4600b..0b11d254f9 100644 --- a/docs/src/examples/components/Button/Usage/index.tsx +++ b/docs/src/examples/components/Button/Usage/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { Link } from 'react-router-dom' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' @@ -9,6 +10,16 @@ const Usage = () => ( description='A button used in cards is a "tinted" version of a default button.' examplePath="components/Button/Usage/ButtonUsageExample" /> + + {'The button as actionable element should be rendered with '} + tooltip + + } + examplePath="components/Button/Usage/ButtonExampleWithTooltip" + /> ) From 9d7740800022b471218cbea650ef4758f88ab12e Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 15 Jul 2019 13:25:14 +0200 Subject: [PATCH 02/15] -added menu and toolbar examples with tooltip --- .../MenuExampleWithTooltip.shorthand.tsx | 32 ++ .../examples/components/Menu/Usages/index.tsx | 11 + .../ToolbarExampleWithTooltip.shorthand.tsx | 282 ++++++++++++++++++ .../components/Toolbar/Usage/index.tsx | 21 ++ .../src/examples/components/Toolbar/index.tsx | 2 + .../react/src/components/Tooltip/Tooltip.tsx | 2 +- 6 files changed, 349 insertions(+), 1 deletion(-) create mode 100644 docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.tsx create mode 100644 docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx create mode 100644 docs/src/examples/components/Toolbar/Usage/index.tsx diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.tsx new file mode 100644 index 0000000000..6a42cd9519 --- /dev/null +++ b/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.tsx @@ -0,0 +1,32 @@ +import * as React from 'react' +import { Menu, Tooltip } from '@stardust-ui/react' + +const items = [ + { key: 'editorials', content: 'Editorials', tooltip: 'Click for opening Editorials' }, + { key: 'review', content: 'Reviews', tooltip: 'Click for opening Reviews' }, + { key: 'events', content: 'Upcoming Events', tooltip: 'Click for opening Upcoming Events' }, +] + +const MenuExampleWithTooltip = () => ( + render => + render( + /* what to render */ + item, + + /* how to render */ + (MenuItem, props) => { + const { tooltip = '', ...rest } = props || {} + return ( + + + + ) + }, + ), + )} + /> +) + +export default MenuExampleWithTooltip diff --git a/docs/src/examples/components/Menu/Usages/index.tsx b/docs/src/examples/components/Menu/Usages/index.tsx index 0d31490c6d..32534d6547 100644 --- a/docs/src/examples/components/Menu/Usages/index.tsx +++ b/docs/src/examples/components/Menu/Usages/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { Link } from 'react-router-dom' import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' @@ -24,6 +25,16 @@ const Usages = () => ( description="When Submenu in MenuItem is controlled, then its 'menuOpen' prop value could be changed either by parent component, or by user actions (e.g. key press) - thus it is necessary to handle 'onMenuOpenChange' event." examplePath="components/Menu/Usages/MenuExampleWithSubmenuControlled" /> + + {'The items inside the Menu as actionable element should be rendered with '} + tooltip + + } + examplePath="components/Menu/Usages/MenuExampleWithTooltip" + /> ) diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx new file mode 100644 index 0000000000..9824612486 --- /dev/null +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx @@ -0,0 +1,282 @@ +import * as React from 'react' +import { + Toolbar, + Input, + Button, + Form, + Tooltip, + ToolbarItemShorthandKinds, +} from '@stardust-ui/react' +import { useBooleanKnob } from '@stardust-ui/docs-components' + +const fields = [ + { + label: 'First name', + name: 'firstName', + id: 'first-name-inline-shorthand', + key: 'first-name', + required: true, + inline: true, + }, + { + label: 'Last name', + name: 'lastName', + id: 'last-name-inline-shorthand', + key: 'last-name', + required: true, + inline: true, + }, + { + label: 'I agree to the Terms and Conditions', + control: { + as: 'input', + }, + type: 'checkbox', + id: 'conditions-inline-shorthand', + key: 'conditions', + }, + { + control: { + as: Button, + content: 'Submit', + }, + key: 'submit', + }, +] + +const HighlightPopup = ({ onConfirm }) => { + return
+} + +const ToolbarExampleShorthand = () => { + const [isBold, setBold] = useBooleanKnob({ name: 'bold', initialValue: true }) + const [isItalic, setItalic] = useBooleanKnob({ name: 'isItalic', initialValue: false }) + const [isUnderline, setUnderline] = useBooleanKnob({ name: 'isUnderline', initialValue: false }) + const [isStrike, setStrike] = useBooleanKnob({ name: 'isStrike', initialValue: false }) + + const [highlightOpen, setHighlightOpen] = useBooleanKnob({ + name: 'highlightOpen', + initialValue: false, + }) + const [fontColorActive, setFontColorActive] = useBooleanKnob({ + name: 'fontColorActive', + initialValue: false, + }) + + const [moreMenuOpen, setMoreMenuOpen] = useBooleanKnob({ + name: 'moreMenuOpen', + initialValue: false, + }) + + const [log, setLog] = React.useState([]) + const writeLog = message => { + setLog(prevLog => [`${new Date().toLocaleTimeString()}: ${message}`, ...prevLog]) + } + + const [bulletListActive, setBulletListActive] = React.useState(false) + const [numberListActive, setNumberListActive] = React.useState(false) + const [toDoListActive, setToDoListActive] = React.useState(false) + + return ( + <> + { + setBold(!isBold) + }, + }, + { + key: 'italic', + kind: 'toggle' as ToolbarItemShorthandKinds, + active: isItalic, + tooltip: 'Italic', + icon: { name: 'italic', outline: true }, + onClick: () => { + setItalic(!isItalic) + }, + }, + { + key: 'underline', + kind: 'toggle' as ToolbarItemShorthandKinds, + active: isUnderline, + tooltip: 'Underline', + icon: { name: 'underline', outline: true }, + onClick: () => { + setUnderline(!isUnderline) + }, + }, + { + key: 'strike', + kind: 'toggle' as ToolbarItemShorthandKinds, + active: isStrike, + disabled: true, + // TODO: should this have a tooltip? And be focusable + // tooltip: 'Strike', + icon: { name: 'strike', outline: true }, + onClick: () => { + setStrike(!isStrike) + }, + }, + { key: 'divider1', kind: 'divider' as ToolbarItemShorthandKinds }, + { + key: 'highlight', + icon: { name: 'highlight', outline: true }, + active: highlightOpen, + tooltip: 'Highlight', + popup: { + content: ( + { + setHighlightOpen(false) + }} + /> + ), + onOpenChange: (e, { open }) => { + setHighlightOpen(open) + }, + open: highlightOpen, + }, + }, + { + key: 'font-color', + icon: { name: 'font-color', outline: true }, + active: fontColorActive, + tooltip: 'Font color', + popup: { + content: , + onOpenChange: () => { + setFontColorActive(!fontColorActive) + }, + }, + }, + { key: 'font-size', icon: { name: 'font-size', outline: true }, tooltip: 'Font size' }, + { + key: 'remove-format', + icon: { name: 'remove-format', outline: true }, + tooltip: 'Remove format', + }, + { key: 'divider2', kind: 'divider' as ToolbarItemShorthandKinds }, + { + key: 'radiogroup', + kind: 'group' as ToolbarItemShorthandKinds, + items: [ + { + key: 'bullets', + icon: { name: 'bullets', outline: true }, + tooltip: 'Bullets', + active: bulletListActive, + onClick: () => { + setBulletListActive(!bulletListActive) + + // deselect other radio items + setNumberListActive(false) + setToDoListActive(false) + }, + 'aria-label': 'bullet list', + }, + { + key: 'number-list', + icon: { name: 'number-list', outline: true }, + active: numberListActive, + tooltip: 'Number list', + onClick: () => { + setNumberListActive(!numberListActive) + + // deselect other radio items + setBulletListActive(false) + setToDoListActive(false) + }, + 'aria-label': 'number list', + }, + { + key: 'to-do-list', + icon: { name: 'to-do-list', outline: true }, + active: toDoListActive, + tooltip: 'To do list', + onClick: () => { + setToDoListActive(!toDoListActive) + + // deselect other radio items + setBulletListActive(false) + setNumberListActive(false) + }, + 'aria-label': 'to do list', + }, + ].map(radioItem => render => + render(radioItem, (RadioItem, props) => { + const { tooltip, ...rest } = props + return } content={tooltip} /> + }), + ), + }, + { key: 'divider3', kind: 'divider' as ToolbarItemShorthandKinds }, + { key: 'outdent', icon: { name: 'outdent', outline: true }, tooltip: 'Outdent' }, + { key: 'indent', icon: { name: 'indent', outline: true }, tooltip: 'Indent' }, + { key: 'divider4', kind: 'divider' as ToolbarItemShorthandKinds }, + { + key: 'more', + icon: { name: 'more', outline: true }, + active: moreMenuOpen, + tooltip: 'More options', + menu: [ + { + content: 'Quote', + icon: 'quote', + onClick: () => { + writeLog('... -> Quote') + }, + }, + { + content: 'Link', + icon: 'link', + disabled: true, + onClick: () => { + writeLog('SHOULD NOT BE CALLED, ITEM IS DISABLED... -> Link') + }, + }, + { + content: 'Code snippet', + icon: 'code-snippet', + onClick: () => writeLog('... -> Code snippet'), + }, + ], + menuOpen: moreMenuOpen, + onMenuOpenChange: (e, { menuOpen }) => { + writeLog(`setting menu to ${menuOpen ? 'open' : 'close'}`) + setMoreMenuOpen(menuOpen) + }, + }, + ].map(item => + item.tooltip + ? render => + render( + /* what to render */ + item, + + /* how to render */ + (ToolbarItem, props) => { + const { tooltip, ...rest } = props + return } content={tooltip} /> + }, + ) + : item, + )} + /> +
+ + 
+        {log.map((e, i) => (
+          
{e}

+        ))}
+
+ + ) +} + +export default ToolbarExampleShorthand diff --git a/docs/src/examples/components/Toolbar/Usage/index.tsx b/docs/src/examples/components/Toolbar/Usage/index.tsx new file mode 100644 index 0000000000..cea6fd828b --- /dev/null +++ b/docs/src/examples/components/Toolbar/Usage/index.tsx @@ -0,0 +1,21 @@ +import * as React from 'react' +import { Link } from 'react-router-dom' +import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' + +const Usage = () => ( + + + {'The items inside the Toolbar as actionable element should be rendered with '} + tooltip + + } + examplePath="components/Toolbar/Usage/ToolbarExampleWithTooltip" + /> + +) + +export default Usage diff --git a/docs/src/examples/components/Toolbar/index.tsx b/docs/src/examples/components/Toolbar/index.tsx index ece90d9811..406af057a4 100644 --- a/docs/src/examples/components/Toolbar/index.tsx +++ b/docs/src/examples/components/Toolbar/index.tsx @@ -2,11 +2,13 @@ import * as React from 'react' import Types from './Types' import Content from './Content' +import Usage from './Usage' const ToolbarExamples = () => ( <> + ) diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx index 42437b77bb..c93a8f284d 100644 --- a/packages/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.tsx @@ -117,7 +117,7 @@ export default class Tooltip extends AutoControlledComponent Date: Mon, 15 Jul 2019 15:09:30 +0200 Subject: [PATCH 03/15] -changed links to the tooltip docs page --- docs/src/examples/components/Button/Usage/index.tsx | 2 +- docs/src/examples/components/Menu/Usages/index.tsx | 2 +- docs/src/examples/components/Toolbar/Usage/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/examples/components/Button/Usage/index.tsx b/docs/src/examples/components/Button/Usage/index.tsx index 0b11d254f9..faacd5403d 100644 --- a/docs/src/examples/components/Button/Usage/index.tsx +++ b/docs/src/examples/components/Button/Usage/index.tsx @@ -15,7 +15,7 @@ const Usage = () => ( description={ <> {'The button as actionable element should be rendered with '} - tooltip + tooltip } examplePath="components/Button/Usage/ButtonExampleWithTooltip" diff --git a/docs/src/examples/components/Menu/Usages/index.tsx b/docs/src/examples/components/Menu/Usages/index.tsx index 32534d6547..22ac91f676 100644 --- a/docs/src/examples/components/Menu/Usages/index.tsx +++ b/docs/src/examples/components/Menu/Usages/index.tsx @@ -30,7 +30,7 @@ const Usages = () => ( description={ <> {'The items inside the Menu as actionable element should be rendered with '} - tooltip + tooltip } examplePath="components/Menu/Usages/MenuExampleWithTooltip" diff --git a/docs/src/examples/components/Toolbar/Usage/index.tsx b/docs/src/examples/components/Toolbar/Usage/index.tsx index cea6fd828b..32bfd4babd 100644 --- a/docs/src/examples/components/Toolbar/Usage/index.tsx +++ b/docs/src/examples/components/Toolbar/Usage/index.tsx @@ -10,7 +10,7 @@ const Usage = () => ( description={ <> {'The items inside the Toolbar as actionable element should be rendered with '} - tooltip + tooltip } examplePath="components/Toolbar/Usage/ToolbarExampleWithTooltip" From 45e1faff65d0beb55d7877ccfb689bedd83c5394 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 15 Jul 2019 16:07:00 +0200 Subject: [PATCH 04/15] simplified toolbar example --- .../ToolbarExampleWithTooltip.shorthand.tsx | 164 ++++-------------- 1 file changed, 33 insertions(+), 131 deletions(-) diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx index 9824612486..3313954018 100644 --- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx @@ -9,50 +9,8 @@ import { } from '@stardust-ui/react' import { useBooleanKnob } from '@stardust-ui/docs-components' -const fields = [ - { - label: 'First name', - name: 'firstName', - id: 'first-name-inline-shorthand', - key: 'first-name', - required: true, - inline: true, - }, - { - label: 'Last name', - name: 'lastName', - id: 'last-name-inline-shorthand', - key: 'last-name', - required: true, - inline: true, - }, - { - label: 'I agree to the Terms and Conditions', - control: { - as: 'input', - }, - type: 'checkbox', - id: 'conditions-inline-shorthand', - key: 'conditions', - }, - { - control: { - as: Button, - content: 'Submit', - }, - key: 'submit', - }, -] - -const HighlightPopup = ({ onConfirm }) => { - return -} - const ToolbarExampleShorthand = () => { const [isBold, setBold] = useBooleanKnob({ name: 'bold', initialValue: true }) - const [isItalic, setItalic] = useBooleanKnob({ name: 'isItalic', initialValue: false }) - const [isUnderline, setUnderline] = useBooleanKnob({ name: 'isUnderline', initialValue: false }) - const [isStrike, setStrike] = useBooleanKnob({ name: 'isStrike', initialValue: false }) const [highlightOpen, setHighlightOpen] = useBooleanKnob({ name: 'highlightOpen', @@ -68,14 +26,8 @@ const ToolbarExampleShorthand = () => { initialValue: false, }) - const [log, setLog] = React.useState([]) - const writeLog = message => { - setLog(prevLog => [`${new Date().toLocaleTimeString()}: ${message}`, ...prevLog]) - } - const [bulletListActive, setBulletListActive] = React.useState(false) const [numberListActive, setNumberListActive] = React.useState(false) - const [toDoListActive, setToDoListActive] = React.useState(false) return ( <> @@ -91,38 +43,6 @@ const ToolbarExampleShorthand = () => { setBold(!isBold) }, }, - { - key: 'italic', - kind: 'toggle' as ToolbarItemShorthandKinds, - active: isItalic, - tooltip: 'Italic', - icon: { name: 'italic', outline: true }, - onClick: () => { - setItalic(!isItalic) - }, - }, - { - key: 'underline', - kind: 'toggle' as ToolbarItemShorthandKinds, - active: isUnderline, - tooltip: 'Underline', - icon: { name: 'underline', outline: true }, - onClick: () => { - setUnderline(!isUnderline) - }, - }, - { - key: 'strike', - kind: 'toggle' as ToolbarItemShorthandKinds, - active: isStrike, - disabled: true, - // TODO: should this have a tooltip? And be focusable - // tooltip: 'Strike', - icon: { name: 'strike', outline: true }, - onClick: () => { - setStrike(!isStrike) - }, - }, { key: 'divider1', kind: 'divider' as ToolbarItemShorthandKinds }, { key: 'highlight', @@ -155,13 +75,6 @@ const ToolbarExampleShorthand = () => { }, }, }, - { key: 'font-size', icon: { name: 'font-size', outline: true }, tooltip: 'Font size' }, - { - key: 'remove-format', - icon: { name: 'remove-format', outline: true }, - tooltip: 'Remove format', - }, - { key: 'divider2', kind: 'divider' as ToolbarItemShorthandKinds }, { key: 'radiogroup', kind: 'group' as ToolbarItemShorthandKinds, @@ -173,10 +86,8 @@ const ToolbarExampleShorthand = () => { active: bulletListActive, onClick: () => { setBulletListActive(!bulletListActive) - - // deselect other radio items + // deselect other radio item setNumberListActive(false) - setToDoListActive(false) }, 'aria-label': 'bullet list', }, @@ -187,27 +98,11 @@ const ToolbarExampleShorthand = () => { tooltip: 'Number list', onClick: () => { setNumberListActive(!numberListActive) - - // deselect other radio items + // deselect other radio item setBulletListActive(false) - setToDoListActive(false) }, 'aria-label': 'number list', }, - { - key: 'to-do-list', - icon: { name: 'to-do-list', outline: true }, - active: toDoListActive, - tooltip: 'To do list', - onClick: () => { - setToDoListActive(!toDoListActive) - - // deselect other radio items - setBulletListActive(false) - setNumberListActive(false) - }, - 'aria-label': 'to do list', - }, ].map(radioItem => render => render(radioItem, (RadioItem, props) => { const { tooltip, ...rest } = props @@ -215,10 +110,6 @@ const ToolbarExampleShorthand = () => { }), ), }, - { key: 'divider3', kind: 'divider' as ToolbarItemShorthandKinds }, - { key: 'outdent', icon: { name: 'outdent', outline: true }, tooltip: 'Outdent' }, - { key: 'indent', icon: { name: 'indent', outline: true }, tooltip: 'Indent' }, - { key: 'divider4', kind: 'divider' as ToolbarItemShorthandKinds }, { key: 'more', icon: { name: 'more', outline: true }, @@ -228,27 +119,14 @@ const ToolbarExampleShorthand = () => { { content: 'Quote', icon: 'quote', - onClick: () => { - writeLog('... -> Quote') - }, - }, - { - content: 'Link', - icon: 'link', - disabled: true, - onClick: () => { - writeLog('SHOULD NOT BE CALLED, ITEM IS DISABLED... -> Link') - }, }, { content: 'Code snippet', icon: 'code-snippet', - onClick: () => writeLog('... -> Code snippet'), }, ], menuOpen: moreMenuOpen, onMenuOpenChange: (e, { menuOpen }) => { - writeLog(`setting menu to ${menuOpen ? 'open' : 'close'}`) setMoreMenuOpen(menuOpen) }, }, @@ -268,15 +146,39 @@ const ToolbarExampleShorthand = () => { : item, )} /> -
- - 
-        {log.map((e, i) => (
-          
{e}

-        ))}
-
) } +const fields = [ + { + label: 'Full name', + name: 'fullName', + id: 'full-name-inline-shorthand', + key: 'full-name', + required: true, + inline: true, + }, + { + label: 'I agree to the Terms and Conditions', + control: { + as: 'input', + }, + type: 'checkbox', + id: 'conditions-inline-shorthand', + key: 'conditions', + }, + { + control: { + as: Button, + content: 'Submit', + }, + key: 'submit', + }, +] + +const HighlightPopup = ({ onConfirm }) => { + return +} + export default ToolbarExampleShorthand From d30b88165125ffc3c459552d8cffbd9928c05cc6 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 15 Jul 2019 16:36:20 +0200 Subject: [PATCH 05/15] -changed examples titles --- docs/src/examples/components/Menu/Usages/index.tsx | 2 +- docs/src/examples/components/Toolbar/Usage/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/examples/components/Menu/Usages/index.tsx b/docs/src/examples/components/Menu/Usages/index.tsx index 22ac91f676..431f2caeeb 100644 --- a/docs/src/examples/components/Menu/Usages/index.tsx +++ b/docs/src/examples/components/Menu/Usages/index.tsx @@ -26,7 +26,7 @@ const Usages = () => ( examplePath="components/Menu/Usages/MenuExampleWithSubmenuControlled" /> {'The items inside the Menu as actionable element should be rendered with '} diff --git a/docs/src/examples/components/Toolbar/Usage/index.tsx b/docs/src/examples/components/Toolbar/Usage/index.tsx index 32bfd4babd..9083a16f47 100644 --- a/docs/src/examples/components/Toolbar/Usage/index.tsx +++ b/docs/src/examples/components/Toolbar/Usage/index.tsx @@ -6,7 +6,7 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' const Usage = () => ( {'The items inside the Toolbar as actionable element should be rendered with '} From 150635782a9fab355dc4482fdbaf9232bbe43afb Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 15 Jul 2019 17:52:06 +0200 Subject: [PATCH 06/15] -changed examples for toolbar --- .../ToolbarExampleWithTooltip.shorthand.tsx | 216 +++++------------- 1 file changed, 51 insertions(+), 165 deletions(-) diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx index 3313954018..046902e17a 100644 --- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx @@ -1,184 +1,70 @@ import * as React from 'react' -import { - Toolbar, - Input, - Button, - Form, - Tooltip, - ToolbarItemShorthandKinds, -} from '@stardust-ui/react' +import * as _ from 'lodash' +import { Toolbar, Tooltip, ToolbarItemShorthandKinds } from '@stardust-ui/react' import { useBooleanKnob } from '@stardust-ui/docs-components' const ToolbarExampleShorthand = () => { const [isBold, setBold] = useBooleanKnob({ name: 'bold', initialValue: true }) - - const [highlightOpen, setHighlightOpen] = useBooleanKnob({ - name: 'highlightOpen', - initialValue: false, - }) - const [fontColorActive, setFontColorActive] = useBooleanKnob({ - name: 'fontColorActive', - initialValue: false, - }) + const [isItalic, setItalic] = useBooleanKnob({ name: 'isItalic', initialValue: false }) const [moreMenuOpen, setMoreMenuOpen] = useBooleanKnob({ name: 'moreMenuOpen', initialValue: false, }) - const [bulletListActive, setBulletListActive] = React.useState(false) - const [numberListActive, setNumberListActive] = React.useState(false) - return ( - <> - { - setBold(!isBold) - }, - }, - { key: 'divider1', kind: 'divider' as ToolbarItemShorthandKinds }, - { - key: 'highlight', - icon: { name: 'highlight', outline: true }, - active: highlightOpen, - tooltip: 'Highlight', - popup: { - content: ( - { - setHighlightOpen(false) - }} - /> - ), - onOpenChange: (e, { open }) => { - setHighlightOpen(open) - }, - open: highlightOpen, + setBold(!isBold), + }, + { + key: 'italic', + kind: 'toggle' as ToolbarItemShorthandKinds, + active: isItalic, + tooltip: 'Italic', + icon: { name: 'italic', outline: true }, + onClick: () => setItalic(!isItalic), + }, + { key: 'divider1', kind: 'divider' as ToolbarItemShorthandKinds }, + { + key: 'more', + icon: { name: 'more', outline: true }, + active: moreMenuOpen, + tooltip: 'More options', + menu: [ + { + content: 'Quote', + icon: 'quote', }, - }, - { - key: 'font-color', - icon: { name: 'font-color', outline: true }, - active: fontColorActive, - tooltip: 'Font color', - popup: { - content: , - onOpenChange: () => { - setFontColorActive(!fontColorActive) - }, + { + content: 'Code snippet', + icon: 'code-snippet', }, - }, - { - key: 'radiogroup', - kind: 'group' as ToolbarItemShorthandKinds, - items: [ - { - key: 'bullets', - icon: { name: 'bullets', outline: true }, - tooltip: 'Bullets', - active: bulletListActive, - onClick: () => { - setBulletListActive(!bulletListActive) - // deselect other radio item - setNumberListActive(false) + ], + menuOpen: moreMenuOpen, + onMenuOpenChange: (e, { menuOpen }) => setMoreMenuOpen(menuOpen), + }, + ].map(item => + _.isNil(item.tooltip) + ? item + : render => + render( + item, + // rendering Tooltip for the Toolbar Item + (ToolbarItem, props) => { + const { tooltip, ...rest } = props + return } content={tooltip} /> }, - 'aria-label': 'bullet list', - }, - { - key: 'number-list', - icon: { name: 'number-list', outline: true }, - active: numberListActive, - tooltip: 'Number list', - onClick: () => { - setNumberListActive(!numberListActive) - // deselect other radio item - setBulletListActive(false) - }, - 'aria-label': 'number list', - }, - ].map(radioItem => render => - render(radioItem, (RadioItem, props) => { - const { tooltip, ...rest } = props - return } content={tooltip} /> - }), - ), - }, - { - key: 'more', - icon: { name: 'more', outline: true }, - active: moreMenuOpen, - tooltip: 'More options', - menu: [ - { - content: 'Quote', - icon: 'quote', - }, - { - content: 'Code snippet', - icon: 'code-snippet', - }, - ], - menuOpen: moreMenuOpen, - onMenuOpenChange: (e, { menuOpen }) => { - setMoreMenuOpen(menuOpen) - }, - }, - ].map(item => - item.tooltip - ? render => - render( - /* what to render */ - item, - - /* how to render */ - (ToolbarItem, props) => { - const { tooltip, ...rest } = props - return } content={tooltip} /> - }, - ) - : item, - )} - /> - + ), + )} + /> ) } -const fields = [ - { - label: 'Full name', - name: 'fullName', - id: 'full-name-inline-shorthand', - key: 'full-name', - required: true, - inline: true, - }, - { - label: 'I agree to the Terms and Conditions', - control: { - as: 'input', - }, - type: 'checkbox', - id: 'conditions-inline-shorthand', - key: 'conditions', - }, - { - control: { - as: Button, - content: 'Submit', - }, - key: 'submit', - }, -] - -const HighlightPopup = ({ onConfirm }) => { - return -} - export default ToolbarExampleShorthand From bda16a18feb86e5fd4ff9e947547b29f7b8e13ee Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 11:34:54 +0200 Subject: [PATCH 07/15] -addressed comments -updated changelog --- CHANGELOG.md | 1 + docs/src/examples/components/Button/Usage/index.tsx | 2 +- docs/src/examples/components/Menu/Usages/index.tsx | 2 +- docs/src/examples/components/Toolbar/Usage/index.tsx | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3be8028e02..5319e25ac4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,6 +35,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Make sidebar categories collapsible @lucivpav ([#1611](https://github.com/stardust-ui/react/pull/1611)) - Fix code in nesting themes section of theming examples @lucivpav ([#1616](https://github.com/stardust-ui/react/pull/1616)) - Make prototypes conditionally public and move them below Behaviors @lucivpav ([#1627](https://github.com/stardust-ui/react/pull/1627)) +- Add examples with `Tooltip` for all actionable components @mnajdova ([#1636](https://github.com/stardust-ui/react/pull/1636)) ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11) diff --git a/docs/src/examples/components/Button/Usage/index.tsx b/docs/src/examples/components/Button/Usage/index.tsx index faacd5403d..c6e1ed531e 100644 --- a/docs/src/examples/components/Button/Usage/index.tsx +++ b/docs/src/examples/components/Button/Usage/index.tsx @@ -14,7 +14,7 @@ const Usage = () => ( title="With tooltip" description={ <> - {'The button as actionable element should be rendered with '} + {'The button, as actionable element, should be rendered with '} tooltip } diff --git a/docs/src/examples/components/Menu/Usages/index.tsx b/docs/src/examples/components/Menu/Usages/index.tsx index 431f2caeeb..24587dda21 100644 --- a/docs/src/examples/components/Menu/Usages/index.tsx +++ b/docs/src/examples/components/Menu/Usages/index.tsx @@ -29,7 +29,7 @@ const Usages = () => ( title="With tooltips" description={ <> - {'The items inside the Menu as actionable element should be rendered with '} + {'The items inside the Menu, as actionable elements, should be rendered with '} tooltip } diff --git a/docs/src/examples/components/Toolbar/Usage/index.tsx b/docs/src/examples/components/Toolbar/Usage/index.tsx index 9083a16f47..cd67449aaf 100644 --- a/docs/src/examples/components/Toolbar/Usage/index.tsx +++ b/docs/src/examples/components/Toolbar/Usage/index.tsx @@ -9,7 +9,7 @@ const Usage = () => ( title="With tooltips" description={ <> - {'The items inside the Toolbar as actionable element should be rendered with '} + {'The items inside the Toolbar, as actionable elements, should be rendered with '} tooltip } From 12abc6f23cdb6ab608bbf2070f63e3e5011dfc7b Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 12:13:04 +0200 Subject: [PATCH 08/15] -added screener steps --- ...uttonExampleWithTooltip.shorthand.steps.ts | 8 +++++ .../MenuExampleWithTooltip.shorthand.steps.ts | 8 +++++ ...olbarExampleWithTooltip.shorthand.steps.ts | 8 +++++ .../components/Toolbar/commonScreenerSteps.ts | 31 +++++++++++++++++++ 4 files changed, 55 insertions(+) create mode 100644 docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts create mode 100644 docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts create mode 100644 docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts create mode 100644 docs/src/examples/components/Toolbar/commonScreenerSteps.ts diff --git a/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts new file mode 100644 index 0000000000..3030de3084 --- /dev/null +++ b/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts @@ -0,0 +1,8 @@ +import { Button } from '@stardust-ui/react' + +const config: ScreenerTestsConfig = { + themes: ['teams', 'teamsDark', 'teamsHighContrast'], + steps: [builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip')], +} + +export default config diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts new file mode 100644 index 0000000000..5262188359 --- /dev/null +++ b/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts @@ -0,0 +1,8 @@ +import getScreenerSteps from '../commonScreenerSteps' + +const config: ScreenerTestsConfig = { + themes: ['teams', 'teamsDark', 'teamsHighContrast'], + steps: getScreenerSteps(), +} + +export default config diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts new file mode 100644 index 0000000000..5262188359 --- /dev/null +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts @@ -0,0 +1,8 @@ +import getScreenerSteps from '../commonScreenerSteps' + +const config: ScreenerTestsConfig = { + themes: ['teams', 'teamsDark', 'teamsHighContrast'], + steps: getScreenerSteps(), +} + +export default config diff --git a/docs/src/examples/components/Toolbar/commonScreenerSteps.ts b/docs/src/examples/components/Toolbar/commonScreenerSteps.ts new file mode 100644 index 0000000000..02061f48d0 --- /dev/null +++ b/docs/src/examples/components/Toolbar/commonScreenerSteps.ts @@ -0,0 +1,31 @@ +import { Toolbar } from '@stardust-ui/react' + +interface StepsOptions { + vertical?: boolean + startItem?: number + endItem?: number +} + +const selectors = { + menu: `.${Toolbar.className}`, + item: (itemIndex: number) => `.${Toolbar.className} li:nth-child(${itemIndex}) a`, +} + +const getScreenerSteps = ({ + vertical, + startItem = 2, + endItem = 3, +}: StepsOptions = {}): ScreenerSteps => [ + (builder, keys) => + builder + .hover(selectors.item(startItem)) + .snapshot('Hovers 2nd item (hover state styles)') + .click(selectors.item(startItem)) + .snapshot('Clicks on 2nd item (active state styles)') + .keys(selectors.item(startItem), vertical ? keys.downArrow : keys.rightArrow) + .snapshot('Navigates to next item (focus state styles)') + .keys(selectors.item(endItem), vertical ? keys.upArrow : keys.leftArrow) + .snapshot('Navigates to previous item (active and focus state styles)'), +] + +export default getScreenerSteps From da3942cba754193728e845495e0ce4e5ca43ddc9 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 12:37:16 +0200 Subject: [PATCH 09/15] -fixed screener steps --- ...uttonExampleWithTooltip.shorthand.steps.ts | 5 ++- .../MenuExampleWithTooltip.shorthand.steps.ts | 17 ++++++++-- ...olbarExampleWithTooltip.shorthand.steps.ts | 17 ++++++++-- .../components/Toolbar/commonScreenerSteps.ts | 31 ------------------- 4 files changed, 34 insertions(+), 36 deletions(-) delete mode 100644 docs/src/examples/components/Toolbar/commonScreenerSteps.ts diff --git a/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts index 3030de3084..c56201ca47 100644 --- a/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts +++ b/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts @@ -2,7 +2,10 @@ import { Button } from '@stardust-ui/react' const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'], - steps: [builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip')], + steps: [ + builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip'), + builder => builder.hover('body'), // we need the mouse to be moved out of the button for the next test + ], } export default config diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts index 5262188359..d8d33a5363 100644 --- a/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts +++ b/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts @@ -1,8 +1,21 @@ -import getScreenerSteps from '../commonScreenerSteps' +import { Menu } from '@stardust-ui/react' + +const selectors = { + menu: `.${Menu.className}`, + item: (itemIndex: number) => `.${Menu.className} li:nth-child(${itemIndex}) a`, +} const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'], - steps: getScreenerSteps(), + steps: [ + (builder, keys) => + builder + .hover(selectors.item(1)) + .snapshot('Hovers 1st item (show tooltip)') + .click(selectors.item(1)) + .keys(selectors.item(1), keys.rightArrow) + .snapshot('Navigates to next item (shows tooltip)'), + ], } export default config diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts index 5262188359..3edc248122 100644 --- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts @@ -1,8 +1,21 @@ -import getScreenerSteps from '../commonScreenerSteps' +import { Toolbar } from '@stardust-ui/react' + +const selectors = { + menu: `.${Toolbar.className}`, + item: (itemIndex: number) => `.${Toolbar.className} :nth-child(${itemIndex}) a`, +} const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'], - steps: getScreenerSteps(), + steps: [ + (builder, keys) => + builder + .hover(selectors.item(1)) + .snapshot('Hovers 1st item (show tooltip)') + .click(selectors.item(1)) + .keys(selectors.item(1), keys.rightArrow) + .snapshot('Navigates to next item (shows tooltip)'), + ], } export default config diff --git a/docs/src/examples/components/Toolbar/commonScreenerSteps.ts b/docs/src/examples/components/Toolbar/commonScreenerSteps.ts deleted file mode 100644 index 02061f48d0..0000000000 --- a/docs/src/examples/components/Toolbar/commonScreenerSteps.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Toolbar } from '@stardust-ui/react' - -interface StepsOptions { - vertical?: boolean - startItem?: number - endItem?: number -} - -const selectors = { - menu: `.${Toolbar.className}`, - item: (itemIndex: number) => `.${Toolbar.className} li:nth-child(${itemIndex}) a`, -} - -const getScreenerSteps = ({ - vertical, - startItem = 2, - endItem = 3, -}: StepsOptions = {}): ScreenerSteps => [ - (builder, keys) => - builder - .hover(selectors.item(startItem)) - .snapshot('Hovers 2nd item (hover state styles)') - .click(selectors.item(startItem)) - .snapshot('Clicks on 2nd item (active state styles)') - .keys(selectors.item(startItem), vertical ? keys.downArrow : keys.rightArrow) - .snapshot('Navigates to next item (focus state styles)') - .keys(selectors.item(endItem), vertical ? keys.upArrow : keys.leftArrow) - .snapshot('Navigates to previous item (active and focus state styles)'), -] - -export default getScreenerSteps From c6aae6f34a66044a9daecb1d62a6925887d2f279 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 14:19:35 +0200 Subject: [PATCH 10/15] -changed toolbar example steps --- .../Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts index 3edc248122..6f25e75d3a 100644 --- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts @@ -2,7 +2,7 @@ import { Toolbar } from '@stardust-ui/react' const selectors = { menu: `.${Toolbar.className}`, - item: (itemIndex: number) => `.${Toolbar.className} :nth-child(${itemIndex}) a`, + item: (itemIndex: number) => `.${Toolbar.className}:nth-child(${itemIndex})`, } const config: ScreenerTestsConfig = { From 743c57f46d34e4c93bdf28d09ce5c5cce4988b29 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 14:38:28 +0200 Subject: [PATCH 11/15] -changed changelog entry --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8403fb593c..398fa201ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,7 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Make sidebar categories collapsible @lucivpav ([#1611](https://github.com/stardust-ui/react/pull/1611)) - Fix code in nesting themes section of theming examples @lucivpav ([#1616](https://github.com/stardust-ui/react/pull/1616)) - Make prototypes conditionally public and move them below Behaviors @lucivpav ([#1627](https://github.com/stardust-ui/react/pull/1627)) -- Add examples with `Tooltip` for all actionable components @mnajdova ([#1636](https://github.com/stardust-ui/react/pull/1636)) +- Add examples with `Tooltip` for the actionable components @mnajdova ([#1636](https://github.com/stardust-ui/react/pull/1636)) ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11) From eba8e24277a558f845680ff991d8224fb2ff962d Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 15:01:09 +0200 Subject: [PATCH 12/15] -removed toolbar with tooltip steps --- ...olbarExampleWithTooltip.shorthand.steps.ts | 21 ------------------- 1 file changed, 21 deletions(-) delete mode 100644 docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts deleted file mode 100644 index 6f25e75d3a..0000000000 --- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Toolbar } from '@stardust-ui/react' - -const selectors = { - menu: `.${Toolbar.className}`, - item: (itemIndex: number) => `.${Toolbar.className}:nth-child(${itemIndex})`, -} - -const config: ScreenerTestsConfig = { - themes: ['teams', 'teamsDark', 'teamsHighContrast'], - steps: [ - (builder, keys) => - builder - .hover(selectors.item(1)) - .snapshot('Hovers 1st item (show tooltip)') - .click(selectors.item(1)) - .keys(selectors.item(1), keys.rightArrow) - .snapshot('Navigates to next item (shows tooltip)'), - ], -} - -export default config From 2992691de2e97b04be1d2d2e1c2c226944a4768b Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 15:09:29 +0200 Subject: [PATCH 13/15] -created Toolbar example with tooltip steps --- ...olbarExampleWithTooltip.shorthand.steps.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts new file mode 100644 index 0000000000..c58339ac33 --- /dev/null +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts @@ -0,0 +1,20 @@ +import { Toolbar } from '@stardust-ui/react' + +const selectors = { + item: (itemIndex: number) => `.${Toolbar.Item.className}:nth-child(${itemIndex})`, +} + +const config: ScreenerTestsConfig = { + themes: ['teams', 'teamsDark', 'teamsHighContrast'], + steps: [ + (builder, keys) => + builder + .hover(selectors.item(1)) + .snapshot('Hovers 1st item (show tooltip)') + .click(selectors.item(1)) + .keys(selectors.item(1), keys.rightArrow) + .snapshot('Navigates to next item (shows tooltip)'), + ], +} + +export default config From 884e37395582507ce5abc380013ffbe6a60c68ba Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 15:11:31 +0200 Subject: [PATCH 14/15] -added toolbar class name in the steps --- .../Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts index c58339ac33..7423bac3af 100644 --- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts @@ -1,7 +1,8 @@ import { Toolbar } from '@stardust-ui/react' const selectors = { - item: (itemIndex: number) => `.${Toolbar.Item.className}:nth-child(${itemIndex})`, + item: (itemIndex: number) => + `.${Toolbar.className} .${Toolbar.Item.className}:nth-child(${itemIndex})`, } const config: ScreenerTestsConfig = { From 60622e59612d672580fbad32bb3b2cd03e1e49fd Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 16 Jul 2019 15:36:53 +0200 Subject: [PATCH 15/15] -added label behavior for the toolbar items --- .../ToolbarExampleWithTooltip.shorthand.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx index 046902e17a..e967777ab0 100644 --- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx +++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx @@ -1,6 +1,11 @@ import * as React from 'react' import * as _ from 'lodash' -import { Toolbar, Tooltip, ToolbarItemShorthandKinds } from '@stardust-ui/react' +import { + Toolbar, + Tooltip, + ToolbarItemShorthandKinds, + tooltipAsLabelBehavior, +} from '@stardust-ui/react' import { useBooleanKnob } from '@stardust-ui/docs-components' const ToolbarExampleShorthand = () => { @@ -59,7 +64,14 @@ const ToolbarExampleShorthand = () => { // rendering Tooltip for the Toolbar Item (ToolbarItem, props) => { const { tooltip, ...rest } = props - return } content={tooltip} /> + // Adding tooltipAsLabelBehavior as the ToolbarItems contains only icon + return ( + } + accessibility={tooltipAsLabelBehavior} + content={tooltip} + /> + ) }, ), )}