From dc471fcd5a8533fc156b205a3327622b884c8043 Mon Sep 17 00:00:00 2001 From: aidendk Date: Wed, 8 Jun 2022 10:31:26 -0500 Subject: [PATCH 01/14] Initial Template --- .../src/tooltip/tooltip.spec.md | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 packages/nimble-components/src/tooltip/tooltip.spec.md diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md new file mode 100644 index 0000000000..4f5fd5445d --- /dev/null +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -0,0 +1,58 @@ +# Nimble Component Name [Template] + +## Overview + +*The name of the component, along with a high-level description.* + +### Background + +*Relevant historical or background information* +*Link to Visual Design spec* +*Link to relevant work items, related existing issues, etc.* + +--- + +## Design + +### API + +*Include a permalink to FAST's API documentation (from the FAST component spec on GitHub, press `y` to update the URL bar to show the latest commit)* +*Provide a brief summary of the API below. For each section:* + *If exposing FAST's API without changes, you can just write "Unchanged".* + *If deviating from FAST's API, highlight and provide an explanation for the changes.* + +*The API summary should include:* +- *Component Name* +- *Properties/Attributes* +- *Methods* +- *Events* +- *CSS Classes and Custom Properties that affect the component* +- *Slots* + +### Angular integration + +*Describe the plan for Angular support, including directives for attribute binding and ControlValueAccessor for form integration.* + +### Blazor integration + +*Describe the plan for Blazor support. See the [nimble-blazor CONTRIBUTING.md](/packages/nimble-blazor/CONTRIBUTING.md) for details.* + +### Additional requirements + +*Review the following areas and add brief commentary on each. Highlight any gaps which might require additional work, bugs to be filed to FAST, or write "None" if there are no special requirements.* + +- *User interaction: Do the FAST component's behaviors match the visual design spec? When they differ, which approach is preferable and why?* +- *Styling: Does FAST provide APIs to achieve the styling in the visual design spec?* +- *Testing: Is FAST's coverage sufficient? Should we write any tests beyond Chromatic visual tests?* +- *Documentation: Any requirements besides standard Storybook docs and updating the Example Client App demo?* +- *Tooling: Any new tools, updates to tools, code generation, etc?* +- *Accessibility: keyboard navigation/focus, form input, use with assistive technology, etc.* +- *Globalization: special RTL handling, swapping of icons/visuals, localization, etc.* +- *Performance: does the FAST component meet Nimble's performance requirements?* +- *Security: Any requirements for security?* + +--- + +## Open Issues + +*Highlight any open questions for discussion during the spec PR. Before the spec is approved these should typically be resolved with the answers being incorporated in the spec document.* \ No newline at end of file From 8409cc972fbf9796ac430eeec52eec43d614b68a Mon Sep 17 00:00:00 2001 From: aidendk Date: Wed, 8 Jun 2022 11:24:47 -0500 Subject: [PATCH 02/14] spec updates (1) --- .../src/tooltip/tooltip.spec.md | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index 4f5fd5445d..36ee9a7f62 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -1,14 +1,12 @@ -# Nimble Component Name [Template] +# Nimble Tooltip ## Overview -*The name of the component, along with a high-level description.* +The `nimble-tooltip` is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out. The Nimble tooltip is based upon [FAST's tooltip component](https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation/src/tooltip) ### Background -*Relevant historical or background information* -*Link to Visual Design spec* -*Link to relevant work items, related existing issues, etc.* +[Visual desgin spec](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/specs/) --- @@ -16,18 +14,22 @@ ### API -*Include a permalink to FAST's API documentation (from the FAST component spec on GitHub, press `y` to update the URL bar to show the latest commit)* +[FAST tooltip API](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.md) + *Provide a brief summary of the API below. For each section:* *If exposing FAST's API without changes, you can just write "Unchanged".* *If deviating from FAST's API, highlight and provide an explanation for the changes.* -*The API summary should include:* -- *Component Name* -- *Properties/Attributes* -- *Methods* -- *Events* -- *CSS Classes and Custom Properties that affect the component* -- *Slots* +- _Component Name:_ `nimble-tooltip` +- _Properties/Attributes:_ Unchanged +- _Methods:_ Unchanged +- _Events:_ Unchanged +- _CSS Classes and Custom Properties that affect the component:_ ? +- _Slots:_ Unchanged +- _Template:_ ? + +[FAST Component tooltip](https://explore.fast.design/components/fast-tooltip) +Is design similar enough or does need styling changes? ### Angular integration @@ -55,4 +57,4 @@ ## Open Issues -*Highlight any open questions for discussion during the spec PR. Before the spec is approved these should typically be resolved with the answers being incorporated in the spec document.* \ No newline at end of file +None \ No newline at end of file From 15d2880d3ab6be6c6ffa44baec2739c2cb248154 Mon Sep 17 00:00:00 2001 From: aidendk Date: Wed, 8 Jun 2022 16:47:50 -0500 Subject: [PATCH 03/14] tooltip spec update - to be proofread (#309) --- .../src/tooltip/tooltip.spec.md | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index 36ee9a7f62..f1f77551bd 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -6,6 +6,8 @@ The `nimble-tooltip` is a popup that displays information related to an element ### Background +[Nimble issue #309: Tooltip](https://github.com/ni/nimble/issues/309) + [Visual desgin spec](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/specs/) --- @@ -14,7 +16,10 @@ The `nimble-tooltip` is a popup that displays information related to an element ### API -[FAST tooltip API](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.md) +Plan to extend API to support all cases shown in visual design XD document. Will add +once tooltip is sucessfully implemented with one case. + +[FAST tooltip API](https://github.com/microsoft/fast/blob/de7f234ef871204fcac2b5df59433d919809341d/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.md) *Provide a brief summary of the API below. For each section:* *If exposing FAST's API without changes, you can just write "Unchanged".* @@ -26,18 +31,15 @@ The `nimble-tooltip` is a popup that displays information related to an element - _Events:_ Unchanged - _CSS Classes and Custom Properties that affect the component:_ ? - _Slots:_ Unchanged -- _Template:_ ? - -[FAST Component tooltip](https://explore.fast.design/components/fast-tooltip) -Is design similar enough or does need styling changes? +- _Template:_ Unchanged ### Angular integration -*Describe the plan for Angular support, including directives for attribute binding and ControlValueAccessor for form integration.* +An Angular directive will be created for the component. The component will not have form association, so a `ControlValueAccessor` will not be created. ### Blazor integration -*Describe the plan for Blazor support. See the [nimble-blazor CONTRIBUTING.md](/packages/nimble-blazor/CONTRIBUTING.md) for details.* +A Blazor wrapper will be created for the component. ### Additional requirements @@ -45,13 +47,21 @@ Is design similar enough or does need styling changes? - *User interaction: Do the FAST component's behaviors match the visual design spec? When they differ, which approach is preferable and why?* - *Styling: Does FAST provide APIs to achieve the styling in the visual design spec?* + FAST API most likely won't be sufficient for creating extra states in spec, will be adressed later on. - *Testing: Is FAST's coverage sufficient? Should we write any tests beyond Chromatic visual tests?* + Will look at options as building, testing may be difficult because only displayed on hover. - *Documentation: Any requirements besides standard Storybook docs and updating the Example Client App demo?* + No additional requirements - *Tooling: Any new tools, updates to tools, code generation, etc?* + No additional requirements - *Accessibility: keyboard navigation/focus, form input, use with assistive technology, etc.* + - All accessibility needs should be covered by FAST's implementation. We should do some manual testing to verify that the custom template doesn't break any accessibility behavior. - *Globalization: special RTL handling, swapping of icons/visuals, localization, etc.* + No additional requirements - *Performance: does the FAST component meet Nimble's performance requirements?* + No additional requirements - *Security: Any requirements for security?* + No additional requirements --- From 43ecf49439633e30a923ee0a08855b92b925c3e4 Mon Sep 17 00:00:00 2001 From: aidendk Date: Thu, 9 Jun 2022 08:40:40 -0500 Subject: [PATCH 04/14] Change files --- ...le-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json diff --git a/change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json b/change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json new file mode 100644 index 0000000000..c8215e96b9 --- /dev/null +++ b/change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "tooltip spec (#309)", + "packageName": "@ni/nimble-components", + "email": "aiden.ducey-kline@ni.com", + "dependentChangeType": "none" +} From 6b3cccd872bf5021641fc3829d8846f1e0a4175d Mon Sep 17 00:00:00 2001 From: aidendk Date: Thu, 9 Jun 2022 08:41:38 -0500 Subject: [PATCH 05/14] tooltip spec (#309) --- .../src/tooltip/tooltip.spec.md | 63 +++++++++---------- 1 file changed, 29 insertions(+), 34 deletions(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index f1f77551bd..4fdb290796 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -16,55 +16,50 @@ The `nimble-tooltip` is a popup that displays information related to an element ### API -Plan to extend API to support all cases shown in visual design XD document. Will add -once tooltip is sucessfully implemented with one case. - [FAST tooltip API](https://github.com/microsoft/fast/blob/de7f234ef871204fcac2b5df59433d919809341d/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.md) -*Provide a brief summary of the API below. For each section:* - *If exposing FAST's API without changes, you can just write "Unchanged".* - *If deviating from FAST's API, highlight and provide an explanation for the changes.* +Plan to extend API to support all cases shown in visual design XD document. Will add +once tooltip is sucessfully implemented with one case. -- _Component Name:_ `nimble-tooltip` -- _Properties/Attributes:_ Unchanged -- _Methods:_ Unchanged -- _Events:_ Unchanged -- _CSS Classes and Custom Properties that affect the component:_ ? -- _Slots:_ Unchanged -- _Template:_ Unchanged +- _Component Name:_ `nimble-tooltip` +- _Properties/Attributes:_ Unchanged +- _Methods:_ Unchanged +- _Events:_ Unchanged +- _CSS Classes and Custom Properties that affect the component:_ None +- _Slots:_ Unchanged +- _Template:_ Unchanged -### Angular integration +### Angular integration An Angular directive will be created for the component. The component will not have form association, so a `ControlValueAccessor` will not be created. -### Blazor integration +### Blazor integration A Blazor wrapper will be created for the component. ### Additional requirements -*Review the following areas and add brief commentary on each. Highlight any gaps which might require additional work, bugs to be filed to FAST, or write "None" if there are no special requirements.* - -- *User interaction: Do the FAST component's behaviors match the visual design spec? When they differ, which approach is preferable and why?* -- *Styling: Does FAST provide APIs to achieve the styling in the visual design spec?* - FAST API most likely won't be sufficient for creating extra states in spec, will be adressed later on. -- *Testing: Is FAST's coverage sufficient? Should we write any tests beyond Chromatic visual tests?* - Will look at options as building, testing may be difficult because only displayed on hover. -- *Documentation: Any requirements besides standard Storybook docs and updating the Example Client App demo?* - No additional requirements -- *Tooling: Any new tools, updates to tools, code generation, etc?* - No additional requirements -- *Accessibility: keyboard navigation/focus, form input, use with assistive technology, etc.* +- _User interaction: Do the FAST component's behaviors match the visual design spec? When they differ, which approach is preferable and why?_ + - No additional requirements +- _Styling: Does FAST provide APIs to achieve the styling in the visual design spec?_ + - FAST API most likely won't be sufficient for creating extra states in spec, will be adressed later on. +- _Testing: Is FAST's coverage sufficient? Should we write any tests beyond Chromatic visual tests?_ + - Will look at options as building, testing may be difficult because only displayed on hover. +- _Documentation: Any requirements besides standard Storybook docs and updating the Example Client App demo?_ + - No additional requirements +- _Tooling: Any new tools, updates to tools, code generation, etc?_ + - No additional requirements +- _Accessibility: keyboard navigation/focus, form input, use with assistive technology, etc._ - All accessibility needs should be covered by FAST's implementation. We should do some manual testing to verify that the custom template doesn't break any accessibility behavior. -- *Globalization: special RTL handling, swapping of icons/visuals, localization, etc.* - No additional requirements -- *Performance: does the FAST component meet Nimble's performance requirements?* - No additional requirements -- *Security: Any requirements for security?* - No additional requirements +- _Globalization: special RTL handling, swapping of icons/visuals, localization, etc._ + - No additional requirements +- _Performance: does the FAST component meet Nimble's performance requirements?_ + - No additional requirements +- _Security: Any requirements for security?_ + - No additional requirements --- ## Open Issues -None \ No newline at end of file +None From 95518ef3a0aeed3a400b0dac20e54b025a9038b1 Mon Sep 17 00:00:00 2001 From: aidendk Date: Fri, 10 Jun 2022 10:09:13 -0500 Subject: [PATCH 06/14] tooltip spec improvements (#309) --- .../nimble-components/src/tooltip/tooltip.spec.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index 4fdb290796..32a3540ea2 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -21,6 +21,9 @@ The `nimble-tooltip` is a popup that displays information related to an element Plan to extend API to support all cases shown in visual design XD document. Will add once tooltip is sucessfully implemented with one case. +Plan to first implment the tooltip and let the user choose which type of tooltip (general, error, info) they want +Additional changes to API expected in the future, but will not be included in first pass of implementation. Listed in Future Imrovements and Open Issues + - _Component Name:_ `nimble-tooltip` - _Properties/Attributes:_ Unchanged - _Methods:_ Unchanged @@ -29,6 +32,11 @@ once tooltip is sucessfully implemented with one case. - _Slots:_ Unchanged - _Template:_ Unchanged +### Future Improvements + +Attribute for switching between error and info states of tooltip +Easier integration with other nimble components + ### Angular integration An Angular directive will be created for the component. The component will not have form association, so a `ControlValueAccessor` will not be created. @@ -62,4 +70,5 @@ A Blazor wrapper will be created for the component. ## Open Issues -None +When user is using nimble tooltip and nimble components, is there an easier way to add a tooltip so they wouldn't have to anchor to an html element every time they want a tooltip? +Can tooltip be found by screen reader? From 75caff46defb92859bdf54d1af1753941d71505d Mon Sep 17 00:00:00 2001 From: aidendk Date: Fri, 10 Jun 2022 11:40:21 -0500 Subject: [PATCH 07/14] tooltip spec more updates (#309) --- ...-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json | 2 +- packages/nimble-components/src/tooltip/tooltip.spec.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json b/change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json index c8215e96b9..d1e55e304f 100644 --- a/change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json +++ b/change/@ni-nimble-components-f1b0b2b1-f154-4ace-9825-91316a7e941e.json @@ -2,6 +2,6 @@ "type": "none", "comment": "tooltip spec (#309)", "packageName": "@ni/nimble-components", - "email": "aiden.ducey-kline@ni.com", + "email": "103057880+aidendk@users.noreply.github.com", "dependentChangeType": "none" } diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index 32a3540ea2..27e0ea22f3 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -72,3 +72,5 @@ A Blazor wrapper will be created for the component. When user is using nimble tooltip and nimble components, is there an easier way to add a tooltip so they wouldn't have to anchor to an html element every time they want a tooltip? Can tooltip be found by screen reader? +For testing, can we force the tooltip to be visible without hover? [Possible Ideas](https://stackoverflow.com/questions/62043424/mock-hover-state-in-storybook) +aria-describedBy recommendation in storybook docs for tooltip for developers From 7681d98029239f9a36f831bfb25466964a09fcc4 Mon Sep 17 00:00:00 2001 From: aidendk Date: Fri, 10 Jun 2022 14:58:31 -0500 Subject: [PATCH 08/14] tooltip spec open issues additions (#309) --- packages/nimble-components/src/tooltip/tooltip.spec.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index 27e0ea22f3..7cb9bb2367 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -71,6 +71,11 @@ A Blazor wrapper will be created for the component. ## Open Issues When user is using nimble tooltip and nimble components, is there an easier way to add a tooltip so they wouldn't have to anchor to an html element every time they want a tooltip? + Can tooltip be found by screen reader? + For testing, can we force the tooltip to be visible without hover? [Possible Ideas](https://stackoverflow.com/questions/62043424/mock-hover-state-in-storybook) + aria-describedBy recommendation in storybook docs for tooltip for developers + +Mobile tooltip is not very functional- have to click on button to show tooltip, and clicking away does not make it disappear From 15075a5f8f4a850639ac66d97351c66adf7d2e7d Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Mon, 13 Jun 2022 10:54:06 -0500 Subject: [PATCH 09/14] Open Issues update (#309) --- packages/nimble-components/src/tooltip/tooltip.spec.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index 7cb9bb2367..ed6c123151 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -71,6 +71,11 @@ A Blazor wrapper will be created for the component. ## Open Issues When user is using nimble tooltip and nimble components, is there an easier way to add a tooltip so they wouldn't have to anchor to an html element every time they want a tooltip? +- Update nimble controls to have tooltip slow and be tooltip aware +- Create a tooltip in the shadow dom internally, would not require a separate tooltip element. +- If we don't do anything, at least provide an easy way to create unique ids. + +Should we have a tooltip that behaves with a visual indicator? Would it be a new type of component? Can tooltip be found by screen reader? From de59f117d0f2518d408bf9ac6d65b948d701b4b7 Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Tue, 14 Jun 2022 11:03:30 -0500 Subject: [PATCH 10/14] Tooltip Spec 6/14 (#309) --- packages/nimble-components/src/tooltip/tooltip.spec.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index ed6c123151..de8df62d64 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -58,7 +58,7 @@ A Blazor wrapper will be created for the component. - _Tooling: Any new tools, updates to tools, code generation, etc?_ - No additional requirements - _Accessibility: keyboard navigation/focus, form input, use with assistive technology, etc._ - - All accessibility needs should be covered by FAST's implementation. We should do some manual testing to verify that the custom template doesn't break any accessibility behavior. + - Aria-describedBy recommendation in storybook docs for tooltip for developers - _Globalization: special RTL handling, swapping of icons/visuals, localization, etc._ - No additional requirements - _Performance: does the FAST component meet Nimble's performance requirements?_ @@ -71,16 +71,12 @@ A Blazor wrapper will be created for the component. ## Open Issues When user is using nimble tooltip and nimble components, is there an easier way to add a tooltip so they wouldn't have to anchor to an html element every time they want a tooltip? -- Update nimble controls to have tooltip slow and be tooltip aware +- Update nimble controls to have tooltip show and be tooltip aware - Create a tooltip in the shadow dom internally, would not require a separate tooltip element. - If we don't do anything, at least provide an easy way to create unique ids. -Should we have a tooltip that behaves with a visual indicator? Would it be a new type of component? - Can tooltip be found by screen reader? For testing, can we force the tooltip to be visible without hover? [Possible Ideas](https://stackoverflow.com/questions/62043424/mock-hover-state-in-storybook) -aria-describedBy recommendation in storybook docs for tooltip for developers - Mobile tooltip is not very functional- have to click on button to show tooltip, and clicking away does not make it disappear From 9a5792871368bde1b3b33610fbc3e77f67f48a38 Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Tue, 14 Jun 2022 11:07:47 -0500 Subject: [PATCH 11/14] Tooltip Spec Formatted (#309) --- packages/nimble-components/src/tooltip/tooltip.spec.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index de8df62d64..e1acb72018 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -71,9 +71,10 @@ A Blazor wrapper will be created for the component. ## Open Issues When user is using nimble tooltip and nimble components, is there an easier way to add a tooltip so they wouldn't have to anchor to an html element every time they want a tooltip? -- Update nimble controls to have tooltip show and be tooltip aware -- Create a tooltip in the shadow dom internally, would not require a separate tooltip element. -- If we don't do anything, at least provide an easy way to create unique ids. + +- Update nimble controls to have tooltip show and be tooltip aware +- Create a tooltip in the shadow dom internally, would not require a separate tooltip element. +- If we don't do anything, at least provide an easy way to create unique ids. Can tooltip be found by screen reader? From 505adf510e15ccc74570ec03385306b2e6519b75 Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Wed, 15 Jun 2022 07:57:59 -0500 Subject: [PATCH 12/14] Update packages/nimble-components/src/tooltip/tooltip.spec.md Co-authored-by: mollykreis <20542556+mollykreis@users.noreply.github.com> --- packages/nimble-components/src/tooltip/tooltip.spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index e1acb72018..b2400e75e6 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -22,7 +22,7 @@ Plan to extend API to support all cases shown in visual design XD document. Will once tooltip is sucessfully implemented with one case. Plan to first implment the tooltip and let the user choose which type of tooltip (general, error, info) they want -Additional changes to API expected in the future, but will not be included in first pass of implementation. Listed in Future Imrovements and Open Issues +Additional changes to API expected in the future, but will not be included in first pass of implementation. Listed in Future Improvements and Open Issues - _Component Name:_ `nimble-tooltip` - _Properties/Attributes:_ Unchanged From 89acc9b444e4a81536fa9588c4b68df65894688e Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Wed, 15 Jun 2022 07:58:14 -0500 Subject: [PATCH 13/14] Update packages/nimble-components/src/tooltip/tooltip.spec.md Co-authored-by: mollykreis <20542556+mollykreis@users.noreply.github.com> --- packages/nimble-components/src/tooltip/tooltip.spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index b2400e75e6..f0299cba29 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -21,7 +21,7 @@ The `nimble-tooltip` is a popup that displays information related to an element Plan to extend API to support all cases shown in visual design XD document. Will add once tooltip is sucessfully implemented with one case. -Plan to first implment the tooltip and let the user choose which type of tooltip (general, error, info) they want +Plan to first implement the tooltip and let the user choose which type of tooltip (general, error, info) they want Additional changes to API expected in the future, but will not be included in first pass of implementation. Listed in Future Improvements and Open Issues - _Component Name:_ `nimble-tooltip` From d956928d7f895506085cddc77f0b21f3a5b26bc1 Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Wed, 15 Jun 2022 08:20:30 -0500 Subject: [PATCH 14/14] Spec overview update (#309) --- packages/nimble-components/src/tooltip/tooltip.spec.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/src/tooltip/tooltip.spec.md b/packages/nimble-components/src/tooltip/tooltip.spec.md index f0299cba29..1cafdad6ee 100644 --- a/packages/nimble-components/src/tooltip/tooltip.spec.md +++ b/packages/nimble-components/src/tooltip/tooltip.spec.md @@ -4,6 +4,8 @@ The `nimble-tooltip` is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out. The Nimble tooltip is based upon [FAST's tooltip component](https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation/src/tooltip) +The nimble-tooltip project will first be implemented as a prototype, open issues listed below will be addressed once the prototype is functional. + ### Background [Nimble issue #309: Tooltip](https://github.com/ni/nimble/issues/309) @@ -21,7 +23,7 @@ The `nimble-tooltip` is a popup that displays information related to an element Plan to extend API to support all cases shown in visual design XD document. Will add once tooltip is sucessfully implemented with one case. -Plan to first implement the tooltip and let the user choose which type of tooltip (general, error, info) they want +Plan to first implement the tooltip and let the client choose which type of tooltip (general, error, info) they want Additional changes to API expected in the future, but will not be included in first pass of implementation. Listed in Future Improvements and Open Issues - _Component Name:_ `nimble-tooltip`