feat: update quantity selector pci common (#14566)

Co-authored-by: Lionel Bueno <[email protected]>

packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx

@@ -1,25 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_ICON_NAME, OdsInputChangeEvent } from '@ovhcloud/ods-components';
 import {
-  OsdsButton,
-  OsdsFormField,
-  OsdsIcon,
-  OsdsInput,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsQuantity,
-  OsdsText,
+  OdsFormField,
+  OdsIcon,
+  OdsPopover,
+  OdsQuantity,
+  OdsText,
 } from '@ovhcloud/ods-components/react';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import {
-  ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_INPUT_TYPE,
-} from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 
 import '../../translations/quantity-selector';
@@ -48,116 +35,68 @@ export function QuantitySelector({
   contentClassName,
 }: Readonly<QuantitySelectorProps>) {
   const { t } = useTranslation('pci-quantity-selector');
-  const [, setCounter] = useState(0);
   const error = {
     min: min !== undefined && value < min,
     max: max !== undefined && value > max,
     nan: Number.isNaN(value),
   };
-  const isValid = !error.min && !error.max && !error.nan;
-  const forceRedraw = () => setCounter((i) => i + 1);
-
-  // forced redraw to fix ODS quantity not refreshing
-  useEffect(forceRedraw, [min, max]);
 
   return (
-    <OsdsFormField className={className} inline>
+    <OdsFormField className={className}>
       <div className={contentClassName}>
         <div slot="label" className="flex gap-2">
           {label && (
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._200}
-            >
+            <OdsText preset="span" className="text-[14px]">
               {label}
-            </OsdsText>
+            </OdsText>
           )}
           {labelHelpText && (
-            <OsdsPopover className="w-4 h-4">
-              <OsdsIcon
-                slot="popover-trigger"
-                name={ODS_ICON_NAME.HELP}
-                size={ODS_ICON_SIZE.xxs}
-                className="cursor-help"
-                color={ODS_THEME_COLOR_INTENT.text}
-              />
-              <OsdsPopoverContent>{labelHelpText}</OsdsPopoverContent>
-            </OsdsPopover>
+            <>
+              <div id="popover-trigger">
+                <OdsIcon
+                  name={ODS_ICON_NAME.question}
+                  className="cursor-help text-[16px]"
+                  color={ODS_THEME_COLOR_INTENT.text}
+                />
+              </div>
+              <OdsPopover triggerId="popover-trigger" className="w-4 h-4">
+                {labelHelpText}
+              </OdsPopover>
+            </>
           )}
         </div>
 
         {description && (
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-            className="mb-6"
-          >
+          <OdsText preset="span" className="mb-6">
             {description}
-          </OsdsText>
+          </OdsText>
         )}
-        <OsdsQuantity>
-          <OsdsButton
-            slot="minus"
-            variant={ODS_BUTTON_VARIANT.flat}
-            color={ODS_THEME_COLOR_INTENT.primary}
-            size={ODS_BUTTON_SIZE.sm}
-            data-testid="quantity-button-minus"
-            text-align="center"
-            disabled={min !== undefined && value - 1 < min ? true : undefined}
-          >
-            <OsdsIcon
-              name={ODS_ICON_NAME.MINUS}
-              size={ODS_ICON_SIZE.sm}
-              className="bg-white"
-            />
-          </OsdsButton>
-          <OsdsInput
-            type={ODS_INPUT_TYPE.number}
-            value={value}
-            color={
-              isValid
-                ? ODS_THEME_COLOR_INTENT.primary
-                : ODS_THEME_COLOR_INTENT.error
-            }
-            onOdsValueChange={(event) => {
-              forceRedraw();
-              onValueChange(Number(event.detail.value));
-            }}
-            min={min}
-            max={max}
-          />
-          <OsdsButton
-            slot="plus"
-            variant={ODS_BUTTON_VARIANT.flat}
-            color={ODS_THEME_COLOR_INTENT.primary}
-            size={ODS_BUTTON_SIZE.sm}
-            data-testid="quantity-button-plus"
-            text-align="center"
-            disabled={max !== undefined && value + 1 > max ? true : undefined}
-          >
-            <OsdsIcon
-              className="bg-white"
-              name={ODS_ICON_NAME.PLUS}
-              size={ODS_ICON_SIZE.xs}
-            />
-          </OsdsButton>
-        </OsdsQuantity>
+        <OdsQuantity
+          data-testid="quantity-button-minus"
+          onOdsChange={(event: OdsInputChangeEvent) =>
+            onValueChange(Number(event.detail.value))
+          }
+          min={min}
+          max={max}
+          name="quantity"
+          isDisabled={min !== undefined && value - 1 < min ? true : undefined}
+        />
       </div>
       {error.min && (
-        <OsdsText color={ODS_THEME_COLOR_INTENT.error} slot="helper">
+        <OdsText className="text-[--ods-color-critical-500]">
           {t('common_field_error_min', { min })}
-        </OsdsText>
+        </OdsText>
       )}
       {error.max && (
-        <OsdsText color={ODS_THEME_COLOR_INTENT.error} slot="helper">
+        <OdsText className="text-[--ods-color-critical-500]">
           {t('common_field_error_max', { max })}
-        </OsdsText>
+        </OdsText>
       )}
       {error.nan && (
-        <OsdsText color={ODS_THEME_COLOR_INTENT.error} slot="helper">
+        <OdsText className="text-[--ods-color-critical-500]">
           {t('common_field_error_number')}
-        </OsdsText>
+        </OdsText>
       )}
-    </OsdsFormField>
+    </OdsFormField>
   );
 }