refactor: [M3-9656] - [Akamai Design System] Label Component

packages/manager/src/features/Linodes/LinodeCreate/FirewallAuthorization.tsx

@@ -29,16 +29,16 @@ export const FirewallAuthorization = () => {
     <AkamaiBanner
       action={
         <FormControlLabel
-          label={
-            flags.secureVmCopy?.firewallAuthorizationLabel ??
-            'I am authorized to create a Linode without a firewall'
-          }
           checked={field.value ?? false}
           className="error-for-scroll"
           control={<Checkbox />}
           disableTypography
+          label={
+            flags.secureVmCopy?.firewallAuthorizationLabel ??
+            'I am authorized to create a Linode without a firewall'
+          }
           onChange={field.onChange}
-          sx={{ fontSize: 14 }}
+          sx={(theme) => ({ fontSize: theme.tokens.font.FontSize.Xs })}
         />
       }
       text={

packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx

@@ -1,11 +1,11 @@
+import { useRegionsQuery } from '@linode/queries';
 import { Accordion, Notice, TextField, Typography } from '@linode/ui';
 import React, { useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 import { Link } from 'src/components/Link';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useImageQuery } from 'src/queries/images';
-import { useRegionsQuery } from '@linode/queries';
 
 import { UserDataHeading } from './UserDataHeading';
 
@@ -39,10 +39,10 @@ export const UserData = () => {
     );
   };
 
-  const region = useMemo(() => regions?.find((r) => r.id === regionId), [
-    regions,
-    regionId,
-  ]);
+  const region = useMemo(
+    () => regions?.find((r) => r.id === regionId),
+    [regions, regionId]
+  );
 
   const isLinodeCreateRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_linodes',
@@ -75,8 +75,20 @@ export const UserData = () => {
         </Notice>
       )}
       <Controller
+        control={control}
+        name="metadata.user_data"
         render={({ field, fieldState }) => (
           <TextField
+            disabled={isLinodeCreateRestricted}
+            errorText={fieldState.error?.message}
+            expand
+            label="User Data"
+            labelTooltipIconPosition="right"
+            labelTooltipIconSize="small"
+            // labelTooltipIconPosition="left"
+            // labelTooltipIconSize="large"
+            labelTooltipText="Compatible formats include cloud-config data and executable scripts."
+            multiline
             onBlur={(e) => {
               field.onBlur();
               checkFormat({
@@ -91,18 +103,10 @@ export const UserData = () => {
                 userData: e.target.value,
               });
             }}
-            disabled={isLinodeCreateRestricted}
-            errorText={fieldState.error?.message}
-            expand
-            label="User Data"
-            labelTooltipText="Compatible formats include cloud-config data and executable scripts."
-            multiline
             rows={1}
             value={field.value ?? ''}
           />
         )}
-        control={control}
-        name="metadata.user_data"
       />
     </Accordion>
   );

packages/manager/src/features/Linodes/LinodeCreate/index.tsx

