Skip to content

Commit e458e7d

Browse files
laurkimlaurkim
authored
[TopBar] Consolidate se23 styles and logic (Shopify#10221)
### WHY are these changes introduced? Resolves Shopify#9975. ### WHAT is this pull request doing? Consolidates se23 beta styles and logic for `TopBar`. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-hkusscolus.chromatic.com/?path=/story/all-components-topbar--default) [Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-topbar--default&globals=polarisSummerEditions2023:true) 🖥 [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 - [x] 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) - [ ] 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 0151ec0 commit e458e7d

File tree

7 files changed

+92
-244
lines changed

7 files changed

+92
-244
lines changed

‎polaris-react/src/components/TopBar/TopBar.scss‎

Lines changed: 13 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
@import './variables';
33

44
$navigation-column-width: 240px;
5-
$search-column-width: 580px;
6-
$search-column-width-se23: 480px;
5+
$search-column-width: 480px;
76

87
$left-column: 1fr;
98
$left-column-md-up: minmax($navigation-column-width, 1fr);
109
$search-column: minmax(auto, $search-column-width);
11-
$search-column-se23: minmax(auto, $search-column-width-se23);
1210
$right-column: 1fr;
1311

1412
.TopBar {
@@ -17,23 +15,13 @@ $right-column: 1fr;
1715
grid-template-columns: $left-column $search-column $right-column;
1816
align-items: center;
1917
height: $top-bar-height;
20-
box-shadow: var(--p-shadow-sm);
21-
background-color: var(--p-color-bg);
18+
box-shadow: var(--p-shadow-xs);
19+
background-color: var(--p-color-bg-inverse);
2220
gap: var(--p-space-1);
2321

24-
#{$se23} & {
25-
background-color: var(--p-color-bg-inverse);
26-
box-shadow: var(--p-shadow-xs);
27-
grid-template-columns: $left-column $search-column-se23 $right-column;
28-
}
29-
3022
@media #{$p-breakpoints-md-up} {
3123
gap: var(--p-space-6);
3224
grid-template-columns: $left-column-md-up $search-column $right-column;
33-
34-
#{$se23} & {
35-
grid-template-columns: $left-column-md-up $search-column-se23 $right-column;
36-
}
3725
}
3826

3927
&::after {
@@ -75,13 +63,11 @@ $right-column: 1fr;
7563
.LogoLink {
7664
display: block;
7765

78-
#{$se23} & {
79-
&:focus-visible {
80-
outline: var(--p-border-width-2) solid
81-
var(--p-color-border-interactive-focus);
82-
outline-offset: var(--p-space-1_5-experimental);
83-
border-radius: var(--p-border-radius-2);
84-
}
66+
&:focus-visible {
67+
outline: var(--p-border-width-2) solid
68+
var(--p-color-border-interactive-focus);
69+
outline-offset: var(--p-space-1_5-experimental);
70+
border-radius: var(--p-border-radius-2);
8571
}
8672
}
8773

@@ -106,25 +92,18 @@ $right-column: 1fr;
10692
margin-right: var(--p-space-2);
10793
padding: var(--p-space-2);
10894
border-radius: var(--p-border-radius-1);
109-
fill: var(--p-color-icon); // Icon will inherit this fill
95+
fill: var(--p-color-icon-inverse);
11096
transition: var(--p-motion-duration-150) fill var(--p-motion-ease)
11197
var(--p-motion-duration-50);
11298

113-
#{$se23} & {
114-
fill: var(--p-color-icon-inverse);
115-
}
116-
11799
&.focused:active {
118-
background-color: var(--p-color-bg-active);
100+
background-color: var(--p-color-bg-inverse-hover);
119101
}
120102

121103
&:hover {
122-
background-color: var(--p-color-bg-hover);
123-
124-
#{$se23} & {
125-
background-color: var(--p-color-bg-inverse-hover);
126-
}
104+
background-color: var(--p-color-bg-inverse-hover);
127105
}
106+
128107
// This increases hit point size.
129108
&::after {
130109
content: '';
@@ -180,9 +159,5 @@ $right-column: 1fr;
180159
}
181160

182161
.SecondaryMenu svg {
183-
fill: var(--p-color-icon);
184-
185-
#{$se23} & {
186-
fill: var(--p-color-icon-inverse);
187-
}
162+
fill: var(--p-color-icon-inverse);
188163
}

