@@ -981,6 +981,12 @@ export const TableWithDifferentSizeProps = () => {
981
981
982
982
const expandedItemsGenerator = ( renderComponent = false ) =>
983
983
[ ...Array ( 20 ) ] . reduce ( ( acc , _ , itemIndex ) => {
984
+ // Make the first item really long
985
+ if ( itemIndex === 0 ) {
986
+ const label = 'This is a reaaaallllyyy loooong label demonstrating truncation' ;
987
+ const value = 'This valuues is super long to also demonstrate truncation' ;
988
+ return [ ...acc , { label, value } ] ;
989
+ }
984
990
const keyName = `${ itemIndex + 1 } ` ;
985
991
const labelText = `Label ${ keyName } ` ;
986
992
const label = renderComponent
@@ -1177,7 +1183,7 @@ export const ExpandableTableWithDifferentScenarios = () => {
1177
1183
</ FlexTable . Row >
1178
1184
) ;
1179
1185
1180
- const ControlledExpandableTableWithOwnCellExample = ( ) => {
1186
+ const ControlledExpandableTableWithCustomRowExample = ( ) => {
1181
1187
const [ expandedRows , setExpandedRows ] = useState < string [ ] > ( [ 'row3' ] ) ;
1182
1188
const toggleExpand = ( rowId : string ) => {
1183
1189
const isAlreadyExpanded = expandedRows . includes ( rowId ) ;
@@ -1274,8 +1280,8 @@ export const ExpandableTableWithDifferentScenarios = () => {
1274
1280
< OnlyExpandableOnMobileTable />
1275
1281
< Typography type = "title3" > Controlled Expandable Table</ Typography >
1276
1282
< ControlledExpandedTableExample />
1277
- < Typography type = "title3" > Controlled Expandable Table With Own Cell </ Typography >
1278
- < ControlledExpandableTableWithOwnCellExample />
1283
+ < Typography type = "title3" > Controlled Expandable Table With Custom Row </ Typography >
1284
+ < ControlledExpandableTableWithCustomRowExample />
1279
1285
< Typography type = "title3" > Different Font Size For Expand Item On Mobile</ Typography >
1280
1286
< ExpandedTableDifferentFontSizeOnMobile />
1281
1287
</ StyledDiv >
0 commit comments