fix: design review on Label and Segmented Control

Frontify · May 15, 2024 · aa1117a · aa1117a
1 parent 4a0371e
commit aa1117a
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 9 deletions.
diff --git a/.changeset/late-mirrors-turn.md b/.changeset/late-mirrors-turn.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix: use correct background color on the Segmented Control
diff --git a/.changeset/new-beds-own.md b/.changeset/new-beds-own.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix: use correct gap between items in Label and Checkbox
diff --git a/.changeset/polite-clocks-report.md b/.changeset/polite-clocks-report.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix: use the correct icon for Text Input error status
diff --git a/packages/components/src/components/Checkbox/Checkbox.stories.tsx b/packages/components/src/components/Checkbox/Checkbox.stories.tsx
@@ -32,7 +32,7 @@ const meta: Meta<typeof CheckboxComponent> = {
         };
 
         return (
-            <div className="tw-flex tw-gap-2 tw-items-center">
+            <div className="tw-flex tw-gap-1.5 tw-items-center">
                 <Checkbox {...args} id="checkbox" value={value} onChange={handleToggle} />
                 <Label htmlFor="checkbox">Checkbox</Label>
             </div>

diff --git a/packages/components/src/components/Label/Label.stories.tsx b/packages/components/src/components/Label/Label.stories.tsx
@@ -6,6 +6,7 @@ import { type ComponentProps } from 'react';
 
 import { Checkbox } from '../Checkbox/Checkbox';
 import { TextInput } from '../TextInput/TextInput';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 import { Label, LabelComponent } from './Label';
 
@@ -89,7 +90,7 @@ export const WithCheckbox: Story = {
         STextInput.displayName = 'TextInput';
 
         return (
-            <div className="tw-flex tw-gap-2">
+            <div className="tw-flex tw-gap-1.5">
                 <Checkbox id="input" />
                 <Label {...args} htmlFor="input" />
             </div>
@@ -107,10 +108,15 @@ export const WithTooltip: Story = {
         STextInput.displayName = 'TextInput';
 
         return (
-            <div className="tw-flex tw-flex-col tw-gap-2">
+            <div className="tw-flex tw-flex-col tw-gap-1.5">
                 <Label {...args} htmlFor="input">
                     Hello World
-                    <IconIcon size={16} /> {/* TODO: Update with Tooltip when refactored */}
+                    <Tooltip.Root>
+                        <Tooltip.Trigger>
+                            <IconIcon size={16} />
+                        </Tooltip.Trigger>
+                        <Tooltip.Content>Tooltip</Tooltip.Content>
+                    </Tooltip.Root>
                 </Label>
                 <STextInput id="input" placeholder="Enter your name" />
             </div>

diff --git a/packages/components/src/components/Label/Label.tsx b/packages/components/src/components/Label/Label.tsx
@@ -22,11 +22,11 @@ export const LabelComponent = (
             ref={ref}
             data-required={props.required}
             className={cn(
-                'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-medium tw-text-body-medium tw-text-text-weak group-hover:tw-text-text-weak-hover',
+                'tw-group tw-flex tw-gap-1.5 tw-font-sans tw-font-medium tw-text-body-medium tw-text-text-weak group-hover:tw-text-text-weak-hover',
                 // Disabled state if siblings has disabled state
                 'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',
                 // Required asterisk
-                'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-0.5 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
+                'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
                 className,
             )}
             data-test-id={dataTestId}

diff --git a/packages/components/src/components/SegmentedControl/styles/segmentedControlStyles.ts b/packages/components/src/components/SegmentedControl/styles/segmentedControlStyles.ts
@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 export const segmentedControlRootStyles =
-    'tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-box-neutral aria-disabled:tw-bg-box-disabled ' +
+    'tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt ' +
     'tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate';
 
 export const segmentedControlItemStyles =

diff --git a/packages/components/src/components/TextInput/TextInput.tsx b/packages/components/src/components/TextInput/TextInput.tsx
@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconCheckMark, IconCross } from '@frontify/fondue-icons';
+import { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';
 import { forwardRef, type ChangeEvent, type ForwardedRef, type KeyboardEvent, type ReactNode } from 'react';
 
 import { cn } from '#/utilities/styleUtilities';
@@ -69,7 +69,7 @@ export const TextFieldRoot = (
             ) : null}
 
             {status === 'error' ? (
-                <IconCross
+                <IconExclamationMarkTriangle
                     size={16}
                     className="tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3"
                     data-test-id={`${dataTestId}-error-icon`}