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

Tooltip: Revert tooltip remediations until resolving breaking changes at dotcom #3169

Merged
merged 2 commits into from
Apr 17, 2023
Merged

Tooltip: Revert tooltip remediations until resolving breaking changes at dotcom #3169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11182c4
Revert "fix(Tooltip): update TypeScript types for TooltipProps (#3159)"
broccolinisoup Apr 13, 2023
23bf788
Revert "Tooltip: Update the component markup for a11y remediations & …
broccolinisoup Apr 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions .changeset/dirty-files-talk.md
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/flat-drinks-retire.md
View file
Open in desktop

This file was deleted.

83 changes: 4 additions & 79 deletions docs/content/Tooltip.mdx
View file
Open in desktop
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/Tooltip.docs.json'
import data from '../../src/Tooltip.docs.json'

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

Expand All @@ -20,85 +20,10 @@ 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 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>
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
<Tooltip aria-label="Hello, Tooltip!">
<Button>Hover me</Button>
</Tooltip>
</Box>
```
Expand Down
93 changes: 38 additions & 55 deletions generated/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,44 @@
],
"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 @@ -4644,61 +4682,6 @@
}
]
},
"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
16 changes: 2 additions & 14 deletions src/Tooltip/Tooltip.docs.json → src/Tooltip.docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,9 @@
"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."
},
{
Expand All @@ -26,15 +20,9 @@
"description": "When set to `true`, tooltip appears without any delay."
},
{
"name": "text",
"name": "aria-label",
"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."
"description": "Text used in `aria-label` (for accessibility)"
},
{
"name": "wrap",
Expand Down
Loading