Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[IndexFilters] consolidate se23 styles and logic #10230

Merged
merged 4 commits into from
Aug 28, 2023
Merged

[IndexFilters] consolidate se23 styles and logic #10230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ed63ac9
`IndexFilters` consolidate se23 styles
gwyneplaine Aug 25, 2023
451d06f
`IndexFilters` consolidate se23 logic
gwyneplaine Aug 25, 2023
f226271
`IndexFilters` replace custom FilterButton with polaris Button invoca…
gwyneplaine Aug 25, 2023
34504fa
changeset
gwyneplaine Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wild-dodos-refuse.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

`IndexFilter` remove custom `FilterButton` in favor of directly invoking the Polaris `Button` component.
22 changes: 5 additions & 17 deletions polaris-react/src/components/IndexFilters/IndexFilters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,17 @@ $spinner-size: 20px;

.TabsWrapper {
flex: 1;
height: var(--p-space-12);
height: 44px;

#{$se23} & {
height: 44px;

@media #{$p-breakpoints-md-down} {
height: var(--p-space-12);
}
@media #{$p-breakpoints-md-down} {
height: var(--p-space-12);
}
}

.SmallScreenTabsWrapper {
overflow: hidden;
padding: var(--p-space-1) var(--p-space-0) var(--p-space-2) var(--p-space-3);
padding: 0;
height: auto;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was overriding the .TabsWrapper height invocation on mdDown above (line 36).
As this class is only applied at mdDown, safe for us to remove this duplicative height rule.


&.TabsWrapperLoading {
position: relative;
Expand Down Expand Up @@ -90,11 +85,12 @@ $spinner-size: 20px;
gap: var(--p-space-2);
align-items: center;
justify-content: flex-start;
padding: var(--p-space-2) var(--p-space-3) var(--p-space-2) 0;
padding: var(--p-space-1_5-experimental) var(--p-space-2);

@media #{$p-breakpoints-md-down} {
position: relative;
padding: var(--p-space-3) var(--p-space-4);
height: 3rem;
border-left: var(--p-border-width-1) solid var(--p-color-border-subdued);
gap: var(--p-space-2);

Expand All @@ -115,14 +111,6 @@ $spinner-size: 20px;
// stylelint-enable
}
}

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

@media #{$p-breakpoints-md-down} {
height: 3rem;
}
}
}

