Skip to content

Commit

Permalink
[Tabs] Consolidate se23 logic and styles (#10158)
Browse files Browse the repository at this point in the history 
### WHY are these changes introduced?

Resolves #9969.

### WHAT is this pull request doing?

Consolidates se23 beta styles and logic for `Tabs`.

### How to 🎩

[Storybook](https://5d559397bae39100201eedc1-wlmykaxxmr.chromatic.com/?path=/story/all-components-tabs--all)
[Prod
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-tabs--all&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
  • Loading branch information
@laurkim
laurkim authored Aug 22, 2023
1 parent 4de0f6a commit 92c3d96
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 135 deletions.
175 changes: 51 additions & 124 deletions polaris-react/src/components/Tabs/Tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,16 @@
@media #{$p-breakpoints-md-down} {
max-width: 100%;
overflow: hidden;
height: 56px;
height: unset;
padding: 0;

#{$se23} & {
height: unset;
}
}
}

.Wrapper {
@media #{$p-breakpoints-md-down} {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: var(--p-space-3) var(--p-space-3) var(--p-space-3) var(--p-space-4);

#{$se23} & {
padding: var(--p-space-2);
}
padding: var(--p-space-2);
}
}

Expand Down Expand Up @@ -65,19 +57,19 @@

.Tab {
// stylelint-disable-next-line -- no way to set focus ring without mixin currently
@include focus-ring;
@include focus-ring($size: 'wide');
// stylelint-disable-next-line -- required to reset button styles on touch screens
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: var(--p-space-8);
padding: 0 var(--p-space-3);
height: 2rem;
padding: var(--p-space-1_5-experimental) var(--p-space-3);
border: 0;
border-radius: var(--p-border-radius-1);
background: var(--p-color-bg);
color: var(--p-color-text-subdued);
border-radius: var(--p-border-radius-2);
background-color: transparent;
color: var(--p-color-text-primary);
cursor: pointer;
text-decoration: none;
width: 100%;
Expand All @@ -91,14 +83,29 @@
&[aria-disabled='true'] {
cursor: default;
color: var(--p-color-text-disabled);

path {
fill: var(--p-color-icon-disabled);
}
}

&:not([aria-disabled='true']):hover {
background-color: var(--p-color-bg-transparent-hover-experimental);
color: var(--p-color-text-primary);
}

&:not([aria-disabled='true']):hover,
&:not([aria-disabled='true']):focus {
background-color: var(--p-color-bg-hover);
color: var(--p-color-text);
}

&:not([aria-disabled='true']):focus-visible {
background-color: transparent;
color: var(--p-color-text-primary);
// stylelint-disable-next-line -- set focus ring using mixin
@include focus-ring($size: 'wide', $style: 'focused');
}

// stylelint-disable-next-line selector-max-specificity -- specificity required to override focus ring
&:not([aria-disabled='true']):focus-visible:not(:active) {
// stylelint-disable-next-line -- no way to set focus ring without mixin currently
Expand All @@ -107,61 +114,26 @@
}

&:not([aria-disabled='true']):active {
background-color: var(--p-color-bg-active);
color: var(--p-color-text);
background-color: var(--p-color-bg-secondary-experimental);
color: var(--p-color-text-primary);
z-index: var(--p-z-index-1);
}

path {
fill: currentColor;
}

&[aria-disabled='true'] path {
fill: var(--p-color-icon-disabled);
}

#{$se23} & {
// stylelint-disable-next-line -- no way to set focus ring without mixin currently
@include focus-ring($size: 'wide');
color: var(--p-color-text-primary);
background-color: transparent;
border-radius: var(--p-border-radius-2);
padding: var(--p-space-1_5-experimental) var(--p-space-3);
height: 2rem;

&[aria-disabled='true'] {
color: var(--p-color-text-disabled);
}

&:not([aria-disabled='true']):hover {
background-color: var(--p-color-bg-transparent-hover-experimental);
color: var(--p-color-text-primary);
}

&:not([aria-disabled='true']):focus-visible {
background-color: transparent;
color: var(--p-color-text-primary);
// stylelint-disable-next-line -- sshhh
@include focus-ring($size: 'wide', $style: 'focused');
}

&:not([aria-disabled='true']):active {
background-color: var(--p-color-bg-secondary-experimental);
color: var(--p-color-text-primary);
z-index: var(--p-z-index-1);
}

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-75);
line-height: var(--p-font-line-height-1);
height: 1.75rem;
}
@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-75);
line-height: var(--p-font-line-height-1);
height: 1.75rem;
}
}

