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.

Sign up for GitHub

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

Jump to bottom

nimble-toggle-tip Component #1876

Open
3 of 14 tasks
fredvisser opened this issue Feb 28, 2024 · 3 comments
Open
3 of 14 tasks

nimble-toggle-tip Component #1876

fredvisser opened this issue Feb 28, 2024 · 3 comments
Labels
dynamic form fields DFF Client Request new component Request for a new component

Comments

@fredvisser
Copy link
Contributor

fredvisser commented Feb 28, 2024 •
edited
Loading

😯 Problem to Solve

Complex forms and editor views built with nimble input components require field specific context help. While we've previously considered creating a nimble-tooltip to show contextual information, a nimble-toggle-tip has several benefits over the tooltip.

Persistence: A toggle-tip stays visible until the user decides to close it. This allows the user to interact with the information, such as copying text or clicking links. Tooltips, on the other hand, typically disappear when the user moves the cursor.

Keyboard accessibility: The user can use the keyboard to focus on the toggle-tip icon and open or close the toggle-tip with only the keyboard.

Complex Information: Toggle-tips can be better for displaying more complex information, including images, links, or formatted text. Tooltips are usually limited to simple, short text.

Mobile Friendliness: Toggle-tips can be more mobile-friendly as they can be triggered by taps and remain visible. Tooltips often rely on hover interactions, which don't translate well to touch interfaces.

💁 Proposed Solution

image
The toggle-tip will be predominately added to control labels.

Consider:

  • Should we add a 'no outline' appearance mode for the icon button and use that here?
  • Add a slot to the label or all controls?

References:

Other reference components:

📋 Tasks

  • nimble-toggle-tip interaction design issue
  • nimble-toggle-tip interaction design spec
  • nimble-toggle-tip visual design issue
  • nimble-toggle-tip visual design spec
  • nimble-toggle-tip spec
  • nimble-toggle-tip custom element
  • nimble-toggle-tip unit tests
  • nimble-toggle-tip Storybook tests
  • nimble-toggle-tip Storybook docs
  • nimble-toggle-tip Angular wrapper
  • nimble-toggle-tip Blazor wrapper
  • Add to Angular example app
  • Add to Blazor example app
  • Update Component Status table in README and incubating status
@fredvisser fredvisser added enhancement New feature or request triage New issue that needs to be reviewed dynamic form fields DFF Client Request new component Request for a new component and removed enhancement New feature or request labels Feb 28, 2024
@fredvisser fredvisser mentioned this issue Mar 1, 2024
Merged
1 task
@jattasNI jattasNI removed the triage New issue that needs to be reviewed label Mar 5, 2024
@jattasNI
Copy link
Contributor

jattasNI commented Mar 5, 2024

The RDSS team working on the SLE Config Utility app mentioned they'll be interested in this component. They're currently building it themselves with a button and tooltip.

image

@jattasNI
Copy link
Contributor

jattasNI commented Mar 7, 2024

We should consider re-enabling the tooltip matrix tests when we work on this feature. #1106

fredvisser added a commit that referenced this issue Apr 16, 2024
@fredvisser
Toggle Tip IxD Spec (#1889)
a0ee855 
# Pull Request

## 🤨 Rationale

Define the interaction design patterns needed to implement the
[nimble-toggle-tip Component](#1876)

## 👩‍💻 Implementation

Leveraged much of the pattern established by the Accordion IxD spec.

## 🧪 Testing

None

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
@fredvisser fredvisser mentioned this issue Jul 16, 2024
Closed
3 tasks
@jattasNI
Copy link
Contributor

jattasNI commented Sep 3, 2024 •
edited
Loading

The SLE schedule view introduced a toggle-tip-like component in this PR. It uses the info icon but only shows more info on hover, not click. When this component is available we should look at replacing that (and see if there are other SLE apps that have adopted similar patterns, possibly by searching source for that icon).

image

Edit: there's also the context help shared SLE component

@jattasNI jattasNI mentioned this issue Oct 1, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
dynamic form fields DFF Client Request new component Request for a new component
Projects
Nimble Design System Priorities
Status: Current Iteration
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fredvisser @jattasNI