fix: make toggle wrapper id different from checkbox

affects: @medly-components/core
medly · May 13, 2024 · 6458570 · 6458570
1 parent 9dc88bd
commit 6458570
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,9 +2,9 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
-        "source.organizeImports": true,
-        "source.fixAll.stylelint": true
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "explicit",
+        "source.fixAll.stylelint": "explicit"
     },
     "eslint.validate": ["html", "javascript", "javascriptreact", "typescript", "typescriptreact"],
     "cSpell.words": ["Medly"],

diff --git a/packages/core/src/components/Toggle/Toggle.tsx b/packages/core/src/components/Toggle/Toggle.tsx
@@ -32,7 +32,7 @@ const Component: FC<ToggleProps> = memo(
             toggleId = useMemo(() => id || label?.toLocaleLowerCase().replace(/ +/g, '-') || 'medly-toggle-checkbox', [id, label]);
 
         return (
-            <FieldWithLabel id={toggleId} fieldWithMaxContent {...{ fullWidth, labelPosition }}>
+            <FieldWithLabel id={`${toggleId}-wrapper`} fieldWithMaxContent {...{ fullWidth, labelPosition }}>
                 {label && (
                     <FieldWithLabel.Label
                         showPointer={!restProps.disabled}

diff --git a/packages/core/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap b/packages/core/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -127,7 +127,7 @@ exports[`Toggle component should render correctly with all the default props 1`]
 <div>
   <div
     class="c0"
-    id="medly-toggle-checkbox"
+    id="medly-toggle-checkbox-wrapper"
   >
     
     <div
@@ -300,7 +300,7 @@ exports[`Toggle component should render correctly with all the props given 1`] =
 <div>
   <div
     class="c0"
-    id="gender-toggle"
+    id="gender-toggle-wrapper"
   >
     <label
       class="c1 c2"