[Tabs][Uplift]: Match hover and active colour #9619

ginabak · 2023-07-05T20:10:06Z

📣 ❤️ Hey hey reviewers! 🥳 Would you mind looking at the `Questions` portion below? 🙏🏽 THANK YOU IN ADVANCE.

WHY are these changes introduced?

Following the Uplift Figma Link for Tabs 🖌️ , the background colour on hover and active should be

background: var(--background-bg-secondary, #F3F3F3);

Related #9543
Discovered through https://github.com/Shopify/web/issues/96536

WHAT is this pull request doing?

(with uplift)

Before	After

❓ Questions 🙏🏽

I'm noticing that the More views font is slightly more bolded - is this what we want? I can't find any thing in the Figma 😄

At a certain breakpoint, More views disappears, the tabs get slightly larger, and then a scroll appears. Is this the desired behaviour? I find it a little jarring.

Here's a video:

More.views.Scroll.mp4

How to 🎩

🎩 🌀 SPIN on web with these changes 😄 - takes you to Orders ❤️ 🌀

Ensure that you have a smaller window frame to ensure that the More views is triggered 😄

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

ginabak · 2023-07-05T20:13:08Z

/snapit

github-actions · 2023-07-05T20:17:05Z

🫰✨ Thanks @ginabak! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230705201526

yarn add @shopify/polaris@0.0.0-snapshot-release-20230705201526

ginabak · 2023-07-05T20:19:10Z

polaris-react/src/components/Tabs/Tabs.scss

+      background-color: var(--p-color-bg-secondary-experimental);
      color: var(--p-color-text-primary);
-
-      #{$se23} & {


This is already under the primary #{$se23} and just needed to be cleaned up.

https://github.com/Shopify/polaris/blob/5e2c3c532a9a0ee7aa6fd49439be118364a44c0d/polaris-react/src/components/Tabs/Tabs.scss#L123

ginabak · 2023-07-05T20:19:54Z

polaris-react/src/components/Tabs/Tabs.scss

      color: var(--p-color-text-primary);
      z-index: var(--p-z-index-1);
-
-      #{$se23} & {


Same as this comment, see:

https://github.com/Shopify/polaris/blob/5e2c3c532a9a0ee7aa6fd49439be118364a44c0d/polaris-react/src/components/Tabs/Tabs.scss#L123

ginabak · 2023-07-05T20:22:09Z

polaris-react/src/components/Tabs/Tabs.scss

    }

    &:not([aria-disabled='true']):hover {
-      background-color: var(--p-color-bg-interactive-subdued-active);


ℹ️ This is the only change in the PR (the others are cleanup 🧼 🧹).

This is behind the se23:
https://github.com/Shopify/polaris/blob/5e2c3c532a9a0ee7aa6fd49439be118364a44c0d/polaris-react/src/components/Tabs/Tabs.scss#L361

and this follows the Tabs from the Uplift Figma for Tabs 🖌️

ginabak · 2023-07-05T20:22:49Z

polaris-react/src/components/Tabs/Tabs.scss

    }

    &:not([aria-disabled='true']):active {
-      background-color: var(--p-color-bg-interactive-subdued-active);


From the Uplift Figma for Tabs 🖌️, hover and active were the same.

aveline

Background color update and cleanup looks good. Thanks @ginabak! 🎉

sethomas

code looks good to me, in regards to your questions:

no clue (sorry)
I find it jarring too but unsure the intent :(

chloerice · 2023-07-07T14:17:29Z

Hey @ginabak! I know this already shipped but jumping in to reassure that #2 is intended, it's for small screen as it's an established pattern across other apps on iOS and Android to have tabs scroll. #1 looks like a bug 👀 Made an issue 🙏🏽

ginabak · 2023-07-07T18:06:14Z

Hey @ginabak! I know this already shipped but jumping in to reassure that #2 is intended, it's for small screen as it's an established pattern across other apps on iOS and Android to have tabs scroll. #1 looks like a bug 👀 Made an https://github.com/Shopify/polaris-summer-editions/issues/869 🙏🏽

@chloerice, you're the best! THANK YOUUU for answering my questions!!!! ♥️

## 📣 ❤️ Hey hey reviewers! 🥳 Would you mind looking at the `Questions` portion below? 🙏🏽 THANK YOU IN ADVANCE. ### WHY are these changes introduced? Following the **[Uplift Figma Link for `Tabs`](https://www.figma.com/file/jLLkmo9r28hiqPvf4s90E4/Polaris-Uplift-Components-%5Bgen3%E2%80%93alpha%5D?node-id=84001%3A38964&mode=dev)** 🖌️ , the background colour on `hover` and `active` should be ```CSS background: var(--background-bg-secondary, #F3F3F3); ``` Related Shopify#9543 Discovered through https://github.com/Shopify/web/issues/96536 ### WHAT is this pull request doing? (with uplift) | Before | After | |--------|--------| | <img width="566" alt="Screenshot 2023-07-05 at 1 31 29 PM" src="https://github.com/Shopify/polaris/assets/43223543/41da1a18-6f19-4ece-af4d-bba8d5434316"> | <img width="566" alt="Screenshot 2023-07-05 at 1 32 34 PM" src="https://github.com/Shopify/polaris/assets/43223543/96c1239c-d63a-4cb1-a43e-6ddb2ae9cc9d"> | ### ❓ Questions 🙏🏽 1. I'm noticing that the `More views` font is slightly more bolded - is this what we want? I can't find any thing in the Figma 😄 <img width="250" alt="Screenshot 2023-07-05 at 1 59 53 PM" src="https://github.com/Shopify/polaris/assets/43223543/084499b4-aeff-4280-982b-e3d4780c234d"> 2. At a certain breakpoint, `More views` disappears, the tabs get slightly larger, and then a scroll appears. Is this the desired behaviour? I find it a little jarring. Here's a video: https://github.com/Shopify/polaris/assets/43223543/392582e0-6f59-4449-89b3-cde4a9a42429 ### How to 🎩 🎩 🌀 [SPIN on web with these changes 😄 - takes you to Orders ❤️ ](https://admin.web.more-views.gina-bak.us.spin.dev/store/shop1/orders?inContextTimeframe=none) 🌀 Ensure that you have a smaller window frame to ensure that the `More views` is triggered 😄 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] 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 - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

## 📣 ❤️ Hey hey reviewers! 🥳 Would you mind looking at the `Questions` portion below? 🙏🏽 THANK YOU IN ADVANCE. ### WHY are these changes introduced? Following the **[Uplift Figma Link for `Tabs`](https://www.figma.com/file/jLLkmo9r28hiqPvf4s90E4/Polaris-Uplift-Components-%5Bgen3%E2%80%93alpha%5D?node-id=84001%3A38964&mode=dev)** 🖌️ , the background colour on `hover` and `active` should be ```CSS background: var(--background-bg-secondary, #F3F3F3); ``` Related Shopify#9543 Discovered through Shopify/web#96536 ### WHAT is this pull request doing? (with uplift) | Before | After | |--------|--------| | <img width="566" alt="Screenshot 2023-07-05 at 1 31 29 PM" src="https://github.com/Shopify/polaris/assets/43223543/41da1a18-6f19-4ece-af4d-bba8d5434316"> | <img width="566" alt="Screenshot 2023-07-05 at 1 32 34 PM" src="https://github.com/Shopify/polaris/assets/43223543/96c1239c-d63a-4cb1-a43e-6ddb2ae9cc9d"> | ### ❓ Questions 🙏🏽 1. I'm noticing that the `More views` font is slightly more bolded - is this what we want? I can't find any thing in the Figma 😄 <img width="250" alt="Screenshot 2023-07-05 at 1 59 53 PM" src="https://github.com/Shopify/polaris/assets/43223543/084499b4-aeff-4280-982b-e3d4780c234d"> 2. At a certain breakpoint, `More views` disappears, the tabs get slightly larger, and then a scroll appears. Is this the desired behaviour? I find it a little jarring. Here's a video: https://github.com/Shopify/polaris/assets/43223543/392582e0-6f59-4449-89b3-cde4a9a42429 ### How to 🎩 🎩 🌀 [SPIN on web with these changes 😄 - takes you to Orders ❤️ ](https://admin.web.more-views.gina-bak.us.spin.dev/store/shop1/orders?inContextTimeframe=none) 🌀 Ensure that you have a smaller window frame to ensure that the `More views` is triggered 😄 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] 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 - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

Match hover and active colour for Tabs

a519045

ginabak added the 🤖Skip Changelog Causes CI to ignore changelog update check. label Jul 5, 2023

ginabak commented Jul 5, 2023

View reviewed changes

ginabak marked this pull request as ready for review July 5, 2023 20:34

ginabak requested review from aaronccasanova, chloerice, derekloshopify, aveline, sarahill and LauraAubin July 5, 2023 20:34

aveline approved these changes Jul 6, 2023

View reviewed changes

sethomas approved these changes Jul 6, 2023

View reviewed changes

ginabak merged commit 8b2d9c2 into main Jul 6, 2023

ginabak deleted the gbak/tab-colour branch July 6, 2023 22:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Tabs][Uplift]: Match hover and active colour #9619

[Tabs][Uplift]: Match hover and active colour #9619

Uh oh!

ginabak commented Jul 5, 2023 •

edited

Loading

Uh oh!

ginabak commented Jul 5, 2023

Uh oh!

github-actions bot commented Jul 5, 2023

Uh oh!

ginabak Jul 5, 2023

Uh oh!

ginabak Jul 5, 2023

Uh oh!

ginabak Jul 5, 2023

Uh oh!

ginabak Jul 5, 2023

Uh oh!

aveline left a comment

Uh oh!

sethomas left a comment

Uh oh!

chloerice commented Jul 7, 2023

Uh oh!

ginabak commented Jul 7, 2023

Uh oh!

Uh oh!

[Tabs][Uplift]: Match hover and active colour #9619

[Tabs][Uplift]: Match hover and active colour #9619

Uh oh!

Conversation

ginabak commented Jul 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📣 ❤️ Hey hey reviewers! 🥳 Would you mind looking at the Questions portion below? 🙏🏽 THANK YOU IN ADVANCE.

WHY are these changes introduced?

WHAT is this pull request doing?

❓ Questions 🙏🏽

How to 🎩

🎩 checklist

Uh oh!

ginabak commented Jul 5, 2023

Uh oh!

github-actions bot commented Jul 5, 2023

Uh oh!

ginabak Jul 5, 2023

Choose a reason for hiding this comment

Uh oh!

ginabak Jul 5, 2023

Choose a reason for hiding this comment

Uh oh!

ginabak Jul 5, 2023

Choose a reason for hiding this comment

Uh oh!

ginabak Jul 5, 2023

Choose a reason for hiding this comment

Uh oh!

aveline left a comment

Choose a reason for hiding this comment

Uh oh!

sethomas left a comment

Choose a reason for hiding this comment

Uh oh!

chloerice commented Jul 7, 2023

Uh oh!

ginabak commented Jul 7, 2023

Uh oh!

Uh oh!

ginabak commented Jul 5, 2023 •

edited

Loading

📣 ❤️ Hey hey reviewers! 🥳 Would you mind looking at the `Questions` portion below? 🙏🏽 THANK YOU IN ADVANCE.