[v12] feat(ui-grid): rework Grid

docs/guides/upgrade-guide.md

@@ -215,6 +215,54 @@ type: embed
 
 ```
 
+### Grid
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  changed={[
+    {oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
+  ]}
+/>
+
+```
+
+### Grid.Row
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  changed={[
+    {oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
+  ]}
+/>
+
+```
+
+### Grid.Col
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  changed={[
+    {oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
+  ]}
+/>
+
+```
+
 ### Link
 
 #### New `size` prop
@@ -367,6 +415,7 @@ type: embed
 />
 
 ```
+
 ### RadioInput
 
 - Setting `readonly` does not set the low level `<input>` to disabled, but to `readonly`. This also means that the input is still focusable when `readonly`
@@ -604,6 +653,7 @@ type: embed
 />
 
 ```
+
 ### RangeInput
 
 ```js

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<GridProps> {
   static readonly componentId = 'Grid'
 

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')
       },
 

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<GridColProps> {
   static readonly componentId = 'Grid.Col'
 

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<GridBreakpoints>
  * @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')
       },
 

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<GridRowProps> {
   static readonly componentId = 'Grid.Row'
 

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')
       },