Skip to content

Commit 60dd5a0

Browse files
[TooltipOverlay] Add border radius to tooltip overlay (#8093)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? <!-- Context about the problem that’s being addressed. --> Tooltip overlays don't currently have a border radius applied to them. This is more noticeable when the `borderRadius` prop passed to `Tooltip` is a higher number. #### Before <img width="429" alt="Screenshot 2023-01-19 at 12 01 19" src="https://user-images.githubusercontent.com/6731221/213437869-632b1210-aac5-4524-989c-34196b2ea483.png"> #### After <img width="433" alt="Screenshot 2023-01-19 at 12 00 48" src="https://user-images.githubusercontent.com/6731221/213437769-e5fc13b5-a9f4-401c-a15b-781cc4c922f3.png"> ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> This PR uses the `pc-tooltip-border-radius` variable (specified via the inline style on `TooltipOverlay`'s container div) to apply border radius in the `.TooltipOverlay` class style. ### 🎩 checklist [Tophat on Chromatic](https://5d559397bae39100201eedc1-xvkjbwonew.chromatic.com/?path=/story/all-components-tooltip--border-radius) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent c69c75d commit 60dd5a0

File tree

2 files changed

+7
-0
lines changed

2 files changed

+7
-0
lines changed

.changeset/bright-melons-obey.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Added `borderRadius` style to `TooltipOverlay`

polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
margin: var(--pc-tooltip-overlay-offset) var(--p-space-4) var(--p-space-4);
88
opacity: 1;
99
box-shadow: var(--p-shadow-popover);
10+
// stylelint-disable-next-line -- Polaris component custom properties
11+
border-radius: var(--pc-tooltip-border-radius);
1012
pointer-events: none;
1113
will-change: opacity, left, top;
1214
transition: opacity var(--p-duration-200) var(--p-ease-in)

0 commit comments

Comments
 (0)