fix: styles in Label and NumberInput (#862)

Author: tenphi

.changeset/grumpy-planes-lie.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Change the default Label preset to `t3m`.

.changeset/moody-bears-shake.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix font weight for Item and Item Button.

.changeset/spicy-jeans-promise.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Use right text alignment in NumberInput component.

src/components/actions/ItemButton/ItemButton.tsx

@@ -32,6 +32,7 @@ const StyledItem = tasty(Item, {
   as: 'button',
   type: 'neutral',
   theme: 'default',
+  isButton: true,
   styles: {
     reset: 'button',
     placeContent: 'center stretch',

src/components/content/Item/Item.tsx

@@ -141,6 +141,10 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
    * When true, applies card styling with increased border radius.
    */
   isCard?: boolean;
+  /**
+   * When true, adds button modifier to the component styling.
+   */
+  isButton?: boolean;
   /**
    * @private
    * Default tooltip placement for the item.
@@ -252,9 +256,11 @@ const ItemElement = tasty({
       disabled: '#dark-04',
     },
     preset: {
-      '': 't3m',
+      '': 't3',
+      button: 't3m',
       '[data-size="xsmall"]': 't4',
-      '[data-size="xlarge"]': 't2m',
+      '[data-size="xlarge"]': 't2',
+      '[data-size="xlarge"] & button': 't2m',
       '[data-size="inline"]': 'tag',
     },
     boxSizing: 'border-box',
@@ -685,6 +691,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
     isLoading = false,
     isCard = false,
     actions,
+    isButton = false,
     defaultTooltipPlacement = 'top',
     ...rest
   } = props;
@@ -777,6 +784,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
       selected: isSelected === true,
       loading: isLoading,
       card: isCard === true,
+      button: isButton === true,
       ...mods,
     };
   }, [
@@ -790,6 +798,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
     isSelected,
     isLoading,
     isCard,
+    isButton,
     actions,
     mods,
   ]);

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -723,6 +723,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       <ItemButton
         ref={triggerRef as any}
         data-popover-trigger
+        isButton={false}
         qa={qa || 'FilterPicker'}
         id={id}
         type={type}

src/components/fields/NumberInput/NumberInput.tsx

@@ -21,6 +21,9 @@ export interface CubeNumberInputProps
 }
 
 const StyledTextInputBase = tasty(TextInputBase, {
+  styles: {
+    textAlign: 'right',
+  },
   wrapperStyles: {
     width: 'initial 13x 100%',
   },

src/components/fields/Picker/Picker.tsx

@@ -577,6 +577,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
       <ItemButton
         ref={triggerRef as any}
         data-popover-trigger
+        isButton={false}
         id={id}
         qa={qa || 'PickerTrigger'}
         type={type}

src/components/form/Label.tsx

@@ -59,7 +59,7 @@ export const INLINE_LABEL_STYLES: Styles = {
 
 export const LABEL_STYLES: Styles = {
   display: 'block',
-  preset: 'h6',
+  preset: 't3m',
   color: {
     '': '#dark',
     invalid: '#danger-text',