‎polaris-react/src/components/TopBar/TopBar.stories.tsx‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,13 @@ function TopBarWrapper({
1616
initials,
1717
customActivator,
1818
message,
19-
se23,
2019
}: {
2120
userActions?: UserMenuProps['actions'];
2221
name?: UserMenuProps['name'];
2322
detail?: UserMenuProps['detail'];
2423
initials?: UserMenuProps['initials'];
2524
customActivator?: UserMenuProps['customActivator'];
2625
message?: UserMenuProps['message'];
27-
se23?: boolean;
2826
}) {
2927
const [isUserMenuOpen, setIsUserMenuOpen] = useState(true);
3028
const [isSecondaryMenuOpen, setIsSecondaryMenuOpen] = useState(false);
@@ -56,10 +54,9 @@ function TopBarWrapper({
5654
}, []);
5755

5856
const logo = {
59-
width: se23 ? 92 : 96,
60-
topBarSource: se23
61-
? 'https://cdn.shopify.com/shopifycloud/brochure/assets/brand-assets/shopify-logo-monotone-white-7edf88561b256e005e9b9d003c283c39dcbd74ec844dfc9a3912edeec39b4d7e.svg'
62-
: 'https://cdn.shopify.com/shopifycloud/brochure/assets/brand-assets/shopify-logo-primary-logo-456baa801ee66a0a435671082365958316831c9960c480451dd0330bcdae304f.svg',
57+
width: 92,
58+
topBarSource:
59+
'https://cdn.shopify.com/shopifycloud/brochure/assets/brand-assets/shopify-logo-monotone-white-7edf88561b256e005e9b9d003c283c39dcbd74ec844dfc9a3912edeec39b4d7e.svg',
6360
url: '#',
6461
accessibilityLabel: 'Hem Canada',
6562
};
@@ -145,7 +142,7 @@ function TopBarWrapper({
145142
);
146143
}
147144

148-
export function Default(_, context) {
145+
export function Default() {
149146
const userActions: UserMenuProps['actions'] = [
150147
{
151148
items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
@@ -159,12 +156,11 @@ export function Default(_, context) {
159156
userActions={userActions}
160157
name="Xquenda Andreev"
161158
initials="XA"
162-
se23={context.globals.polarisSummerEditions2023}
163159
/>
164160
);
165161
}
166162

167-
export function WithCustomActivator(_, context) {
163+
export function WithCustomActivator() {
168164
const userActions: UserMenuProps['actions'] = [
169165
{
170166
items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
@@ -181,15 +177,7 @@ export function WithCustomActivator(_, context) {
181177
<Text as="p" alignment="start" fontWeight="medium" truncate>
182178
Xquenda Andreev
183179
</Text>
184-
<Text
185-
as="p"
186-
variant="bodySm"
187-
alignment="start"
188-
color={
189-
context.globals.polarisSummerEditions2023 ? undefined : 'subdued'
190-
}
191-
truncate
192-
>
180+
<Text as="p" variant="bodySm" alignment="start" truncate>
193181
Hem Canada
194182
</Text>
195183
</span>
@@ -202,12 +190,11 @@ export function WithCustomActivator(_, context) {
202190
name="Xquenda Andreev"
203191
detail="Hem Canada"
204192
customActivator={customActivator}
205-
se23={context.globals.polarisSummerEditions2023}
206193
/>
207194
);
208195
}
209196

210-
export function WithMessage(_, context) {
197+
export function WithMessage() {
211198
const userActions: UserMenuProps['actions'] = [
212199
{
213200
items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
@@ -229,7 +216,6 @@ export function WithMessage(_, context) {
229216
link: {to: 'https://www.shopify.com', content: 'Link content'},
230217
action: {content: 'Action content', onClick: () => {}},
231218
}}
232-
se23={context.globals.polarisSummerEditions2023}
233219
/>
234220
);
235221
}

‎polaris-react/src/components/TopBar/components/Menu/Menu.scss‎

Lines changed: 20 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -21,106 +21,66 @@ $activator-variables: (
2121
@include unstyled-button;
2222
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
2323
@include focus-ring;
24-
color: var(--p-color-text);
24+
color: var(--p-color-text-inverse);
2525
position: relative;
2626
display: flex;
2727
justify-content: center;
2828
align-items: center;
29-
min-width: menu(min-width);
30-
padding: var(--p-space-1) var(--p-space-2);
29+
min-width: auto;
30+
min-height: menu(min-height);
31+
padding: var(--p-space-1_5-experimental);
3132
border: 0;
3233
cursor: pointer;
3334
transition: background-color var(--p-motion-duration-100);
3435
margin-right: var(--p-space-2);
35-
border-radius: var(--p-border-radius-1);
36+
border-radius: var(--p-border-radius-2);
37+
background-color: var(--p-color-bg-inset-strong);
3638

37-
#{$se23} & {
38-
color: var(--p-color-text-inverse);
39-
padding: var(--p-space-1_5-experimental);
40-
background-color: var(--p-color-bg-inset-strong);
41-
border-radius: var(--p-border-radius-2);
42-
min-width: auto;
43-
min-height: menu(min-height);
44-
45-
&-userMenu {
46-
padding: var(--p-space-05);
47-
}
39+
// stylelint-disable-next-line scss/selector-no-union-class-name -- set user menu padding
40+
&-userMenu {
41+
padding: var(--p-space-05);
4842
}
4943

5044
&:focus {
51-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
52-
background-color: var(--pc-top-bar-background-lighter);
45+
background-color: var(--p-color-bg-inverse-hover);
5346
outline: none;
54-
55-
#{$se23} & {
56-
background-color: var(--p-color-bg-inverse-hover);
57-
}
5847
}
5948

6049
&:focus-visible {
6150
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
62-
@include focus-ring($style: 'focused');
63-
64-
#{$se23} & {
65-
/* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
66-
@include no-focus-ring;
67-
outline: var(--p-border-width-2) solid
68-
var(--p-color-border-interactive-focus);
69-
outline-offset: var(--p-space-05);
70-
}
51+
@include no-focus-ring;
52+
outline: var(--p-border-width-2) solid
53+
var(--p-color-border-interactive-focus);
54+
outline-offset: var(--p-space-05);
7155
}
7256

7357
&:hover {
74-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
75-
background-color: var(
76-
--pc-top-bar-background-lighter,
77-
var(--p-color-bg-hover)
78-
);
79-
// stylelint-enable
80-
81-
#{$se23} & {
82-
background-color: var(--p-color-bg-inverse-hover);
83-
}
58+
background-color: var(--p-color-bg-inverse-hover);
8459
}
8560

8661
&:active,
8762
&[aria-expanded='true'] {
88-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
89-
background-color: var(
90-
--pc-top-bar-background-darker,
91-
var(--p-color-bg-active)
92-
);
93-
// stylelint-enable
63+
background-color: var(--p-color-bg-inverse-active);
9464
outline: none;
9565
transition: none;
9666

9767
&::after {
9868
border: none;
9969
}
10070

101-
#{$se23} & {
102-
background-color: var(--p-color-bg-inverse-active);
103-
104-
// stylelint-disable -- se23 text needs to be lighter to pass a11y on --p-color-bg-inverse-active
105-
p {
106-
color: var(--p-color-text-inverse);
107-
}
71+
p {
72+
color: var(--p-color-text-inverse);
10873
}
10974
}
11075

11176
@media #{$p-breakpoints-md-down} {
112-
margin: 0;
113-
114-
#{$se23} & {
115-
margin-right: var(--p-space-2);
116-
background-color: var(--p-color-bg-inverse);
117-
}
77+
margin-right: var(--p-space-2);
78+
background-color: var(--p-color-bg-inverse);
11879

11980
&:focus,
12081
&:hover,
12182
&:active,
12283
&[aria-expanded='true'] {
123-
background-color: transparent;
12484
opacity: menu(focus-opacity);
12585
}
12686
}

‎polaris-react/src/components/TopBar/components/Menu/Menu.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import type {ActionListProps} from '../../../ActionList';
55
import {Popover} from '../../../Popover';
66
import {Box} from '../../../Box';
77
import {classNames} from '../../../../utilities/css';
8-
import {useFeatures} from '../../../../utilities/features';
98

109
import {Message} from './components';
1110
import type {MessageProps} from './components';
@@ -46,7 +45,6 @@ export function Menu(props: MenuProps) {
4645
customWidth,
4746
userMenu,
4847
} = props;
49-
const {polarisSummerEditions2023} = useFeatures();
5048

5149
const badgeProps = message &&
5250
message.badge && {
@@ -75,9 +73,7 @@ export function Menu(props: MenuProps) {
7573
type="button"
7674
className={classNames(
7775
styles.Activator,
78-
userMenu &&
79-
polarisSummerEditions2023 &&
80-
styles['Activator-userMenu'],
76+
userMenu && styles['Activator-userMenu'],
8177
)}
8278
onClick={onOpen}
8379
aria-label={accessibilityLabel}

0 commit comments

Comments
 (0)