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

feat(tooltip): S2 migration #2743

Merged
merged 1 commit into from
Jul 19, 2024
Merged

feat(tooltip): S2 migration #2743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 23 additions & 0 deletions .changeset/light-years-speak.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
"@spectrum-css/tooltip": major
---

feat(tooltip): Spectrum 2 migration

This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed.

The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform.

Some custom property mods have been removed:

- `--mod-tooltip-background-color-informative`
- `--mod-tooltip-background-color-negative`
- `--mod-tooltip-background-color-positive`
- `--mod-tooltip-icon-spacing-block-start`
- `--mod-tooltip-icon-spacing-inline-end`
- `--mod-tooltip-icon-spacing-inline-start`
- `--mod-tooltip-icon-width`

And one mod has been added:

- `--mod-tooltip-tip-corner-radius`
143 changes: 39 additions & 104 deletions components/tooltip/index.css
View file
Open in desktop
marissahuysentruyt marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ governing permissions and limitations under the License.

.spectrum-Tooltip {
--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Design spec says spacing-75, I'll double-check with design and revert if needed but it doesn't sound like it differs for the large platform size.


/* override if additional spacing to source is required */
--spectrum-tooltip-margin: 0px;

--spectrum-tooltip-height: var(--spectrum-component-height-75);
--spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
--spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);

--spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
--spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
--spectrum-tooltip-border-radius: var(--spectrum-corner-radius-400);

--spectrum-tooltip-font-size: var(--spectrum-font-size-75);
marissahuysentruyt marked this conversation as resolved.
Show resolved Hide resolved
--spectrum-tooltip-line-height: var(--spectrum-line-height-100);

/* @todo set line-height using font size specific line-height tokens when they are finalized along with the new variable font. */
--spectrum-tooltip-line-height: 1.2;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is similar to button where the line-height token causes the overall height of the tooltip to be larger than the height token, so we need to adjust the line-height manually to make it work.

--spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);

Expand All @@ -38,50 +38,22 @@ governing permissions and limitations under the License.
--spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
--spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);

/* icon spacing */
--spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
--spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
--spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);

/* colors */
--spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
--spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
--spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);

--spectrum-tooltip-content-color: var(--spectrum-white);
--spectrum-tooltip-content-color: var(--spectrum-gray-25);
--spectrum-tooltip-background-color-default: var(--spectrum-neutral-background-color-default);

/* tip */
--spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
marissahuysentruyt marked this conversation as resolved.
Show resolved Hide resolved
--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);

/* Width and height of square element used to render the tip triangle. */
--spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);

/* Percentage value of height divided by width, for calculating clip-path within a square tip. */
--spectrum-tooltip-tip-height-percentage: 50%;
--spectrum-tooltip-tip-height-percentage: 100%;

/* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */
--spectrum-tooltip-tip-antialiasing-inset: 0.5px;

/* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */
--spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
--spectrum-tooltip-pointer-corner-spacing: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius));

/* neutral background changes per theme */
--spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
}

@media (forced-colors: active) {
.spectrum-Tooltip {
border: 1px solid transparent;
}

.spectrum-Tooltip-tip {
forced-color-adjust: none;
--highcontrast-tooltip-background-color-default: CanvasText;
--highcontrast-tooltip-background-color-informative: CanvasText;
--highcontrast-tooltip-background-color-positive: CanvasText;
--highcontrast-tooltip-background-color-negative: CanvasText;
}
--highcontrast-tooltip-border-width: 0px;
}

.spectrum-Tooltip {
Expand Down Expand Up @@ -129,19 +101,6 @@ governing permissions and limitations under the License.
}
}

/****** Variants ******/
.spectrum-Tooltip--info {
background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
}

.spectrum-Tooltip--positive {
background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
}

.spectrum-Tooltip--negative {
background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
}

.spectrum-Tooltip.is-open {
@extend %spectrum-overlay--open;
}
Expand All @@ -153,27 +112,17 @@ governing permissions and limitations under the License.
block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));

inset-block-start: 100%;
inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
left: 50%;
transform: translateX(-50%);
left: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))));
transform: rotate(-45deg);

