Merge pull request #239 from vrk-kpa/bugfix/toggle_functionality

[Bugfix] Toggle functionality
vrk-kpa · Nov 12, 2019 · 936a4ab · 936a4ab
2 parents 0ea4bd0 + 15d19a4
commit 936a4ab
Show file tree

Hide file tree

Showing 3 changed files with 404 additions and 178 deletions.
diff --git a/src/components/Form/ToggleInput.tsx b/src/components/Form/ToggleInput.tsx
@@ -5,11 +5,10 @@ import React, {
   FunctionComponent,
 } from 'react';
 import classnames from 'classnames';
-import { HtmlInput, HtmlLabel, HtmlSpan } from '../../reset';
+import { HtmlInput, HtmlLabel } from '../../reset';
 import { ToggleProps, ToggleState } from './Toggle';
 
 const baseClassName = 'fi-toggle';
-const toggleDisabledClassName = `${baseClassName}--disabled`;
 
 const componentOrElementWithProps = (
   component: ReactElement<any> | FunctionComponent<any> | ComponentClass<any>,
@@ -69,6 +68,7 @@ export class ToggleInput extends Component<ToggleProps> {
     const toggleClassName = `${baseClassName}--with-input`;
     const toggleInputClassName = `${baseClassName}_input`;
     const toggleLabelClassName = `${baseClassName}_label`;
+    const toggleDisabledClassName = `${baseClassName}--disabled`;
 
     const newToggleInputProps = {
       disabled,
@@ -82,25 +82,26 @@ export class ToggleInput extends Component<ToggleProps> {
     };
 
     return (
-      <HtmlSpan
-        className={classnames(toggleClassName, className, baseClassName, {
-          [toggleDisabledClassName]: !!disabled,
-        })}
+      <HtmlLabel
+        htmlFor={id}
+        className={classnames(
+          toggleClassName,
+          className,
+          baseClassName,
+          {
+            [toggleDisabledClassName]: !!disabled,
+          },
+          toggleLabelClassName,
+        )}
+        {...passProps}
       >
         {!!toggleInputComponent ? (
           componentOrElementWithProps(toggleInputComponent, newToggleInputProps)
         ) : (
           <HtmlInput {...newToggleInputProps} type="checkbox" />
         )}
-        <HtmlLabel
-          {...passProps}
-          className={toggleLabelClassName}
-          onClick={this.handleClick}
-          htmlFor={id}
-        >
-          {children}
-        </HtmlLabel>
-      </HtmlSpan>
+        {children}
+      </HtmlLabel>
     );
   }
 }
diff --git a/src/core/Form/Toggle/Toggle.tsx b/src/core/Form/Toggle/Toggle.tsx
@@ -11,6 +11,7 @@ import {
   ToggleInputProps as CompToggleInputProps,
 } from '../../../components/Form/Toggle';
 import { Icon } from '../../Icon/Icon';
+import { Text } from '../../Text/Text';
 
 export interface ToggleProps extends CompToggleProps, TokensProp {}
 export interface ToggleInputProps extends CompToggleInputProps, TokensProp {}
@@ -67,7 +68,7 @@ class ToggleWithIcon extends Component<ToggleProps> {
           })}
           mousePointer={true}
         />
-        {children}
+        <Text>{children}</Text>
       </StyledToggle>
     );
   }