added support for @enableCollapseBelowContentSize argument for Flex::Item

Author: didoo

packages/components/src/components/hds/layout/flex/item.ts

@@ -16,6 +16,8 @@ export interface HdsLayoutFlexItemSignature {
     basis?: string | 0;
     grow?: boolean | number | string;
     shrink?: boolean | number | string;
+    // TODO final name TBD
+    enableCollapseBelowContentSize?: boolean;
   };
   Blocks: {
     default: [];
@@ -79,6 +81,11 @@ export default class HdsLayoutFlexItem extends Component<HdsLayoutFlexItemSignat
       classes.push('hds-layout-flex-item--shrink-1');
     }
 
+    // add a class based on the @enableCollapseBelowContentSize argument (applies a `min-width: 0`)
+    if (this.args.enableCollapseBelowContentSize) {
+      classes.push('hds-layout-flex-item--enable-collapse-below-content-size');
+    }
+
     return classes.join(' ');
   }
 }

packages/components/src/styles/components/layout/flex.scss

@@ -99,3 +99,8 @@
 .hds-layout-flex-item--shrink-1 {
   flex-shrink: 1;
 }
+
+.hds-layout-flex-item--enable-collapse-below-content-size {
+  // this allows the element to shrink below its content's intrinsic minimum width (eg. used with elliptized text)
+  min-width: 0;
+}

showcase/app/templates/layouts/flex.hbs

@@ -299,4 +299,49 @@
     </SG.Item>
   </Shw::Grid>
 
+  <Shw::Text::H3>enableCollapseBelowContentSize (<code>min-width: 0</code>)</Shw::Text::H3>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="first flex item has enableCollapseBelowContentSize=true">
+      <Shw::Outliner {{style max-width="600px"}}>
+        <Hds::Layout::Flex as |HLF|>
+          <HLF.Item @enableCollapseBelowContentSize={{true}}>
+            <Shw::Placeholder @height="40" @background="#e4c5f3">
+              <pre {{style white-space="nowrap" overflow="hidden" text-overflow="ellipsis"}}>item #1 with a very long text that might cause overflow issues</pre>
+            </Shw::Placeholder>
+          </HLF.Item>
+          <HLF.Item>
+            <Shw::Placeholder @text="item #2 with width=150px" @width="150px" @height="40" @background="#e5ffd2" />
+          </HLF.Item>
+          <HLF.Item>
+            <Shw::Placeholder @text="item #3 with width=150px" @width="150px" @height="40" @background="#d2f4ff" />
+          </HLF.Item>
+          <HLF.Item>
+            <Shw::Placeholder @text="item #4" @height="40" @background="#fff8d2" />
+          </HLF.Item>
+        </Hds::Layout::Flex>
+      </Shw::Outliner>
+    </SG.Item>
+    <SG.Item @label="first flex item has basis=0px">
+      <Shw::Outliner {{style max-width="600px"}}>
+        <Hds::Layout::Flex as |HLF|>
+          <HLF.Item @basis="0px">
+            <Shw::Placeholder @height="40" @background="#e4c5f3">
+              <pre {{style white-space="nowrap" overflow="hidden" text-overflow="ellipsis"}}>item #1 with a very long text that might cause overflow issues</pre>
+            </Shw::Placeholder>
+          </HLF.Item>
+          <HLF.Item>
+            <Shw::Placeholder @text="item #2 with width=150px" @width="150px" @height="40" @background="#e5ffd2" />
+          </HLF.Item>
+          <HLF.Item>
+            <Shw::Placeholder @text="item #3 with width=150px" @width="150px" @height="40" @background="#d2f4ff" />
+          </HLF.Item>
+          <HLF.Item>
+            <Shw::Placeholder @text="item #4" @height="40" @background="#fff8d2" />
+          </HLF.Item>
+        </Hds::Layout::Flex>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
 </section>