fix(utils): handle disabled label / unit label for *Field components

Change opacity and disable pointer events for the `*Field`
components label / unit label when the components are disabled.

Fixes: #193

Author: Anton Bilovus

packages/core/src/Input/__snapshots__/index.test.tsx.snap

@@ -4678,6 +4678,7 @@ exports[`TextInput TimeInput 1`] = `
       <div>
         <div
           className="c24"
+          disabled={false}
         >
           <span
             className="c25"
@@ -4716,6 +4717,7 @@ exports[`TextInput TimeInput 1`] = `
           </div>
           <span
             className="c22 c27"
+            disabled={false}
           >
             MM
           </span>
@@ -4724,6 +4726,7 @@ exports[`TextInput TimeInput 1`] = `
       <div>
         <div
           className="c24"
+          disabled={false}
         >
           <span
             className="c25"
@@ -4762,6 +4765,7 @@ exports[`TextInput TimeInput 1`] = `
           </div>
           <span
             className="c22 c27"
+            disabled={false}
           >
             MM
           </span>

packages/core/src/RadioButton/__snapshots__/index.test.tsx.snap

@@ -3094,6 +3094,7 @@ exports[`RadioButtons RadioIconGroup 1`] = `
       <div>
         <div
           className="c2"
+          disabled={false}
         >
           <span
             className="c3"

packages/core/src/Slider/index.tsx

@@ -597,14 +597,16 @@ export const SliderField: React.FC<
 > = ({ label, unitLabel, ...props }) => (
   <div>
     {label !== undefined ? (
-      <SliderLabel compact={false}>
+      <SliderLabel compact={false} disabled={props.disabled ?? false}>
         <Typography variant="navigation-label">{label}</Typography>
       </SliderLabel>
     ) : null}
     {unitLabel !== undefined ? (
       <WithUnitLabelContainer>
         <Slider {...props} />
-        <Unit variant="explanatory-text">{unitLabel}</Unit>
+        <Unit variant="explanatory-text" disabled={props.disabled ?? false}>
+          {unitLabel}
+        </Unit>
       </WithUnitLabelContainer>
     ) : (
       <Slider {...props} />

packages/core/src/ToggleButtonGroup/__snapshots__/index.test.tsx.snap

@@ -452,6 +452,7 @@ exports[`ToggleButtonGroup ToggleButtonGroupWithField 1`] = `
       <div>
         <div
           className="c2"
+          disabled={false}
         >
           <span
             className="c3"
@@ -681,6 +682,7 @@ exports[`ToggleButtonGroup ToggleButtonGroupWithFieldExclusive 1`] = `
       <div>
         <div
           className="c2"
+          disabled={false}
         >
           <span
             className="c3"

packages/core/src/utils/withField.tsx

@@ -1,25 +1,29 @@
 import React from 'react'
-import styled, { useTheme } from 'styled-components'
-import { Typography } from '../Typography'
-import { componentSize, spacing } from '../designparams'
+import styled, { useTheme, css } from 'styled-components'
 
-export interface FieldProps {
-  readonly label?: string
-  /**
-   * Override theme's default setting for `compact` if set.
+import { Typography } from '../Typography'
+import { componentSize, spacing, opacity } from '../designparams'
 
-   */
-  readonly compact?: boolean
-  readonly unitLabel?: string
+interface LabelProps {
+  readonly compact: boolean
+  readonly disabled: boolean
 }
 
-export const Label = styled.div<{ readonly compact: boolean }>`
+export const Label = styled.div<LabelProps>`
   height: ${({ compact }) =>
     !compact ? componentSize.medium : componentSize.small};
   display: flex;
   align-items: center;
   color: ${({ theme }) => theme.color.text03()};
   cursor: default;
+
+  ${({ disabled }) =>
+    disabled
+      ? css`
+          opacity: ${opacity[48]};
+          pointer-events: none;
+        `
+      : undefined};
 `
 
 export const WithUnitLabelContainer = styled.div`
@@ -28,31 +32,55 @@ export const WithUnitLabelContainer = styled.div`
   align-items: center;
 `
 
-export const Unit = styled(Typography)`
+export const Unit = styled(Typography)<{
+  readonly disabled: boolean
+}>`
   color: ${({ theme }) => theme.color.text03()};
   margin-left: ${spacing.medium};
   flex-shrink: 0;
+
+  ${({ disabled }) =>
+    disabled
+      ? css`
+          opacity: ${opacity[48]};
+          pointer-events: none;
+        `
+      : undefined};
 `
 
+export interface FieldProps {
+  readonly label?: string
+  readonly disabled?: boolean
+  /**
+   * Override theme's default setting for `compact` if set.
+
+   */
+  readonly compact?: boolean
+  readonly unitLabel?: string
+}
+
 export function withField<T>(
-  InputComponent: React.FunctionComponent<T>
-): React.FunctionComponent<FieldProps & T> {
+  InputComponent: React.FC<T>
+): React.FC<FieldProps & T> {
   // eslint-disable-next-line react/display-name
   return ({ label, unitLabel, ...props }) => {
     const { compact: compactFromTheme } = useTheme()
     const compact = props.compact ?? compactFromTheme
+    const disabled = props.disabled ?? false
 
     return (
       <div>
         {label !== undefined ? (
-          <Label compact={compact}>
+          <Label compact={compact} disabled={disabled}>
             <Typography variant="navigation-label">{label}</Typography>
           </Label>
         ) : null}
         {unitLabel !== undefined ? (
           <WithUnitLabelContainer>
             <InputComponent {...(props as T)} />
-            <Unit variant="explanatory-text">{unitLabel}</Unit>
+            <Unit variant="explanatory-text" disabled={disabled}>
+              {unitLabel}
+            </Unit>
           </WithUnitLabelContainer>
         ) : (
           <InputComponent {...(props as T)} />