@biom3/react - npm Package Compare versions

Comparing version 0.9.9-beta to 0.9.10-beta

package.json

 {
   "name": "@biom3/react",
-  "version": "0.9.9-beta",
+  "version": "0.9.10-beta",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "types": "./dist/index.d.ts",

src/components/TextArea/styles.ts

@@ -16,2 +16,5 @@ import { BiomeTheme } from '@biom3/design-tokens';
   py: 'base.spacing.x2',
+  transitionProperty: 'box-shadow, background',
+  transitionDuration: 'base.animation.fast.cssDuration',
+  transitionTimingFunction: 'base.animation.fast.cssEase',
 
@@ -21,7 +24,2 @@ '&:not(.disabled):hover': {
   },
-
-  '&:hover .clearValueButton': {
-    opacity: '1',
-    pointerEvents: 'auto',
-  },
 };
@@ -107,3 +105,5 @@
   const paddingRight = `calc(${gutter} * 2 + 16px)`;
-  const baseShadow = theme.base.shadow[200];
+  const hoverShadow = theme.base.shadow[200];
+  const emptyShadow = '0 0 0 rgba(0,0,0,0)';
+
   return {
@@ -116,8 +116,9 @@ paddingLeft,
       : theme.base.color.translucent.emphasis[100],
+
     boxShadow:
       validationStatus === 'error'
-        ? `inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
+        ? `${emptyShadow}, inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
         : hasValue
-        ? `inset 0 0 0 1px ${theme.base.color.translucent.standard[500]}`
-        : `inset 0 0 0 1px ${theme.base.color.translucent.standard[300]}`,
+        ? `${emptyShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[500]}`
+        : `${emptyShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[300]}`,
 
@@ -130,12 +131,13 @@ '&:not(.disabled):hover': {
         validationStatus === 'error'
-          ? `${baseShadow}, inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
-          : `${baseShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[1000]}`,
+          ? `${hoverShadow}, inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
+          : `${hoverShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[600]}`,
     },
 
     '&:not(.disabled).focused': {
+      outline: 'none',
       background: theme.base.color.translucent.emphasis[300],
       boxShadow:
         validationStatus === 'error'
-          ? `${baseShadow}, inset 0 0 0 2px ${theme.base.color.status.fatal.bright}`
-          : `${baseShadow}, inset 0 0 0 2px ${theme.base.color.translucent.standard[1000]}`,
+          ? `${hoverShadow}, inset 0 0 0 2px ${theme.base.color.status.fatal.bright}`
+          : `${hoverShadow}, inset 0 0 0 2px ${theme.base.color.brand[1]}`,
     },
@@ -142,0 +144,0 @@ };

src/components/TextInput/shared.ts

@@ -5,2 +5,2 @@ export const DEFAULT_TEXT_INPUT_SIZE = 'medium';
 export type TextInputSize = typeof textInputSizes[number];
-export const INPUT_MIN_WIDTH = '210px';
+export const INPUT_MIN_WIDTH = '216px';

src/components/TextInput/styles.ts

@@ -18,7 +18,2 @@ import { BiomeTheme } from '@biom3/design-tokens';
   },
-
-  '&:not(.disabled):hover .clearValueButton': {
-    opacity: '1',
-    pointerEvents: 'auto',
-  },
 };
@@ -40,4 +35,13 @@
   justifyContent: 'center',
-  opacity: '0',
-  pointerEvents: 'none',
+
+  '& > svg': {
+    fill: 'base.color.text.secondary',
+    transitionProperty: 'fill',
+    transitionDuration: 'base.animation.fast.cssDuration',
+    transitionTimingFunction: 'base.animation.fast.cssEase',
+  },
+
+  '&:hover > svg': {
+    fill: 'base.color.text.primary',
+  },
 };
@@ -58,2 +62,6 @@
 
+  transitionProperty: 'box-shadow, background',
+  transitionDuration: 'base.animation.fast.cssDuration',
+  transitionTimingFunction: 'base.animation.fast.cssEase',
+
   '&:not(:disabled):hover': {
@@ -118,3 +126,4 @@ background: 'base.color.translucent.emphasis.200',
 
-  const baseShadow = theme.base.shadow[200];
+  const hoverShadow = theme.base.shadow[200];
+  const emptyShadow = '0 0 0 rgba(0,0,0,0)';
 
@@ -131,6 +140,6 @@ return {
       validationStatus === 'error'
-        ? `inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
+        ? `${emptyShadow}, inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
         : hasValue
-        ? `inset 0 0 0 1px ${theme.base.color.translucent.standard[500]}`
-        : `inset 0 0 0 1px ${theme.base.color.translucent.standard[300]}`,
+        ? `${emptyShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[500]}`
+        : `${emptyShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[300]}`,
 
@@ -152,4 +161,4 @@ '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
         validationStatus === 'error'
-          ? `${baseShadow}, inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
-          : `${baseShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[600]}`,
+          ? `${hoverShadow}, inset 0 0 0 1px ${theme.base.color.status.fatal.bright}`
+          : `${hoverShadow}, inset 0 0 0 1px ${theme.base.color.translucent.standard[600]}`,
     },
@@ -162,4 +171,4 @@
         validationStatus === 'error'
-          ? `${baseShadow}, inset 0 0 0 2px ${theme.base.color.status.fatal.bright}`
-          : `${baseShadow}, inset 0 0 0 2px ${theme.base.color.brand[1]}`,
+          ? `${hoverShadow}, inset 0 0 0 2px ${theme.base.color.status.fatal.bright}`
+          : `${hoverShadow}, inset 0 0 0 2px ${theme.base.color.brand[1]}`,
     },
@@ -166,0 +175,0 @@ };

src/types/clickable.ts

@@ -76,4 +76,4 @@ import { BodySize } from '@biom3/design-tokens';
 
-export type ClearValueButtonProps = BaseClickableProps &
-  ComponentPropsWithoutRef<'button'>;
+export type ClearValueButtonProps<RC extends ReactElement | undefined> =
+  BaseClickableWithRCAndDomProps<RC>;
 
@@ -80,0 +80,0 @@ type ComponentWithOnClick<Element extends 'button' | 'div'> = {

No alert changes

Improved metrics

Total package byte prevSize

3272867

increased by0.14%

Lines of code

51670

increased by0.1%

No dependency changes