@@ -12,6 +12,7 @@ import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import React, { useEffect, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import type { SubmitHandler } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -70,7 +71,6 @@ import type {
   LinodeCreateFormContext,
   LinodeCreateFormValues,
 } from './utilities';
-import type { SubmitHandler } from 'react-hook-form';
 
 export const LinodeCreate = () => {
   const { params, setParams } = useLinodeCreateQueryParams();
@@ -97,9 +97,8 @@ export const LinodeCreate = () => {
   const { mutateAsync: cloneLinode } = useCloneLinodeMutation();
   const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements();
 
-  const {
-    handleLinodeCreateAnalyticsFormError,
-  } = useHandleLinodeCreateAnalyticsFormError(params.type ?? 'OS');
+  const { handleLinodeCreateAnalyticsFormError } =
+    useHandleLinodeCreateAnalyticsFormError(params.type ?? 'OS');
 
   const currentTabIndex = getTabIndex(params.type);
 
@@ -193,15 +192,15 @@ export const LinodeCreate = () => {
     <FormProvider {...form}>
       <DocumentTitleSegment segment="Create a Linode" />
       <LandingHeader
+        docsLabel="Getting Started"
+        docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started"
         onDocsClick={() =>
           sendLinodeCreateFormInputEvent({
             createType: params.type ?? 'OS',
             interaction: 'click',
             label: 'Getting Started',
           })
         }
-        docsLabel="Getting Started"
-        docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started"
         title="Create"
       />
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -218,13 +217,13 @@ export const LinodeCreate = () => {
             </TabList>
             {isLinodeCreateRestricted && (
               <Notice
+                important
+                sx={{ marginBottom: 2 }}
                 text={getRestrictedResourceText({
                   action: 'create',
                   isSingular: false,
                   resourceType: 'Linodes',
                 })}
-                important
-                sx={{ marginBottom: 2 }}
                 variant="error"
               />
             )}

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

@@ -103,6 +103,8 @@
 type Value = null | number | string | undefined;
 
 interface LabelToolTipProps {
+  labelTooltipIconPosition?: 'left' | 'right';
+  labelTooltipIconSize?: 'large' | 'small';
   labelTooltipText?: JSX.Element | string;
 }
 
@@ -146,6 +148,8 @@
     inputId,
     inputProps,
     label,
+    labelTooltipIconPosition,
+    labelTooltipIconSize,
     labelTooltipText,
     loading,
     max,
@@ -170,12 +174,8 @@
   const [_value, setValue] = React.useState<Value>(value ?? '');
   const theme = useTheme();
 
-  const {
-    errorScrollClassName,
-    errorTextId,
-    helperTextId,
-    validInputId,
-  } = useFieldIds({ errorGroup, hasError: Boolean(errorText), inputId, label });
+  const { errorScrollClassName, errorTextId, helperTextId, validInputId } =
+    useFieldIds({ errorGroup, hasError: Boolean(errorText), inputId, label });
 
   const isControlled = value !== undefined;
 
@@ -186,7 +186,7 @@
   }, [value, isControlled]);
 
   const handleBlur = (
-    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     if (trimmed) {
       const trimmedValue = e.target.value.trim();
@@ -246,21 +246,19 @@
         }
       }
     },
-    [min, max, type, onChange]
+    [min, max, type, onChange],
   );
 
   const labelSuffixText = required
     ? '(required)'
     : optional
-    ? '(optional)'
-    : null;
+      ? '(optional)'
+      : null;
 
   return (
     <Box
       {...containerProps}
-      className={`${errorText ? errorScrollClassName : ''} ${
-        containerProps?.className || ''
-      }`}
+      className={`${errorText ? errorScrollClassName : ''} ${containerProps?.className || ''}`}
       sx={{
         ...(Boolean(tooltipText) && {
           alignItems: 'flex-end',
@@ -271,22 +269,38 @@
       }}
     >
       <Box
-        sx={{
-          marginBottom: theme.spacing(1),
-          ...(!noMarginTop && { marginTop: theme.spacing(2) }),
-        }}
         alignItems={'center'}
         className={hideLabel ? 'visually-hidden' : ''}
         data-testid="inputLabelWrapper"
         display="flex"
+        sx={{
+          marginBottom: theme.spacingFunction(8),
+          ...(!noMarginTop && { marginTop: theme.spacingFunction(16) }),
+        }}
       >
+        {labelTooltipText && labelTooltipIconPosition === 'left' && (
+          <TooltipIcon
+            labelTooltipIconSize={labelTooltipIconSize}
+            status="help"
+            sxTooltipIcon={{
+              marginRight: `${theme.spacingFunction(4)}`,
+              padding: `${theme.spacingFunction(4)} ${theme.spacingFunction(4)} ${theme.spacingFunction(4)} ${theme.spacingFunction(2)}`,
+            }}
+            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,
           }}
-          data-qa-textfield-label={label}
-          htmlFor={validInputId}
           {...InputLabelProps} // We should change this name so that it's not conflicting with the deprecated prop
         >
           {label}
@@ -297,26 +311,26 @@
             </Box>
           )}
         </InputLabel>
-        {labelTooltipText && (
+        {labelTooltipText && labelTooltipIconPosition === 'right' && (
           <TooltipIcon
+            labelTooltipIconSize={labelTooltipIconSize}
+            status="help"
             sxTooltipIcon={{
-              marginLeft: `${theme.spacing(0.5)}`,
-              padding: `${theme.spacing(0.5)}`,
+              marginLeft: `${theme.spacingFunction(4)}`,
+              padding: `${theme.spacingFunction(4)}`,
             }}
-            status="help"
             text={labelTooltipText}
             width={tooltipWidth}
           />
         )}
       </Box>
-
       {helperText && helperTextPosition === 'top' && (
         <FormHelperText
+          data-qa-textfield-helper-text
+          id={helperTextId}
           sx={{
             marginTop: 0,
           }}
-          data-qa-textfield-helper-text
-          id={helperTextId}
         >
           {helperText}
         </FormHelperText>
@@ -332,6 +346,17 @@
         <_TextField
           {...textFieldProps}
           {...dataAttrs}
+          className={className}
+          error={!!error || !!errorText}
+          fullWidth
+          helperText={''}
+          /**
+           * Set _helperText_ and _label_ to no value because we want to
+           * have the ability to put the helper text under the label at the top.
+           */
+          label={''}
+          onBlur={handleBlur}
+          onChange={handleChange}
           slotProps={{
             htmlInput: {
               'aria-describedby': helperText ? helperTextId : undefined,
@@ -379,17 +404,6 @@
             }),
             ...props.sx,
           }}
-          className={className}
-          error={!!error || !!errorText}
-          fullWidth
-          helperText={''}
-          /**
-           * Set _helperText_ and _label_ to no value because we want to
-           * have the ability to put the helper text under the label at the top.
-           */
-          label={''}
-          onBlur={handleBlur}
-          onChange={handleChange}
           type={type}
           /*
            * Let us explicitly pass an empty string to the input
@@ -402,15 +416,15 @@
         </_TextField>
         {tooltipText && (
           <TooltipIcon
+            classes={{ popper: tooltipClasses }}
+            onMouseEnter={tooltipOnMouseEnter}
+            status="help"
             sxTooltipIcon={{
               height: '34px',
               margin: '0px 0px 0px 4px',
               padding: '17px',
               width: '34px',
             }}
-            classes={{ popper: tooltipClasses }}
-            onMouseEnter={tooltipOnMouseEnter}
-            status="help"
             text={tooltipText}
             tooltipPosition={tooltipPosition}
             width={tooltipWidth}
@@ -419,6 +433,8 @@
       </Box>
       {errorText && (
         <FormHelperText
+          data-qa-textfield-error-text={label}
+          role="alert"
           sx={{
             ...((editable || hasAbsoluteError) && {
               position: 'absolute',
@@ -434,8 +450,6 @@
             top: 42,
             width: '100%',
           }}
-          data-qa-textfield-error-text={label}
-          role="alert"
         >
           {errorText}
         </FormHelperText>