feat: upgrade hint on checkable inputs

WTTJ · Sep 13, 2023 · 1caf38f · 1caf38f
1 parent e1168e0
commit 1caf38f
Show file tree

Hide file tree

Showing 19 changed files with 128 additions and 148 deletions.
diff --git a/docs/pages/components/checkbox.mdx b/docs/pages/components/checkbox.mdx
@@ -24,7 +24,7 @@ function() {
   const [checkboxIndeterminate, setCheckboxIndeterminate] = React.useState(false)
 
   return (
-    <>
+    <Stack direction="row">
       <Checkbox
         name="default"
         checked={checkbox}
@@ -70,7 +70,7 @@ function() {
   const [checkboxChecked, setCheckboxChecked] = React.useState(true)
 
   return (
-    <>
+    <Stack>
       <Field label="default">
         <Checkbox
           name="default-label"
@@ -96,7 +96,7 @@ function() {
           name="not-checked-disabled-label"
         />
       </Field>
-    </>
+    </Stack>
   )
 }
 ```
@@ -132,7 +132,7 @@ function() {
   const [checkbox, setCheckbox] = React.useState(false)
 
   return (
-    <>
+    <Stack>
       <Field error="error" label="error">
         <Checkbox
           name="default-variant"
@@ -161,7 +161,7 @@ function() {
           onChange={() => setCheckbox(!checkbox)}
         />
       </Field>
-    </>
+    </Stack>
   )
 }
 ```
@@ -189,7 +189,7 @@ function() {
   }
 
   return (
-    <>
+    <Stack>
       <Field label="Parent checkbox">
         <Checkbox
           checked={parentChecked}
@@ -203,7 +203,7 @@ function() {
       <Field label="checkbox B" ml="md">
         <Checkbox checked={checkboxB} onChange={() => setCheckboxB(!checkboxB)} />
       </Field>
-    </>
+    </Stack>
   )
 }
 ```

diff --git a/docs/pages/components/radio-group.mdx b/docs/pages/components/radio-group.mdx
@@ -90,12 +90,14 @@ function () {
 
 ## With hint on radio
 
+An example with a hint on radio.
+
 ```jsx
 function () {
   const [value, setValue] = React.useState(null)
 
   return (
-    <Field flexDirection="row" mb="xl" required>
+    <Field required label="Label">
       <RadioGroup
         name="social-4"
         maxWidth={{ md: 0.3 }}
@@ -108,7 +110,6 @@ function () {
           {
             value: 'dribbble',
             label: 'Dribbble',
-            hint: 'Aenean a tristique turpis, in elementum est.',
           },
         ]}
         onChange={setValue}

diff --git a/docs/pages/components/toggle.mdx b/docs/pages/components/toggle.mdx
@@ -25,7 +25,7 @@ function() {
   const [toggleChecked, setToggleChecked] = React.useState(true)
 
   return (
-    <Stack spacing="md">
+    <Stack>
       <Toggle aria-label="Toggle component" checked={toggle} onClick={() => setToggle(!toggle)} />
       <Toggle aria-label="Toggle checked" checked={toggleChecked} onClick={() => setToggleChecked(!toggleChecked)} />
       <Toggle aria-label="Toggle disabled" disabled />
@@ -45,7 +45,7 @@ function() {
   const [toggleChecked, setToggleChecked] = React.useState(true)
 
   return (
-    <>
+    <Stack>
       <Field label="Toggle">
         <Toggle checked={toggle} onClick={() => setToggle(!toggle)} />
       </Field>
@@ -58,7 +58,7 @@ function() {
       <Field label="Toggle">
         <Toggle checked disabled />
       </Field>
-    </>
+    </Stack>
   )
 }
 ```
@@ -88,7 +88,7 @@ function() {
   const [toggle, setToggle] = React.useState(false)
 
   return (
-    <>
+    <Stack>
       <Field error="an error" label="Toggle" hint="a hint">
         <Toggle checked={toggle} onClick={() => setToggle(!toggle)} />
       </Field>
@@ -101,7 +101,7 @@ function() {
       <Field success="an success" label="Toggle" hint="a hint">
         <Toggle checked={toggle} onClick={() => setToggle(!toggle)} />
       </Field>
-    </>
+    </Stack>
   )
 }
 ```

diff --git a/docs/pages/theming/customize.mdx b/docs/pages/theming/customize.mdx
@@ -142,7 +142,7 @@ export default function Root() {
 
 ## Change fonts
 
-If you want to change the url path for the fonts, you can change the property `fontsUrl` on `createTheme()`. By default the fonts are served from the welcome-ui.com domain. In our case at Welcome to the Jungle, we want to have the fonts served from the same domain name as our main website. 
+If you want to change the url path for the fonts, you can change the property `fontsUrl` on `createTheme()`. By default the fonts are served from the welcome-ui.com domain. In our case at Welcome to the Jungle, we want to have the fonts served from the same domain name as our main website.
 
 ```jsx live=false
 const theme = createTheme({ fontsUrl: 'https://cdn.welcometothejungle.com/fonts', ...yourTheme })

diff --git a/packages/Core/src/theme/radios.ts b/packages/Core/src/theme/radios.ts
@@ -9,14 +9,10 @@ export type ThemeRadios = {
     default: string
     disabled: string
   }
-  withHint: {
-    default: CSSObject
-    hint: CSSObject
-  }
 }
 
 export const getRadios = (theme: WuiTheme): ThemeRadios => {
-  const { colors, fontSizes, space, toRem } = theme
+  const { colors, toRem } = theme
 
   return {
     default: {
@@ -31,14 +27,5 @@ export const getRadios = (theme: WuiTheme): ThemeRadios => {
       default: colors['primary-500'],
       disabled: colors['nude-600'],
     },
-    withHint: {
-      default: {
-        fontSize: fontSizes.md,
-        color: colors['dark-900'],
-      },
-      hint: {
-        marginTop: space.xs,
-      },
-    },
   }
 }
diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts
@@ -18,9 +18,9 @@ export const getToggles = (theme: WuiTheme): ThemeToggles => {
   return {
     item: {
       default: {
-        width: toRem(26),
+        width: toRem(24),
         height: toRem(16),
-        borderRadius: toRem(9),
+        borderRadius: toRem(16),
         backgroundColor: colors['light-900'],
         borderColor: colors.border,
         borderWidth: borderWidths.sm,

diff --git a/packages/Field/package.json b/packages/Field/package.json
@@ -50,7 +50,8 @@
     "@welcome-ui/hint": "^5.0.0",
     "@welcome-ui/label": "^5.0.0",
     "@welcome-ui/system": "^5.0.0",
-    "@welcome-ui/utils": "^5.0.0"
+    "@welcome-ui/utils": "^5.0.0",
+    "@welcome-ui/variant-icon": "^5.0.0"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

diff --git a/packages/Field/src/index.tsx b/packages/Field/src/index.tsx
@@ -1,11 +1,10 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Label } from '@welcome-ui/label'
 import { Hint } from '@welcome-ui/hint'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import { useIsomorphicLayoutEffect } from '@welcome-ui/utils'
+import { VariantIcon } from '@welcome-ui/variant-icon'
 
-// Fields
-import { RowContainer } from './layout'
 import * as S from './styles'
 import { forwardedProps, generateRandomId, getBaseType, getVariant } from './utils'
 
@@ -47,12 +46,13 @@ export const Field = forwardRef<'div', FieldProps>(
   ) => {
     const baseType = getBaseType(children.props.type || children.type.displayName)
     const isRadio = baseType === 'radio'
-    const isToggle = children.type.displayName === 'Toggle'
+    const isRadioGroup = baseType === 'RadioGroup'
+    const isFieldGroup = baseType === 'FieldGroup'
     const isCheckbox = baseType === 'checkbox'
+    const isToggle = children.type.displayName === 'Toggle'
     const isCheckable = isRadio || isCheckbox || isToggle
     const layout = flexDirection || (isCheckable ? 'row' : 'column')
-    const isGroup = ['FieldGroup', 'RadioGroup'].includes(baseType)
-    const Container = layout === 'row' ? RowContainer : Fragment
+    const isGroup = isFieldGroup || isRadioGroup
     const variant = getVariant({ error, warning, success, info })
     const hintText = variant ? error || warning || success || info : hint
     const withHintText = !!hintText
@@ -76,34 +76,51 @@ export const Field = forwardRef<'div', FieldProps>(
         }
       })
     }, [children.props, children.type.displayName, htmlFor])
-
     return (
       <S.Field
         ref={ref}
         {...rest}
         data-testid={dataTestId}
-        flexDirection={layout}
         isCheckable={isCheckable}
+        isRadioGroup={isRadioGroup}
         withHintText={withHintText}
       >
-        <Container>
-          {label && (
-            <Label
-              disabled={disabled}
-              disabledIcon={disabledIcon}
-              htmlFor={htmlFor}
-              required={required}
-              variant={variant}
-              withDisabledIcon={!isCheckable}
-            >
-              {isCheckable && child}
-              {label}
-            </Label>
-          )}
-          {!isCheckable && child}
-        </Container>
-        {hintText && (
-          <Hint checkableField={isCheckable} variant={variant}>
+        <S.Label>
+          {isCheckable && child}
+          <S.LabelWithHint>
+            {label && (
+              <Label
+                checkableField={isCheckable}
+                disabled={disabled}
+                disabledIcon={disabledIcon}
+                htmlFor={htmlFor}
+                required={required}
+                variant={variant}
+                withDisabledIcon={!isCheckable}
+              >
+                {/* if we got a hint on checkable field, we need to show them on column */}
+
+                {/* for a checkable field the variant icon is after input and before label text */}
+                {isCheckable && <VariantIcon size="sm" variant={variant} />}
+                {label}
+              </Label>
+            )}
+            {/* for a checkable field we add a hint below label name */}
+            {isCheckable && hintText && (
+              <Hint
+                checkableField
+                dataTestId={dataTestId ? `${dataTestId}-hint` : undefined}
+                mt="0"
+                variant={variant}
+              >
+                {hintText}
+              </Hint>
+            )}
+          </S.LabelWithHint>
+        </S.Label>
+        {!isCheckable && child}
+        {!isCheckable && hintText && (
+          <Hint dataTestId={dataTestId ? `${dataTestId}-hint` : undefined} variant={variant}>
             {hintText}
           </Hint>
         )}

diff --git a/packages/Field/src/layout.ts b/packages/Field/src/layout.ts
diff --git a/packages/Field/src/styles.ts b/packages/Field/src/styles.ts
@@ -1,55 +1,58 @@
 import styled, { css, system, th } from '@xstyled/styled-components'
 import { StyledLabel } from '@welcome-ui/label'
-import { StyledHint } from '@welcome-ui/hint'
-import { StyledFieldGroup } from '@welcome-ui/field-group'
 import { shouldForwardProp, WuiProps } from '@welcome-ui/system'
 import { FieldIconSize } from '@welcome-ui/utils'
 
-const rowStyles = css`
-  margin-right: lg;
-`
-
-const columnStyles = css`
-  margin-bottom: sm;
-`
-
 const checkableFieldStyles = css`
   ${th('defaultFields.checkablelabel.default')};
   align-items: flex-start;
   overflow-wrap: break-word;
-
-  input {
-    margin-top: xs;
-  }
 `
 
 type StyledFieldProps = {
-  isCheckable?: boolean
-  flexDirection: WuiProps['flexDirection']
   checked?: boolean
+  flexDirection: WuiProps['flexDirection']
+  isCheckable?: boolean
+  isRadioGroup?: boolean
   withHintText?: boolean
 }
 
 export const Field = styled('div').withConfig({ shouldForwardProp })<StyledFieldProps>(
-  ({ checked, flexDirection, isCheckable, withHintText }) => css`
-    ${StyledFieldGroup} {
-      margin-bottom: ${isCheckable && 'xxs'};
-    }
+  ({ checked, isCheckable, isRadioGroup, withHintText }) => css`
+    ${isCheckable &&
+    css`
+      input {
+        margin-top: xs;
+      }
+    `}
     ${StyledLabel} {
-      ${flexDirection === 'row' && rowStyles};
-      ${flexDirection === 'column' && !isCheckable && columnStyles};
       ${isCheckable && checkableFieldStyles};
       ${isCheckable && withHintText && th('defaultFields.checkablelabel.default')}
       ${checked && th('defaultFields.checkablelabel.checked')}
-      margin-bottom: ${!withHintText && 'xs'}
-    }
-    ${StyledHint} {
-      margin-bottom: ${isCheckable && 'xxs'};
+      ${!isCheckable &&
+      css`
+        margin-bottom: sm;
+      `}
+      ${isRadioGroup &&
+      css`
+        margin-bottom: md;
+      `}
     }
     ${system};
   `
 )
 
+export const Label = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: sm;
+`
+
+export const LabelWithHint = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
 type IconWrapperProps = {
   iconPlacement: 'left' | 'right'
   size?: FieldIconSize