.ActionWrap svg {
Expand Down
8 changes: 1 addition & 7 deletions polaris-react/src/components/IndexFilters/IndexFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import type {FiltersProps} from '../Filters';
import {Tabs} from '../Tabs';
import type {TabsProps} from '../Tabs';
import {useBreakpoints} from '../../utilities/breakpoints';
import {useFeatures} from '../../utilities/features';

import {useIsSticky} from './hooks';
import {
Expand Down Expand Up @@ -145,7 +144,6 @@ export function IndexFilters({
setFalse: setFiltersUnFocused,
setTrue: setFiltersFocused,
} = useToggle(false);
const {polarisSummerEditions2023} = useFeatures();

useOnValueChange(mode, (newMode) => {
if (newMode === IndexFiltersMode.Filtering) {
Expand Down Expand Up @@ -435,11 +433,7 @@ export function IndexFilters({
borderlessQueryField
closeOnChildOverlayClick={closeOnChildOverlayClick}
>
<InlineStack
gap={polarisSummerEditions2023 ? '2' : '3'}
align="start"
blockAlign="center"
>
<InlineStack gap="2" align="start" blockAlign="center">
<div
style={{
...defaultStyle,
Expand Down
6 changes: 1 addition & 5 deletions polaris-react/src/components/IndexFilters/components/Container/Container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
@import '../../../../styles/common';

.Container {
border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
border-bottom: var(--p-border-width-1) solid var(--p-color-border);
border-top-left-radius: var(--p-border-radius-2);
border-top-right-radius: var(--p-border-radius-2);
background: var(--p-color-bg);

#{$se23} & {
border-bottom: var(--p-border-width-1) solid var(--p-color-border);
}
}

@media #{$p-breakpoints-sm-down} {
Expand Down
29 changes: 0 additions & 29 deletions polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.scss
View file
Open in desktop

This file was deleted.

50 changes: 0 additions & 50 deletions polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion polaris-react/src/components/IndexFilters/components/FilterButton/index.ts
View file
Open in desktop

This file was deleted.

18 changes: 6 additions & 12 deletions ...is-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import {Icon} from '../../../Icon';
import {Tooltip} from '../../../Tooltip';
import {Text} from '../../../Text';
import {InlineStack} from '../../../InlineStack';
import {FilterButton} from '../FilterButton';
import {useFeatures} from '../../../../utilities/features';
import {Button} from '../../../Button';

export interface SearchFilterButtonProps {
onClick: () => void;
Expand All @@ -28,27 +27,22 @@ export function SearchFilterButton({
hideFilters,
hideQueryField,
}: SearchFilterButtonProps) {
const {polarisSummerEditions2023: se23} = useFeatures();

const iconMarkup = (
<InlineStack gap="0">
{hideQueryField ? null : <Icon source={SearchMinor} tone="base" />}
{hideFilters ? null : <Icon source={FilterMinor} tone="base" />}
</InlineStack>
);

const childMarkup = !se23 ? iconMarkup : null;

const activator = (
<div style={style}>
<FilterButton
<Button
size="slim"
onClick={onClick}
label={label}
disabled={disabled}
icon={se23 ? iconMarkup : undefined}
>
{childMarkup}
</FilterButton>
icon={iconMarkup}
accessibilityLabel={label}
/>
</div>
);

Expand Down
45 changes: 16 additions & 29 deletions polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@ import React, {useState, useMemo} from 'react';
import {SortMinor} from '@shopify/polaris-icons';

import {useI18n} from '../../../../utilities/i18n';
import {Icon} from '../../../Icon';
import {Popover} from '../../../Popover';
import {ChoiceList} from '../../../ChoiceList';
import type {ChoiceListProps} from '../../../ChoiceList';
import {Tooltip} from '../../../Tooltip';
import {Box} from '../../../Box';
import type {SortButtonChoice} from '../../types';
import {FilterButton} from '../FilterButton';
import {useFeatures} from '../../../../utilities/features';
import {Button} from '../../../Button';

import {DirectionButton} from './components';

Expand All @@ -37,7 +35,6 @@ export function SortButton({
onChangeDirection,
}: SortButtonProps) {
const i18n = useI18n();
const {polarisSummerEditions2023} = useFeatures();

const [active, setActive] = useState(false);
const [selectedValueKey, selectedDirection] = selected[0].split(' ');
Expand Down Expand Up @@ -97,25 +94,21 @@ export function SortButton({
return currentKey === selectedValueKey;
});

const iconMarkup = polarisSummerEditions2023 ? SortMinor : undefined;
const childMarkup = !polarisSummerEditions2023 ? (
<Icon source={SortMinor} tone="base" />
) : null;

const sortButton = (
<Tooltip
content={i18n.translate('Polaris.IndexFilters.SortButton.tooltip')}
preferredPosition="above"
hoverDelay={400}
>
<FilterButton
icon={iconMarkup}
<Button
size="slim"
icon={SortMinor}
onClick={handleClick}
label={i18n.translate('Polaris.IndexFilters.SortButton.ariaLabel')}
disabled={disabled}
>
{childMarkup}
</FilterButton>
accessibilityLabel={i18n.translate(
'Polaris.IndexFilters.SortButton.ariaLabel',
)}
/>
</Tooltip>
);

Expand All @@ -130,11 +123,10 @@ export function SortButton({
>
<Box
minWidth="148px"
padding={polarisSummerEditions2023 ? undefined : '4'}
paddingInlineStart={polarisSummerEditions2023 ? '3' : undefined}
paddingInlineEnd={polarisSummerEditions2023 ? '3' : undefined}
paddingBlockStart={polarisSummerEditions2023 ? '2' : undefined}
paddingBlockEnd={polarisSummerEditions2023 ? '2' : undefined}
paddingInlineStart="3"
paddingInlineEnd="3"
paddingBlockStart="2"
paddingBlockEnd="2"
borderBlockEndWidth="1"
borderColor="border-subdued"
>
Expand All @@ -146,15 +138,10 @@ export function SortButton({
/>
</Box>
<Box
padding={polarisSummerEditions2023 ? undefined : '4'}
paddingInlineStart={
polarisSummerEditions2023 ? '1_5-experimental' : undefined
}
paddingInlineEnd={
polarisSummerEditions2023 ? '1_5-experimental' : undefined
}
paddingBlockStart={polarisSummerEditions2023 ? '2' : undefined}
paddingBlockEnd={polarisSummerEditions2023 ? '2' : undefined}
paddingInlineStart="1_5-experimental"
paddingInlineEnd="1_5-experimental"
paddingBlockStart="2"
paddingBlockEnd="2"
>
<DirectionButton
direction="asc"
Expand Down
45 changes: 12 additions & 33 deletions ...onents/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

.DirectionButton {
// stylelint-disable-next-line -- This mixin cannot be replaced with a single token
@include focus-ring;
border-radius: var(--p-border-radius-1);
padding: var(--p-space-05);
@include focus-ring($size: 'wide');
border-radius: var(--p-border-radius-2);
padding: var(--p-space-1) var(--p-space-3) var(--p-space-1) var(--p-space-2);
font-size: var(--p-font-size-100);
display: flex;
align-items: center;
Expand All @@ -15,14 +15,7 @@
background: none;
text-align: left;

#{$se23} & {
// stylelint-disable-next-line -- se23 overrides
@include focus-ring($size: 'wide');
border-radius: var(--p-border-radius-2);
padding: var(--p-space-1) var(--p-space-3) var(--p-space-1) var(--p-space-2);
}

#{$se23} &:hover {
&:hover {
background-color: var(--p-color-bg-transparent-hover-experimental);
}

Expand All @@ -34,34 +27,20 @@
outline: 0;

// stylelint-disable-next-line -- This mixin cannot be replaced with a single token
@include focus-ring($style: 'focused');

#{$se23} & {
// stylelint-disable-next-line -- se23 overrides
@include focus-ring($size: 'wide', $style: 'focused');
}
@include focus-ring($size: 'wide', $style: 'focused');
}
}

.DirectionButton-active {
background: var(--p-color-bg-interactive-selected);
color: var(--p-color-text-interactive);

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

.Label {
flex: 1;
margin-left: var(--p-space-1);

#{$se23} & {
color: var(--p-color-text);
margin-left: var(--p-space-05);
font-size: var(--p-font-size-75);
font-weight: var(--p-font-weight-medium);
line-height: var(--p-font-line-height-1);
}
color: var(--p-color-text);
margin-left: var(--p-space-05);
font-size: var(--p-font-size-75);
font-weight: var(--p-font-weight-medium);
line-height: var(--p-font-line-height-1);
}
Loading