fix(list-item): artwork-container should not shrink width

src/list/__tests__/list-item-artwork-min-width.scenario.tsx

@@ -0,0 +1,62 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+
+import Search from '../../icon/search';
+import { ListItem, ListItemLabel, ARTWORK_SIZES } from '..';
+
+export function Scenario() {
+  return (
+    <div style={{ width: '100px', padding: '24px', backgroundColor: 'lightgreen' }}>
+      <ListItem>
+        <ListItemLabel>No Artwork</ListItemLabel>
+      </ListItem>
+
+      <ListItem artwork={Search} artworkSize={ARTWORK_SIZES.SMALL}>
+        <ListItemLabel>Small Artwork</ListItemLabel>
+      </ListItem>
+
+      <ListItem artwork={Search} artworkSize={ARTWORK_SIZES.MEDIUM}>
+        <ListItemLabel>Medium Artwork</ListItemLabel>
+      </ListItem>
+
+      <ListItem artwork={Search} artworkSize={ARTWORK_SIZES.LARGE}>
+        <ListItemLabel>Large Artwork</ListItemLabel>
+      </ListItem>
+
+      <ListItem
+        artwork={() => (
+          <div
+            style={{
+              backgroundColor: 'lightskyblue',
+              width: '64px',
+              height: '24px',
+            }}
+          />
+        )}
+        artworkSize={64}
+      >
+        <ListItemLabel>64px Artwork</ListItemLabel>
+      </ListItem>
+
+      <ListItem
+        artwork={() => (
+          <div
+            style={{
+              backgroundColor: 'lightskyblue',
+              width: '96px',
+              height: '24px',
+            }}
+          />
+        )}
+        artworkSize={96}
+      >
+        <ListItemLabel>96px Artwork</ListItemLabel>
+      </ListItem>
+    </div>
+  );
+}

src/list/__tests__/list.stories.tsx

@@ -5,13 +5,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import React from 'react';
+import { Scenario as ListItemArtworkMinWidth } from './list-item-artwork-min-width.scenario';
 import { Scenario as ListItemArtworkSizes } from './list-item-artwork-sizes.scenario';
 import { Scenario as ListItemMenuAdapter } from './list-item-menu-adapter.scenario';
 import { Scenario as ListItemOverrides } from './list-item-overrides.scenario';
 import { Scenario as ListItemRtl } from './list-item-rtl.scenario';
 import { Scenario as ListItem } from './list-item.scenario';
 import { Scenario as ListHeading } from './list-heading.scenario';
 
+export const ItemArtworkMinWidth = () => <ListItemArtworkMinWidth />;
 export const ItemArtworkSizes = () => <ListItemArtworkSizes />;
 export const ItemMenuAdapter = () => <ListItemMenuAdapter />;
 export const ItemOverrides = () => <ListItemOverrides />;

src/list/styled-components.ts

@@ -79,6 +79,7 @@ export const StyledArtworkContainer = styled<'div', StyledArtworkContainerProps>
       return {
         alignItems: 'center',
         display: 'flex',
+        flexShrink: 0,
         paddingLeft: $theme.sizing.scale600,
         paddingRight: $theme.sizing.scale600,
       };
@@ -87,6 +88,7 @@ export const StyledArtworkContainer = styled<'div', StyledArtworkContainerProps>
     return {
       alignItems: 'center',
       display: 'flex',
+      flexShrink: 0,
       justifyContent: 'center',
       width: $theme.sizing.scale1600,
     };