background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));

/* Default: Pointing down ▽ */
clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));

.spectrum-Tooltip--info & {
background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
}
clip-path: polygon(0 0, 100% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 0 100%);

.spectrum-Tooltip--positive & {
background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
}

.spectrum-Tooltip--negative & {
background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
}
border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius));

/*** Tip Placement ***/
/* tip is horizontal at bottom pointing down ▽ */
Expand All @@ -182,7 +131,8 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--top-right &,
.spectrum-Tooltip--top-start &,
.spectrum-Tooltip--top-end & {
inset-block-start: 100%;
inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
transform: rotate(-45deg);
}

/* tip is horizontal at top pointing up △ */
Expand All @@ -191,20 +141,8 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--bottom-right &,
.spectrum-Tooltip--bottom-start &,
.spectrum-Tooltip--bottom-end & {
clip-path: polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
inset-block: auto 100%;
}

/* tip is horizontal and at the edge */
.spectrum-Tooltip--top-left &,
.spectrum-Tooltip--bottom-left &,
.spectrum-Tooltip--top-right &,
.spectrum-Tooltip--bottom-right &,
.spectrum-Tooltip--top-start &,
.spectrum-Tooltip--bottom-start &,
.spectrum-Tooltip--top-end &,
.spectrum-Tooltip--bottom-end & {
transform: none;
inset-block: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
transform: rotate(135deg);
}

/* tip is horizontal at left △ ▽ */
Expand Down Expand Up @@ -254,8 +192,7 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--end &,
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
inset-block-start: 50%;
transform: translateY(-50%);
inset-block-start: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))));
}

/* tip is vertical and at edge */
Expand All @@ -267,7 +204,6 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--start-bottom &,
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
transform: none;
inset-block-start: auto;
}

Expand All @@ -278,8 +214,8 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--end &,
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
clip-path: polygon(calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
inset-inline: auto 100%;
inset-inline: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
transform: rotate(45deg);
}

/* tip is vertical pointing ▷ right or end, for LTR. */
Expand All @@ -289,8 +225,8 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--start &,
.spectrum-Tooltip--start-top &,
.spectrum-Tooltip--start-bottom & {
clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
inset-inline-start: 100%;
inset-inline-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
transform: rotate(-135deg);
}

/* tip is vertical at top ◁ ▷ */
Expand All @@ -317,9 +253,9 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--end-top &,
.spectrum-Tooltip--end-bottom & {
&:dir(rtl) {
clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
transform: rotate(-135deg);
right: auto;
left: 100%;
left: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
}
}

Expand All @@ -331,25 +267,13 @@ governing permissions and limitations under the License.
.spectrum-Tooltip--start-top &,
.spectrum-Tooltip--start-bottom & {
&:dir(rtl) {
clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
transform: rotate(45deg);
left: auto;
right: 100%;
right: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width));
}
}
}

/****** Icon ******/
.spectrum-Tooltip-typeIcon {
/* subtract tooltip padding from icon start margin */
margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)));
margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end));
margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start));
inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width));
block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height));
align-self: flex-start;
flex-shrink: 0;
}

/****** Label ******/
.spectrum-Tooltip-label {
/* Make sure line height is correct to prevent problems in Windows */
Expand Down Expand Up @@ -647,3 +571,14 @@ governing permissions and limitations under the License.
}
}
}

