fix: data table text should allow growth

carbon-design-system · Apr 17, 2024 · 0f154d7 · 0f154d7
1 parent 678187b
commit 0f154d7
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/example/src/Views/DataTable.tsx b/example/src/Views/DataTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, ScrollView, Alert } from 'react-native';
-import { DataTableCell, DataTableRow, DataTableHeader, DataTableHeaderProps, DataTable, Checkbox, DataTableHeaderSelected } from '@carbon/react-native';
+import { DataTableCell, DataTableRow, DataTableHeader, DataTableHeaderProps, DataTable, Checkbox, DataTableHeaderSelected, Text } from '@carbon/react-native';
 import AddIcon from '@carbon/icons/es/add/20';
 import SearchIcon from '@carbon/icons/es/search/20';
 import SettingsIcon from '@carbon/icons/es/settings/20';
@@ -94,7 +94,7 @@ export default class TestDataTable extends React.Component {
           </DataTableRow>
           <DataTableRow>
             <DataTableCell noPadding={true} width={48} content={<Checkbox style={styles.checkbox} hideLabel={true} label="Checkbox row 2" id="checkbox-2" onPress={(value) => this.setState({ checked2: value })} checked={checked2} />} />
-            <DataTableCell onPress={() => this.alert('Pressed long name cell')} content="Jack Long name that is going to be too big for screen" />
+            <DataTableCell onPress={() => this.alert('Pressed long name cell')} content={<Text text="Testing larger text" type="heading-03" />} />
             <DataTableCell content="3/4/1985" width={100} />
           </DataTableRow>
           <DataTableRow onPress={() => this.alert('Pressed row 3')}>

diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx
@@ -40,11 +40,11 @@ export class DataTableCell extends React.Component<DataTableCellProps> {
 
     return StyleSheet.create({
       wrapper: {
-        height: 48,
         padding: noPadding ? 0 : 16,
         paddingBottom: noPadding ? 0 : 15,
         paddingTop: noPadding ? 0 : 15,
         flex: 1,
+        justifyContent: 'center',
       },
     });
   }

diff --git a/src/components/DataTable/DataTableRow.tsx b/src/components/DataTable/DataTableRow.tsx
@@ -30,8 +30,7 @@ export class DataTableRow extends React.Component<DataTableRowProps> {
     return StyleSheet.create({
       wrapper: {
         backgroundColor: getColor('layer01'),
-        maxHeight: 48,
-        height: 48,
+        minHeight: 48,
         flexDirection: 'row',
         width: '100%',
         borderTopColor: getColor('borderSubtle00'),