fix: remove extra text element in toggle component

affects: @medly-components/core
medly · Sep 26, 2024 · d66404b · d66404b
1 parent b6f86b3
commit d66404b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 39 deletions.
diff --git a/packages/core/src/components/Toggle/Toggle.tsx b/packages/core/src/components/Toggle/Toggle.tsx
@@ -2,7 +2,6 @@ import { WithStyle } from '@medly-components/utils';
 import { cloneElement, FC, forwardRef, memo, useCallback, useMemo } from 'react';
 import { useTheme } from 'styled-components';
 import FieldWithLabel from '../FieldWithLabel';
-import Text from '../Text';
 import * as Styled from './Toggle.styled';
 import { ToggleProps } from './types';
 
@@ -44,7 +43,7 @@ const Component: FC<ToggleProps> = memo(
                         {...{ required, labelPosition, labelVariant, labelWeight, labelColor: color }}
                         htmlFor={toggleId}
                     >
-                        <Text>{label}</Text>
+                        {label}
                     </FieldWithLabel.Label>
                 )}
                 <Styled.Wrapper size={size} disabled={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
@@ -173,20 +173,6 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   cursor: not-allowed;
 }
 
-.c3 {
-  margin: 0;
-  color: inherit;
-  font-size: 1.4rem;
-  font-weight: 400;
-  -webkit-letter-spacing: 0rem;
-  -moz-letter-spacing: 0rem;
-  -ms-letter-spacing: 0rem;
-  letter-spacing: 0rem;
-  line-height: 2.2rem;
-  text-align: initial;
-  display: inline-block;
-}
-
 .c2 {
   grid-area: label;
   -webkit-align-self: center;
@@ -223,7 +209,7 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   flex-direction: row-reverse;
 }
 
-.c4 {
+.c3 {
   grid-area: field;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
@@ -239,17 +225,17 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   disabled-checked: #435465;
 }
 
-.c4:focus-within {
+.c3:focus-within {
   box-shadow: 0 0 0 1pt #012040;
 }
 
-.c4 > * {
+.c3 > * {
   width: 100%;
   height: 100%;
   border-radius: 1.5rem;
 }
 
-.c7 {
+.c6 {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -264,7 +250,7 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   background: #dfe4e9;
 }
 
-.c9 {
+.c8 {
   z-index: 1;
   position: absolute;
   height: calc(28px - 0.8rem);
@@ -277,49 +263,49 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   transition: 0.2s;
 }
 
-.c5 {
+.c4 {
   opacity: 0;
   z-index: 2;
   margin: 0;
   position: absolute;
   cursor: pointer;
 }
 
-.c5:focus {
+.c4:focus {
   outline: none;
 }
 
-.c5:disabled {
+.c4:disabled {
   cursor: not-allowed;
 }
 
-.c5:disabled:not(:checked) + .c6 {
+.c4:disabled:not(:checked) + .c5 {
   background: #C7D0D8;
 }
 
-.c5:disabled:checked + .c6 {
+.c4:disabled:checked + .c5 {
   background: #435465;
 }
 
-.c5:not(:disabled):checked + .c6 {
+.c4:not(:disabled):checked + .c5 {
   background: #012040;
 }
 
-.c5:checked + .c6 .c8 {
+.c4:checked + .c5 .c7 {
   -webkit-transform: translateX(calc(28px * 0.75) );
   -ms-transform: translateX(calc(28px * 0.75) );
   transform: translateX(calc(28px * 0.75) );
 }
 
-.c5:checked + .c6 .sc-1oxfop0-2 {
+.c4:checked + .c5 .sc-1oxfop0-2 {
   opacity: 0;
   color: #ffffff;
   -webkit-transform: translateX(calc(-28px * 0.75) );
   -ms-transform: translateX(calc(-28px * 0.75) );
   transform: translateX(calc(-28px * 0.75) );
 }
 
-.c5:checked + .c6 .sc-1oxfop0-3 {
+.c4:checked + .c5 .sc-1oxfop0-3 {
   opacity: 1;
   position: absolute;
   -webkit-transform: translateX(0);
@@ -336,28 +322,24 @@ exports[`Toggle component should render correctly with all the props given 1`] =
       class="c1 c2"
       for="gender-toggle"
     >
-      <span
-        class="c3"
-      >
-        Female
-      </span>
+      Female
     </label>
     <div
-      class="sc-12atfcu-0 c4"
+      class="sc-12atfcu-0 c3"
       disabled=""
     >
       <input
-        class="c5"
+        class="c4"
         disabled=""
         id="gender-toggle"
         name="gender"
         type="checkbox"
       />
       <div
-        class="c6 c7"
+        class="c5 c6"
       >
         <div
-          class="c8 c9"
+          class="c7 c8"
         />
       </div>
     </div>