From a4b3d39ba8e432908c029da5276e1a6f99703ad4 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 1 Nov 2022 09:45:34 -0400 Subject: [PATCH 1/5] improve docs, better default spacing for inline --- .changeset/red-jeans-clean.md | 5 ++ .../src/components/AlphaCard/AlphaCard.tsx | 7 +++ .../src/components/AlphaStack/AlphaStack.tsx | 12 +++-- polaris-react/src/components/Bleed/Bleed.tsx | 48 +++++++++---------- .../src/components/Columns/Columns.tsx | 4 +- .../src/components/Inline/Inline.tsx | 6 ++- 6 files changed, 51 insertions(+), 31 deletions(-) create mode 100644 .changeset/red-jeans-clean.md diff --git a/.changeset/red-jeans-clean.md b/.changeset/red-jeans-clean.md new file mode 100644 index 00000000000..c2139747f55 --- /dev/null +++ b/.changeset/red-jeans-clean.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Improved comments across layout components, changed default spacing of Inline component to match AlphaStack diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.tsx index 5fd6bed8ea2..72d3899435f 100644 --- a/polaris-react/src/components/AlphaCard/AlphaCard.tsx +++ b/polaris-react/src/components/AlphaCard/AlphaCard.tsx @@ -17,8 +17,15 @@ type CardBackgroundColorTokenScale = Extract< export interface AlphaCardProps { /** Elements to display inside card */ children?: React.ReactNode; + /** Background color + * @default 'surface' + */ background?: CardBackgroundColorTokenScale; + /** Spacing around the card + * @default '5' + */ padding?: SpacingSpaceScale; + /** Border radius value above a set breakpoint */ roundedAbove?: BreakpointsAlias; } diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx index b04dd428a5f..763bb434812 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx +++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx @@ -17,15 +17,21 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset'; type Spacing = ResponsiveProp; export interface AlphaStackProps { - /** HTML Element type */ + /** HTML Element type + * @default 'div' + */ as?: Element; /** Elements to display inside stack */ children?: React.ReactNode; - /** Adjust vertical alignment of elements */ + /** The vertical alignment of elements + * @default 'start' + */ align?: Align; /** Toggle elements to be full width */ fullWidth?: boolean; - /** Adjust spacing between elements */ + /** The space between elements + * @default '4' + */ spacing?: Spacing; } diff --git a/polaris-react/src/components/Bleed/Bleed.tsx b/polaris-react/src/components/Bleed/Bleed.tsx index e9c54e278fa..e3c170a212e 100644 --- a/polaris-react/src/components/Bleed/Bleed.tsx +++ b/polaris-react/src/components/Bleed/Bleed.tsx @@ -5,22 +5,22 @@ import {sanitizeCustomProperties} from '../../utilities/css'; import styles from './Bleed.scss'; -interface Spacing { - bottom: SpacingSpaceScale; - left: SpacingSpaceScale; - right: SpacingSpaceScale; - top: SpacingSpaceScale; -} - export interface BleedProps { /** Elements to display inside tile */ children: React.ReactNode; + /** Negative space around the element */ spacing?: SpacingSpaceScale; + /** Negative horizontal space around the element */ horizontal?: SpacingSpaceScale; + /** Negative vertical space around the element */ vertical?: SpacingSpaceScale; + /** Negative top space around the element */ top?: SpacingSpaceScale; + /** Negative bottom space around the element */ bottom?: SpacingSpaceScale; + /** Negative left space around the element */ left?: SpacingSpaceScale; + /** Negative right space around the element */ right?: SpacingSpaceScale; } @@ -58,26 +58,24 @@ export const Bleed = ({ } }; - const negativeMargins = { - top: getNegativeMargins('top'), - left: getNegativeMargins('left'), - right: getNegativeMargins('right'), - bottom: getNegativeMargins('bottom'), - } as Spacing; + const negativeTop = getNegativeMargins('top'); + const negativeLeft = getNegativeMargins('left'); + const negativeRight = getNegativeMargins('right'); + const negativeBottom = getNegativeMargins('bottom'); 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), + '--pc-bleed-margin-bottom': negativeBottom + ? `var(--p-space-${negativeBottom})` + : undefined, + '--pc-bleed-margin-left': negativeLeft + ? `var(--p-space-${negativeLeft})` + : undefined, + '--pc-bleed-margin-right': negativeRight + ? `var(--p-space-${negativeRight})` + : undefined, + '--pc-bleed-margin-top': negativeTop + ? `var(--p-space-${negativeTop})` + : undefined, } as React.CSSProperties; return ( diff --git a/polaris-react/src/components/Columns/Columns.tsx b/polaris-react/src/components/Columns/Columns.tsx index 085536272b2..da434e563a5 100644 --- a/polaris-react/src/components/Columns/Columns.tsx +++ b/polaris-react/src/components/Columns/Columns.tsx @@ -17,7 +17,9 @@ type Spacing = { }; export interface ColumnsProps { - /** The space between columns */ + /** The space between columns + * @default '4' + */ spacing?: Spacing; /** The number of columns to display * @default {xs: 6, sm: 6, md: 6, lg: 6, xl: 6} diff --git a/polaris-react/src/components/Inline/Inline.tsx b/polaris-react/src/components/Inline/Inline.tsx index 9afc139403f..a93a7f953c6 100644 --- a/polaris-react/src/components/Inline/Inline.tsx +++ b/polaris-react/src/components/Inline/Inline.tsx @@ -19,7 +19,9 @@ export interface InlineProps { children?: React.ReactNode; /** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */ wrap?: boolean; - /** Adjust spacing between elements */ + /** The space between elements + * @default '4' + */ spacing?: SpacingSpaceScale; /** Adjust vertical alignment of elements */ alignY?: keyof typeof AlignY; @@ -29,7 +31,7 @@ export interface InlineProps { export const Inline = function Inline({ children, - spacing = '1', + spacing = '4', align, alignY, wrap, From 83dece203f3ded3c5afa3ec8c5e7eaba5159ac5b Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 1 Nov 2022 14:09:09 -0400 Subject: [PATCH 2/5] Update polaris-react/src/components/AlphaCard/AlphaCard.tsx --- polaris-react/src/components/AlphaCard/AlphaCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.tsx index 72d3899435f..200fad3a5b5 100644 --- a/polaris-react/src/components/AlphaCard/AlphaCard.tsx +++ b/polaris-react/src/components/AlphaCard/AlphaCard.tsx @@ -21,7 +21,7 @@ export interface AlphaCardProps { * @default 'surface' */ background?: CardBackgroundColorTokenScale; - /** Spacing around the card + /** The spacing around the card * @default '5' */ padding?: SpacingSpaceScale; From ce3c0647748b627419279505c2b814193a481c3e Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 1 Nov 2022 14:09:15 -0400 Subject: [PATCH 3/5] Update polaris-react/src/components/AlphaStack/AlphaStack.tsx --- polaris-react/src/components/AlphaStack/AlphaStack.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx index 763bb434812..170d8ac9cbc 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx +++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx @@ -29,7 +29,7 @@ export interface AlphaStackProps { align?: Align; /** Toggle elements to be full width */ fullWidth?: boolean; - /** The space between elements + /** The spacing between elements * @default '4' */ spacing?: Spacing; From 1ffcf914b111182198211a9b4a00709298361ef5 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 1 Nov 2022 14:10:01 -0400 Subject: [PATCH 4/5] Update polaris-react/src/components/Columns/Columns.tsx --- polaris-react/src/components/Columns/Columns.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Columns/Columns.tsx b/polaris-react/src/components/Columns/Columns.tsx index da434e563a5..afe0b18db7c 100644 --- a/polaris-react/src/components/Columns/Columns.tsx +++ b/polaris-react/src/components/Columns/Columns.tsx @@ -17,7 +17,7 @@ type Spacing = { }; export interface ColumnsProps { - /** The space between columns + /** The spacing between columns * @default '4' */ spacing?: Spacing; From a4ec5dfa9d62a0eae5d5b25e5d537512d0ebb94c Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 1 Nov 2022 14:10:16 -0400 Subject: [PATCH 5/5] Update polaris-react/src/components/Inline/Inline.tsx --- polaris-react/src/components/Inline/Inline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Inline/Inline.tsx b/polaris-react/src/components/Inline/Inline.tsx index a93a7f953c6..3eea4728197 100644 --- a/polaris-react/src/components/Inline/Inline.tsx +++ b/polaris-react/src/components/Inline/Inline.tsx @@ -19,7 +19,7 @@ export interface InlineProps { children?: React.ReactNode; /** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */ wrap?: boolean; - /** The space between elements + /** The spacing between elements * @default '4' */ spacing?: SpacingSpaceScale;