feat(tooltip): S2 migration #2743
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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); | ||
rise-erpelding marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| /* 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-400); | ||
|
|
||
| --spectrum-tooltip-font-size: var(--spectrum-font-size-75); | ||
marissahuysentruyt marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| /* @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; | ||
|
There was a problem hiding this comment. 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); | ||
|
|
||
|
|
@@ -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); | ||
|
|
||
| --spectrum-tooltip-content-color: var(--spectrum-gray-25); | ||
| --spectrum-tooltip-background-color-default: var(--spectrum-neutral-background-color-default); | ||
|
|
||
| /* tip */ | ||
marissahuysentruyt marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); | ||
|
|
||
| /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ | ||
| --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(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); | ||
|
|
||
| --highcontrast-tooltip-border-width: 0px; | ||
| } | ||
|
|
||
| .spectrum-Tooltip { | ||
|
|
@@ -129,19 +101,6 @@ governing permissions and limitations under the License. | |
| } | ||
| } | ||
|
|
||
| .spectrum-Tooltip.is-open { | ||
| @extend %spectrum-overlay--open; | ||
| } | ||
|
|
@@ -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: 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: 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 0, 100% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 0 100%); | ||
|
|
||
| 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 ▽ */ | ||
|
|
@@ -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: 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 △ */ | ||
|
|
@@ -191,20 +141,8 @@ governing permissions and limitations under the License. | |
| .spectrum-Tooltip--bottom-right &, | ||
| .spectrum-Tooltip--bottom-start &, | ||
| .spectrum-Tooltip--bottom-end & { | ||
| 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 △ ▽ */ | ||
|
|
@@ -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: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); | ||
| } | ||
|
|
||
| /* tip is vertical and at edge */ | ||
|
|
@@ -267,7 +204,6 @@ governing permissions and limitations under the License. | |
| .spectrum-Tooltip--start-bottom &, | ||
| .spectrum-Tooltip--end-top &, | ||
| .spectrum-Tooltip--end-bottom & { | ||
| inset-block-start: auto; | ||
| } | ||
|
|
||
|
|
@@ -278,8 +214,8 @@ governing permissions and limitations under the License. | |
| .spectrum-Tooltip--end &, | ||
| .spectrum-Tooltip--end-top &, | ||
| .spectrum-Tooltip--end-bottom & { | ||
| 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. */ | ||
|
|
@@ -289,8 +225,8 @@ governing permissions and limitations under the License. | |
| .spectrum-Tooltip--start &, | ||
| .spectrum-Tooltip--start-top &, | ||
| .spectrum-Tooltip--start-bottom & { | ||
| 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 ◁ ▷ */ | ||
|
|
@@ -317,9 +253,9 @@ governing permissions and limitations under the License. | |
| .spectrum-Tooltip--end-top &, | ||
| .spectrum-Tooltip--end-bottom & { | ||
| &:dir(rtl) { | ||
| transform: rotate(-135deg); | ||
| right: auto; | ||
| 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)); | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -331,25 +267,13 @@ governing permissions and limitations under the License. | |
| .spectrum-Tooltip--start-top &, | ||
| .spectrum-Tooltip--start-bottom & { | ||
| &:dir(rtl) { | ||
| transform: rotate(45deg); | ||
| left: auto; | ||
| 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)); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /****** Label ******/ | ||
| .spectrum-Tooltip-label { | ||
| /* Make sure line height is correct to prevent problems in Windows */ | ||
|
|
@@ -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
|
||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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-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` | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.