From 00817471bea359a5f9a87471c0cdb43d831e3afe Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Tue, 13 Sep 2022 11:10:51 -0400 Subject: [PATCH 1/6] Add `Bleed` component --- polaris-react/src/components/Bleed/Bleed.scss | 8 ++ .../src/components/Bleed/Bleed.stories.tsx | 19 ++++ polaris-react/src/components/Bleed/Bleed.tsx | 93 +++++++++++++++++++ polaris-react/src/components/Bleed/index.ts | 1 + .../src/components/Bleed/tests/Bleed.test.tsx | 18 ++++ polaris-react/src/index.ts | 3 + 6 files changed, 142 insertions(+) create mode 100644 polaris-react/src/components/Bleed/Bleed.scss create mode 100644 polaris-react/src/components/Bleed/Bleed.stories.tsx create mode 100644 polaris-react/src/components/Bleed/Bleed.tsx create mode 100644 polaris-react/src/components/Bleed/index.ts create mode 100644 polaris-react/src/components/Bleed/tests/Bleed.test.tsx diff --git a/polaris-react/src/components/Bleed/Bleed.scss b/polaris-react/src/components/Bleed/Bleed.scss new file mode 100644 index 00000000000..0ff56802a55 --- /dev/null +++ b/polaris-react/src/components/Bleed/Bleed.scss @@ -0,0 +1,8 @@ +@import '../../styles/common'; + +.Bleed { + margin-bottom: calc(-1 * var(--pc-bleed-margin-bottom)); + margin-left: calc(-1 * var(--pc-bleed-margin-left)); + margin-right: calc(-1 * var(--pc-bleed-margin-right)); + margin-top: calc(-1 * var(--pc-bleed-margin-top)); +} diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/polaris-react/src/components/Bleed/Bleed.stories.tsx new file mode 100644 index 00000000000..b6df811f57b --- /dev/null +++ b/polaris-react/src/components/Bleed/Bleed.stories.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import type {ComponentMeta} from '@storybook/react'; +import {Bleed, Box} from '@shopify/polaris'; + +export default { + component: Bleed, +} as ComponentMeta; + +export function Default() { + return ( + + + + Bleed + + + + ); +} diff --git a/polaris-react/src/components/Bleed/Bleed.tsx b/polaris-react/src/components/Bleed/Bleed.tsx new file mode 100644 index 00000000000..6a85dfb12e3 --- /dev/null +++ b/polaris-react/src/components/Bleed/Bleed.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import type {spacing} from '@shopify/polaris-tokens'; + +import styles from './Bleed.scss'; + +type SpacingTokenName = keyof typeof spacing; + +// TODO: Bring this logic into tokens +type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}` + ? Scale + : never; + +interface Spacing { + bottom: SpacingTokenScale; + left: SpacingTokenScale; + right: SpacingTokenScale; + top: SpacingTokenScale; +} + +export interface BleedProps { + /** Elements to display inside tile */ + children: React.ReactNode; + space?: SpacingTokenScale; + horizontal?: SpacingTokenScale; + vertical?: SpacingTokenScale; + top?: SpacingTokenScale; + bottom?: SpacingTokenScale; + left?: SpacingTokenScale; + right?: SpacingTokenScale; +} + +export const Bleed = ({ + space, + horizontal, + vertical, + top, + bottom, + left, + right, + children, +}: BleedProps) => { + const getNegativeMargins = (direction: string) => { + const xAxis = ['left', 'right']; + const yAxis = ['top', 'bottom']; + + const directionValues: {[key: string]: string | undefined} = { + top, + bottom, + left, + right, + horizontal, + vertical, + }; + + if (directionValues[direction]) { + return directionValues[direction]; + } else if (!yAxis.includes(direction) && horizontal) { + return directionValues.horizontal; + } else if (!xAxis.includes(direction) && vertical) { + return directionValues.vertical; + } else { + return space; + } + }; + + const negativeMargins = { + top: getNegativeMargins('top'), + left: getNegativeMargins('left'), + right: getNegativeMargins('right'), + bottom: getNegativeMargins('bottom'), + } as Spacing; + + const style = { + ...(negativeMargins.bottom + ? {'--pc-bleed-margin-bottom': `var(--p-space-${negativeMargins.bottom})`} + : undefined), + ...(negativeMargins.left + ? {'--pc-bleed-margin-left': `var(--p-space-${negativeMargins.left})`} + : undefined), + ...(negativeMargins.right + ? {'--pc-bleed-margin-right': `var(--p-space-${negativeMargins.right})`} + : undefined), + ...(negativeMargins.top + ? {'--pc-bleed-margin-top': `var(--p-space-${negativeMargins.top})`} + : undefined), + } as React.CSSProperties; + + return ( +
+ {children} +
+ ); +}; diff --git a/polaris-react/src/components/Bleed/index.ts b/polaris-react/src/components/Bleed/index.ts new file mode 100644 index 00000000000..58ccfa0647a --- /dev/null +++ b/polaris-react/src/components/Bleed/index.ts @@ -0,0 +1 @@ +export * from './Bleed'; diff --git a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx new file mode 100644 index 00000000000..935f1c9d801 --- /dev/null +++ b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import {mountWithApp} from 'tests/utilities'; + +import {Bleed} from '../Bleed'; + +const Children = () =>

