refactor(console): implement <NumericInput />

packages/console/src/ds-components/TextInput/NumericInput.module.scss

@@ -0,0 +1,39 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  position: absolute;
+  // The design is 2px off from the edge of the input, while the input has 1px border.
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+
+  .button {
+    width: 32px;
+    height: 16px;
+    margin: 0;
+    padding-inline: 0;
+    padding-block: 0;
+    padding: 0 _.unit(2);
+
+    &.disabled > svg {
+      color: var(--color-disabled);
+    }
+
+    &:not(.disabled):hover {
+      cursor: pointer;
+      background: var(--color-hover);
+    }
+
+    &:not(.disabled):active {
+      background: var(--color-pressed);
+    }
+
+    &.up {
+      border-radius: 6px 6px 2px 2px;
+    }
+
+    &.down {
+      border-radius: 2px 2px 6px 6px;
+    }
+  }
+}

packages/console/src/ds-components/TextInput/NumericInput.tsx

@@ -0,0 +1,89 @@
+import classNames from 'classnames';
+import { type ComponentProps } from 'react';
+
+import CaretDown from '@/assets/icons/caret-down.svg';
+import CaretUp from '@/assets/icons/caret-up.svg';
+import { onKeyDownHandler } from '@/utils/a11y';
+
+import * as styles from './NumericInput.module.scss';
+import TextInput from './index';
+
+type ButtonProps = {
+  className?: string;
+  onTrigger?: (
+    event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+  ) => void;
+  children: React.ReactNode;
+  isDisabled?: boolean;
+};
+
+function Button({ className, onTrigger, children, isDisabled }: ButtonProps) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={classNames(styles.button, isDisabled && styles.disabled, className)}
+      aria-disabled={isDisabled}
+      onKeyDown={onKeyDownHandler(onTrigger)}
+      onClick={(event) => {
+        event.preventDefault();
+        if (isDisabled) {
+          return;
+        }
+        onTrigger?.(event);
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+type Props = Omit<ComponentProps<typeof TextInput>, 'type' | 'suffix'> & {
+  /** The event handler for when the value is incremented by the up button. */
+  onValueUp: ButtonProps['onTrigger'];
+  /** The event handler for when the value is decremented by the down button. */
+  onValueDown: ButtonProps['onTrigger'];
+};
+
+/** A numeric text input with up and down buttons for incrementing and decrementing the value. */
+function NumericInput({ onValueUp, onValueDown, ...props }: Props) {
+  const isDisabled = Boolean(props.disabled) || Boolean(props.readOnly);
+
+  return (
+    <TextInput
+      {...props}
+      alwaysShowSuffix
+      type="number"
+      suffix={
+        <div className={styles.container}>
+          <Button
+            className={styles.up}
+            isDisabled={
+              isDisabled ||
+              (props.value !== undefined &&
+                props.max !== undefined &&
+                Number(props.value) >= Number(props.max))
+            }
+            onTrigger={onValueUp}
+          >
+            <CaretUp />
+          </Button>
+          <Button
+            className={styles.down}
+            isDisabled={
+              isDisabled ||
+              (props.value !== undefined &&
+                props.min !== undefined &&
+                Number(props.value) <= Number(props.min))
+            }
+            onTrigger={onValueDown}
+          >
+            <CaretDown />
+          </Button>
+        </div>
+      }
+    />
+  );
+}
+
+export default NumericInput;

packages/console/src/ds-components/TextInput/index.module.scss

@@ -4,6 +4,10 @@
   width: _.unit(8);
   height: _.unit(8);
   display: none;
+
+  &.visible {
+    display: block;
+  }
 }
 
 .hideTextContainerContent {
@@ -13,6 +17,7 @@
 }
 
 .container {
+  position: relative;
   display: flex;
   align-items: center;
   border-radius: 6px;

packages/console/src/ds-components/TextInput/index.tsx

@@ -21,7 +21,14 @@ import * as styles from './index.module.scss';
 type Props = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
   error?: string | boolean;
   icon?: ReactElement;
-  suffix?: ReactElement;
+  /**
+   * An element to be rendered on the right side of the input.
+   * By default, the suffix is only visible when the input is focused.
+   */
+  suffix?: ReactElement<Record<string, unknown>>;
+  /** Whether to always show the suffix. */
+  // eslint-disable-next-line react/boolean-prop-naming
+  alwaysShowSuffix?: boolean;
   isConfidential?: boolean;
 };
 
@@ -30,6 +37,7 @@ function TextInput(
     error,
     icon,
     suffix,
+    alwaysShowSuffix = false,
     disabled,
     className,
     readOnly,
@@ -95,7 +103,13 @@ function TextInput(
         <input type={type} {...rest} ref={innerRef} disabled={disabled} readOnly={readOnly} />
         {suffixIcon &&
           cloneElement(suffixIcon, {
-            className: classNames([suffixIcon.props.className, styles.suffix]),
+            className: classNames(
+              // Handle by classNames
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+              suffixIcon.props.className,
+              styles.suffix,
+              alwaysShowSuffix && styles.visible
+            ),
           })}
       </div>
       {Boolean(error) && typeof error === 'string' && (

packages/console/src/pages/SignInExperience/index.tsx

@@ -214,7 +214,10 @@ function SignInExperience() {
         <PageTab href="../content" errorCount={getContentErrorCount(errors)}>
           {t('sign_in_exp.tabs.content')}
         </PageTab>
-        <PageTab href="../password-policy">{t('sign_in_exp.tabs.password_policy')}</PageTab>
+        {/* Uncomment until all the changes are merged */}
+        {isCloud && (
+          <PageTab href="../password-policy">{t('sign_in_exp.tabs.password_policy')}</PageTab>
+        )}
       </TabNav>
       {data && defaultFormData && (
         <div className={styles.content}>

packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.module.scss

@@ -1,5 +1,10 @@
 @use '@/scss/underscore' as _;
 
+.minLength > div[class*='container'] {
+  // From Figma design
+  max-width: 156px;
+}
+
 .characterTypes {
   display: flex;
   gap: _.unit(6);

packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.tsx

@@ -10,7 +10,7 @@ import Checkbox from '@/ds-components/Checkbox/Checkbox';
 import FormField from '@/ds-components/FormField';
 import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import TabWrapper from '@/ds-components/TabWrapper';
-import TextInput from '@/ds-components/TextInput';
+import NumericInput from '@/ds-components/TextInput/NumericInput';
 import Textarea from '@/ds-components/Textarea';
 
 import { type SignInExperienceForm } from '../../types';
@@ -62,7 +62,7 @@ function PasswordPolicy({ isActive }: Props) {
     getValues,
     formState: { errors },
   } = useFormContext<SignInExperienceForm>();
-  const maxPasswordLength = getValues('passwordPolicy.length.max');
+  const { max } = getValues('passwordPolicy.length');
   const { t } = useTranslation(undefined, {
     keyPrefix: 'admin_console.sign_in_exp.password_policy',
   });
@@ -76,27 +76,41 @@ function PasswordPolicy({ isActive }: Props) {
         <div className={commonStyles.title}>{t('password_requirements')}</div>
         <FormField title="sign_in_exp.password_policy.minimum_length">
           <div className={commonStyles.formFieldDescription}>
-            {t('minimum_length_description', { max: maxPasswordLength })}
+            {t('minimum_length_description', { max })}
           </div>
           <Controller
             name="passwordPolicy.length.min"
             control={control}
             rules={{
               min: 1,
-              max: maxPasswordLength,
+              max,
             }}
             render={({ field: { onChange, value, name } }) => (
-              <TextInput
+              <NumericInput
+                className={styles.minLength}
                 name={name}
-                type="number"
                 value={String(value)}
+                min={1}
+                max={max}
                 error={
-                  errors.passwordPolicy?.length?.min &&
-                  t('minimum_length_error', { min: 1, max: maxPasswordLength })
+                  errors.passwordPolicy?.length?.min && t('minimum_length_error', { min: 1, max })
                 }
                 onChange={(event: ChangeEvent<HTMLInputElement>) => {
                   onChange(Number(event.target.value));
                 }}
+                onValueUp={() => {
+                  onChange(value + 1);
+                }}
+                onValueDown={() => {
+                  onChange(value - 1);
+                }}
+                onBlur={() => {
+                  if (value < 1) {
+                    onChange(1);
+                  } else if (value > max) {
+                    onChange(max);
+                  }
+                }}
               />
             )}
           />

packages/console/src/utils/a11y.ts

@@ -1,11 +1,11 @@
 import type { KeyboardEventHandler, KeyboardEvent } from 'react';
 
-type callbackHandler<T> = ((event: KeyboardEvent<T>) => void) | undefined;
+type CallbackHandler<T> = ((event: KeyboardEvent<T>) => void) | undefined;
 
-type callbackHandlerMap<T> = Record<string, callbackHandler<T>>;
+type CallbackHandlerMap<T> = Record<string, CallbackHandler<T>>;
 
 export const onKeyDownHandler =
-  <T = Element>(callback?: callbackHandler<T> | callbackHandlerMap<T>): KeyboardEventHandler<T> =>
+  <T = Element>(callback?: CallbackHandler<T> | CallbackHandlerMap<T>): KeyboardEventHandler<T> =>
   (event) => {
     const { key } = event;