Skip to content

Commit

Permalink
Tooltip: Update the component markup for a11y remediations & refactor…
Browse files Browse the repository at this point in the history 
… the existing styles towards more static styling (#3032)

* Refactor tooltip markup without styled components and apply a11y remediations

* experiment tooltip

* checking interactive elements and clean the code a bit

* add another story

* style fixes and more stories

* refactor it to use internal open state and make css presudo classes redundant

* apply code review feedback

* Refactor the styles to use data-attr and styled-components

* update events

* align and wrap styles with data attr

* remove unused var

* restructure markup and make tooltip hoverable

* wrap up, clean up, interactive children

* Apply suggestions from code review

Co-authored-by: Josh Black <joshblack@github.com>

* code review feedback

* add outline for force-color media

* Add unit tests

* check the trigger element's content for label

* useOnEscapePress hook to close the tooltip when mouse is hovering over the trigger element

* fix tests

* docs and move tooltip into folder

* Update generated/components.json

* add changeset

* fix imports

* update snapshot

* update snapshot

* default value to the docs

* Update generated/components.json

* snaps

* remove snapshot tests

---------

Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
  • Loading branch information
@broccolinisoup @joshblack
3 people authored Apr 11, 2023
1 parent 4c2d121 commit 1588989
Show file tree
Hide file tree
Showing 17 changed files with 851 additions and 1,941 deletions.
5 changes: 5 additions & 0 deletions .changeset/flat-drinks-retire.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

Tooltip: Address accessibility remediations and refactor styles towards more static styling
83 changes: 79 additions & 4 deletions docs/content/Tooltip.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Tooltip
status: Alpha
---

import data from '../../src/Tooltip.docs.json'
import data from '../../src/Tooltip/Tooltip.docs.json'

The Tooltip component adds a tooltip to add context to interactive elements on the page.

Expand All @@ -20,10 +20,85 @@ A tooltip may only be used on an element that is interactive such as a button or

## Examples

### Default (As a label type)

```jsx live
<Tooltip aria-label="Search on the documentation">
<Button>
<SearchIcon />
</Button>
</Tooltip>
```

### As a description type

```jsx live
<Tooltip text="This is a supplementary text for the save button" type="description">
<Button>Save</Button>
</Tooltip>
```

### With direction

```jsx live
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
<Tooltip aria-label="Hello, Tooltip!">
<Button>Hover me</Button>
<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
<Tooltip direction="n" text="Supplementary text" type="description">
<Button>North</Button>
</Tooltip>
<Tooltip direction="s" text="Supplementary text" type="description">
<Button>South</Button>
</Tooltip>
<Tooltip direction="e" text="Supplementary text" type="description">
<Button>East</Button>
</Tooltip>
<Tooltip direction="w" text="Supplementary text" type="description">
<Button>West</Button>
</Tooltip>
<Tooltip direction="ne" text="Supplementary text" type="description">
<Button>North East</Button>
</Tooltip>
<Tooltip direction="nw" text="Supplementary text" type="description">
<Button>North West</Button>
</Tooltip>
<Tooltip direction="se" text="Supplementary text" type="description">
<Button>Southeast</Button>
</Tooltip>
<Tooltip direction="sw" text="Supplementary text" type="description">
<Button>Southwest</Button>
</Tooltip>
</Box>
```

### With wrap

```jsx live
<Tooltip
direction="n"
wrap
text="Random long text that needs to be wrapped and be multipline and have some paddings around"
type="description"
>
<Button>Multiline</Button>
</Tooltip>
```

### With no delay

```jsx live
<Tooltip noDelay text="Supplemetary text" type="description" direction="se">
<Button>Button</Button>
</Tooltip>
```

### With align

```jsx live
<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
<Tooltip align="left" text="Supplemetary text" type="description">
<Button>Align Left</Button>
</Tooltip>
<Tooltip align="right" text="Supplemetary text" type="description">
<Button>Align Right</Button>
</Tooltip>
</Box>
```
Expand Down
93 changes: 55 additions & 38 deletions generated/components.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,44 +295,6 @@
],
"subcomponents": []
},
"tooltip": {
"id": "tooltip",
"name": "Tooltip",
"status": "alpha",
"a11yReviewed": false,
"stories": [],
"props": [
{
"name": "align",
"type": "'left' | 'right'"
},
{
"name": "direction",
"type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
"description": "Sets where the tooltip renders in relation to the target."
},
{
"name": "noDelay",
"type": "boolean",
"description": "When set to `true`, tooltip appears without any delay."
},
{
"name": "aria-label",
"type": "string",
"description": "Text used in `aria-label` (for accessibility)"
},
{
"name": "wrap",
"type": "boolean",
"description": "Use `true` to allow text within tooltip to wrap."
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": []
},
"truncate": {
"id": "truncate",
"name": "Truncate",
Expand Down Expand Up @@ -4677,6 +4639,61 @@
}
]
},
"tooltip": {
"id": "tooltip",
"name": "Tooltip",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-tooltip--default",
"code": "() => (\n <Box\n sx={{\n p: 5,\n }}\n >\n <Tooltip aria-label=\"Filter vegetarian options\" direction=\"e\">\n <Button>🥦</Button>\n </Tooltip>\n </Box>\n)"
}
],
"props": [
{
"name": "align",
"type": "'left' | 'right'"
},
{
"name": "aria-label",
"type": "string",
"description": "Should be utilised for label type tooltips and it is going to be used to label the tooltip trigger."
},
{
"name": "direction",
"type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
"defaultValue": "n",
"description": "Sets where the tooltip renders in relation to the target."
},
{
"name": "noDelay",
"type": "boolean",
"description": "When set to `true`, tooltip appears without any delay."
},
{
"name": "text",
"type": "string",
"description": "Should be utilised for description type tooltips and it is going to be used to describe the tooltip trigger."
},
{
"name": "type",
"type": "'label' | 'description'",
"defaultValue": "label",
"description": "The type of tooltip. `label` is used for labelling the element that triggers tooltip. `description` is used for describing or adding a suplementary information to the element that triggers the tooltip."
},
{
"name": "wrap",
"type": "boolean",
"description": "Use `true` to allow text within tooltip to wrap."
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": []
},
"tree_view": {
"id": "tree_view",
"name": "TreeView",
Expand Down
Loading

0 comments on commit 1588989

Please sign in to comment.