refactor: [M3-9656] - [Akamai Design System] Label Component (#12224)

* refactor: [M3-9652] - [Akamai Design System] Label Component

* Add changeset

* PR feedback to use icon tokens for various states

Author: carrillo-erik

packages/ui/.changeset/pr-12224-changed-1747294477261.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Changed
+---
+
+Akamai Design System - Label component ([#12224](https://github.com/linode/manager/pull/12224))

packages/ui/src/components/TextField/TextField.stories.tsx

@@ -98,6 +98,36 @@ export const WithTooltip: Story = {
   },
 };
 
+export const WithTooltipIconLeft: Story = {
+  args: {
+    label: 'Label',
+    labelTooltipText: 'Tooltip Text',
+    noMarginTop: true,
+    placeholder: 'Placeholder',
+    labelTooltipIconPosition: 'left',
+  },
+};
+
+export const WithTooltipSmall: Story = {
+  args: {
+    label: 'Label',
+    labelTooltipText: 'Tooltip Text',
+    noMarginTop: true,
+    placeholder: 'Placeholder',
+    labelTooltipIconSize: 'small',
+  },
+};
+
+export const WithTooltipLarge: Story = {
+  args: {
+    label: 'Label',
+    labelTooltipText: 'Tooltip Text',
+    noMarginTop: true,
+    placeholder: 'Placeholder',
+    labelTooltipIconSize: 'large',
+  },
+};
+
 export const WithAdornment: Story = {
   args: {
     InputProps: {

packages/ui/src/components/TextField/TextField.tsx

@@ -103,6 +103,16 @@ interface BaseProps {
 type Value = null | number | string | undefined;
 
 interface LabelToolTipProps {
+  /**
+   * Position of the tooltip icon
+   * @default right
+   */
+  labelTooltipIconPosition?: 'left' | 'right';
+  /**
+   * Size of the tooltip icon
+   * @default small
+   */
+  labelTooltipIconSize?: 'large' | 'small';
   labelTooltipText?: JSX.Element | string;
 }
 
@@ -147,6 +157,8 @@ export const TextField = (props: TextFieldProps) => {
     inputProps,
     label,
     labelTooltipText,
+    labelTooltipIconPosition = 'right',
+    labelTooltipIconSize = 'small',
     loading,
     max,
     min,
@@ -170,6 +182,26 @@ export const TextField = (props: TextFieldProps) => {
   const [_value, setValue] = React.useState<Value>(value ?? '');
   const theme = useTheme();
 
+  const sxTooltipIconLeft = {
+    marginRight: `${theme.spacingFunction(4)}`,
+    padding: `${theme.spacingFunction(4)} ${theme.spacingFunction(4)} ${theme.spacingFunction(4)} ${theme.spacingFunction(2)}`,
+    '&& svg': {
+      fill: theme.tokens.component.Label.Icon,
+      stroke: theme.tokens.component.Label.Icon,
+      strokeWidth: 0,
+      ':hover': {
+        color: theme.tokens.alias.Content.Icon.Primary.Hover,
+        fill: theme.tokens.alias.Content.Icon.Primary.Hover,
+        stroke: theme.tokens.alias.Content.Icon.Primary.Hover,
+      },
+    },
+  };
+
+  const sxTooltipIconRight = {
+    marginLeft: `${theme.spacingFunction(4)}`,
+    padding: `${theme.spacingFunction(4)}`,
+  };
+
   const { errorScrollClassName, errorTextId, helperTextId, validInputId } =
     useFieldIds({ errorGroup, hasError: Boolean(errorText), inputId, label });
 
@@ -254,9 +286,7 @@ export const TextField = (props: TextFieldProps) => {
   return (
     <Box
       {...containerProps}
-      className={`${errorText ? errorScrollClassName : ''} ${
-        containerProps?.className || ''
-      }`}
+      className={`${errorText ? errorScrollClassName : ''} ${containerProps?.className || ''}`}
       sx={{
         ...(Boolean(tooltipText) && {
           alignItems: 'flex-end',
@@ -276,12 +306,25 @@ export const TextField = (props: TextFieldProps) => {
           ...(!noMarginTop && { marginTop: theme.spacing(2) }),
         }}
       >
+        {labelTooltipText && labelTooltipIconPosition === 'left' && (
+          <TooltipIcon
+            labelTooltipIconSize={labelTooltipIconSize}
+            status="help"
+            sxTooltipIcon={sxTooltipIconLeft}
+            text={labelTooltipText}
+            width={tooltipWidth}
+          />
+        )}
         <InputLabel
           data-qa-textfield-label={label}
           htmlFor={validInputId}
           sx={{
             marginBottom: 0,
             transform: 'none',
+            fontSize:
+              labelTooltipIconSize === 'large'
+                ? theme.tokens.font.FontSize.S
+                : theme.tokens.font.FontSize.Xs,
           }}
           {...InputLabelProps} // We should change this name so that it's not conflicting with the deprecated prop
         >
@@ -293,13 +336,11 @@ export const TextField = (props: TextFieldProps) => {
             </Box>
           )}
         </InputLabel>
-        {labelTooltipText && (
+        {labelTooltipText && labelTooltipIconPosition === 'right' && (
           <TooltipIcon
+            labelTooltipIconSize={labelTooltipIconSize}
             status="help"
-            sxTooltipIcon={{
-              marginLeft: `${theme.spacing(0.5)}`,
-              padding: `${theme.spacing(0.5)}`,
-            }}
+            sxTooltipIcon={sxTooltipIconRight}
             text={labelTooltipText}
             width={tooltipWidth}
           />

packages/ui/src/components/TooltipIcon/TooltipIcon.stories.tsx

@@ -28,4 +28,22 @@ export const VariableWidth: Story = {
   render: (args) => <TooltipIcon {...args} />,
 };
 
+export const SmallTooltipIcon: Story = {
+  args: {
+    status: 'help',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    labelTooltipIconSize: 'small',
+  },
+  render: (args) => <TooltipIcon {...args} />,
+};
+
+export const LargeTooltipIcon: Story = {
+  args: {
+    status: 'help',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    labelTooltipIconSize: 'large',
+  },
+  render: (args) => <TooltipIcon {...args} />,
+};
+
 export default meta;

packages/ui/src/components/TooltipIcon/TooltipIcon.tsx

@@ -40,6 +40,11 @@ export interface TooltipIconProps
    * @todo this seems like a flaw... passing an icon should not require `status` to be `other`
    */
   icon?: JSX.Element;
+  /**
+   * Size of the tooltip icon
+   * @default small
+   */
+  labelTooltipIconSize?: 'large' | 'small';
   /**
    * Enables a leaveDelay of 3000ms
    * @default false
@@ -100,6 +105,7 @@ export const TooltipIcon = (props: TooltipIconProps) => {
     tooltipAnalyticsEvent,
     tooltipPosition,
     width,
+    labelTooltipIconSize,
   } = props;
 
   const handleOpenTooltip = () => {
@@ -112,18 +118,17 @@ export const TooltipIcon = (props: TooltipIconProps) => {
 
   const sxRootStyle = {
     '&&': {
-      fill: theme.tokens.color.Neutrals[50],
-      stroke: theme.tokens.color.Neutrals[50],
+      fill: theme.tokens.component.Label.InfoIcon,
+      stroke: theme.tokens.component.Label.InfoIcon,
       strokeWidth: 0,
     },
     '&:hover': {
-      color: theme.palette.primary.main,
-      fill: theme.palette.primary.main,
-      stroke: theme.palette.primary.main,
+      color: theme.tokens.alias.Content.Icon.Primary.Hover,
+      fill: theme.tokens.alias.Content.Icon.Primary.Hover,
+      stroke: theme.tokens.alias.Content.Icon.Primary.Hover,
     },
-    color: theme.tokens.color.Neutrals[50],
-    height: 20,
-    width: 20,
+    height: labelTooltipIconSize === 'small' ? 16 : 20,
+    width: labelTooltipIconSize === 'small' ? 16 : 20,
   };
 
   switch (status) {

packages/ui/src/foundations/themes/dark.ts

@@ -553,15 +553,15 @@ export const darkTheme: ThemeOptions = {
       styleOverrides: {
         root: {
           '&$disabled': {
-            color: Color.Neutrals[40],
+            color: Component.Label.Text,
           },
           '&$error': {
-            color: Color.Neutrals[40],
+            color: Component.Label.Text,
           },
           '&.Mui-focused': {
-            color: Color.Neutrals[40],
+            color: Component.Label.Text,
           },
-          color: Color.Neutrals[40],
+          color: Component.Label.Text,
         },
       },
     },

packages/ui/src/foundations/themes/light.ts

@@ -877,16 +877,16 @@ export const lightTheme: ThemeOptions = {
       styleOverrides: {
         root: {
           '&$disabled': {
-            color: Color.Neutrals[70],
+            color: Component.Label.Text,
             opacity: 0.5,
           },
           '&$error': {
-            color: Color.Neutrals[70],
+            color: Component.Label.Text,
           },
           '&.Mui-focused': {
-            color: Color.Neutrals[70],
+            color: Component.Label.Text,
           },
-          color: Color.Neutrals[70],
+          color: Component.Label.Text,
           font: Typography.Body.Bold,
           marginBottom: 8,
         },