refactor: truncate texts and add elipses, and adjust sb examples

Opentrons · Oct 18, 2024 · 54390cf · 54390cf
1 parent b6a0fa3
commit 54390cf
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx b/opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx
@@ -35,7 +35,7 @@ export const PromptPreviewExample: Story = {
         title: 'Application',
         items: [
           'Cherrypicking',
-          'I have a Chlorine Reagent Set (Total), Ultra Low Range...',
+          'I have a Chlorine Reagent Set (Total), Ultra Low Range',
         ],
       },
       {
@@ -59,13 +59,16 @@ export const PromptPreviewExample: Story = {
           'Opentrons 96 Well Plate',
           'Thermocycler GEN2',
           'Opentrons 96 Deep Well Plate',
-          'Liquid 1: These are my samples, the...',
-          'Liquid 2: This is the reagent in my ...',
+          'Liquid 1: In commodo lectus nec erat commodo blandit. Etiam leo dui, porttitor vel imperdiet sed, tristique nec nisl. Maecenas pulvinar sapien quis sodales imperdiet.',
+          'Liquid 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
         ],
       },
       {
         title: 'Steps',
-        items: ['Fill the first column of a Elisa...'],
+        items: [
+          'Fill the first column of a Elisa plate with 100 uL of Liquid 1',
+          'Fill the second column of a Elisa plate with 100 uL of Liquid 2',
+        ],
       },
     ],
   },

diff --git a/opentrons-ai-client/src/molecules/PromptPreviewSection/index.tsx b/opentrons-ai-client/src/molecules/PromptPreviewSection/index.tsx
@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import {
   Flex,
   StyledText,
-  COLORS,
   Tag,
   DIRECTION_COLUMN,
   WRAP,
@@ -23,10 +22,27 @@ const SectionHeading = styled(StyledText)`
   margin-bottom: ${SPACING.spacing8};
 `
 
-const TagGrid = styled(Flex)`
+const TagsContainer = styled(Flex)`
   grid-gap: ${SPACING.spacing4};
   flex-wrap: ${WRAP};
-  color: ${COLORS.grey60};
+  justify-content: flex-start;
+  width: 100%;
+`
+
+const TagItemWrapper = styled(Flex)`
+  width: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 35%;
+
+  & > div {
+    overflow: hidden;
+
+    > p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 `
 
 export function PromptPreviewSection({
@@ -36,13 +52,16 @@ export function PromptPreviewSection({
   return (
     <PromptPreviewSectionContainer>
       <SectionHeading desktopStyle="bodyLargeSemiBold">{title}</SectionHeading>
-      <TagGrid>
-        {items.map((item: string, index: number) =>
-          item.trim() === '' ? null : (
-            <Tag key={`item-tag-${index}`} text={item} type={'default'} />
-          )
+      <TagsContainer>
+        {items.map(
+          (item: string, index: number) =>
+            item.trim() !== '' && (
+              <TagItemWrapper key={`item-tag-${index}`}>
+                <Tag text={item} type={'default'} />
+              </TagItemWrapper>
+            )
         )}
-      </TagGrid>
+      </TagsContainer>
     </PromptPreviewSectionContainer>
   )
 }