From aefd1527b14976a379ab7d681c4ba381e784dc8a Mon Sep 17 00:00:00 2001 From: MIchael Dudley <54119397+dudley-ibm@users.noreply.github.com> Date: Wed, 15 Feb 2023 13:48:02 -0500 Subject: [PATCH 1/2] feat(Pictograms): new app modernization pictogram (#13158) * feat(Pictograms): new app modernization pictogram * chore(pictograms): add category, update snapshots --------- Co-authored-by: TJ Egan --- .../__snapshots__/PublicAPI-test.js.snap | 1 + .../__snapshots__/PublicAPI-test.js.snap | 1 + packages/pictograms/categories.yml | 1 + packages/pictograms/pictograms.yml | 5 +++++ .../pictograms/src/svg/app--modernization.svg | 15 +++++++++++++++ 5 files changed, 23 insertions(+) create mode 100644 packages/pictograms/src/svg/app--modernization.svg diff --git a/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap b/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap index 13c25a40865d..68ba605b6fba 100644 --- a/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap +++ b/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap @@ -39,6 +39,7 @@ Array [ "Apartment", "Api", "AppDeveloper", + "AppModernization", "Apple", "Application", "ApplicationSecurity", diff --git a/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap b/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap index 18e427ccecde..dcedac16ef59 100644 --- a/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap +++ b/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap @@ -39,6 +39,7 @@ Array [ "Apartment", "Api", "AppDeveloper", + "AppModernization", "Apple", "Application", "ApplicationSecurity", diff --git a/packages/pictograms/categories.yml b/packages/pictograms/categories.yml index ca231f7ab420..064d9b097528 100644 --- a/packages/pictograms/categories.yml +++ b/packages/pictograms/categories.yml @@ -455,6 +455,7 @@ categories: - name: Design and development members: - app--developer + - app--modernization - application - art--tools--01 - birthday--cake diff --git a/packages/pictograms/pictograms.yml b/packages/pictograms/pictograms.yml index f2a8f6fe44fe..76c094334631 100644 --- a/packages/pictograms/pictograms.yml +++ b/packages/pictograms/pictograms.yml @@ -253,6 +253,11 @@ - app - coder - programmer +- name: app--modernization + friendly_name: App modernization + aliases: + - app modernization + - application modernization - name: apple friendly_name: Apple aliases: diff --git a/packages/pictograms/src/svg/app--modernization.svg b/packages/pictograms/src/svg/app--modernization.svg new file mode 100644 index 000000000000..2ecd9e32ab29 --- /dev/null +++ b/packages/pictograms/src/svg/app--modernization.svg @@ -0,0 +1,15 @@ + + + + + + From e4e1c0f40120e8406a6cf52eed773cb00a54efa2 Mon Sep 17 00:00:00 2001 From: Marcin Lewandowski Date: Thu, 16 Feb 2023 15:02:11 +0100 Subject: [PATCH 2/2] refactor(typescript): convert Grid, FlexGrid and children to TypeScript (#13074) * refactor(typescript): convert Grid, FlexGrid and children to TypeScript * fix(Grid): restore span attribute support * fix(typescript): use PolymorphicProps --- .../Grid/{CSSGrid.js => CSSGrid.tsx} | 54 ++++-- .../components/Grid/{Column.js => Column.tsx} | 175 +++++++++++++----- .../react/src/components/Grid/ColumnHang.js | 49 ----- .../react/src/components/Grid/ColumnHang.tsx | 74 ++++++++ .../Grid/{FlexGrid.js => FlexGrid.tsx} | 19 +- .../src/components/Grid/{Grid.js => Grid.tsx} | 9 +- .../Grid/{GridContext.js => GridContext.tsx} | 52 +++++- .../react/src/components/Grid/GridTypes.ts | 49 +++++ .../src/components/Grid/{Row.js => Row.tsx} | 50 ++++- .../components/Grid/{index.js => index.ts} | 2 +- 10 files changed, 406 insertions(+), 127 deletions(-) rename packages/react/src/components/Grid/{CSSGrid.js => CSSGrid.tsx} (71%) rename packages/react/src/components/Grid/{Column.js => Column.tsx} (68%) delete mode 100644 packages/react/src/components/Grid/ColumnHang.js create mode 100644 packages/react/src/components/Grid/ColumnHang.tsx rename packages/react/src/components/Grid/{FlexGrid.js => FlexGrid.tsx} (76%) rename packages/react/src/components/Grid/{Grid.js => Grid.tsx} (83%) rename packages/react/src/components/Grid/{GridContext.js => GridContext.tsx} (52%) create mode 100644 packages/react/src/components/Grid/GridTypes.ts rename packages/react/src/components/Grid/{Row.js => Row.tsx} (51%) rename packages/react/src/components/Grid/{index.js => index.ts} (91%) diff --git a/packages/react/src/components/Grid/CSSGrid.js b/packages/react/src/components/Grid/CSSGrid.tsx similarity index 71% rename from packages/react/src/components/Grid/CSSGrid.js rename to packages/react/src/components/Grid/CSSGrid.tsx index 4cf48628c010..5d249e1ea5f0 100644 --- a/packages/react/src/components/Grid/CSSGrid.js +++ b/packages/react/src/components/Grid/CSSGrid.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,20 +9,22 @@ import cx from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { usePrefix } from '../../internal/usePrefix'; +import { PolymorphicProps } from '../../types/common'; import { GridSettings, useGridSettings } from './GridContext'; +import { GridComponent, GridProps } from './GridTypes'; -function CSSGrid({ - as: BaseComponent = 'div', +function CSSGrid({ + as: BaseComponent = 'div' as T, children, className: customClassName, condensed = false, fullWidth = false, narrow = false, ...rest -}) { +}: GridProps) { const prefix = usePrefix(); const { subgrid } = useGridSettings(); - let mode = 'wide'; + let mode: SubgridMode = 'wide'; if (narrow) { mode = 'narrow'; } else if (condensed) { @@ -36,7 +38,8 @@ function CSSGrid({ as={BaseComponent} className={customClassName} mode={mode} - {...rest}> + {...rest} + > {children} @@ -50,11 +53,13 @@ function CSSGrid({ [`${prefix}--css-grid--full-width`]: fullWidth, }); + // cast as any to let TypeScript allow passing in attributes to base component + const BaseComponentAsAny: any = BaseComponent return ( - + {children} - + ); } @@ -93,13 +98,36 @@ CSSGrid.propTypes = { narrow: PropTypes.bool, }; -function Subgrid({ +type SubgridMode = 'wide' | 'narrow' | 'condensed' + +interface SubgridBaseProps { + + /** + * Pass in content that will be rendered within the `Subgrid` + */ + children?: React.ReactNode; + + /** + * Specify a custom className to be applied to the `Subgrid` + */ + className?: string; + + /** + * Specify the grid mode for the subgrid + */ + mode?: SubgridMode; + +} + +type SubgridProps = PolymorphicProps + +const Subgrid = ({ as: BaseComponent = 'div', className: customClassName, children, mode, ...rest -}) { +}: SubgridProps) => { const prefix = usePrefix(); const className = cx(customClassName, { [`${prefix}--subgrid`]: true, @@ -133,7 +161,9 @@ Subgrid.propTypes = { /** * Specify the grid mode for the subgrid */ - mode: PropTypes.oneOf(['wide', 'narrow', 'condensed']), + mode: PropTypes.oneOf(['wide', 'narrow', 'condensed'] as SubgridMode[]), }; -export { CSSGrid }; +const CSSGridComponent: GridComponent = CSSGrid; + +export { CSSGridComponent as CSSGrid }; diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.tsx similarity index 68% rename from packages/react/src/components/Grid/Column.js rename to packages/react/src/components/Grid/Column.tsx index 1b810d6dddb4..aed36085232b 100644 --- a/packages/react/src/components/Grid/Column.js +++ b/packages/react/src/components/Grid/Column.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -10,10 +10,95 @@ import cx from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { usePrefix } from '../../internal/usePrefix'; +import { PolymorphicProps } from '../../types/common'; import { useGridSettings } from './GridContext'; -function Column({ - as: BaseComponent = 'div', +type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%'; + +type ColumnSpanSimple = boolean | number | ColumnSpanPercent + +interface ColumnSpanObject { + + span?: ColumnSpanSimple; + + offset?: number; + + start?: number; + + end?: number; + +} + +export type ColumnSpan = ColumnSpanSimple | ColumnSpanObject + +interface ColumnBaseProps { + + /** + * Pass in content that will be rendered within the `Column` + */ + children?: React.ReactNode; + + /** + * Specify a custom className to be applied to the `Column` + */ + className?: string, + + /** + * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px) + * This breakpoint supports 16 columns by default. + * + * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints + */ + lg?: ColumnSpan; + + /** + * Specify column span for the `max` breakpoint. This breakpoint supports 16 + * columns by default. + * + * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints + */ + max?: ColumnSpan; + + /** + * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px) + * This breakpoint supports 8 columns by default. + * + * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints + */ + md?: ColumnSpan; + + /** + * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px) + * This breakpoint supports 4 columns by default. + * + * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints + */ + sm?: ColumnSpan; + + /** + * Specify column span for the `xlg` breakpoint (Default breakpoint up to + * 1584px) This breakpoint supports 16 columns by default. + * + * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints + */ + xlg?: ColumnSpan; + + /** + * Specify constant column span, start, or end values that will not change + * based on breakpoint + */ + span?: ColumnSpan; + +} + +export type ColumnProps = PolymorphicProps; + +export interface ColumnComponent { + (props: ColumnProps, context?: any): React.ReactElement | null; +} + +function Column({ + as: BaseComponent = 'div' as T, children, className: customClassName, sm, @@ -22,7 +107,7 @@ function Column({ xlg, max, ...rest -}) { +}: ColumnProps) { const { mode } = useGridSettings(); const prefix = usePrefix(); @@ -50,10 +135,12 @@ function Column({ [`${prefix}--col`]: columnClassName.length === 0, }); + // cast as any to let TypeScript allow passing in attributes to base component + const BaseComponentAsAny: any = BaseComponent return ( - + {children} - + ); } @@ -148,7 +235,7 @@ function CSSGridColumn({ max, span, ...rest -}) { +}: ColumnProps) { const prefix = usePrefix(); const breakpointClassName = getClassNameForBreakpoints( [sm, md, lg, xlg, max], @@ -250,8 +337,8 @@ const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max']; * @param {Array} breakpoints * @returns {string} */ -function getClassNameForBreakpoints(breakpoints, prefix) { - const classNames = []; +function getClassNameForBreakpoints(breakpoints: (ColumnSpan | undefined)[], prefix: string): string { + const classNames: string[] = []; for (let i = 0; i < breakpoints.length; i++) { const breakpoint = breakpoints[i]; @@ -282,25 +369,27 @@ function getClassNameForBreakpoints(breakpoints, prefix) { continue; } - const { span, offset, start, end } = breakpoint; - - if (typeof offset === 'number' && offset > 0) { - classNames.push(`${prefix}--${name}:col-start-${offset + 1}`); - } - - if (typeof start === 'number') { - classNames.push(`${prefix}--${name}:col-start-${start}`); - } - - if (typeof end === 'number') { - classNames.push(`${prefix}--${name}:col-end-${end}`); - } - - if (typeof span === 'number') { - classNames.push(`${prefix}--${name}:col-span-${span}`); - } else if (typeof span === 'string') { - classNames.push(`${prefix}--${name}:col-span-${span.slice(0, -1)}`); - continue; + if (typeof breakpoint === 'object') { + const { span, offset, start, end } = breakpoint; + + if (typeof offset === 'number' && offset > 0) { + classNames.push(`${prefix}--${name}:col-start-${offset + 1}`); + } + + if (typeof start === 'number') { + classNames.push(`${prefix}--${name}:col-start-${start}`); + } + + if (typeof end === 'number') { + classNames.push(`${prefix}--${name}:col-end-${end}`); + } + + if (typeof span === 'number') { + classNames.push(`${prefix}--${name}:col-span-${span}`); + } else if (typeof span === 'string') { + classNames.push(`${prefix}--${name}:col-span-${span.slice(0, -1)}`); + continue; + } } } @@ -312,8 +401,8 @@ function getClassNameForBreakpoints(breakpoints, prefix) { * @param {Array} breakpoints * @returns {string} */ -function getClassNameForFlexGridBreakpoints(breakpoints, prefix) { - const classNames = []; +function getClassNameForFlexGridBreakpoints(breakpoints: (ColumnSpan | undefined)[], prefix: string): string { + const classNames: string[] = []; for (let i = 0; i < breakpoints.length; i++) { const breakpoint = breakpoints[i]; @@ -337,17 +426,19 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) { continue; } - const { span, offset } = breakpoint; - if (typeof span === 'number') { - classNames.push(`${prefix}--col-${name}-${span}`); - } + if (typeof breakpoint === 'object') { + const { span, offset } = breakpoint; + if (typeof span === 'number') { + classNames.push(`${prefix}--col-${name}-${span}`); + } - if (span === true) { - classNames.push(`${prefix}--col-${name}`); - } + if (span === true) { + classNames.push(`${prefix}--col-${name}`); + } - if (typeof offset === 'number') { - classNames.push(`${prefix}--offset-${name}-${offset}`); + if (typeof offset === 'number') { + classNames.push(`${prefix}--offset-${name}-${offset}`); + } } } @@ -357,8 +448,8 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) { /** * Build the appropriate className for a span value */ -function getClassNameForSpan(value, prefix) { - const classNames = []; +function getClassNameForSpan(value: ColumnSpan | undefined, prefix: string): string { + const classNames: string[] = []; if (typeof value === 'number' || typeof value === 'string') { classNames.push(`${prefix}--col-span-${value}`); @@ -381,4 +472,4 @@ function getClassNameForSpan(value, prefix) { return classNames.join(''); } -export default Column; +export default Column as ColumnComponent; diff --git a/packages/react/src/components/Grid/ColumnHang.js b/packages/react/src/components/Grid/ColumnHang.js deleted file mode 100644 index e5de6cca3ae3..000000000000 --- a/packages/react/src/components/Grid/ColumnHang.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import cx from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { usePrefix } from '../../internal/usePrefix'; - -/** - * Helper component for rendering content that hangs on the column. Useful when - * trying to align content across different grid modes - */ -function ColumnHang({ - as: BaseComponent = 'div', - className: customClassName, - children, - ...rest -}) { - const prefix = usePrefix(); - const className = cx(customClassName, `${prefix}--grid-column-hang`); - return ( - - {children} - - ); -} - -ColumnHang.propTypes = { - /** - * Provide a custom element to render instead of the default
- */ - as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), - - /** - * Pass in content that will be rendered within the `Grid` - */ - children: PropTypes.node, - - /** - * Specify a custom className to be applied to the `Grid` - */ - className: PropTypes.string, -}; - -export { ColumnHang }; diff --git a/packages/react/src/components/Grid/ColumnHang.tsx b/packages/react/src/components/Grid/ColumnHang.tsx new file mode 100644 index 000000000000..f22e78895da6 --- /dev/null +++ b/packages/react/src/components/Grid/ColumnHang.tsx @@ -0,0 +1,74 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { usePrefix } from '../../internal/usePrefix'; +import { PolymorphicProps } from '../../types/common'; + +interface ColumnHangBaseProps { + + /** + * Pass in content that will be rendered within the `ColumnHang` + */ + children?: React.ReactNode; + + /** + * Specify a custom className to be applied to the `ColumnHang` + */ + className?: string; + +} + +export type ColumnHangProps = PolymorphicProps + +export interface ColumnHangComponent { + (props: ColumnHangProps, context?: any): React.ReactElement | null; +} + +/** + * Helper component for rendering content that hangs on the column. Useful when + * trying to align content across different grid modes + */ +function ColumnHang({ + as: BaseComponent = 'div' as T, + className: customClassName, + children, + ...rest +}: ColumnHangProps) { + const prefix = usePrefix(); + const className = cx(customClassName, `${prefix}--grid-column-hang`); + // cast as any to let TypeScript allow passing in attributes to base component + const BaseComponentAsAny: any = BaseComponent + return ( + + {children} + + ); +} + +ColumnHang.propTypes = { + /** + * Provide a custom element to render instead of the default
+ */ + as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), + + /** + * Pass in content that will be rendered within the `Grid` + */ + children: PropTypes.node, + + /** + * Specify a custom className to be applied to the `Grid` + */ + className: PropTypes.string, +}; + +const ColumnHangComponent = ColumnHang as ColumnHangComponent + +export { ColumnHangComponent as ColumnHang }; diff --git a/packages/react/src/components/Grid/FlexGrid.js b/packages/react/src/components/Grid/FlexGrid.tsx similarity index 76% rename from packages/react/src/components/Grid/FlexGrid.js rename to packages/react/src/components/Grid/FlexGrid.tsx index 49c15a17f35e..83f5f70a85ea 100644 --- a/packages/react/src/components/Grid/FlexGrid.js +++ b/packages/react/src/components/Grid/FlexGrid.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -10,16 +10,17 @@ import PropTypes from 'prop-types'; import React from 'react'; import { usePrefix } from '../../internal/usePrefix'; import { GridSettings } from './GridContext'; +import { GridComponent, GridProps } from './GridTypes'; -function FlexGrid({ - as: BaseComponent = 'div', +function FlexGrid({ + as: BaseComponent = 'div' as T, condensed = false, narrow = false, fullWidth = false, className: containerClassName, children, ...rest -}) { +}: GridProps) { const prefix = usePrefix(); const className = cx(containerClassName, { [`${prefix}--grid`]: true, @@ -27,11 +28,13 @@ function FlexGrid({ [`${prefix}--grid--narrow`]: narrow, [`${prefix}--grid--full-width`]: fullWidth, }); + // cast as any to let TypeScript allow passing in attributes to base component + const BaseComponentAsAny: any = BaseComponent return ( - + {children} - + ); } @@ -70,4 +73,6 @@ FlexGrid.propTypes = { narrow: PropTypes.bool, }; -export { FlexGrid }; +const FlexGridComponent = FlexGrid as GridComponent; + +export { FlexGridComponent as FlexGrid }; diff --git a/packages/react/src/components/Grid/Grid.js b/packages/react/src/components/Grid/Grid.tsx similarity index 83% rename from packages/react/src/components/Grid/Grid.js rename to packages/react/src/components/Grid/Grid.tsx index 28b7d8382cb7..472349c889e6 100644 --- a/packages/react/src/components/Grid/Grid.js +++ b/packages/react/src/components/Grid/Grid.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -10,8 +10,9 @@ import React from 'react'; import { useFeatureFlag } from '../FeatureFlags'; import { CSSGrid } from './CSSGrid'; import { FlexGrid } from './FlexGrid'; +import { GridComponent, GridProps } from './GridTypes'; -function Grid(props) { +function Grid(props: GridProps) { const enableCSSGrid = useFeatureFlag('enable-css-grid'); if (enableCSSGrid) { return ; @@ -53,4 +54,6 @@ Grid.propTypes = { narrow: PropTypes.bool, }; -export { Grid }; +const GridAsGridComponent = Grid as GridComponent; + +export { GridAsGridComponent as Grid }; diff --git a/packages/react/src/components/Grid/GridContext.js b/packages/react/src/components/Grid/GridContext.tsx similarity index 52% rename from packages/react/src/components/Grid/GridContext.js rename to packages/react/src/components/Grid/GridContext.tsx index e916dd319708..eb9d8a0500da 100644 --- a/packages/react/src/components/Grid/GridContext.js +++ b/packages/react/src/components/Grid/GridContext.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -8,16 +8,56 @@ import PropTypes from 'prop-types'; import * as React from 'react'; +export type GridMode = 'flexbox' | 'css-grid'; + +export interface GridSettingContext { + + /** + * The grid mode for the GridContext + */ + mode: GridMode; + + /** + * Specifies whether subgrid should be enabled + */ + subgrid?: boolean; + +} + /** * Provides a grid context for communication the grid "mode" (flexbox or * css-grid) along with subgrid information. */ -const GridSettingsContext = React.createContext({ +const GridSettingsContext = React.createContext({ mode: 'flexbox', subgrid: false, }); -export function GridSettings({ children, mode, subgrid = false }) { +export interface GridSettingsProps { + + /** + * Pass in components which will be rendered within the `GridSettings` + * component + */ + children?: React.ReactNode; + + /** + * Specify the grid mode for the GridContext + */ + mode: GridMode; + + /** + * Specify whether subgrid should be enabled + */ + subgrid?: boolean; + +} + +export const GridSettings: React.FC = ({ + children, + mode, + subgrid = false +}) => { const value = React.useMemo(() => { return { mode, @@ -31,6 +71,8 @@ export function GridSettings({ children, mode, subgrid = false }) { ); } +const gridModes: GridMode[] = ['flexbox', 'css-grid']; + GridSettings.propTypes = { /** * Pass in components which will be rendered within the `GridSettings` @@ -41,7 +83,7 @@ GridSettings.propTypes = { /** * Specify the grid mode for the GridContext */ - mode: PropTypes.oneOf(['flexbox', 'css-grid']).isRequired, + mode: PropTypes.oneOf(gridModes).isRequired, /** * Specify whether subgrid should be enabled @@ -52,6 +94,6 @@ GridSettings.propTypes = { /** * Helper function for accessing the GridContext value */ -export function useGridSettings() { +export const useGridSettings = () => { return React.useContext(GridSettingsContext); } diff --git a/packages/react/src/components/Grid/GridTypes.ts b/packages/react/src/components/Grid/GridTypes.ts new file mode 100644 index 000000000000..1dc151a90a40 --- /dev/null +++ b/packages/react/src/components/Grid/GridTypes.ts @@ -0,0 +1,49 @@ +/** + * Copyright IBM Corp. 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { PolymorphicProps } from '../../types/common'; + +interface GridBaseProps { + /** + * Pass in content that will be rendered within the `Grid` + */ + children?: React.ReactNode; + + /** + * Specify a custom className to be applied to the `Grid` + */ + className?: string; + + /** + * Collapse the gutter to 1px. Useful for fluid layouts. + * Rows have 1px of margin between them to match gutter. + */ + condensed?: boolean; + + /** + * Remove the default max width that the grid has set + */ + fullWidth?: boolean; + + /** + * Container hangs 16px into the gutter. Useful for + * typographic alignment with and without containers. + */ + narrow?: boolean; +} + +export type GridProps = PolymorphicProps< + T, + GridBaseProps +>; + +export interface GridComponent { + ( + props: GridProps, + context?: any + ): React.ReactElement | null; +} diff --git a/packages/react/src/components/Grid/Row.js b/packages/react/src/components/Grid/Row.tsx similarity index 51% rename from packages/react/src/components/Grid/Row.js rename to packages/react/src/components/Grid/Row.tsx index 9615ed7b0e41..a6418c4d841d 100644 --- a/packages/react/src/components/Grid/Row.js +++ b/packages/react/src/components/Grid/Row.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,26 +9,60 @@ import cx from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { usePrefix } from '../../internal/usePrefix'; +import { PolymorphicProps } from '../../types/common'; -function Row({ - as: BaseComponent = 'div', +export interface RowBaseProps { + + /** + * Pass in content that will be rendered within the `Row` + */ + children?: React.ReactNode; + + /** + * Specify a custom className to be applied to the `Row` + */ + className?: string; + + /** + * Specify a single row as condensed.Rows that are adjacent + * and are condensed will have 2px of margin between them to match gutter. + */ + condensed?: boolean; + + /** + * Specify a single row as narrow. The container will hang + * 16px into the gutter. + */ + narrow?: boolean; + +} + +export type RowProps = PolymorphicProps + +export interface RowComponent { + (props: RowProps, context?: any): React.ReactElement | null; +} + +function Row({ + as: BaseComponent = 'div' as T, condensed = false, narrow = false, className: containerClassName, children, ...rest -}) { +}: RowProps) { const prefix = usePrefix(); const className = cx(containerClassName, { [`${prefix}--row`]: true, [`${prefix}--row--condensed`]: condensed, [`${prefix}--row--narrow`]: narrow, }); - + // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements + const BaseComponentAsAny: any = BaseComponent return ( - + {children} - + ); } @@ -61,4 +95,4 @@ Row.propTypes = { narrow: PropTypes.bool, }; -export default Row; +export default Row as RowComponent; diff --git a/packages/react/src/components/Grid/index.js b/packages/react/src/components/Grid/index.ts similarity index 91% rename from packages/react/src/components/Grid/index.js rename to packages/react/src/components/Grid/index.ts index 323e5b2c0840..20d7815b23d6 100644 --- a/packages/react/src/components/Grid/index.js +++ b/packages/react/src/components/Grid/index.ts @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree.