From 3e243d1961ad8476705e93b5ec8c5db94a5e381b Mon Sep 17 00:00:00 2001 From: Tamas Kovacs Date: Wed, 21 Jan 2026 13:08:16 +0100 Subject: [PATCH] feat(ui-grid): rework Grid INSTUI-4872 --- docs/guides/upgrade-guide.md | 50 ++++++++++++++++++++++++++ packages/ui-grid/src/Grid/index.tsx | 5 ++- packages/ui-grid/src/Grid/styles.ts | 10 +++--- packages/ui-grid/src/Grid/theme.ts | 49 ------------------------- packages/ui-grid/src/GridCol/index.tsx | 5 ++- packages/ui-grid/src/GridCol/styles.ts | 10 +++--- packages/ui-grid/src/GridCol/theme.ts | 49 ------------------------- packages/ui-grid/src/GridRow/index.tsx | 5 ++- packages/ui-grid/src/GridRow/styles.ts | 10 +++--- packages/ui-grid/src/GridRow/theme.ts | 49 ------------------------- 10 files changed, 71 insertions(+), 171 deletions(-) delete mode 100644 packages/ui-grid/src/Grid/theme.ts delete mode 100644 packages/ui-grid/src/GridCol/theme.ts delete mode 100644 packages/ui-grid/src/GridRow/theme.ts diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md index 87d94e1751..da8600df2c 100644 --- a/docs/guides/upgrade-guide.md +++ b/docs/guides/upgrade-guide.md @@ -215,6 +215,54 @@ type: embed ``` +### Grid + +```js +--- +type: embed +--- + + +``` + +### Grid.Row + +```js +--- +type: embed +--- + + +``` + +### Grid.Col + +```js +--- +type: embed +--- + + +``` + ### Link #### New `size` prop @@ -367,6 +415,7 @@ type: embed /> ``` + ### RadioInput - Setting `readonly` does not set the low level `` to disabled, but to `readonly`. This also means that the input is still focusable when `readonly` @@ -604,6 +653,7 @@ type: embed /> ``` + ### RangeInput ```js diff --git a/packages/ui-grid/src/Grid/index.tsx b/packages/ui-grid/src/Grid/index.tsx index 94246e103c..09c5c58add 100644 --- a/packages/ui-grid/src/Grid/index.tsx +++ b/packages/ui-grid/src/Grid/index.tsx @@ -35,10 +35,9 @@ import { GridRow } from '../GridRow' import type { GridRowProps } from '../GridRow/props' import { GridCol } from '../GridCol' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { GridProps } from './props' @@ -48,7 +47,7 @@ import type { GridProps } from './props' category: components --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class Grid extends Component { static readonly componentId = 'Grid' diff --git a/packages/ui-grid/src/Grid/styles.ts b/packages/ui-grid/src/Grid/styles.ts index 72a1225749..a0a971e7d0 100644 --- a/packages/ui-grid/src/Grid/styles.ts +++ b/packages/ui-grid/src/Grid/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { GridTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { GridBreakpoints } from '../GridTypes' import type { GridProps, GridStyle } from './props' @@ -37,7 +37,7 @@ import type { GridProps, GridStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: GridTheme, + componentTheme: NewComponentTypes['Grid'], props: GridProps ): GridStyle => { const { startAt, visualDebug } = props @@ -52,13 +52,13 @@ const generateStyle = ( ...getStartAtVariants('small'), - [`@media screen and (${componentTheme.mediumMin})`]: { + [`@media screen and (min-width: ${componentTheme.mediumMin})`]: { ...getStartAtVariants('medium') }, - [`@media screen and (${componentTheme.largeMin})`]: { + [`@media screen and (min-width: ${componentTheme.largeMin})`]: { ...getStartAtVariants('large') }, - [`@media screen and (${componentTheme.xLargeMin})`]: { + [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: { ...getStartAtVariants('x-large') }, diff --git a/packages/ui-grid/src/Grid/theme.ts b/packages/ui-grid/src/Grid/theme.ts deleted file mode 100644 index 4917cf98bb..0000000000 --- a/packages/ui-grid/src/Grid/theme.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme } from '@instructure/ui-themes' -import { GridTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): GridTheme => { - const { spacing, media } = theme - - const componentVariables: GridTheme = { - spacingSmall: spacing?.small, - spacingMedium: spacing?.medium, - spacingLarge: spacing?.large, - - ...media - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-grid/src/GridCol/index.tsx b/packages/ui-grid/src/GridCol/index.tsx index be57a804b6..48a0458838 100644 --- a/packages/ui-grid/src/GridCol/index.tsx +++ b/packages/ui-grid/src/GridCol/index.tsx @@ -26,11 +26,10 @@ import { Component } from 'react' import { omitProps } from '@instructure/ui-react-utils' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import { logWarn as warn } from '@instructure/console' import generateStyle from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { GridColProps } from './props' @@ -41,7 +40,7 @@ parent: Grid id: Grid.Col --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class GridCol extends Component { static readonly componentId = 'Grid.Col' diff --git a/packages/ui-grid/src/GridCol/styles.ts b/packages/ui-grid/src/GridCol/styles.ts index 59210a0b3e..49b663e683 100644 --- a/packages/ui-grid/src/GridCol/styles.ts +++ b/packages/ui-grid/src/GridCol/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { GridTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { GridBreakpoints } from '../GridTypes' import type { GridColProps, GridColStyle } from './props' @@ -39,7 +39,7 @@ type BreakPoints = NonNullable * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: GridTheme, + componentTheme: NewComponentTypes['GridCol'], props: GridColProps ): GridColStyle => { const { @@ -203,13 +203,13 @@ const generateStyle = ( ...getBreakpointStyles('small'), - [`@media screen and (${componentTheme.mediumMin})`]: { + [`@media screen and (min-width: ${componentTheme.mediumMin})`]: { ...getBreakpointStyles('medium') }, - [`@media screen and (${componentTheme.largeMin})`]: { + [`@media screen and (min-width: ${componentTheme.largeMin})`]: { ...getBreakpointStyles('large') }, - [`@media screen and (${componentTheme.xLargeMin})`]: { + [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: { ...getBreakpointStyles('x-large') }, diff --git a/packages/ui-grid/src/GridCol/theme.ts b/packages/ui-grid/src/GridCol/theme.ts deleted file mode 100644 index 4917cf98bb..0000000000 --- a/packages/ui-grid/src/GridCol/theme.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme } from '@instructure/ui-themes' -import { GridTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): GridTheme => { - const { spacing, media } = theme - - const componentVariables: GridTheme = { - spacingSmall: spacing?.small, - spacingMedium: spacing?.medium, - spacingLarge: spacing?.large, - - ...media - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-grid/src/GridRow/index.tsx b/packages/ui-grid/src/GridRow/index.tsx index 2ed422ce15..126861addc 100644 --- a/packages/ui-grid/src/GridRow/index.tsx +++ b/packages/ui-grid/src/GridRow/index.tsx @@ -34,10 +34,9 @@ import { import { GridCol } from '../GridCol' import type { GridColProps } from '../GridCol/props' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { GridRowProps } from './props' @@ -48,7 +47,7 @@ parent: Grid id: Grid.Row --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class GridRow extends Component { static readonly componentId = 'Grid.Row' diff --git a/packages/ui-grid/src/GridRow/styles.ts b/packages/ui-grid/src/GridRow/styles.ts index fd0f02fccc..7c596beac0 100644 --- a/packages/ui-grid/src/GridRow/styles.ts +++ b/packages/ui-grid/src/GridRow/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { GridTheme } from '@instructure/shared-types' +import type { NewComponentTypes } from '@instructure/ui-themes' import type { GridBreakpoints } from '../GridTypes' import type { GridRowProps, GridRowStyle } from './props' @@ -37,7 +37,7 @@ import type { GridRowProps, GridRowStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: GridTheme, + componentTheme: NewComponentTypes['GridRow'], props: GridRowProps ): GridRowStyle => { const { @@ -102,13 +102,13 @@ const generateStyle = ( ...getStartAtVariants('small'), - [`@media screen and (${componentTheme.mediumMin})`]: { + [`@media screen and (min-width: ${componentTheme.mediumMin})`]: { ...getStartAtVariants('medium') }, - [`@media screen and (${componentTheme.largeMin})`]: { + [`@media screen and (min-width: ${componentTheme.largeMin})`]: { ...getStartAtVariants('large') }, - [`@media screen and (${componentTheme.xLargeMin})`]: { + [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: { ...getStartAtVariants('x-large') }, diff --git a/packages/ui-grid/src/GridRow/theme.ts b/packages/ui-grid/src/GridRow/theme.ts deleted file mode 100644 index 4917cf98bb..0000000000 --- a/packages/ui-grid/src/GridRow/theme.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme } from '@instructure/ui-themes' -import { GridTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): GridTheme => { - const { spacing, media } = theme - - const componentVariables: GridTheme = { - spacingSmall: spacing?.small, - spacingMedium: spacing?.medium, - spacingLarge: spacing?.large, - - ...media - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme