Merge pull request #1228 from City-of-Helsinki/HDS-2142-checkbox-no-l…

…abel-layout-fix (HDS-2142) fix checkbox layout issue
City-of-Helsinki · Feb 23, 2024 · 7cbae42 · 7cbae42
2 parents d356f3e + 6570b7f
commit 7cbae42
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ Changes that are not related to specific components
 
 - Removed old & deprecated individual `lodash` dependencies and replaced with the full package and importing the needed functions only.
 - [HeaderActionBarItemWithDropdown] Removed useless `@layer` css style which caused Jest/jsdom tests output errors.
+- [Checkbox] Layout issue when using external label with htmlLabelFor-attribute
 
 ### Core
 

diff --git a/packages/core/src/components/checkbox/checkbox.css b/packages/core/src/components/checkbox/checkbox.css
@@ -136,7 +136,7 @@
 }
 
 .hds-checkbox .hds-checkbox__label--hidden {
-  padding-left: 0;
+  padding-left: var(--size);
 }
 
 /* ERROR */

diff --git a/...eact/.loki/reference/chrome_iphone7_Components_Checkbox_With_External_Label.png b/...eact/.loki/reference/chrome_iphone7_Components_Checkbox_With_External_Label.png
diff --git a/...react/.loki/reference/chrome_laptop_Components_Checkbox_With_External_Label.png b/...react/.loki/reference/chrome_laptop_Components_Checkbox_With_External_Label.png
diff --git a/packages/react/src/components/checkbox/Checkbox.stories.tsx b/packages/react/src/components/checkbox/Checkbox.stories.tsx
@@ -213,6 +213,22 @@ export const GroupWithParent = () => {
 
 GroupWithParent.storyName = 'Group with a parent';
 
+export const WithExternalLabel = () => {
+  const customStyle = {
+    '--background-unselected': 'teal',
+    'margin-right': 'var(--spacing-2-xs)',
+  } as React.CSSProperties;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Checkbox id="withExternalLabel" style={customStyle} />
+      <label htmlFor="withExternalLabel">
+        <h3>External label</h3>
+      </label>
+    </div>
+  );
+};
+
 export const Playground = (args) => {
   const [checkedItems, setCheckedItems] = useState({});
   const options = ['Option 1', 'Option 2', 'Option 3'];