feat(pie-checkbox-group): DSW-2182 adds super long label to show mult…

…iline checkbox
justeattakeaway · Jul 23, 2024 · 97e4808 · 97e4808
1 parent d3bdeeb
commit 97e4808
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts
@@ -90,10 +90,11 @@ const Template = ({
             ?disabled="${disabled}"
         >
             <pie-checkbox name="checkbox-one">checkbox 1</pie-checkbox>
-            <pie-checkbox name="checkbox-two">checkbox 2 longer label</pie-checkbox>
-            <pie-checkbox name="checkbox-three">checkbox 3</pie-checkbox>
+            <pie-checkbox name="checkbox-two">checkbox 2</pie-checkbox>
+            <pie-checkbox name="checkbox-three">checkbox 3 longer label</pie-checkbox>
             <pie-checkbox name="checkbox-three">checkbox 4</pie-checkbox>
-            <pie-checkbox name="checkbox-three">checkbox 5 even longer label</pie-checkbox>
+            <pie-checkbox name="checkbox-three">checkbox 5 even longer label: Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit.</pie-checkbox>
             <pie-checkbox name="checkbox-three">checkbox 6</pie-checkbox>
         </pie-checkbox-group>
     </div>

diff --git a/packages/components/pie-checkbox-group/src/checkbox-group.scss b/packages/components/pie-checkbox-group/src/checkbox-group.scss
@@ -24,7 +24,7 @@
 .__inline {
     display: flex;
 
-    align-items: center;
+    align-items: flex-start;
     flex-wrap: wrap;
 }
 

diff --git a/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts b/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts
@@ -131,6 +131,29 @@ for (const dir of readingDirections) {
             },
         );
 
+        // Success + assistive text + isInline
+        testComponent = createTestWebComponent({
+            assistiveText: 'Success text',
+            label: 'Group label',
+            status: 'success',
+            isInline: true,
+        }, renderTestPieCheckboxGroup);
+        propKeyValues = `
+            assistiveText: ${testComponent.propValues.assistiveText},
+            label: ${testComponent.propValues.label},
+            status: ${testComponent.propValues.status},
+            isInline: ${testComponent.propValues.isInline}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    component: testComponent.renderedString.trim(),
+                },
+            },
+        );
+
         await percySnapshot(page, `PIE Checkbox Group - Assistive text and statuses - ${dir}`, percyWidths);
     });
 }