Renames 'shrink' column width to 'growCollapse'

.changeset/itchy-balloons-decide.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Renames DataTable 'shrink' column width to 'growCollapse'

src/DataTable/DataTable.features.stories.tsx

@@ -949,12 +949,12 @@ export const MixedColumnWidths = () => (
           maxWidth: '200px',
         },
         {
-          header: 'shrink w/ 100px min',
+          header: 'growCollapse w/ 100px min',
           field: 'type',
           renderCell: row => {
             return <Label>{uppercase(row.type)}</Label>
           },
-          width: 'shrink',
+          width: 'growCollapse',
           minWidth: '100px',
         },
         {

src/DataTable/__tests__/DataTable.test.tsx

@@ -835,13 +835,13 @@ describe('DataTable', () => {
 
       expect(getGridTemplateFromColumns(columns)).toEqual(['minmax(max-content, 1fr)'])
     })
-    it('correctly sets the column width when width === "shrink"', () => {
+    it('correctly sets the column width when width === "growCollapse"', () => {
       const columnHelper = createColumnHelper<{id: number; name: string}>()
       const columns = [
         columnHelper.column({
           header: 'Name',
           field: 'name',
-          width: 'shrink',
+          width: 'growCollapse',
         }),
       ]
 
@@ -894,11 +894,11 @@ describe('DataTable', () => {
             minWidth: '42ch',
           }),
         ],
-        shrink: [
+        growCollapse: [
           columnHelper.column({
             header: 'Name',
             field: 'name',
-            width: 'shrink',
+            width: 'growCollapse',
             minWidth: '42ch',
           }),
         ],
@@ -913,7 +913,7 @@ describe('DataTable', () => {
       }
       const expectedWidths: Record<string, string> = {
         grow: 'minmax(42ch, 1fr)',
-        shrink: 'minmax(42ch, 1fr)',
+        growCollapse: 'minmax(42ch, 1fr)',
         auto: 'minmax(42ch, auto)',
       }
 
@@ -932,11 +932,11 @@ describe('DataTable', () => {
             maxWidth: '42ch',
           }),
         ],
-        shrink: [
+        growCollapse: [
           columnHelper.column({
             header: 'Name',
             field: 'name',
-            width: 'shrink',
+            width: 'growCollapse',
             maxWidth: '42ch',
           }),
         ],
@@ -951,7 +951,7 @@ describe('DataTable', () => {
       }
       const expectedWidths: Record<string, string> = {
         grow: 'minmax(auto, 42ch)',
-        shrink: 'minmax(0, 42ch)',
+        growCollapse: 'minmax(0, 42ch)',
         auto: 'minmax(auto, 42ch)',
       }
 

src/DataTable/column.ts

@@ -2,8 +2,7 @@ import {ObjectPaths} from './utils'
 import {UniqueRow} from './row'
 import {SortStrategy, CustomSortStrategy} from './sorting'
 
-export type ColumnWidth = 'grow' | 'shrink' | 'auto' | React.CSSProperties['width']
-
+export type ColumnWidth = 'grow' | 'growCollapse' | 'auto' | React.CSSProperties['width']
 export type CellAlignment = 'start' | 'end' | undefined
 export interface Column<Data extends UniqueRow> {
   id?: string
@@ -62,7 +61,7 @@ export interface Column<Data extends UniqueRow> {
   /**
    * Controls the width of the column.
    * - 'grow': Stretch to fill available space, and min width is the width of the widest cell in the column
-   * - 'shrink': Stretch to fill available space or shrink to fit in the available space. Allows the column to shrink smaller than the cell content's width.
+   * - 'growCollapse': Stretch to fill available space or shrink to fit in the available space. Allows the column to shrink smaller than the cell content's width.
    * - 'auto': The column is the width of it’s widest cell. Not intended for use with columns who’s content length varies a lot because a layout shift will occur when the content changes
    * - explicit width: Will be exactly that width and will not grow or shrink to fill the parent
    * @default 'grow'

src/DataTable/storyHelpers.ts

@@ -13,7 +13,7 @@ export const getColumnWidthArgTypes = (colCount: number) => {
         type: 'radio',
       },
       defaultValue: 'grow',
-      options: ['grow', 'shrink', 'auto', 'explicit width'],
+      options: ['grow', 'growCollapse', 'auto', 'explicit width'],
       table: {
         category: 'Column widths',
       },

src/DataTable/useTable.ts

@@ -59,8 +59,8 @@ export function getGridTemplateFromColumns<Data extends UniqueRow>(columns: Arra
       minWidth = 'max-content'
     }
 
-    // Column widths set to "shrink" don't need a min width unless one is explicitly provided.
-    if (columnWidth === 'shrink') {
+    // Column widths set to "growCollapse" don't need a min width unless one is explicitly provided.
+    if (columnWidth === 'growCollapse') {
       minWidth = '0'
     }
 
@@ -75,7 +75,7 @@ export function getGridTemplateFromColumns<Data extends UniqueRow>(columns: Arra
 
     // If a consumer is passing one of the shorthand widths or doesn't pass a width at all, we use the
     // min and max width calculated above to create a minmax() column template value.
-    if (typeof columnWidth !== 'number' && ['grow', 'shrink', 'auto'].includes(columnWidth)) {
+    if (typeof columnWidth !== 'number' && ['grow', 'growCollapse', 'auto'].includes(columnWidth)) {
       return minWidth === maxWidth ? minWidth : `minmax(${minWidth}, ${maxWidth})`
     }