Fix/411 asset dropdown style (#535)

* fix: arrow missing from select box

* fix: select box styles on firefox

apps/explorer/tailwind.config.js

@@ -6,6 +6,7 @@ const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+    'libs/ui-toolkit/src/utils/shared.ts',
     ...createGlobPatternsForDependencies(__dirname),
   ],
   darkMode: 'class',

apps/simple-trading-app/tailwind.config.js

@@ -6,6 +6,7 @@ const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+    'libs/ui-toolkit/src/utils/shared.ts',
     ...createGlobPatternsForDependencies(__dirname),
   ],
   darkMode: 'class',

apps/stats/tailwind.config.js

@@ -6,6 +6,7 @@ const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+    'libs/ui-toolkit/src/utils/shared.ts',
     ...createGlobPatternsForDependencies(__dirname),
   ],
   darkMode: 'class',

apps/token/tailwind.config.js

@@ -6,6 +6,7 @@ const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+    'libs/ui-toolkit/src/utils/shared.ts',
     ...createGlobPatternsForDependencies(__dirname),
   ],
   darkMode: 'class',

apps/trading/tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
   content: [
     join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}'),
     join(__dirname, 'components/**/*.{js,ts,jsx,tsx}'),
+    'libs/ui-toolkit/src/utils/shared.ts',
     ...createGlobPatternsForDependencies(__dirname),
   ],
   darkMode: 'class',

libs/ui-toolkit/src/components/input/input.tsx

@@ -3,10 +3,7 @@ import { forwardRef } from 'react';
 import classNames from 'classnames';
 import type { IconName } from '../icon';
 import { Icon } from '../icon';
-import {
-  includesLeftPadding,
-  includesRightPadding,
-} from '../../utils/class-names';
+import { defaultFormElement } from '../../utils/shared';
 
 type InputRootProps = InputHTMLAttributes<HTMLInputElement> & {
   hasError?: boolean;
@@ -60,37 +57,6 @@ type AffixProps = InputPrepend | InputAppend;
 
 type InputProps = InputRootProps & AffixProps;
 
-export const inputClassNames = ({
-  hasError,
-  className,
-}: {
-  hasError?: boolean;
-  className?: string;
-}) => {
-  return classNames(
-    [
-      'appearance-none',
-      'flex items-center w-full',
-      'box-border',
-      'border rounded-none',
-      'bg-clip-padding',
-      'border-black-60 dark:border-white-60',
-      'bg-black-25 dark:bg-white-25',
-      'text-black placeholder:text-black-60 dark:text-white dark:placeholder:text-white-60',
-      'text-ui',
-      'focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark',
-      'focus-visible:outline-0',
-      'disabled:bg-black-10 disabled:dark:bg-white-10',
-    ],
-    {
-      'pl-8': !includesLeftPadding(className),
-      'pr-8': !includesRightPadding(className),
-      'border-vega-pink dark:border-vega-pink': hasError,
-    },
-    className
-  );
-};
-
 export const inputStyle = ({
   style,
   disabled,
@@ -165,17 +131,17 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const hasPrepended = !!(prependIconName || prependElement);
     const hasAppended = !!(appendIconName || appendElement);
 
-    const inputClassName = classNames('h-28', className, {
-      'pl-28': hasPrepended ?? hasAppended,
+    const inputClassName = classNames('appearance-none', 'h-28', className, {
+      'pl-28': hasPrepended,
+      'pr-28': hasAppended,
+      'border-vega-pink dark:border-vega-pink': hasError,
     });
 
     const input = (
       <input
         {...props}
         ref={ref}
-        className={classNames(
-          inputClassNames({ className: inputClassName, hasError })
-        )}
+        className={classNames(defaultFormElement, inputClassName)}
       />
     );
 

libs/ui-toolkit/src/components/select/select.tsx

@@ -1,7 +1,7 @@
 import type { SelectHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import { inputClassNames } from '../input';
+import { defaultFormElement } from '../../utils/shared';
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   hasError?: boolean;
@@ -11,11 +11,13 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
 }
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (props, ref) => (
+  ({ className, hasError, ...props }, ref) => (
     <select
       ref={ref}
       {...props}
-      className={classNames(inputClassNames(props), 'h-28')}
+      className={classNames(defaultFormElement, className, 'h-28', {
+        'border-vega-pink dark:border-vega-pink': hasError,
+      })}
     />
   )
 );

libs/ui-toolkit/src/components/text-area/text-area.tsx

@@ -1,6 +1,7 @@
+import classNames from 'classnames';
 import type { TextareaHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { inputClassNames } from '../input';
+import { defaultFormElement } from '../../utils/shared';
 
 export interface TextAreaProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -9,7 +10,10 @@ export interface TextAreaProps
 }
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (props, ref) => (
-    <textarea {...props} ref={ref} className={inputClassNames(props)} />
-  )
+  ({ className, hasError, ...props }, ref) => {
+    const classes = classNames(defaultFormElement, className, {
+      'border-vega-pink dark:border-vega-pink': hasError,
+    });
+    return <textarea {...props} ref={ref} className={classes} />;
+  }
 );

libs/ui-toolkit/src/utils/shared.ts

@@ -0,0 +1,14 @@
+export const defaultFormElement = [
+  'flex items-center w-full',
+  'box-border',
+  'border rounded-none',
+  'bg-clip-padding',
+  'border-black-60 dark:border-white-60',
+  'bg-black-25 dark:bg-white-25',
+  'text-black placeholder:text-black-60 dark:text-white dark:placeholder:text-white-60',
+  'text-ui',
+  'px-8',
+  'focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark',
+  'focus-visible:outline-0',
+  'disabled:bg-black-10 disabled:dark:bg-white-10',
+];

libs/ui-toolkit/tailwind.config.js

@@ -6,6 +6,7 @@ const vegaCustomClasses = require('../tailwindcss-config/src/vega-custom-classes
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{ts,tsx,html,mdx}'),
+    join(__dirname, 'src/utils/shared.ts'),
     join(__dirname, '.storybook/preview.js'),
     ...createGlobPatternsForDependencies(__dirname),
   ],