From f307af753c14fc4238c2044c647b9a62830b0597 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 28 Nov 2024 18:53:03 +0000 Subject: [PATCH] Update API report Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 130 +++++++++++------- .../canon/src/components/Box/docs/padding.tsx | 52 +++---- packages/canon/src/index.ts | 1 + 3 files changed, 107 insertions(+), 76 deletions(-) diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 723e08859b..e98d57a13d 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -6,12 +6,12 @@ /// import { CSSProperties } from 'react'; -import { JSXElementConstructor } from 'react'; +import { DOMElement } from 'react'; import { default as React_2 } from 'react'; -import { ReactElement } from 'react'; +import { ReactNode } from 'react'; // @public (undocumented) -export type AlignItems = +export type AlignItemsProps = | 'stretch' | 'flex-start' | 'center' @@ -20,6 +20,25 @@ export type AlignItems = Record >; +// @public (undocumented) +export type AsProps = + | 'div' + | 'span' + | 'p' + | 'article' + | 'section' + | 'main' + | 'nav' + | 'aside' + | 'ul' + | 'ol' + | 'li' + | 'details' + | 'summary' + | 'dd' + | 'dl' + | 'dt'; + // @public (undocumented) export type Background = | 'background' @@ -31,7 +50,7 @@ export type Background = >; // @public (undocumented) -export type BorderRadius = +export type BorderRadiusProps = | 'none' | 'small' | 'medium' @@ -39,68 +58,35 @@ export type BorderRadius = | Partial>; // @public (undocumented) -export const Box: (props: BoxProps) => ReactElement< +export const Box: (props: BoxProps) => DOMElement< { className: string; style: CSSProperties | undefined; + children: ReactNode; }, - string | JSXElementConstructor + Element >; // @public (undocumented) -export interface BoxProps { +export interface BoxProps extends SpaceProps, ColorProps { // (undocumented) - alignItems?: AlignItems; + alignItems?: AlignItemsProps; // (undocumented) as?: keyof JSX.IntrinsicElements; // (undocumented) - background?: Background; - // (undocumented) - borderRadius?: BorderRadius; + borderRadius?: BorderRadiusProps; // (undocumented) children?: React.ReactNode; // (undocumented) className?: string; // (undocumented) - color?: Color; + display?: DisplayProps; // (undocumented) - display?: Display; + flexDirection?: FlexDirectionProps; // (undocumented) - flexDirection?: FlexDirection; + flexWrap?: FlexWrapProps; // (undocumented) - flexWrap?: FlexWrap; - // (undocumented) - gap?: Gap; - // (undocumented) - justifyContent?: JustifyContent; - // (undocumented) - margin?: Margin; - // (undocumented) - marginBottom?: MarginBottom; - // (undocumented) - marginLeft?: MarginLeft; - // (undocumented) - marginRight?: MarginRight; - // (undocumented) - marginTop?: MarginTop; - // (undocumented) - marginX?: MarginX; - // (undocumented) - marginY?: MarginY; - // (undocumented) - padding?: Padding; - // (undocumented) - paddingBottom?: PaddingBottom; - // (undocumented) - paddingLeft?: PaddingLeft; - // (undocumented) - paddingRight?: PaddingRight; - // (undocumented) - paddingTop?: PaddingTop; - // (undocumented) - paddingX?: PaddingX; - // (undocumented) - paddingY?: PaddingY; + justifyContent?: JustifyContentProps; // (undocumented) style?: React.CSSProperties; } @@ -163,7 +149,15 @@ export type Color = | Partial>; // @public (undocumented) -export type Display = +export interface ColorProps { + // (undocumented) + background?: Background; + // (undocumented) + color?: Color; +} + +// @public (undocumented) +export type DisplayProps = | 'flex' | 'none' | 'inline' @@ -171,13 +165,13 @@ export type Display = | Partial>; // @public (undocumented) -export type FlexDirection = +export type FlexDirectionProps = | 'row' | 'column' | Partial>; // @public (undocumented) -export type FlexWrap = +export type FlexWrapProps = | 'wrap' | 'nowrap' | Partial>; @@ -203,7 +197,7 @@ export type IconNames = | 'trash'; // @public (undocumented) -export type JustifyContent = +export type JustifyContentProps = | 'stretch' | 'flex-start' | 'center' @@ -279,6 +273,40 @@ export const space: { xxl: string; }; +// @public (undocumented) +export interface SpaceProps { + // (undocumented) + gap?: Gap; + // (undocumented) + margin?: Margin; + // (undocumented) + marginBottom?: MarginBottom; + // (undocumented) + marginLeft?: MarginLeft; + // (undocumented) + marginRight?: MarginRight; + // (undocumented) + marginTop?: MarginTop; + // (undocumented) + marginX?: MarginX; + // (undocumented) + marginY?: MarginY; + // (undocumented) + padding?: Padding; + // (undocumented) + paddingBottom?: PaddingBottom; + // (undocumented) + paddingLeft?: PaddingLeft; + // (undocumented) + paddingRight?: PaddingRight; + // (undocumented) + paddingTop?: PaddingTop; + // (undocumented) + paddingX?: PaddingX; + // (undocumented) + paddingY?: PaddingY; +} + // @public (undocumented) export type Theme = keyof typeof themes; diff --git a/packages/canon/src/components/Box/docs/padding.tsx b/packages/canon/src/components/Box/docs/padding.tsx index 3f78f56692..486b1bcec5 100644 --- a/packages/canon/src/components/Box/docs/padding.tsx +++ b/packages/canon/src/components/Box/docs/padding.tsx @@ -15,7 +15,6 @@ */ import React from 'react'; -import { Stack } from '../../Stack'; import { Inline } from '../../Inline'; import { Box } from '../Box'; @@ -32,8 +31,11 @@ const FakeBox = ({ children }: { children: string }) => ( export const Padding = () => { return ( - { style={{ border: '1px solid #e7e7e7' }} > - padding - - + paddingX - - + paddingY - + - paddingTop - - + paddingBottom - - + paddingLeft - - + paddingRight - + - + ); }; diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index 2bd3f11f48..198a626f06 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -23,3 +23,4 @@ export * from './components/Button'; export * from './components/Box'; export * from './components/Icon'; +export * from './layout/types';