From 7ad2a86dd014ee0b08db1d15243800bd1545d31c Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Thu, 21 Dec 2023 10:57:44 +1000 Subject: [PATCH 1/5] Use Tooltip 2 for TextInput.Action --- src/internal/components/TextInputInnerAction.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/internal/components/TextInputInnerAction.tsx b/src/internal/components/TextInputInnerAction.tsx index 2e634651069..9d5b651345c 100644 --- a/src/internal/components/TextInputInnerAction.tsx +++ b/src/internal/components/TextInputInnerAction.tsx @@ -2,7 +2,7 @@ import React, {forwardRef} from 'react' import {IconProps} from '@primer/octicons-react' import Box from '../../Box' import {Button, IconButton, ButtonProps} from '../../Button' -import Tooltip from '../../Tooltip/Tooltip' +import {Tooltip} from '../../drafts/Tooltip' import {BetterSystemStyleObject, merge, SxProp} from '../../sx' type TextInputActionProps = Omit< @@ -59,7 +59,7 @@ const ConditionalTooltip: React.FC< <> {ariaLabel ? ( ( return ( {icon && !children ? ( - + Date: Thu, 21 Dec 2023 10:59:35 +1000 Subject: [PATCH 2/5] add changeset --- .changeset/wet-geckos-accept.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-geckos-accept.md diff --git a/.changeset/wet-geckos-accept.md b/.changeset/wet-geckos-accept.md new file mode 100644 index 00000000000..d6f616665ed --- /dev/null +++ b/.changeset/wet-geckos-accept.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +TextInput: Update TextInput.Action internal component to use Tooltip v2 From 03773e6b366e7550b4d88c1bc8d8fc63ef01e590 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Thu, 21 Dec 2023 11:12:10 +1000 Subject: [PATCH 3/5] snaps and update default direction --- src/TextInput/TextInput.docs.json | 2 +- .../__snapshots__/TextInput.test.tsx.snap | 978 +++++++----------- 2 files changed, 385 insertions(+), 595 deletions(-) diff --git a/src/TextInput/TextInput.docs.json b/src/TextInput/TextInput.docs.json index d83d646bf62..b7fc78aa30a 100644 --- a/src/TextInput/TextInput.docs.json +++ b/src/TextInput/TextInput.docs.json @@ -128,7 +128,7 @@ { "name": "tooltipDirection", "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", - "defaultValue": "n", + "defaultValue": "s", "description": "Sets where the tooltip renders in relation to the target." }, { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 0df3975bf7b..ece5e01c079 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1696,7 +1696,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` line-height: 0; } -.c5 { +.c4 { border-radius: 6px; border: 1px solid; border-color: transparent; @@ -1741,65 +1741,65 @@ exports[`TextInput renders trailingAction icon button 1`] = ` box-shadow: none; } -.c5:focus:not(:disabled) { +.c4:focus:not(:disabled) { box-shadow: none; outline: 2px solid #0969da; outline-offset: -2px; } -.c5:focus:not(:disabled):not(:focus-visible) { +.c4:focus:not(:disabled):not(:focus-visible) { outline: solid 1px transparent; } -.c5:focus-visible:not(:disabled) { +.c4:focus-visible:not(:disabled) { box-shadow: none; outline: 2px solid #0969da; outline-offset: -2px; } -.c5[href] { +.c4[href] { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c5[href]:hover { +.c4[href]:hover { -webkit-text-decoration: none; text-decoration: none; } -.c5:hover { +.c4:hover { -webkit-transition-duration: 80ms; transition-duration: 80ms; } -.c5:active { +.c4:active { -webkit-transition: none; transition: none; } -.c5[data-inactive] { +.c4[data-inactive] { cursor: auto; } -.c5:disabled { +.c4:disabled { cursor: not-allowed; box-shadow: none; color: #8c959f; } -.c5:disabled [data-component=ButtonCounter], -.c5:disabled [data-component="leadingVisual"], -.c5:disabled [data-component="trailingAction"] { +.c4:disabled [data-component=ButtonCounter], +.c4:disabled [data-component="leadingVisual"], +.c4:disabled [data-component="trailingAction"] { color: inherit; } -.c5 [data-component=ButtonCounter] { +.c4 [data-component=ButtonCounter] { font-size: 12px; } -.c5[data-component=IconButton] { +.c4[data-component=IconButton] { display: inline-grid; padding: unset; place-content: center; @@ -1807,80 +1807,80 @@ exports[`TextInput renders trailingAction icon button 1`] = ` min-width: unset; } -.c5[data-size="small"] { +.c4[data-size="small"] { padding: 0 8px; height: 28px; gap: 4px; font-size: 12px; } -.c5[data-size="small"] [data-component="text"] { +.c4[data-size="small"] [data-component="text"] { line-height: calc(20 / 12); } -.c5[data-size="small"] [data-component=ButtonCounter] { +.c4[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; } -.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { +.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { margin-right: 4px; } -.c5[data-size="small"][data-component=IconButton] { +.c4[data-size="small"][data-component=IconButton] { width: 28px; padding: unset; } -.c5[data-size="large"] { +.c4[data-size="large"] { padding: 0 16px; height: 40px; gap: 8px; } -.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { +.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { margin-right: 8px; } -.c5[data-size="large"][data-component=IconButton] { +.c4[data-size="large"][data-component=IconButton] { width: 40px; padding: unset; } -.c5[data-block="block"] { +.c4[data-block="block"] { width: 100%; } -.c5[data-inactive]:not([disabled]) { +.c4[data-inactive]:not([disabled]) { background-color: var(--button-inactive-bgColor,#eaeef2); border-color: var(--button-inactive-bgColor,#eaeef2); color: var(--button-inactive-fgColor,#57606a); } -.c5[data-inactive]:not([disabled]):focus-visible { +.c4[data-inactive]:not([disabled]):focus-visible { box-shadow: none; } -.c5 [data-component="leadingVisual"] { +.c4 [data-component="leadingVisual"] { grid-area: leadingVisual; color: #656d76; } -.c5 [data-component="text"] { +.c4 [data-component="text"] { grid-area: text; line-height: calc(20/14); white-space: nowrap; } -.c5 [data-component="trailingVisual"] { +.c4 [data-component="trailingVisual"] { grid-area: trailingVisual; } -.c5 [data-component="trailingAction"] { +.c4 [data-component="trailingAction"] { margin-right: -4px; color: #656d76; } -.c5 [data-component="buttonContent"] { +.c4 [data-component="buttonContent"] { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; @@ -1896,43 +1896,43 @@ exports[`TextInput renders trailingAction icon button 1`] = ` align-content: center; } -.c5 [data-component="buttonContent"] > :not(:last-child) { +.c4 [data-component="buttonContent"] > :not(:last-child) { margin-right: 8px; } -.c5:hover:not([disabled]) { +.c4:hover:not([disabled]) { background-color: rgba(208,215,222,0.32); } -.c5:active:not([disabled]) { +.c4:active:not([disabled]) { background-color: rgba(208,215,222,0.48); } -.c5[aria-expanded=true] { +.c4[aria-expanded=true] { background-color: rgba(208,215,222,0.24); } -.c5[data-component="IconButton"][data-no-visuals] { +.c4[data-component="IconButton"][data-no-visuals] { color: #656d76; } -.c5[data-no-visuals] { +.c4[data-no-visuals] { color: #0969da; } -.c5:has([data-component="ButtonCounter"]) { +.c4:has([data-component="ButtonCounter"]) { color: #24292f; } -.c5:disabled[data-no-visuals] { +.c4:disabled[data-no-visuals] { color: #8c959f; } -.c5:disabled[data-no-visuals] [data-component=ButtonCounter] { +.c4:disabled[data-no-visuals] [data-component=ButtonCounter] { color: inherit; } -.c5[data-size="small"][data-no-visuals] { +.c4[data-size="small"][data-no-visuals] { padding-top: 2px; padding-right: 4px; padding-bottom: 2px; @@ -1940,11 +1940,116 @@ exports[`TextInput renders trailingAction icon button 1`] = ` position: relative; } -.c5[data-size="small"][data-no-visuals][data-component="IconButton"] { +.c4[data-size="small"][data-no-visuals][data-component="IconButton"] { width: var(--inner-action-size); height: var(--inner-action-size); } +.c5 { + display: none; +} + +.c5[popover] { + padding: 0.5em 0.75em; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + margin: auto; + -webkit-clip: auto; + clip: auto; + white-space: normal; + font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + -webkit-font-smoothing: subpixel-antialiased; + color: #ffffff; + text-align: center; + word-wrap: break-word; + background: #24292f; + border-radius: 6px; + border: 0; + opacity: 0; + max-width: 250px; + inset: auto; + overflow: visible; +} + +.c5[popover]:popover-open { + display: block; +} + +.c5[popover].\\:popover-open { + display: block; +} + +.c5::after { + position: absolute; + display: block; + right: 0; + left: 0; + height: 8px; + content: ''; +} + +.c5[data-direction='n']::after, +.c5[data-direction='ne']::after, +.c5[data-direction='nw']::after { + top: 100%; +} + +.c5[data-direction='s']::after, +.c5[data-direction='se']::after, +.c5[data-direction='sw']::after { + bottom: 100%; +} + +.c5[data-direction='w']::after { + position: absolute; + display: block; + height: 100%; + width: 8px; + content: ''; + bottom: 0; + left: 100%; +} + +.c5[data-direction='e']::after { + position: absolute; + display: block; + height: 100%; + width: 8px; + content: ''; + bottom: 0; + right: 100%; + margin-left: -8px; +} + +.c5:popover-open, +.c5:popover-open::before { + -webkit-animation-name: tooltip-appear; + animation-name: tooltip-appear; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} + +.c5.\\:popover-open, +.c5.\\:popover-open::before { + -webkit-animation-name: tooltip-appear; + animation-name: tooltip-appear; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2024,231 +2129,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` padding-right: 0; } -.c4 { - position: relative; - display: inline-block; -} - -.c4::before { - position: absolute; - z-index: 1000001; - display: none; - width: 0px; - height: 0px; - color: #24292f; - pointer-events: none; - content: ''; - border: 6px solid transparent; - opacity: 0; -} - -.c4::after { - position: absolute; - z-index: 1000000; - display: none; - padding: 0.5em 0.75em; - font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - -webkit-font-smoothing: subpixel-antialiased; - color: #ffffff; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - text-shadow: none; - text-transform: none; - -webkit-letter-spacing: normal; - -moz-letter-spacing: normal; - -ms-letter-spacing: normal; - letter-spacing: normal; - word-wrap: break-word; - white-space: pre; - pointer-events: none; - content: attr(aria-label); - background: #24292f; - border-radius: 3px; - opacity: 0; -} - -.c4:hover::before, -.c4:active::before, -.c4:focus::before, -.c4:focus-within::before, -.c4:hover::after, -.c4:active::after, -.c4:focus::after, -.c4:focus-within::after { - display: inline-block; - -webkit-text-decoration: none; - text-decoration: none; - -webkit-animation-name: tooltip-appear; - animation-name: tooltip-appear; - -webkit-animation-duration: 0.1s; - animation-duration: 0.1s; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; -} - -.c4.tooltipped-no-delay:hover::before, -.c4.tooltipped-no-delay:active::before, -.c4.tooltipped-no-delay:focus::before, -.c4.tooltipped-no-delay:focus-within::before, -.c4.tooltipped-no-delay:hover::after, -.c4.tooltipped-no-delay:active::after, -.c4.tooltipped-no-delay:focus::after, -.c4.tooltipped-no-delay:focus-within::after { - -webkit-animation-delay: 0s; - animation-delay: 0s; -} - -.c4.tooltipped-multiline:hover::after, -.c4.tooltipped-multiline:active::after, -.c4.tooltipped-multiline:focus::after, -.c4.tooltipped-multiline:focus-within::after { - display: table-cell; -} - -.c4.tooltipped-s::after, -.c4.tooltipped-se::after, -.c4.tooltipped-sw::after { - top: 100%; - right: 50%; - margin-top: 6px; -} - -.c4.tooltipped-s::before, -.c4.tooltipped-se::before, -.c4.tooltipped-sw::before { - top: auto; - right: 50%; - bottom: -7px; - margin-right: -6px; - border-bottom-color: #24292f; -} - -.c4.tooltipped-se::after { - right: auto; - left: 50%; - margin-left: -16px; -} - -.c4.tooltipped-sw::after { - margin-right: -16px; -} - -.c4.tooltipped-n::after, -.c4.tooltipped-ne::after, -.c4.tooltipped-nw::after { - right: 50%; - bottom: 100%; - margin-bottom: 6px; -} - -.c4.tooltipped-n::before, -.c4.tooltipped-ne::before, -.c4.tooltipped-nw::before { - top: -7px; - right: 50%; - bottom: auto; - margin-right: -6px; - border-top-color: #24292f; -} - -.c4.tooltipped-ne::after { - right: auto; - left: 50%; - margin-left: -16px; -} - -.c4.tooltipped-nw::after { - margin-right: -16px; -} - -.c4.tooltipped-s::after, -.c4.tooltipped-n::after { - -webkit-transform: translateX(50%); - -ms-transform: translateX(50%); - transform: translateX(50%); -} - -.c4.tooltipped-w::after { - right: 100%; - bottom: 50%; - margin-right: 6px; - -webkit-transform: translateY(50%); - -ms-transform: translateY(50%); - transform: translateY(50%); -} - -.c4.tooltipped-w::before { - top: 50%; - bottom: 50%; - left: -7px; - margin-top: -6px; - border-left-color: #24292f; -} - -.c4.tooltipped-e::after { - bottom: 50%; - left: 100%; - margin-left: 6px; - -webkit-transform: translateY(50%); - -ms-transform: translateY(50%); - transform: translateY(50%); -} - -.c4.tooltipped-e::before { - top: 50%; - right: -7px; - bottom: 50%; - margin-top: -6px; - border-right-color: #24292f; -} - -.c4.tooltipped-multiline::after { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - max-width: 250px; - word-wrap: break-word; - white-space: pre-line; - border-collapse: separate; -} - -.c4.tooltipped-multiline.tooltipped-s::after, -.c4.tooltipped-multiline.tooltipped-n::after { - right: auto; - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); -} - -.c4.tooltipped-multiline.tooltipped-w::after, -.c4.tooltipped-multiline.tooltipped-e::after { - right: 100%; -} - -.c4.tooltipped-align-right-2::after { - right: 0; - margin-right: 0; -} - -.c4.tooltipped-align-right-2::before { - right: 15px; -} - -.c4.tooltipped-align-left-2::after { - left: 0; - margin-left: 0; -} - -.c4.tooltipped-align-left-2::before { - left: 10px; -} - .c2 { border: 0; font-size: inherit; @@ -2264,13 +2144,13 @@ exports[`TextInput renders trailingAction icon button 1`] = ` } @media (forced-colors:active) { - .c5:focus { + .c4:focus { outline: solid 1px transparent; } } @media (pointer:coarse) { - .c5[data-size="small"][data-no-visuals]:after { + .c4[data-size="small"][data-no-visuals]:after { content: ""; position: absolute; left: 0; @@ -2283,6 +2163,12 @@ exports[`TextInput renders trailingAction icon button 1`] = ` } } +@media (forced-colors:active) { + .c5 { + outline: 1px solid transparent; + } +} + @media (min-width:768px) { .c0 { font-size: 14px; @@ -2306,45 +2192,54 @@ exports[`TextInput renders trailingAction icon button 1`] = ` - - - + } + viewBox="0 0 16 16" + width={16} + > + + + +
+ Icon label +
`; @@ -2775,14 +2670,14 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` line-height: 0; } -.c6 { +.c5 { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } -.c5 { +.c4 { border-radius: 6px; border: 1px solid; border-color: transparent; @@ -2827,65 +2722,65 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` box-shadow: none; } -.c5:focus:not(:disabled) { +.c4:focus:not(:disabled) { box-shadow: none; outline: 2px solid #0969da; outline-offset: -2px; } -.c5:focus:not(:disabled):not(:focus-visible) { +.c4:focus:not(:disabled):not(:focus-visible) { outline: solid 1px transparent; } -.c5:focus-visible:not(:disabled) { +.c4:focus-visible:not(:disabled) { box-shadow: none; outline: 2px solid #0969da; outline-offset: -2px; } -.c5[href] { +.c4[href] { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c5[href]:hover { +.c4[href]:hover { -webkit-text-decoration: none; text-decoration: none; } -.c5:hover { +.c4:hover { -webkit-transition-duration: 80ms; transition-duration: 80ms; } -.c5:active { +.c4:active { -webkit-transition: none; transition: none; } -.c5[data-inactive] { +.c4[data-inactive] { cursor: auto; } -.c5:disabled { +.c4:disabled { cursor: not-allowed; box-shadow: none; color: #8c959f; } -.c5:disabled [data-component=ButtonCounter], -.c5:disabled [data-component="leadingVisual"], -.c5:disabled [data-component="trailingAction"] { +.c4:disabled [data-component=ButtonCounter], +.c4:disabled [data-component="leadingVisual"], +.c4:disabled [data-component="trailingAction"] { color: inherit; } -.c5 [data-component=ButtonCounter] { +.c4 [data-component=ButtonCounter] { font-size: 12px; } -.c5[data-component=IconButton] { +.c4[data-component=IconButton] { display: inline-grid; padding: unset; place-content: center; @@ -2893,80 +2788,80 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` min-width: unset; } -.c5[data-size="small"] { +.c4[data-size="small"] { padding: 0 8px; height: 28px; gap: 4px; font-size: 12px; } -.c5[data-size="small"] [data-component="text"] { +.c4[data-size="small"] [data-component="text"] { line-height: calc(20 / 12); } -.c5[data-size="small"] [data-component=ButtonCounter] { +.c4[data-size="small"] [data-component=ButtonCounter] { font-size: 12px; } -.c5[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { +.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { margin-right: 4px; } -.c5[data-size="small"][data-component=IconButton] { +.c4[data-size="small"][data-component=IconButton] { width: 28px; padding: unset; } -.c5[data-size="large"] { +.c4[data-size="large"] { padding: 0 16px; height: 40px; gap: 8px; } -.c5[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { +.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { margin-right: 8px; } -.c5[data-size="large"][data-component=IconButton] { +.c4[data-size="large"][data-component=IconButton] { width: 40px; padding: unset; } -.c5[data-block="block"] { +.c4[data-block="block"] { width: 100%; } -.c5[data-inactive]:not([disabled]) { +.c4[data-inactive]:not([disabled]) { background-color: var(--button-inactive-bgColor,#eaeef2); border-color: var(--button-inactive-bgColor,#eaeef2); color: var(--button-inactive-fgColor,#57606a); } -.c5[data-inactive]:not([disabled]):focus-visible { +.c4[data-inactive]:not([disabled]):focus-visible { box-shadow: none; } -.c5 [data-component="leadingVisual"] { +.c4 [data-component="leadingVisual"] { grid-area: leadingVisual; color: #656d76; } -.c5 [data-component="text"] { +.c4 [data-component="text"] { grid-area: text; line-height: calc(20/14); white-space: nowrap; } -.c5 [data-component="trailingVisual"] { +.c4 [data-component="trailingVisual"] { grid-area: trailingVisual; } -.c5 [data-component="trailingAction"] { +.c4 [data-component="trailingAction"] { margin-right: -4px; color: #656d76; } -.c5 [data-component="buttonContent"] { +.c4 [data-component="buttonContent"] { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; @@ -2982,27 +2877,27 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` align-content: center; } -.c5 [data-component="buttonContent"] > :not(:last-child) { +.c4 [data-component="buttonContent"] > :not(:last-child) { margin-right: 8px; } -.c5:hover:not([disabled]) { +.c4:hover:not([disabled]) { background-color: rgba(208,215,222,0.32); } -.c5:active:not([disabled]) { +.c4:active:not([disabled]) { background-color: rgba(208,215,222,0.48); } -.c5[aria-expanded=true] { +.c4[aria-expanded=true] { background-color: rgba(208,215,222,0.24); } -.c5[data-component="IconButton"][data-no-visuals] { +.c4[data-component="IconButton"][data-no-visuals] { color: #656d76; } -.c5[data-no-visuals] { +.c4[data-no-visuals] { color: #0969da; padding-top: 2px; padding-right: 4px; @@ -3011,23 +2906,129 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` position: relative; } -.c5[data-no-visuals][data-component="IconButton"] { +.c4[data-no-visuals][data-component="IconButton"] { width: var(--inner-action-size); height: var(--inner-action-size); } -.c5:has([data-component="ButtonCounter"]) { +.c4:has([data-component="ButtonCounter"]) { color: #24292f; } -.c5:disabled[data-no-visuals] { +.c4:disabled[data-no-visuals] { color: #8c959f; } -.c5:disabled[data-no-visuals] [data-component=ButtonCounter] { +.c4:disabled[data-no-visuals] [data-component=ButtonCounter] { color: inherit; } +.c6 { + display: none; + display: inline-block; +} + +.c6[popover] { + padding: 0.5em 0.75em; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + margin: auto; + -webkit-clip: auto; + clip: auto; + white-space: normal; + font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + -webkit-font-smoothing: subpixel-antialiased; + color: #ffffff; + text-align: center; + word-wrap: break-word; + background: #24292f; + border-radius: 6px; + border: 0; + opacity: 0; + max-width: 250px; + inset: auto; + overflow: visible; +} + +.c6[popover]:popover-open { + display: block; +} + +.c6[popover].\\:popover-open { + display: block; +} + +.c6::after { + position: absolute; + display: block; + right: 0; + left: 0; + height: 8px; + content: ''; +} + +.c6[data-direction='n']::after, +.c6[data-direction='ne']::after, +.c6[data-direction='nw']::after { + top: 100%; +} + +.c6[data-direction='s']::after, +.c6[data-direction='se']::after, +.c6[data-direction='sw']::after { + bottom: 100%; +} + +.c6[data-direction='w']::after { + position: absolute; + display: block; + height: 100%; + width: 8px; + content: ''; + bottom: 0; + left: 100%; +} + +.c6[data-direction='e']::after { + position: absolute; + display: block; + height: 100%; + width: 8px; + content: ''; + bottom: 0; + right: 100%; + margin-left: -8px; +} + +.c6:popover-open, +.c6:popover-open::before { + -webkit-animation-name: tooltip-appear; + animation-name: tooltip-appear; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} + +.c6.\\:popover-open, +.c6.\\:popover-open::before { + -webkit-animation-name: tooltip-appear; + animation-name: tooltip-appear; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3107,232 +3108,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` padding-right: 0; } -.c4 { - position: relative; - display: inline-block; - display: inline-block; -} - -.c4::before { - position: absolute; - z-index: 1000001; - display: none; - width: 0px; - height: 0px; - color: #24292f; - pointer-events: none; - content: ''; - border: 6px solid transparent; - opacity: 0; -} - -.c4::after { - position: absolute; - z-index: 1000000; - display: none; - padding: 0.5em 0.75em; - font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - -webkit-font-smoothing: subpixel-antialiased; - color: #ffffff; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - text-shadow: none; - text-transform: none; - -webkit-letter-spacing: normal; - -moz-letter-spacing: normal; - -ms-letter-spacing: normal; - letter-spacing: normal; - word-wrap: break-word; - white-space: pre; - pointer-events: none; - content: attr(aria-label); - background: #24292f; - border-radius: 3px; - opacity: 0; -} - -.c4:hover::before, -.c4:active::before, -.c4:focus::before, -.c4:focus-within::before, -.c4:hover::after, -.c4:active::after, -.c4:focus::after, -.c4:focus-within::after { - display: inline-block; - -webkit-text-decoration: none; - text-decoration: none; - -webkit-animation-name: tooltip-appear; - animation-name: tooltip-appear; - -webkit-animation-duration: 0.1s; - animation-duration: 0.1s; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; -} - -.c4.tooltipped-no-delay:hover::before, -.c4.tooltipped-no-delay:active::before, -.c4.tooltipped-no-delay:focus::before, -.c4.tooltipped-no-delay:focus-within::before, -.c4.tooltipped-no-delay:hover::after, -.c4.tooltipped-no-delay:active::after, -.c4.tooltipped-no-delay:focus::after, -.c4.tooltipped-no-delay:focus-within::after { - -webkit-animation-delay: 0s; - animation-delay: 0s; -} - -.c4.tooltipped-multiline:hover::after, -.c4.tooltipped-multiline:active::after, -.c4.tooltipped-multiline:focus::after, -.c4.tooltipped-multiline:focus-within::after { - display: table-cell; -} - -.c4.tooltipped-s::after, -.c4.tooltipped-se::after, -.c4.tooltipped-sw::after { - top: 100%; - right: 50%; - margin-top: 6px; -} - -.c4.tooltipped-s::before, -.c4.tooltipped-se::before, -.c4.tooltipped-sw::before { - top: auto; - right: 50%; - bottom: -7px; - margin-right: -6px; - border-bottom-color: #24292f; -} - -.c4.tooltipped-se::after { - right: auto; - left: 50%; - margin-left: -16px; -} - -.c4.tooltipped-sw::after { - margin-right: -16px; -} - -.c4.tooltipped-n::after, -.c4.tooltipped-ne::after, -.c4.tooltipped-nw::after { - right: 50%; - bottom: 100%; - margin-bottom: 6px; -} - -.c4.tooltipped-n::before, -.c4.tooltipped-ne::before, -.c4.tooltipped-nw::before { - top: -7px; - right: 50%; - bottom: auto; - margin-right: -6px; - border-top-color: #24292f; -} - -.c4.tooltipped-ne::after { - right: auto; - left: 50%; - margin-left: -16px; -} - -.c4.tooltipped-nw::after { - margin-right: -16px; -} - -.c4.tooltipped-s::after, -.c4.tooltipped-n::after { - -webkit-transform: translateX(50%); - -ms-transform: translateX(50%); - transform: translateX(50%); -} - -.c4.tooltipped-w::after { - right: 100%; - bottom: 50%; - margin-right: 6px; - -webkit-transform: translateY(50%); - -ms-transform: translateY(50%); - transform: translateY(50%); -} - -.c4.tooltipped-w::before { - top: 50%; - bottom: 50%; - left: -7px; - margin-top: -6px; - border-left-color: #24292f; -} - -.c4.tooltipped-e::after { - bottom: 50%; - left: 100%; - margin-left: 6px; - -webkit-transform: translateY(50%); - -ms-transform: translateY(50%); - transform: translateY(50%); -} - -.c4.tooltipped-e::before { - top: 50%; - right: -7px; - bottom: 50%; - margin-top: -6px; - border-right-color: #24292f; -} - -.c4.tooltipped-multiline::after { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - max-width: 250px; - word-wrap: break-word; - white-space: pre-line; - border-collapse: separate; -} - -.c4.tooltipped-multiline.tooltipped-s::after, -.c4.tooltipped-multiline.tooltipped-n::after { - right: auto; - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); -} - -.c4.tooltipped-multiline.tooltipped-w::after, -.c4.tooltipped-multiline.tooltipped-e::after { - right: 100%; -} - -.c4.tooltipped-align-right-2::after { - right: 0; - margin-right: 0; -} - -.c4.tooltipped-align-right-2::before { - right: 15px; -} - -.c4.tooltipped-align-left-2::after { - left: 0; - margin-left: 0; -} - -.c4.tooltipped-align-left-2::before { - left: 10px; -} - .c2 { border: 0; font-size: inherit; @@ -3348,13 +3123,13 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` } @media (forced-colors:active) { - .c5:focus { + .c4:focus { outline: solid 1px transparent; } } @media (pointer:coarse) { - .c5[data-no-visuals]:after { + .c4[data-no-visuals]:after { content: ""; position: absolute; left: 0; @@ -3367,6 +3142,12 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` } } +@media (forced-colors:active) { + .c6 { + outline: 1px solid transparent; + } +} + @media (min-width:768px) { .c0 { font-size: 14px; @@ -3390,31 +3171,40 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` - - - + + + `; From f0a40f6aec587fc701f8ccd3ffaa9956ab940900 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Fri, 22 Dec 2023 11:32:02 +1000 Subject: [PATCH 4/5] update tooltip direction and type casting --- src/TextInput/TextInput.features.stories.tsx | 2 -- src/internal/components/TextInputInnerAction.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/TextInput/TextInput.features.stories.tsx b/src/TextInput/TextInput.features.stories.tsx index 765c6210551..a31da365695 100644 --- a/src/TextInput/TextInput.features.stories.tsx +++ b/src/TextInput/TextInput.features.stories.tsx @@ -164,8 +164,6 @@ export const WithTooltipDirection = () => { setValue('') }} icon={XCircleFillIcon} - aria-label="Clear input" - tooltipDirection="nw" sx={{color: 'fg.subtle'}} /> } diff --git a/src/internal/components/TextInputInnerAction.tsx b/src/internal/components/TextInputInnerAction.tsx index 9d5b651345c..e8dd69aff37 100644 --- a/src/internal/components/TextInputInnerAction.tsx +++ b/src/internal/components/TextInputInnerAction.tsx @@ -93,7 +93,7 @@ const TextInputAction = forwardRef( return ( {icon && !children ? ( - + Date: Mon, 15 Jan 2024 11:17:33 +1000 Subject: [PATCH 5/5] accidently removed - bring it back --- src/TextInput/TextInput.features.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/TextInput/TextInput.features.stories.tsx b/src/TextInput/TextInput.features.stories.tsx index a31da365695..765c6210551 100644 --- a/src/TextInput/TextInput.features.stories.tsx +++ b/src/TextInput/TextInput.features.stories.tsx @@ -164,6 +164,8 @@ export const WithTooltipDirection = () => { setValue('') }} icon={XCircleFillIcon} + aria-label="Clear input" + tooltipDirection="nw" sx={{color: 'fg.subtle'}} /> }