Support for multiline checkboxes++

libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.module.scss

@@ -1,8 +1,7 @@
 .checkboxWrapper {
-  height: 44px;
+  min-height: 44px;
   display: flex;
   position: relative;
-  align-items: center;
   &:hover {
     cursor: pointer;
     background-color: var(--px-color-surface-subtle-hover);
@@ -11,14 +10,15 @@
   &:active {
     background-color: var(--px-color-surface-subtle-active);
   }
+  border-radius: 4px;
 }
 
 .checkmark {
   margin-top: 10px;
   margin-bottom: 10px;
   margin-right: 12px;
   margin-left: 8px;
-  width: 22px;
+  min-width: 22px;
   height: 22px;
   border: 2px solid var(--px-color-border-action);
   border-radius: 4px;
@@ -38,3 +38,8 @@
 .strong {
   font-weight: 600;
 }
+
+.label {
+  margin-top: 12px;
+  margin-bottom: 8px;
+}

libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Checkbox> = {
 };
 export default meta;
 
-export const Variants: StoryFn<typeof Checkbox> = () => {
+export const MixedStateCheckbox: StoryFn<typeof Checkbox> = () => {
   const [selectedMalamute, setSelectedMalamute] = React.useState(true);
   const [selectedHusky, setSelectedHusky] = React.useState(true);
   const [selectedYorkshireTerrier, setSelectedYorkshireTerrier] =
@@ -34,7 +34,7 @@ export const Variants: StoryFn<typeof Checkbox> = () => {
     <>
       <MixedCheckbox
         id="test"
-        text="All dog breeds"
+        text="Select all"
         onChange={(val) => {
           if (selectedHusky && selectedMalamute && selectedYorkshireTerrier) {
             setSelectedHusky(false);
@@ -83,3 +83,39 @@ export const Variants: StoryFn<typeof Checkbox> = () => {
     </>
   );
 };
+
+export const LongTextOn400pxWideMax: StoryFn<typeof Checkbox> = () => {
+  const [selectedVar1, setSelectedVar1] = React.useState(true);
+  const [selectedVar2, setSelectedVar2] = React.useState(true);
+  const [selectedVar3, setSelectedVar3] = React.useState(false);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <Checkbox
+        id="var1"
+        text="The text on this checkbox spans multiple lines. That's why it is written so long. Here's an additional sentence."
+        onChange={(val) => {
+          setSelectedVar2(val);
+        }}
+        value={selectedVar2}
+      />
+
+      <Checkbox
+        id="var2"
+        text="Short text"
+        onChange={(val) => {
+          setSelectedVar1(val);
+        }}
+        value={selectedVar1}
+      />
+      <Checkbox
+        id="var3"
+        text="The text on this checkbox spans multiple lines. That's why it is written so long. Here's an additional sentence."
+        onChange={(val) => {
+          setSelectedVar3(val);
+        }}
+        value={selectedVar3}
+      />
+    </div>
+  );
+};

libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.tsx

@@ -47,11 +47,11 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       >
         {value && <Icon iconName="CheckMark"></Icon>}
       </span>
-      <span id={id + '-label'}>
+      <div className={styles.label} id={id + '-label'}>
         <Label>
           <span className={cl({ [styles.strong]: strong })}>{text}</span>
         </Label>
-      </span>
+      </div>
     </div>
   );
 };
@@ -111,11 +111,11 @@ export const MixedCheckbox: React.FC<MixedCheckboxProps> = ({
         {value === 'true' && <Icon iconName="CheckMark"></Icon>}
         {value === 'mixed' && <Icon iconName="IndeterminateCheckMark"></Icon>}
       </span>
-      <span id={id + '-label'}>
+      <div className={styles.label} id={id + '-label'}>
         <Label>
           <span className={cl({ [styles.strong]: strong })}>{text}</span>
         </Label>
-      </span>
+      </div>
     </div>
   );
 };