Move tooltip to next #887
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,126 @@ | ||
| /* stylelint-disable selector-pseudo-class-no-unknown */ | ||
|
There was a problem hiding this comment. since we're here, probs worth configuring this rule to ignore There was a problem hiding this comment. Will add to |
||
|
|
||
| /*------------------------------------*\ | ||
| #TOOLTIP | ||
| \*------------------------------------*/ | ||
|
|
||
| /** | ||
| * 1) Tippyjs provides .tippy-box, which has two child elements: .tippy-content and .tippy-arrow | ||
| * 2) Tippyjs also attaches data-attribute `data-placement` depending on how the tooltip is aligned | ||
| */ | ||
|
|
||
| .tooltip { | ||
| border-style: solid; | ||
| border-width: var(--eds-border-width-sm); | ||
| border-radius: var(--eds-border-radius-lg); | ||
| box-shadow: var(--eds-theme-box-shadow); | ||
|
There was a problem hiding this comment. I think this shadow is thinner than the original shadow, but using what is available for consistency There was a problem hiding this comment. I wonder if we need a ticket for updating the tokens 🤔 There was a problem hiding this comment. I think all tokens are subject to change while design is doing discovery right now; so we can feel free to replace the values with our existing ones There was a problem hiding this comment. Sorry, to clarify, are you saying to add a token to There was a problem hiding this comment. either add a token to There was a problem hiding this comment. Ah thanks for the explanation, will update shadow token |
||
|
|
||
| @media (prefers-reduced-motion) { | ||
| transition-property: none; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 1) Enables opacity fade animation | ||
| */ | ||
| .tooltip[data-state="hidden"] { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .tooltip :global(.tippy-content) { | ||
| padding-left: var(--eds-size-2); | ||
| padding-right: var(--eds-size-2); | ||
| padding-bottom: var(--eds-size-1); | ||
| padding-top: var(--eds-size-1); | ||
| } | ||
|
|
||
| /** | ||
| * 1) Color Variants | ||
| */ | ||
| .tooltip--light { | ||
| border-color: var(--eds-color-neutral-300); | ||
| color: var(--eds-color-neutral-700); | ||
| background-color: var(--eds-color-neutral-100); | ||
| --arrow-color: var(--eds-color-neutral-300); | ||
| } | ||
|
|
||
| .tooltip--dark { | ||
| border-color: var(--eds-color-neutral-700); | ||
| color: var(--eds-color-neutral-white); | ||
| background-color: var(--eds-color-neutral-700); | ||
| --arrow-color: var(--eds-color-neutral-700); | ||
| } | ||
|
|
||
| /** | ||
| * 1) Add arrows | ||
| */ | ||
| .tooltip :global(.tippy-arrow) { | ||
| position: absolute; | ||
|
|
||
| width: var(--eds-size-2); | ||
| height: var(--eds-size-2); | ||
| } | ||
|
|
||
| .tooltip :global(.tippy-arrow::before) { | ||
| position: absolute; | ||
|
|
||
| border-style: solid; | ||
| border-color: transparent; | ||
| border-width: var(--eds-size-1); | ||
|
|
||
| content: ""; | ||
| } | ||
|
|
||
| .tooltip[data-placement^="top"] :global(.tippy-arrow) { | ||
| left: 0; | ||
|
|
||
| transform: translate3d(73px, 0, 0); | ||
| } | ||
|
|
||
| .tooltip[data-placement^="bottom"] :global(.tippy-arrow) { | ||
| top: 0; | ||
| left: 0; | ||
|
|
||
| transform: translate3d(73px, 0, 0); | ||
| } | ||
|
|
||
| .tooltip[data-placement^="left"] :global(.tippy-arrow) { | ||
| top: 0; | ||
| right: 0; | ||
|
|
||
| transform: translate3d(0, 19px, 0); | ||
| } | ||
|
|
||
| .tooltip[data-placement^="right"] :global(.tippy-arrow) { | ||
| top: 0; | ||
| left: 0; | ||
|
|
||
| transform: translate3d(0, 25px, 0); | ||
| } | ||
|
|
||
| .tooltip[data-placement^="top"] :global(.tippy-arrow::before) { | ||
| left: 0; | ||
|
|
||
| border-top-color: var(--arrow-color); | ||
| border-bottom-width: 0; | ||
| } | ||
|
|
||
| .tooltip[data-placement^="bottom"] :global(.tippy-arrow::before) { | ||
| left: 0; | ||
|
|
||
| border-bottom-color: var(--arrow-color); | ||
| border-top-width: 0; | ||
| top: -7px; | ||
| } | ||
|
|
||
| .tooltip[data-placement^="left"] :global(.tippy-arrow::before) { | ||
| border-left-color: var(--arrow-color); | ||
| border-right-width: 0; | ||
| right: -7px; | ||
| } | ||
|
|
||
| .tooltip[data-placement^="right"] :global(.tippy-arrow::before) { | ||
| border-right-color: var(--arrow-color); | ||
| border-left-width: 0; | ||
| left: -7px; | ||
| } | ||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,29 @@ | ||||||
| /*------------------------------------*\ | ||||||
| #TOOLTIP STORIES | ||||||
| \*------------------------------------*/ | ||||||
|
|
||||||
| /** | ||||||
| * 1) Spacing is required for the Tooltip to be placed where alignment is indicated, | ||||||
| * otherwise Tippy will place somewhere else due to lack of space | ||||||
| */ | ||||||
|
|
||||||
| .trigger--spacing { | ||||||
| margin: 9rem; | ||||||
|
There was a problem hiding this comment. Weird number but it's appropriate required for the tooltip to place where alignment is indicated, otherwise Tippy places somewhere else due to lack of space There was a problem hiding this comment. Maybe leave that in a comment? There was a problem hiding this comment. Sounds good, added comment There was a problem hiding this comment. let's also do the footnote commenting thing brad had, i.e.:
Suggested change
to note that this specific line is connected to the 1) comment above |
||||||
| } | ||||||
|
|
||||||
| .trigger--spacing-top { | ||||||
| margin-top: 9rem; | ||||||
| } | ||||||
| .trigger--spacing-bottom { | ||||||
| margin-bottom: 9rem; | ||||||
| } | ||||||
| .trigger--spacing-left { | ||||||
| margin-left: 9rem; | ||||||
| } | ||||||
| .trigger--spacing-right { | ||||||
| margin-right: 9rem; | ||||||
| } | ||||||
|
|
||||||
| .trigger--spacing-left-large { | ||||||
| margin-left: 24rem; | ||||||
| } | ||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wow thanks for all the spelling updates! ❤️
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I somehow feel like this was some sort of test and you passed.