Base level components fixes after code review

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

@@ -1,6 +1,10 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from 'react';
 import classNames from 'classnames';
 import { Icon, IconName } from '../icon';
+import {
+  paddingLeftProvided,
+  paddingRightProvided,
+} from '../../utils/class-names';
 
 interface CommonProps {
   children?: React.ReactNode;
@@ -21,12 +25,6 @@ const getClassName = (
   className: CommonProps['className'],
   variant: CommonProps['variant']
 ) => {
-  const noPaddingLeftProvided = !(
-    className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline'
-  );
-  const noPaddingRightProvided = !(
-    className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
-  );
   return classNames(
     [
       'inline-flex',
@@ -42,8 +40,8 @@ const getClassName = (
       'transition-all',
     ],
     {
-      'pl-28': noPaddingLeftProvided,
+      'pl-28': !paddingLeftProvided(className) || variant === 'inline',
-      'pr-28': noPaddingRightProvided,
+      'pr-28': !paddingRightProvided(className) || variant === 'inline',
 
       'hover:border-black dark:hover:border-white': variant !== 'inline',
       'active:border-black dark:active:border-white': true,

libs/ui-toolkit/src/components/icon/icon.stories.tsx

@@ -3,20 +3,10 @@ import { Icon } from './icon';
 
 export default {
   component: Icon,
-  title: 'Input',
+  title: 'Icon',
 } as Meta;
 
 const Template: Story = (args) => <Icon {...args} name="warning-sign" />;
 
 export const Default = Template.bind({});
 Default.args = {};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  hasError: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};

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

@@ -4,8 +4,6 @@ import classNames from 'classnames';
 export type { IconName } from '@blueprintjs/icons';
 
 interface IconProps {
-  hasError?: boolean;
-  disabled?: boolean;
   name: IconName;
   className?: string;
   size?: 16 | 20 | 24 | 32 | 48 | 64;

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

@@ -1,6 +1,10 @@
 import { InputHTMLAttributes, forwardRef } from 'react';
 import classNames from 'classnames';
 import { Icon, IconName } from '../icon';
+import {
+  paddingLeftProvided,
+  paddingRightProvided,
+} from '../../utils/class-names';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   hasError?: boolean;
@@ -16,8 +20,6 @@ export const inputClassNames = ({
   hasError?: boolean;
   className?: string;
 }) => {
-  const noPaddingLeftProvided = !className?.match(/(^| )p(l|x)-\d+( |$)/);
-  const noPaddingRightProvided = !className?.match(/(^| )p(r|x)-\d+( |$)/);
   return classNames(
     [
       'inline-flex',
@@ -34,8 +36,8 @@ export const inputClassNames = ({
       'disabled:bg-black-10 disabled:dark:bg-white-10',
     ],
     {
-      'pl-8': noPaddingLeftProvided,
+      'pl-8': !paddingLeftProvided(className),
-      'pr-8': noPaddingRightProvided,
+      'pr-8': !paddingRightProvided(className),
       'border-vega-pink dark:border-vega-pink': hasError,
     },
     className

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

@@ -3,7 +3,7 @@ import { inputClassNames } from '../input/input';
 
 export interface TextAreaProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  hassError?: boolean;
+  hasError?: boolean;
   className?: string;
 }
 

libs/ui-toolkit/src/utils/class-names.spec.ts

@@ -0,0 +1,39 @@
+import { paddingLeftProvided, paddingRightProvided } from './class-names';
+
+test('paddingLeftProvided detects class name which affects left padding', () => {
+  expect(paddingLeftProvided()).toEqual(false);
+  expect(paddingLeftProvided('')).toEqual(false);
+  expect(paddingLeftProvided('pl-8')).toEqual(true);
+  expect(paddingLeftProvided('pl-16')).toEqual(true);
+  expect(paddingLeftProvided(' pl-16')).toEqual(true);
+  expect(paddingLeftProvided('prepend pl-8')).toEqual(true);
+  expect(paddingLeftProvided('pl-16 ')).toEqual(true);
+  expect(paddingLeftProvided('pl-16 append')).toEqual(true);
+  expect(paddingLeftProvided('px-8')).toEqual(true);
+  expect(paddingLeftProvided('px-16')).toEqual(true);
+  expect(paddingLeftProvided(' px-16')).toEqual(true);
+  expect(paddingLeftProvided('prepend px-8')).toEqual(true);
+  expect(paddingLeftProvided('px-16 ')).toEqual(true);
+  expect(paddingLeftProvided('px-16 append')).toEqual(true);
+  expect(paddingLeftProvided('px-16a')).toEqual(false);
+  expect(paddingLeftProvided('apx-16')).toEqual(false);
+});
+
+test('paddingRightProvided detects class name which affects right padding', () => {
+  expect(paddingRightProvided()).toEqual(false);
+  expect(paddingRightProvided('')).toEqual(false);
+  expect(paddingRightProvided('pr-8')).toEqual(true);
+  expect(paddingRightProvided('pr-16')).toEqual(true);
+  expect(paddingRightProvided(' pr-16')).toEqual(true);
+  expect(paddingRightProvided('prepend pr-8')).toEqual(true);
+  expect(paddingRightProvided('pr-16 ')).toEqual(true);
+  expect(paddingRightProvided('pr-16 append')).toEqual(true);
+  expect(paddingRightProvided('px-8')).toEqual(true);
+  expect(paddingRightProvided('px-16')).toEqual(true);
+  expect(paddingRightProvided(' px-16')).toEqual(true);
+  expect(paddingRightProvided('prepend px-8')).toEqual(true);
+  expect(paddingRightProvided('px-16 ')).toEqual(true);
+  expect(paddingRightProvided('px-16 append')).toEqual(true);
+  expect(paddingRightProvided('px-16a')).toEqual(false);
+  expect(paddingRightProvided('apx-16')).toEqual(false);
+});

libs/ui-toolkit/src/utils/class-names.ts

@@ -0,0 +1,4 @@
+export const paddingLeftProvided = (className?: string) =>
+  !!className?.match(/(^| )p(l|x)-\d+( |$)/);
+export const paddingRightProvided = (className?: string) =>
+  !!className?.match(/(^| )p(r|x)-\d+( |$)/);