fix: make interactive states work for CSS form components

nl-design-system · Oct 21, 2021 · 0a71c46 · 0a71c46
1 parent 7dfdc55
commit 0a71c46
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 1 deletion.
diff --git a/components/checkbox/bem.js b/components/checkbox/bem.js
@@ -13,6 +13,7 @@ export const defaultArgs = {
 export const Checkbox = ({ checked = false, disabled = false }) =>
   `<input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
     'utrecht-checkbox',
+    'utrecht-checkbox--html-input',
     checked && 'utrecht-checkbox--checked',
     disabled && 'utrecht-checkbox--disabled',
   )}">`;
diff --git a/components/radio-button/bem.js b/components/radio-button/bem.js
@@ -13,6 +13,7 @@ export const defaultArgs = {
 export const RadioButton = ({ checked = false, disabled = false }) =>
   `<input type="radio"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
     'utrecht-radio-button',
+    'utrecht-radio-button--html-input',
     checked && 'utrecht-radio-button--checked',
     disabled && 'utrecht-radio-button--disabled',
   )}">`;
diff --git a/components/select/bem.js b/components/select/bem.js
@@ -17,7 +17,7 @@ export const defaultArgs = {
 export const Select = ({ disabled = false, focus = false, invalid = false, options = [], required = false }) =>
   `<select${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
     required ? ' required' : ''
-  } class="${clsx('utrecht-select', {
+  } class="${clsx('utrecht-select', 'utrecht-select--html-select', {
     'utrecht-select--disabled': disabled,
     'utrecht-select--focus': focus,
     'utrecht-select--focus-visible': focus,

diff --git a/components/textarea/bem.js b/components/textarea/bem.js
@@ -23,6 +23,7 @@ export const TextArea = ({
 }) =>
   `<textarea class="${clsx(
     'utrecht-textarea',
+    'utrecht-textarea--html-textarea',
     disabled && 'utrecht-textarea--disabled',
     focus && 'utrecht-textarea--focus utrecht-textarea--focus-visible',
     hover && 'utrecht-textarea--hover',

diff --git a/components/textbox/bem.js b/components/textbox/bem.js
@@ -26,6 +26,7 @@ export const TextBox = ({
 }) =>
   `<input class="${clsx(
     'utrecht-textbox',
+    'utrecht-textbox--html-input',
     disabled && 'utrecht-textbox--disabled',
     focus && 'utrecht-textbox--focus utrecht-textbox--focus-visible',
     invalid && 'utrecht-textbox--invalid',