fix(Checkbox): add positioning to checkbox input for native validatio…

…n alignment (#10142) * feat: add positioning to checkbox input * feat: add validation example Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 29, 2021 · 56cec53 · 56cec53
1 parent 9408054
commit 56cec53
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -42,6 +42,9 @@
   // to match the specs.
   .#{$prefix}--checkbox {
     @include hidden;
+    //even though its hidden, positioning is for native validation to be aligned to checkbox
+    top: 1.25rem;
+    left: 0.7rem;
   }
 
   // The label corresponds to the content inside of the `label` tag. Since we're

diff --git a/packages/react/src/components/Checkbox/Checkbox-story.js b/packages/react/src/components/Checkbox/Checkbox-story.js
@@ -10,6 +10,7 @@ import classNames from 'classnames';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import Checkbox from '../Checkbox';
+import Button from '../../components/Button';
 import CheckboxSkeleton from '../Checkbox/Checkbox.Skeleton';
 import { settings } from 'carbon-components';
 import mdx from './Checkbox.mdx';
@@ -31,6 +32,31 @@ export default {
   },
 };
 
+export const checkboxNativeValidation = () => {
+  function onSubmit(e) {
+    e.preventDefault();
+    var cb = e.target.querySelector('input[type=checkbox]');
+    if (cb.checked === false) {
+      cb.setCustomValidity('Privacy policy has to be accepted.');
+      cb.reportValidity();
+      return;
+    }
+
+    alert('submitted');
+  }
+
+  function onChange(e) {
+    e.target.setCustomValidity('');
+  }
+  return (
+    <form style={{ margin: '2em' }} onSubmit={onSubmit} onChange={onChange}>
+      <legend className={`${prefix}--label`}>Validation example</legend>
+      <Checkbox id="cb" labelText="Accept privacy policy" />
+      <Button type="submit">Submit</Button>
+    </form>
+  );
+};
+
 export const checkbox = () => {
   return (
     <fieldset className={`${prefix}--fieldset`}>

diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss
@@ -41,6 +41,9 @@
   // to match the specs.
   .#{$prefix}--checkbox {
     @include visually-hidden;
+    //even though its hidden, positioning is for native validation to be aligned to checkbox
+    top: 1.25rem;
+    left: 0.7rem;
   }
 
   // The label corresponds to the content inside of the `label` tag. Since we're