Skip to content

Commit

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

Fixes #9932

### WHAT is this pull request doing?

Consolidate se23 logic and styles for `DropZone` Component

### How to 🎩
Compare production and this PR's chromatic storybook to make sure styles
are the same


[Production](https://storybook.polaris.shopify.com/?path=/story/all-components-dropzone--default&globals=polarisSummerEditions2023:true)
[This
PR](https://5d559397bae39100201eedc1-qvidvpjgoo.chromatic.com/?path=/story/all-components-dropzone--default)
  • Loading branch information
@sophschneider
sophschneider committed Sep 18, 2023
1 parent 9ff5572 commit b6290b4
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 147 deletions.
84 changes: 16 additions & 68 deletions polaris-react/src/components/DropZone/DropZone.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,7 @@ $dropzone-stacking-order: (
position: relative;
display: flex;
justify-content: center;
background-color: var(--p-color-bg);
#{$se23} & {
background-color: var(--p-color-bg-input);
}
background-color: var(--p-color-bg-input);
border-radius: var(--p-border-radius-2);

&::after {
Expand All @@ -48,12 +45,10 @@ $dropzone-stacking-order: (
bottom: 0;
left: 0;

border: var(--p-border-width-1) $dropzone-border-style transparent;
border: var(--p-border-width-1-experimental) $dropzone-border-style
transparent;
border-radius: var(--p-border-radius-2);
pointer-events: none;
#{$se23} & {
border-width: var(--p-border-width-1-experimental);
}
}

&:not(.focused) {
Expand All @@ -70,49 +65,22 @@ $dropzone-stacking-order: (
.hasOutline {
padding: var(--p-space-025);

&::after {
border-color: var(--p-color-border-strong);
}

&:not(.isDisabled) {
#{$se23} &::after {
&::after {
border-width: var(--p-border-width-1-experimental);
border-color: var(--p-color-border-input);
}

&:hover {
cursor: pointer;
background-color: var(--p-color-bg-subdued);

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

// stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
&::after {
border-color: var(--p-color-border-interactive-hover);
#{$se23} & {
border-color: var(--p-color-border-input-hover);
}
border-color: var(--p-color-border-input-hover);
}
}
}

&:not(.focused) {
&::after {
@include reset-after;

@include set-border-radius;
border-color: var(--p-color-border-strong);
}
}

#{$se23} &:not(.focused):not(.isDisabled):not(:hover) {
// the additional .isDisabled argument in this :not invocation is to ensure we don't mess up disabled styles due to specificity.
// Won't be necessary post SE23.
&::after {
border-color: var(--p-color-border-input);
}
}
}

.isDragging {
Expand All @@ -123,16 +91,8 @@ $dropzone-stacking-order: (

.isDisabled {
cursor: not-allowed;

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

// se23 - specificity bump
&::after {
border-color: var(--p-color-border-disabled);
}
}
background-color: var(--p-color-bg-transparent-disabled-experimental);
color: var(--p-color-text-disabled);

&::after {
border-color: var(--p-color-border-disabled);
Expand Down Expand Up @@ -178,36 +138,24 @@ $dropzone-stacking-order: (
justify-content: center;
align-items: center;
padding: var(--p-space-4);
border: var(--p-border-width-1) $dropzone-border-style
var(--p-color-border-interactive);
border: var(--p-border-width-2-experimental) solid
var(--p-color-border-input-active-experimental);
text-align: center;
color: var(--p-color-text-interactive);
background-color: var(--p-color-bg-interactive-selected);
color: var(--p-color-text);
background-color: var(--p-color-bg-input-active-experimental);
pointer-events: none;

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

.sizeSmall & {
padding: 0;
}
}

.hasError > .Overlay {
border-color: var(--p-color-border-critical);
border-color: var(--p-color-border-critical-strong-experimental);
color: var(--p-color-text-critical);
border-style: $dropzone-border-style;
border-width: var(--p-border-width-1-experimental);
background-color: var(--p-color-bg-critical-subdued);
#{$se23} & {
border-color: var(--p-color-border-critical-strong-experimental);
color: var(--p-color-text-critical);
border-style: $dropzone-border-style;
border-width: var(--p-border-width-1-experimental);
background-color: var(--p-color-bg-critical-subdued);
}
}

.focused {
Expand Down
21 changes: 4 additions & 17 deletions polaris-react/src/components/DropZone/DropZone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import React, {
import type {FunctionComponent} from 'react';
import {UploadMajor, CircleAlertMajor} from '@shopify/polaris-icons';

import {useFeatures} from '../../utilities/features';
import {debounce} from '../../utilities/debounce';
import {classNames, variationName} from '../../utilities/css';
import {capitalize} from '../../utilities/capitalize';
Expand Down Expand Up @@ -145,7 +144,6 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
const node = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const dragTargets = useRef<EventTarget[]>([]);
const {polarisSummerEditions2023} = useFeatures();

// eslint-disable-next-line react-hooks/exhaustive-deps
const adjustSize = useCallback(
Expand Down Expand Up @@ -341,12 +339,12 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
!internalError &&
!error &&
overlay &&
overlayMarkup(UploadMajor, 'interactive', overlayTextWithDefault);
overlayMarkup(UploadMajor, overlayTextWithDefault);

const dragErrorOverlay =
dragging &&
(internalError || error) &&
overlayMarkup(CircleAlertMajor, 'critical', errorOverlayTextWithDefault);
overlayMarkup(CircleAlertMajor, errorOverlayTextWithDefault, 'critical');

const context = useMemo(
() => ({
Expand All @@ -372,24 +370,13 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {

function overlayMarkup(
icon: FunctionComponent,
color: 'critical' | 'interactive',
text: string,
color?: 'critical',
) {
let iconColor: 'critical' | 'interactive' | undefined = color;
const summerEditions = {
critical: 'critical',
interactive: undefined,
};
if (polarisSummerEditions2023) {
iconColor = summerEditions[color] as
| 'critical'
| 'interactive'
| undefined;
}
return (
<div className={styles.Overlay}>
<BlockStack gap="2" inlineAlign="center">
{size === 'small' && <Icon source={icon} color={iconColor} />}
{size === 'small' && <Icon source={icon} color={color} />}
{(size === 'medium' || size === 'large') && (
<Text variant="bodySm" as="p" fontWeight="bold">
{text}
Expand Down
34 changes: 7 additions & 27 deletions polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,48 +27,29 @@
display: inline-flex;
flex: 0 0 auto;
border: none;
border-radius: var(--p-border-radius-1);
padding: var(--p-space-1) var(--p-space-2);
margin: 0;
text-decoration: none;
color: var(--p-color-text-interactive);
background: var(--p-color-bg-interactive-subdued);
font-size: var(--p-font-size-75);
font-weight: var(--p-font-weight-semibold);
line-height: 1;
cursor: pointer;
text-align: center;
appearance: none;

&:hover {
color: var(--p-color-text-interactive-active);
}
color: var(--p-color-text);
background-color: var(--p-color-bg-input);
padding: var(--p-space-1_5-experimental) var(--p-space-3);
box-shadow: var(--p-shadow-button-experimental);
border-radius: var(--p-border-radius-2);

&.disabled {
#{$se23} & {
color: var(--p-color-text-disabled);
box-shadow: unset;

// additional specificity
// stylelint-disable-next-line selector-max-class -- se23
&.disabled {
background-color: var(--p-color-bg-transparent-disabled-experimental);
}
}
color: var(--p-color-text-disabled);
background-color: var(--p-color-bg-transparent-disabled-experimental);

// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include base-button-disabled;
cursor: not-allowed;
box-shadow: none;
}

#{$se23} & {
color: var(--p-color-text);
background-color: var(--p-color-bg-input);
padding: var(--p-space-1_5-experimental) var(--p-space-3);
box-shadow: var(--p-shadow-button-experimental);
border-radius: var(--p-border-radius-2);
}
}

.ActionTitle {
Expand All @@ -94,7 +75,6 @@
color: var(--p-color-text-interactive-disabled);
}

// The markup that uses theis className Only exists for polaris-summer-editions
.UploadIcon {
fill: var(--p-color-icon);

Expand Down
24 changes: 8 additions & 16 deletions polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import React, {useContext} from 'react';
import {UploadMajor} from '@shopify/polaris-icons';

import {Icon} from '../../../Icon';
import {useFeatures} from '../../../../utilities/features';
import {classNames} from '../../../../utilities/css';
import {capitalize} from '../../../../utilities/capitalize';
import {Text} from '../../../Text';
import {uploadArrow} from '../../images';
import {DropZoneContext} from '../../context';
import {useI18n} from '../../../../utilities/i18n';
import {createAllowMultipleKey} from '../../utils';
Expand All @@ -21,7 +19,6 @@ export interface FileUploadProps {

export function FileUpload(props: FileUploadProps) {
const i18n = useI18n();
const {polarisSummerEditions2023} = useFeatures();
const {size, measuring, type, disabled, allowMultiple} =
useContext(DropZoneContext);

Expand Down Expand Up @@ -74,19 +71,14 @@ export function FileUpload(props: FileUploadProps) {
);
break;
case 'small':
viewMarkup = <img width="20" src={uploadArrow} alt="" />;
if (polarisSummerEditions2023) {
viewMarkup = (
<div
className={classNames(
styles.UploadIcon,
disabled && styles.disabled,
)}
>
<Icon source={UploadMajor} />
</div>
);
}
viewMarkup = (
<div
className={classNames(styles.UploadIcon, disabled && styles.disabled)}
>
<Icon source={UploadMajor} />
</div>
);

break;
}

Expand Down
19 changes: 0 additions & 19 deletions polaris-react/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ describe('<FileUpload />', () => {
>
<FileUpload />
</DropZoneContext.Provider>,
{features: {polarisSummerEditions2023: true}},
);

expect(fileUpload).toContainReactComponent(Icon, {source: UploadMajor});
Expand Down Expand Up @@ -139,22 +138,4 @@ describe('<FileUpload />', () => {
});
},
);

// se23 - img replaced with Icon
describe('polarisSummerEditions2023 false', () => {
it('renders small view', () => {
const fileUpload = mountWithApp(
<DropZoneContext.Provider
value={{size: 'small', type: 'file', ...defaultStates}}
>
<FileUpload />
</DropZoneContext.Provider>,
{features: {polarisSummerEditions2023: false}},
);

expect(fileUpload).not.toContainReactComponent(Text);

expect(fileUpload).toContainReactComponentTimes('img', 1);
});
});
});

0 comments on commit b6290b4

Please sign in to comment.