.Tab-active {
background: var(--p-color-bg-primary-subdued-hover);
color: var(--p-color-text-primary);
background: var(--p-color-bg-transparent-active-experimental);
border-radius: var(--p-border-radius-2);
color: var(--p-color-text);

&[aria-disabled='true'] {
background: var(--p-color-bg-disabled);
Expand All @@ -170,43 +142,18 @@

&:not([aria-disabled='true']):hover,
&:not([aria-disabled='true']):focus {
background-color: var(--p-color-bg-primary-subdued-hover);
color: var(--p-color-text-primary-hover);
background-color: var(--p-color-bg-transparent-hover-experimental);
color: var(--p-color-text-primary);
}

&:not([aria-disabled='true']):active {
background-color: var(--p-color-bg-success-subdued-active);
background-color: var(--p-color-bg-transparent-active-experimental);
color: var(--p-color-text-primary);
}

#{$se23} & {
background: var(--p-color-bg-transparent-active-experimental);
color: var(--p-color-text);
border-radius: var(--p-border-radius-2);

&[aria-disabled='true'] {
background: var(--p-color-bg-disabled);
color: var(--p-color-text-disabled);
}

&:not([aria-disabled='true']):hover,
&:not([aria-disabled='true']):focus {
background-color: var(--p-color-bg-transparent-hover-experimental);
color: var(--p-color-text-primary);
}

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

.Tab-hasActions {
padding-right: var(--p-space-2);

#{$se23} & {
padding-right: var(--p-space-2);
}
}

.Tab-iconOnly {
Expand Down Expand Up @@ -299,25 +246,34 @@
@include unstyled-button;
height: 100%;
background-color: transparent;
color: var(--p-color-text-subdued);
color: var(--p-color-text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: var(--p-border-radius-1);
border-radius: var(--p-border-radius-2);
padding: 0 var(--p-space-2) 0 var(--p-space-3);
margin-top: var(--p-space-025);
border: none;
outline: none;

svg {
fill: var(--p-color-icon);
}

&:hover svg,
&:focus svg {
fill: var(--p-color-icon);
}

&:not([aria-disabled='true']):hover,
&:not([aria-disabled='true']):hover {
background-color: var(--p-color-bg-transparent-hover-experimental);
color: var(--p-color-text-primary);
}

&:not([aria-disabled='true']):focus {
background-color: var(--p-color-bg-hover);
background-color: transparent;
color: var(--p-color-text-primary);
}

&:not([aria-disabled='true']):focus-visible {
Expand All @@ -327,48 +283,19 @@
}

&:not([aria-disabled='true']):active {
background-color: var(--p-color-bg-active);
background-color: var(--p-color-bg-secondary-experimental);
z-index: var(--p-z-index-1);
}

&[aria-disabled='true'] {
cursor: default;
color: var(--p-color-text-disabled);
background: var(--p-color-bg-disabled);

path {
fill: var(--p-color-icon-disabled);
}
}

#{$se23} & {
background-color: transparent;
color: var(--p-color-text-primary);
border-radius: var(--p-border-radius-2);

// stylelint-disable-next-line selector-max-combinators -- Polaris component experimental styles
svg {
fill: var(--p-color-icon);
}

&[aria-disabled='true'] {
background: var(--p-color-bg-disabled);
color: var(--p-color-text-disabled);
}

&:not([aria-disabled='true']):hover {
background-color: var(--p-color-bg-transparent-hover-experimental);
color: var(--p-color-text-primary);
}

&:not([aria-disabled='true']):focus {
background-color: transparent;
color: var(--p-color-text-primary);
}

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

.TabsMeasurer {
Expand Down
15 changes: 4 additions & 11 deletions polaris-react/src/components/Tabs/components/Tab/Tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,11 @@ import {
Columns3Minor,
EditMinor,
DeleteMinor,
CaretDownMinor,
ChevronDownMinor,
} from '@shopify/polaris-icons';

import {classNames} from '../../../../utilities/css';
import {useI18n} from '../../../../utilities/i18n';
import {useFeatures} from '../../../../utilities/features';
import {
focusFirstFocusableNode,
handleMouseUpByBlurring,
Expand Down Expand Up @@ -75,7 +73,6 @@ export const Tab = forwardRef(
null,
);
const {mdDown} = useBreakpoints();
const {polarisSummerEditions2023: se23} = useFeatures();

const wasSelected = useRef(selected);
const panelFocused = useRef(false);
Expand Down Expand Up @@ -281,21 +278,17 @@ export const Tab = forwardRef(
selected && actions?.length && styles['Tab-hasActions'],
);

const badgeStatusSelected = !se23 ? 'success' : undefined;
const badgeMarkup = badge ? (
<Badge status={selected ? badgeStatusSelected : 'new'}>{badge}</Badge>
<Badge status={selected ? undefined : 'new'}>{badge}</Badge>
) : null;

const disclosureMarkup =
selected && actions?.length ? (
<div className={classNames(styles.IconWrap)}>
<Icon source={se23 ? ChevronDownMinor : CaretDownMinor} />
<Icon source={ChevronDownMinor} />
</div>
) : null;

const se23LabelVariant = mdDown && se23 ? 'bodyLg' : 'bodySm';
const labelVariant = mdDown ? 'bodyMd' : 'bodySm';

const activator = (
<BaseComponent
id={id}
Expand All @@ -315,8 +308,8 @@ export const Tab = forwardRef(
<InlineStack gap="2" align="center" blockAlign="center" wrap={false}>
<Text
as="span"
variant={se23 ? se23LabelVariant : labelVariant}
fontWeight={se23 ? 'medium' : 'semibold'}
variant={mdDown ? 'bodyLg' : 'bodySm'}
fontWeight="medium"
>
{icon ?? content}
</Text>
Expand Down

0 comments on commit 92c3d96

Please sign in to comment.