From 7cdf9421ab3fe393d8544c5744660275b1958481 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Fri, 6 Oct 2023 12:13:24 -0700 Subject: [PATCH 1/5] match react tooltip --- package-lock.json | 12 ++++---- package.json | 2 +- src/tooltips/tooltips.scss | 61 ++++---------------------------------- 3 files changed, 12 insertions(+), 63 deletions(-) diff --git a/package-lock.json b/package-lock.json index 84b670e0a5..146c9efca3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "@primer/css", - "version": "21.0.8", + "version": "21.0.9", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@primer/css", - "version": "21.0.8", + "version": "21.0.9", "license": "MIT", "dependencies": { - "@primer/primitives": "^7.12.0", + "@primer/primitives": "^7.14.1", "@primer/view-components": "^0.5.1" }, "devDependencies": { @@ -2653,9 +2653,9 @@ "integrity": "sha512-HWwz+6MrfK5NTWcg9GdKFpMBW/yrAV937oXiw2eDtsd88P3SRwoCt6ZO6QmKp9RP3nDU9cbqmuGZ0xBh0eIFeg==" }, "node_modules/@primer/primitives": { - "version": "7.12.0", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.12.0.tgz", - "integrity": "sha512-QKNxfWm7Ik1Ulswyp3KeUL2xnQj8i0E7DdB6lOrh29o7LgyuutwcOHi4CGapBIOR1fYURu+yROSTHQ2C2aDK7A==" + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.14.1.tgz", + "integrity": "sha512-hFwHD85ymknQwIKbQw/hPdL3xoa7l3F1/SrBX5OeoDEOeH+W4/hYZPZF7epphVJxugkq5XhtbZ2no/BQEbasGQ==" }, "node_modules/@primer/stylelint-config": { "version": "12.8.0", diff --git a/package.json b/package.json index f91045c2db..eb4c398952 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "build:storybook": "cd docs && npm i && npm run build:storybook" }, "dependencies": { - "@primer/primitives": "^7.12.0", + "@primer/primitives": "^7.14.1", "@primer/view-components": "^0.5.1" }, "devDependencies": { diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss index 53f469cb22..921f9d0a86 100644 --- a/src/tooltips/tooltips.scss +++ b/src/tooltips/tooltips.scss @@ -7,8 +7,8 @@ position: absolute; z-index: 1000000; display: none; - padding: $em-spacer-5 $em-spacer-6; - font: normal normal 11px/1.5 $body-font; + padding: var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem); + font: var(--text-body-shorthand-small, normal normal 11px/1.5 $body-font); -webkit-font-smoothing: subpixel-antialiased; color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); text-align: center; @@ -21,22 +21,7 @@ pointer-events: none; content: attr(aria-label); background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); - border-radius: $border-radius; - opacity: 0; -} - -// This is the tooltip arrow -.tooltipped::before { - position: absolute; - z-index: 1000001; - display: none; - width: 0; - height: 0; - color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); - pointer-events: none; - content: ''; - // stylelint-disable-next-line primer/borders - border: 6px $border-style transparent; + border-radius: var(--borderRadius-medium); opacity: 0; } @@ -94,15 +79,6 @@ // stylelint-disable-next-line primer/spacing margin-top: 6px; } - - &::before { - top: auto; - right: 50%; - bottom: -7px; - // stylelint-disable-next-line primer/spacing - margin-right: -6px; - border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); - } } .tooltipped-se { @@ -127,15 +103,6 @@ // stylelint-disable-next-line primer/spacing margin-bottom: 6px; } - - &::before { - top: -7px; - right: 50%; - bottom: auto; - // stylelint-disable-next-line primer/spacing - margin-right: -6px; - border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); - } } .tooltipped-ne { @@ -165,15 +132,6 @@ margin-right: 6px; transform: translateY(50%); } - - &::before { - top: 50%; - bottom: 50%; - left: -7px; - // stylelint-disable-next-line primer/spacing - margin-top: -6px; - border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); - } } // tooltipped to the right @@ -185,15 +143,6 @@ margin-left: 6px; transform: translateY(50%); } - - &::before { - top: 50%; - right: -7px; - bottom: 50%; - // stylelint-disable-next-line primer/spacing - margin-top: -6px; - border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); - } } // Tooltip align right and left @@ -218,7 +167,7 @@ } .tooltipped-align-left-1, -.tooltipped-align-left-2, { +.tooltipped-align-left-2 { &::after { left: 0; margin-left: 0; @@ -245,7 +194,7 @@ .tooltipped-multiline { &::after { width: max-content; - max-width: $tooltip-max-width; + max-width: var(--overlay-width-small, 20rem); word-wrap: break-word; white-space: pre-line; border-collapse: separate; From 15773caa21a12b451ce59c468608cfc6156d9c99 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 9 Oct 2023 08:38:28 -0700 Subject: [PATCH 2/5] lint --- src/tooltips/tooltips.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss index 921f9d0a86..5eaeb3d181 100644 --- a/src/tooltips/tooltips.scss +++ b/src/tooltips/tooltips.scss @@ -1,3 +1,5 @@ +/* stylelint-disable primer/spacing */ + .tooltipped { position: relative; } @@ -76,7 +78,6 @@ &::after { top: 100%; right: 50%; - // stylelint-disable-next-line primer/spacing margin-top: 6px; } } @@ -100,7 +101,6 @@ &::after { right: 50%; bottom: 100%; - // stylelint-disable-next-line primer/spacing margin-bottom: 6px; } } @@ -128,7 +128,6 @@ &::after { right: 100%; bottom: 50%; - // stylelint-disable-next-line primer/spacing margin-right: 6px; transform: translateY(50%); } @@ -139,7 +138,6 @@ &::after { bottom: 50%; left: 100%; - // stylelint-disable-next-line primer/spacing margin-left: 6px; transform: translateY(50%); } From 2b40c74ccfee9fa8f02c8c024e920d5a1b721f57 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 12 Feb 2024 15:27:09 -0800 Subject: [PATCH 3/5] lint --- src/tooltips/tooltips.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss index 5eaeb3d181..fe7fb8a4e5 100644 --- a/src/tooltips/tooltips.scss +++ b/src/tooltips/tooltips.scss @@ -23,6 +23,7 @@ pointer-events: none; content: attr(aria-label); background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); + // stylelint-disable-next-line primer/borders border-radius: var(--borderRadius-medium); opacity: 0; } From 5b615d1a9a3d545e7318e26feb1bd9529d751de2 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 12 Feb 2024 15:36:59 -0800 Subject: [PATCH 4/5] Create ten-poets-yawn.md --- .changeset/ten-poets-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ten-poets-yawn.md diff --git a/.changeset/ten-poets-yawn.md b/.changeset/ten-poets-yawn.md new file mode 100644 index 0000000000..13e79d9ce3 --- /dev/null +++ b/.changeset/ten-poets-yawn.md @@ -0,0 +1,5 @@ +--- +"@primer/css": minor +--- + +Tooltip visual refresh From 82bcea02da56bc84872e8601e1400be0da9b9574 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 12 Feb 2024 16:12:08 -0800 Subject: [PATCH 5/5] remove delay --- src/tooltips/tooltips.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss index fe7fb8a4e5..c201ac2e05 100644 --- a/src/tooltips/tooltips.scss +++ b/src/tooltips/tooltips.scss @@ -51,7 +51,6 @@ animation-duration: $tooltip-duration; animation-fill-mode: forwards; animation-timing-function: ease-in; - animation-delay: $tooltip-delay; } }