@media (forced-colors: active) {
.spectrum-Tooltip {
--highcontrast-tooltip-border-width: 1px;
border: var(--highcontrast-tooltip-border-width) solid CanvasText;
}

.spectrum-Tooltip-tip {
--highcontrast-tooltip-background-color-default: CanvasText;
mdt2 marked this conversation as resolved.
Show resolved Hide resolved
}
}
55 changes: 24 additions & 31 deletions components/tooltip/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
| Modifiable custom properties |
| -------------------------------------------- |
| `--mod-overlay-animation-duration` |
| `--mod-overlay-animation-duration-opened` |
| `--mod-tooltip-animation-distance` |
| `--mod-tooltip-background-color-default` |
| `--mod-tooltip-background-color-informative` |
| `--mod-tooltip-background-color-negative` |
| `--mod-tooltip-background-color-positive` |
| `--mod-tooltip-border-radius` |
| `--mod-tooltip-cjk-line-height` |
| `--mod-tooltip-content-color` |
| `--mod-tooltip-font-size` |
| `--mod-tooltip-font-weight` |
| `--mod-tooltip-height` |
| `--mod-tooltip-icon-height` |
| `--mod-tooltip-icon-spacing-block-start` |
| `--mod-tooltip-icon-spacing-inline-end` |
| `--mod-tooltip-icon-spacing-inline-start` |
| `--mod-tooltip-icon-width` |
| `--mod-tooltip-line-height` |
| `--mod-tooltip-margin` |
| `--mod-tooltip-max-inline-size` |
| `--mod-tooltip-pointer-corner-spacing` |
| `--mod-tooltip-spacing-block-end` |
| `--mod-tooltip-spacing-block-start` |
| `--mod-tooltip-spacing-inline` |
| `--mod-tooltip-tip-antialiasing-inset` |
| `--mod-tooltip-tip-block-size` |
| `--mod-tooltip-tip-height-percentage` |
| `--mod-tooltip-tip-square-size` |
| Modifiable custom properties |
| ----------------------------------------- |
| `--mod-overlay-animation-duration` |
| `--mod-overlay-animation-duration-opened` |
| `--mod-tooltip-animation-distance` |
| `--mod-tooltip-background-color-default` |
| `--mod-tooltip-border-radius` |
| `--mod-tooltip-cjk-line-height` |
| `--mod-tooltip-content-color` |
| `--mod-tooltip-font-size` |
| `--mod-tooltip-font-weight` |
| `--mod-tooltip-height` |
| `--mod-tooltip-line-height` |
| `--mod-tooltip-margin` |
| `--mod-tooltip-max-inline-size` |
| `--mod-tooltip-pointer-corner-spacing` |
| `--mod-tooltip-spacing-block-end` |
| `--mod-tooltip-spacing-block-start` |
| `--mod-tooltip-spacing-inline` |
| `--mod-tooltip-tip-antialiasing-inset` |
| `--mod-tooltip-tip-block-size` |
| `--mod-tooltip-tip-corner-radius` |
| `--mod-tooltip-tip-height-percentage` |
| `--mod-tooltip-tip-square-size` |
20 changes: 17 additions & 3 deletions components/tooltip/metadata/tooltip.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,29 @@ sections:
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tooltip/metadata/mods.md">here</a>.
- name: Migration Guide
description: |
### Version 6.1.1
### Version 7.0.0
#### Spectrum 2 migration
This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed. The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform. Some custom property mods have been removed:
- `--mod-tooltip-background-color-informative`
- `--mod-tooltip-background-color-negative`
- `--mod-tooltip-background-color-positive`
- `--mod-tooltip-icon-spacing-block-start`
- `--mod-tooltip-icon-spacing-inline-end`
- `--mod-tooltip-icon-spacing-inline-start`
- `--mod-tooltip-icon-width`

And one mod has been added:
- `--mod-tooltip-tip-corner-radius`

### Spectrum 1 versions
#### Version 6.1.1
This patch includes tooltip placement adjustments for RTL bugs and increased coverage with Chromatic VRTs. Some clarification on placements:

- If you use a Start or End placement, the tooltip *will* change to the other side of the source when the text direction (LTR/RTL) is changed
- If you use a Left or Right placement, the tooltip *will not* change sides when text direction is changed

As a result of the placement specifications, some placements intentionally use non-logical properties in the CSS (particularly for tooltips that show on hover).

### Tooltip now has 22 directions
#### Tooltip now has 22 directions
- 10 of the new directions are logical and should be tested both left-to-right and right-to-left
examples:
- id: tooltip
Expand Down
2 changes: 1 addition & 1 deletion components/tooltip/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
],
"peerDependencies": {
"@spectrum-css/icon": ">=7",
"@spectrum-css/tokens": ">=14.0.0-next.3"
"@spectrum-css/tokens": ">=14.0.0-next.7"
},
"devDependencies": {
"@spectrum-css/commons": "^10.0.0"
Expand Down
Loading
Loading