diff --git a/packages/canon/docs/spaceProps.ts b/packages/canon/docs/spaceProps.ts new file mode 100644 index 0000000000..132ccce699 --- /dev/null +++ b/packages/canon/docs/spaceProps.ts @@ -0,0 +1,73 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export const spacePropsList = { + margin: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + marginBottom: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + marginLeft: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + marginRight: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + marginTop: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + marginX: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + marginY: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + padding: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + paddingBottom: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + paddingLeft: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + paddingRight: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + paddingTop: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + paddingX: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, + paddingY: { + type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], + responsive: true, + }, +}; diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 12a52cc1d6..4ff3824bb0 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -146,7 +146,7 @@ export interface ColorProps { } // @public (undocumented) -export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; +export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'; // @public (undocumented) export const Container: React_2.ForwardRefExoticComponent< @@ -184,9 +184,6 @@ export type FlexDirection = 'row' | 'column'; // @public (undocumented) export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; -// @public (undocumented) -export type Gap = Space | Partial>; - // @public (undocumented) export const Grid: ForwardRefExoticComponent< GridProps & RefAttributes @@ -203,25 +200,27 @@ export interface GridItemProps { // (undocumented) className?: string; // (undocumented) - colSpan?: Columns | 'full'; + colEnd?: UtilityProps['colEnd']; // (undocumented) - end?: Columns | 'auto'; + colSpan?: UtilityProps['colSpan']; // (undocumented) - rowSpan?: Columns | 'full'; + colStart?: UtilityProps['colStart']; // (undocumented) - start?: Columns | 'auto'; + rowSpan?: UtilityProps['rowSpan']; // (undocumented) style?: React.CSSProperties; } // @public (undocumented) -export interface GridProps extends SpaceProps, ColorProps { +export interface GridProps extends SpaceProps { // (undocumented) children?: React.ReactNode; // (undocumented) className?: string; // (undocumented) - columns?: Columns | Partial>; + columns?: UtilityProps['columns']; + // (undocumented) + gap?: UtilityProps['gap']; // (undocumented) style?: React.CSSProperties; } @@ -284,6 +283,8 @@ export interface InlineProps extends SpaceProps, ColorProps { // (undocumented) className?: string; // (undocumented) + gap?: UtilityProps['gap']; + // (undocumented) style?: React.CSSProperties; } @@ -296,83 +297,39 @@ export type JustifyContent = | 'around' | 'between'; -// @public (undocumented) -export type Margin = Space | Partial>; - -// @public (undocumented) -export type MarginBottom = Space | Partial>; - -// @public (undocumented) -export type MarginLeft = Space | Partial>; - -// @public (undocumented) -export type MarginRight = Space | Partial>; - -// @public (undocumented) -export type MarginTop = Space | Partial>; - -// @public (undocumented) -export type MarginX = Space | Partial>; - -// @public (undocumented) -export type MarginY = Space | Partial>; - -// @public (undocumented) -export type Padding = Space | Partial>; - -// @public (undocumented) -export type PaddingBottom = Space | Partial>; - -// @public (undocumented) -export type PaddingLeft = Space | Partial>; - -// @public (undocumented) -export type PaddingRight = Space | Partial>; - -// @public (undocumented) -export type PaddingTop = Space | Partial>; - -// @public (undocumented) -export type PaddingX = Space | Partial>; - -// @public (undocumented) -export type PaddingY = Space | Partial>; - // @public (undocumented) export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; // @public (undocumented) export interface SpaceProps { // (undocumented) - gap?: Gap; + margin?: Space | Partial>; // (undocumented) - margin?: Margin; + marginBottom?: Space | Partial>; // (undocumented) - marginBottom?: MarginBottom; + marginLeft?: Space | Partial>; // (undocumented) - marginLeft?: MarginLeft; + marginRight?: Space | Partial>; // (undocumented) - marginRight?: MarginRight; + marginTop?: Space | Partial>; // (undocumented) - marginTop?: MarginTop; + marginX?: Space | Partial>; // (undocumented) - marginX?: MarginX; + marginY?: Space | Partial>; // (undocumented) - marginY?: MarginY; + padding?: Space | Partial>; // (undocumented) - padding?: Padding; + paddingBottom?: Space | Partial>; // (undocumented) - paddingBottom?: PaddingBottom; + paddingLeft?: Space | Partial>; // (undocumented) - paddingLeft?: PaddingLeft; + paddingRight?: Space | Partial>; // (undocumented) - paddingRight?: PaddingRight; + paddingTop?: Space | Partial>; // (undocumented) - paddingTop?: PaddingTop; + paddingX?: Space | Partial>; // (undocumented) - paddingX?: PaddingX; - // (undocumented) - paddingY?: PaddingY; + paddingY?: Space | Partial>; } // @public (undocumented) @@ -395,6 +352,8 @@ export interface StackProps extends SpaceProps, ColorProps { // (undocumented) className?: string; // (undocumented) + gap?: UtilityProps['gap']; + // (undocumented) style?: React.CSSProperties; } @@ -444,7 +403,7 @@ export const TableRow: React_3.ForwardRefExoticComponent< export type Theme = 'light' | 'dark'; // @public (undocumented) -export interface UtilityProps { +export interface UtilityProps extends SpaceProps { // (undocumented) alignItems?: AlignItems | Partial>; // (undocumented) @@ -452,6 +411,14 @@ export interface UtilityProps { // (undocumented) borderRadius?: BorderRadius | Partial>; // (undocumented) + colEnd?: Columns | 'auto' | Partial>; + // (undocumented) + colSpan?: Columns | 'full' | Partial>; + // (undocumented) + colStart?: Columns | 'auto' | Partial>; + // (undocumented) + columns?: Columns | Partial>; + // (undocumented) display?: Display | Partial>; // (undocumented) flexDirection?: FlexDirection | Partial>; @@ -462,32 +429,6 @@ export interface UtilityProps { // (undocumented) justifyContent?: JustifyContent | Partial>; // (undocumented) - margin?: Space | Partial>; - // (undocumented) - marginBottom?: Space | Partial>; - // (undocumented) - marginLeft?: Space | Partial>; - // (undocumented) - marginRight?: Space | Partial>; - // (undocumented) - marginTop?: Space | Partial>; - // (undocumented) - marginX?: Space | Partial>; - // (undocumented) - marginY?: Space | Partial>; - // (undocumented) - padding?: Space | Partial>; - // (undocumented) - paddingBottom?: Space | Partial>; - // (undocumented) - paddingLeft?: Space | Partial>; - // (undocumented) - paddingRight?: Space | Partial>; - // (undocumented) - paddingTop?: Space | Partial>; - // (undocumented) - paddingX?: Space | Partial>; - // (undocumented) - paddingY?: Space | Partial>; + rowSpan?: Columns | 'full' | Partial>; } ``` diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx index bc350da323..ee30e17305 100644 --- a/packages/canon/src/components/Box/Docs.mdx +++ b/packages/canon/src/components/Box/Docs.mdx @@ -2,6 +2,7 @@ import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks'; import * as BoxStories from './Box.stories'; import { Title, Text } from '../../../docs/components'; import { PropsTable } from '../../../docs/components'; +import { spacePropsList } from '../../../docs/spaceProps'; @@ -84,66 +85,7 @@ import { PropsTable } from '../../../docs/components'; - + Examples Here are some examples of how you can use the Box component. diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts index b1f414cf30..1ccf305191 100644 --- a/packages/canon/src/components/Container/types.ts +++ b/packages/canon/src/components/Container/types.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { SpaceProps } from '../../layout/types'; +import { SpaceProps } from '../../types'; /** @public */ export interface ContainerProps diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx index 14e3bfb922..c1a0237279 100644 --- a/packages/canon/src/components/Grid/Docs.mdx +++ b/packages/canon/src/components/Grid/Docs.mdx @@ -1,7 +1,7 @@ import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; import * as GridStories from './Grid.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacingProperties } from '../../layout/sprinkles.css'; +import { Title, Text, PropsTable } from '../../../docs/components'; +import { spacePropsList } from '../../../docs/spaceProps'; @@ -59,7 +59,7 @@ import { spacingProperties } from '../../layout/sprinkles.css'; The grid component also accepts all the spacing props from the Box component. - + Grid Item diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx index d4559f362a..73aec06cf4 100644 --- a/packages/canon/src/components/Grid/Grid.stories.tsx +++ b/packages/canon/src/components/Grid/Grid.stories.tsx @@ -61,20 +61,6 @@ export const Default: Story = { ), }; -export const Test: Story = { - args: { - columns: 12, - gap: 'md', - }, - render: args => ( - - - - - - ), -}; - export const LargeGap: Story = { args: { gap: 'lg', diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx index 67c9c54855..3799a70ae8 100644 --- a/packages/canon/src/components/Grid/Grid.tsx +++ b/packages/canon/src/components/Grid/Grid.tsx @@ -47,13 +47,6 @@ const GridItem = forwardRef((props, ref) => { const utilityClassNames = getClassNames(restProps); - // const sprinklesClassName = gridItemSprinkles({ - // rowSpan, - // colSpan, - // start, - // end, - // }); - const classNames = ['grid-item', utilityClassNames, className] .filter(Boolean) .join(' '); diff --git a/packages/canon/src/components/Grid/index.ts b/packages/canon/src/components/Grid/index.ts index b07249241c..b2534c6b77 100644 --- a/packages/canon/src/components/Grid/index.ts +++ b/packages/canon/src/components/Grid/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ export { Grid } from './Grid'; -export type { GridProps, GridItemProps, Columns } from './types'; +export type { GridProps, GridItemProps } from './types'; diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts index b4be070e8e..e3069213c3 100644 --- a/packages/canon/src/components/Inline/types.ts +++ b/packages/canon/src/components/Inline/types.ts @@ -15,12 +15,13 @@ */ import { AsProps, ColorProps } from '../../layout/types'; -import { SpaceProps } from '../../layout/types'; -import type { Breakpoint } from '../../types'; +import type { Breakpoint, SpaceProps, UtilityProps } from '../../types'; + /** @public */ export interface InlineProps extends SpaceProps, ColorProps { children: React.ReactNode; as?: AsProps; + gap?: UtilityProps['gap']; align?: | 'left' | 'center' diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts index bec5c1cb62..d4948557e7 100644 --- a/packages/canon/src/components/Stack/types.ts +++ b/packages/canon/src/components/Stack/types.ts @@ -14,12 +14,13 @@ * limitations under the License. */ import { AsProps, ColorProps } from '../../layout/types'; -import { SpaceProps } from '../../layout/types'; -import type { Breakpoint } from '../../types'; +import type { Breakpoint, SpaceProps, UtilityProps } from '../../types'; + /** @public */ export interface StackProps extends SpaceProps, ColorProps { children: React.ReactNode; as?: AsProps; + gap?: UtilityProps['gap']; align?: | 'left' | 'center' diff --git a/packages/canon/src/layout/types.ts b/packages/canon/src/layout/types.ts index a4fb53e6c6..3bb6bbb7f3 100644 --- a/packages/canon/src/layout/types.ts +++ b/packages/canon/src/layout/types.ts @@ -14,75 +14,9 @@ * limitations under the License. */ -import type { Breakpoint, Space } from '../types'; - /** @public */ export type Theme = 'light' | 'dark'; -/** @public */ -export type Gap = Space | Partial>; - -/** @public */ -export type PaddingLeft = Space | Partial>; - -/** @public */ -export type PaddingRight = Space | Partial>; - -/** @public */ -export type PaddingTop = Space | Partial>; - -/** @public */ -export type PaddingBottom = Space | Partial>; - -/** @public */ -export type Padding = Space | Partial>; - -/** @public */ -export type PaddingX = Space | Partial>; - -/** @public */ -export type PaddingY = Space | Partial>; - -/** @public */ -export type MarginLeft = Space | Partial>; - -/** @public */ -export type MarginRight = Space | Partial>; - -/** @public */ -export type MarginTop = Space | Partial>; - -/** @public */ -export type MarginBottom = Space | Partial>; - -/** @public */ -export type Margin = Space | Partial>; - -/** @public */ -export type MarginX = Space | Partial>; - -/** @public */ -export type MarginY = Space | Partial>; - -/** @public */ -export interface SpaceProps { - gap?: Gap; - padding?: Padding; - paddingLeft?: PaddingLeft; - paddingRight?: PaddingRight; - paddingTop?: PaddingTop; - paddingBottom?: PaddingBottom; - paddingX?: PaddingX; - paddingY?: PaddingY; - margin?: Margin; - marginLeft?: MarginLeft; - marginRight?: MarginRight; - marginTop?: MarginTop; - marginBottom?: MarginBottom; - marginX?: MarginX; - marginY?: MarginY; -} - /** @public */ export type Background = | 'background'