Skip to content

Commit

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

This reverts commit 1588989.
  • Loading branch information
@broccolinisoup
broccolinisoup committed Apr 13, 2023
1 parent 11182c4 commit 23bf788
Show file tree
Hide file tree
Showing 17 changed files with 1,940 additions and 850 deletions.
5 changes: 0 additions & 5 deletions .changeset/flat-drinks-retire.md
View file

This file was deleted.

83 changes: 4 additions & 79 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/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
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
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

0 comments on commit 23bf788

Please sign in to comment.