This is a tile

; + +describe('', () => { + it('renders children', () => { + const bleed = mountWithApp( + + + , + ); + + expect(bleed).toContainReactComponent(Children); + }); +}); diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts index 9e4ca0483ec..2004514e998 100644 --- a/polaris-react/src/index.ts +++ b/polaris-react/src/index.ts @@ -72,6 +72,9 @@ export type { BannerHandles, } from './components/Banner'; +export {Bleed} from './components/Bleed'; +export type {BleedProps} from './components/Bleed'; + export {Box} from './components/Box'; export type {BoxProps} from './components/Box'; From 883cb9e37cfebb2b0d53d93155ede306f114cd5f Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Wed, 14 Sep 2022 18:44:37 -0400 Subject: [PATCH 2/6] Add `Bleed` test --- polaris-react/src/components/Bleed/Bleed.tsx | 4 +- .../src/components/Bleed/tests/Bleed.test.tsx | 41 +++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/polaris-react/src/components/Bleed/Bleed.tsx b/polaris-react/src/components/Bleed/Bleed.tsx index 6a85dfb12e3..82f3cce65a9 100644 --- a/polaris-react/src/components/Bleed/Bleed.tsx +++ b/polaris-react/src/components/Bleed/Bleed.tsx @@ -1,6 +1,8 @@ import React from 'react'; import type {spacing} from '@shopify/polaris-tokens'; +import {sanitizeCustomProperties} from '../../utilities/css'; + import styles from './Bleed.scss'; type SpacingTokenName = keyof typeof spacing; @@ -86,7 +88,7 @@ export const Bleed = ({ } as React.CSSProperties; return ( -
+
{children}
); diff --git a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx index 935f1c9d801..2c9c71ebaf0 100644 --- a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx +++ b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx @@ -15,4 +15,45 @@ describe('', () => { expect(bleed).toContainReactComponent(Children); }); + + it('does not render custom properties by default', () => { + const bleed = mountWithApp( + + + , + ); + + expect(bleed).toContainReactComponent('div', {style: undefined}); + }); + + it('only renders the custom property that matches the property passed in', () => { + const bleed = mountWithApp( + + + , + ); + + expect(bleed).toContainReactComponent('div', { + style: { + '--pc-bleed-margin-left': 'var(--p-space-2)', + } as React.CSSProperties, + }); + }); + + it('renders custom properties combined with any overrides if they are passed in', () => { + const bleed = mountWithApp( + + + , + ); + + expect(bleed).toContainReactComponent('div', { + style: { + '--pc-bleed-margin-bottom': 'var(--p-space-1)', + '--pc-bleed-margin-left': 'var(--p-space-2)', + '--pc-bleed-margin-right': 'var(--p-space-3)', + '--pc-bleed-margin-top': 'var(--p-space-1)', + } as React.CSSProperties, + }); + }); }); From 0211614ab07e0d1a4c052679f203e85c31090462 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Thu, 15 Sep 2022 10:41:06 -0400 Subject: [PATCH 3/6] Add `Bleed` stories --- .../src/components/Bleed/Bleed.stories.tsx | 53 +++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/polaris-react/src/components/Bleed/Bleed.stories.tsx index b6df811f57b..c14664ca2cf 100644 --- a/polaris-react/src/components/Bleed/Bleed.stories.tsx +++ b/polaris-react/src/components/Bleed/Bleed.stories.tsx @@ -6,13 +6,58 @@ export default { component: Bleed, } as ComponentMeta; +const styles = { + background: 'var(--p-surface-neutral-subdued-dark)', + borderRadius: 'var(--p-border-radius-05)', + padding: 'var(--p-space-4)', + height: 'var(--p-space-12)', +}; + export function Default() { return ( - + - - Bleed - +
+ + + ); +} + +export function WithVerticalDirection() { + return ( + + +
+ + + ); +} + +export function WithHorizontalDirection() { + return ( + + +
+ + + ); +} + +export function WithSpecificDirection() { + return ( + + +
+ + + ); +} + +export function WithAllDirection() { + return ( + + +
); From fd6e9b6137d80cadf13007bd8d913239a674acce Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Thu, 15 Sep 2022 12:00:56 -0400 Subject: [PATCH 4/6] Remove lint warning --- polaris-react/src/components/Bleed/Bleed.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/polaris-react/src/components/Bleed/Bleed.scss b/polaris-react/src/components/Bleed/Bleed.scss index 0ff56802a55..d46b8317b6b 100644 --- a/polaris-react/src/components/Bleed/Bleed.scss +++ b/polaris-react/src/components/Bleed/Bleed.scss @@ -1,8 +1,10 @@ @import '../../styles/common'; .Bleed { + /* stylelint-disable declaration-block-no-redundant-longhand-properties */ margin-bottom: calc(-1 * var(--pc-bleed-margin-bottom)); margin-left: calc(-1 * var(--pc-bleed-margin-left)); margin-right: calc(-1 * var(--pc-bleed-margin-right)); margin-top: calc(-1 * var(--pc-bleed-margin-top)); + /* stylelint-enable declaration-block-no-redundant-longhand-properties */ } From d97e63faa06d479161fb9ec9e16118947db4c077 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Thu, 22 Sep 2022 10:42:02 -0400 Subject: [PATCH 5/6] Rename `space` prop --- polaris-react/src/components/Bleed/Bleed.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/polaris-react/src/components/Bleed/Bleed.tsx b/polaris-react/src/components/Bleed/Bleed.tsx index 82f3cce65a9..4745cca36d4 100644 --- a/polaris-react/src/components/Bleed/Bleed.tsx +++ b/polaris-react/src/components/Bleed/Bleed.tsx @@ -22,7 +22,7 @@ interface Spacing { export interface BleedProps { /** Elements to display inside tile */ children: React.ReactNode; - space?: SpacingTokenScale; + spacing?: SpacingTokenScale; horizontal?: SpacingTokenScale; vertical?: SpacingTokenScale; top?: SpacingTokenScale; @@ -32,7 +32,7 @@ export interface BleedProps { } export const Bleed = ({ - space, + spacing, horizontal, vertical, top, @@ -61,7 +61,7 @@ export const Bleed = ({ } else if (!xAxis.includes(direction) && vertical) { return directionValues.vertical; } else { - return space; + return spacing; } }; From 8eae55542ed86f73378027cd43e7edd658c90e28 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Thu, 22 Sep 2022 10:56:56 -0400 Subject: [PATCH 6/6] Update test and stories --- polaris-react/src/components/Bleed/Bleed.stories.tsx | 2 +- polaris-react/src/components/Bleed/tests/Bleed.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/polaris-react/src/components/Bleed/Bleed.stories.tsx index c14664ca2cf..a01edd02630 100644 --- a/polaris-react/src/components/Bleed/Bleed.stories.tsx +++ b/polaris-react/src/components/Bleed/Bleed.stories.tsx @@ -56,7 +56,7 @@ export function WithSpecificDirection() { export function WithAllDirection() { return ( - +
diff --git a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx index 2c9c71ebaf0..da2c480b410 100644 --- a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx +++ b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx @@ -42,7 +42,7 @@ describe('', () => { it('renders custom properties combined with any overrides if they are passed in', () => { const bleed = mountWithApp( - + , );