From 16cef1ec06baffd76b9308e548327ccfc9416bda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Tue, 8 Mar 2022 15:03:50 +0100 Subject: [PATCH] Base level components fixes after code review --- .../src/components/button/button.tsx | 14 +++---- .../src/components/icon/icon.stories.tsx | 12 +----- libs/ui-toolkit/src/components/icon/icon.tsx | 2 - .../ui-toolkit/src/components/input/input.tsx | 10 +++-- .../src/components/text-area/text-area.tsx | 2 +- libs/ui-toolkit/src/utils/class-names.spec.ts | 39 +++++++++++++++++++ libs/ui-toolkit/src/utils/class-names.ts | 4 ++ 7 files changed, 57 insertions(+), 26 deletions(-) create mode 100644 libs/ui-toolkit/src/utils/class-names.spec.ts create mode 100644 libs/ui-toolkit/src/utils/class-names.ts diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx index e937b49ed..a97ec985d 100644 --- a/libs/ui-toolkit/src/components/button/button.tsx +++ b/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, - 'pr-28': noPaddingRightProvided, + 'pl-28': !paddingLeftProvided(className) || variant === 'inline', + 'pr-28': !paddingRightProvided(className) || variant === 'inline', 'hover:border-black dark:hover:border-white': variant !== 'inline', 'active:border-black dark:active:border-white': true, diff --git a/libs/ui-toolkit/src/components/icon/icon.stories.tsx b/libs/ui-toolkit/src/components/icon/icon.stories.tsx index 8f5843757..5fe951f90 100644 --- a/libs/ui-toolkit/src/components/icon/icon.stories.tsx +++ b/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) => ; 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, -}; diff --git a/libs/ui-toolkit/src/components/icon/icon.tsx b/libs/ui-toolkit/src/components/icon/icon.tsx index fc7e469fc..8ea0b4251 100644 --- a/libs/ui-toolkit/src/components/icon/icon.tsx +++ b/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; diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx index bfa70e6b1..e6a4881f0 100644 --- a/libs/ui-toolkit/src/components/input/input.tsx +++ b/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 { 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, - 'pr-8': noPaddingRightProvided, + 'pl-8': !paddingLeftProvided(className), + 'pr-8': !paddingRightProvided(className), 'border-vega-pink dark:border-vega-pink': hasError, }, className diff --git a/libs/ui-toolkit/src/components/text-area/text-area.tsx b/libs/ui-toolkit/src/components/text-area/text-area.tsx index a58afaf01..5653941ee 100644 --- a/libs/ui-toolkit/src/components/text-area/text-area.tsx +++ b/libs/ui-toolkit/src/components/text-area/text-area.tsx @@ -3,7 +3,7 @@ import { inputClassNames } from '../input/input'; export interface TextAreaProps extends TextareaHTMLAttributes { - hassError?: boolean; + hasError?: boolean; className?: string; } diff --git a/libs/ui-toolkit/src/utils/class-names.spec.ts b/libs/ui-toolkit/src/utils/class-names.spec.ts new file mode 100644 index 000000000..1e17ef7bd --- /dev/null +++ b/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); +}); diff --git a/libs/ui-toolkit/src/utils/class-names.ts b/libs/ui-toolkit/src/utils/class-names.ts new file mode 100644 index 000000000..b57a8b22d --- /dev/null +++ b/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+( |$)/);