Skip to content

Commit

Permalink
feat: add fieldClassName (#467)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: может затронуть кастомную стилизацию контролов
  • Loading branch information
@reme3d2y
reme3d2y committed Jan 20, 2021
1 parent c2f515e commit 8847c5a
Show file tree
Hide file tree
Showing 18 changed files with 92 additions and 84 deletions.
20 changes: 10 additions & 10 deletions packages/amount-input/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ Object {
class="container bold"
>
<div
class="component s"
class="component component hasSuffix s"
>
<div
class="formControl component hasSuffix inner"
class="inner"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -57,10 +57,10 @@ Object {
class="container bold"
>
<div
class="component s"
class="component component hasSuffix s"
>
<div
class="formControl component hasSuffix inner"
class="inner"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -162,10 +162,10 @@ Object {
class="container bold"
>
<div
class="component s"
class="component component hasSuffix s"
>
<div
class="formControl component hasSuffix inner"
class="inner"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -209,10 +209,10 @@ Object {
class="container bold filled"
>
<div
class="component s"
class="component component suffixVisible hasSuffix s"
>
<div
class="formControl component suffixVisible hasSuffix inner filled"
class="inner filled"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -260,10 +260,10 @@ Object {
class="container bold filled"
>
<div
class="component s"
class="component component suffixVisible hasSuffix s"
>
<div
class="formControl component suffixVisible hasSuffix inner filled"
class="inner filled"
>
<div
class="inputWrapper"
Expand Down
16 changes: 8 additions & 8 deletions packages/bank-card/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
</svg>
</div>
<div
class="component s block hasRightAddons"
class="component filled s block hasRightAddons"
>
<div
class="formControl filled inner filled hasLabel"
class="inner filled hasLabel"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -140,10 +140,10 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
</svg>
</div>
<div
class="component s block hasRightAddons"
class="component filled s block hasRightAddons"
>
<div
class="formControl filled inner filled hasLabel"
class="inner filled hasLabel"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -247,10 +247,10 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
</svg>
</div>
<div
class="component s block hasRightAddons"
class="component filled s block hasRightAddons"
>
<div
class="formControl filled inner filled hasLabel"
class="inner filled hasLabel"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -354,10 +354,10 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
</svg>
</div>
<div
class="component s block hasRightAddons"
class="component filled s block hasRightAddons"
>
<div
class="formControl filled inner filled hasLabel"
class="inner filled hasLabel"
>
<div
class="inputWrapper"
Expand Down
2 changes: 1 addition & 1 deletion packages/calendar-input/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`CalendarInput Display tests should match snapshot 1`] = `
class="component s block hasRightAddons"
>
<div
class="formControl inner"
class="inner"
>
<div
class="inputWrapper"
Expand Down
4 changes: 2 additions & 2 deletions packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
class="component s block hasRightAddons"
>
<div
class="formControl inner"
class="inner"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -575,7 +575,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
class="component s block hasRightAddons"
>
<div
class="formControl inner"
class="inner"
>
<div
class="inputWrapper"
Expand Down
4 changes: 2 additions & 2 deletions packages/form-control/src/Component.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@ describe('FormControl', () => {
});

describe('Classes tests', () => {
it('should set `className` class to inner', () => {
it('should set `className` class to root', () => {
const className = 'test-class';
const dataTestId = 'test-id';
const { getByTestId } = render(
<FormControl className={className} dataTestId={dataTestId} />,
);

expect(getByTestId(dataTestId).firstElementChild).toHaveClass(className);
expect(getByTestId(dataTestId)).toHaveClass(className);
});

it('should set `labelClassName` class to label', () => {
Expand Down
10 changes: 8 additions & 2 deletions packages/form-control/src/Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ export type FormControlProps = HTMLAttributes<HTMLDivElement> & {
*/
className?: string;

/**
* Дополнительный класс для поля
*/
fieldClassName?: string;

/**
* Дополнительный класс для лейбла
*/
Expand Down Expand Up @@ -91,6 +96,7 @@ export const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
block = false,
size = 's',
className,
fieldClassName,
labelClassName,
addonsClassName,
disabled,
Expand All @@ -113,15 +119,15 @@ export const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
return (
<div
data-test-id={dataTestId}
className={cn(styles.component, styles[size], {
className={cn(styles.component, className, styles[size], {
[styles.block]: block,
[styles.hasLeftAddons]: leftAddons,
[styles.hasRightAddons]: rightAddons || error,
})}
>
<div
{...restProps}
className={cn(className, styles.inner, {
className={cn(fieldClassName, styles.inner, {
[styles.focused]: focused,
[styles.disabled]: disabled,
[styles.filled]: filled,
Expand Down
51 changes: 23 additions & 28 deletions packages/input/src/Component.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,15 @@ describe('Input', () => {
});

describe('Classes tests', () => {
it('should set `className` class to form-control inner', () => {
it('should set `className` class to form-control wrapper', () => {
const { container } = render(<Input className='test-class' />);

expect(container.querySelector('.test-class')).toHaveClass('component');
});

it('should set `fieldClassName` class to form-control field', () => {
const { container } = render(<Input fieldClassName='test-class' />);

expect(container.querySelector('.test-class')).toHaveClass('inner');
});

Expand Down Expand Up @@ -123,40 +129,33 @@ describe('Input', () => {
});

describe('when component is controlled', () => {
it('should set `filled` and filledClassName classes when value passed', () => {
it('should filledClassName classes when value passed', () => {
const filledClassName = 'custom-filled-class';
const { container } = render(
<Input value='some value' filledClassName={filledClassName} />,
);

const inner = container.querySelector('.inner');
const component = container.querySelector(`.${filledClassName}`);

expect(inner).toHaveClass('filled');
expect(inner).toHaveClass(filledClassName);
expect(component).toBeInTheDocument();
});

it('should not set `filled` and filledClassName classes if the value is empty', () => {
it('should not set filledClassName classes if the value is empty', () => {
const filledClassName = 'custom-filled-class';
const { container } = render(<Input value='' filledClassName={filledClassName} />);

const inner = container.querySelector('.inner');

expect(inner).not.toHaveClass('filled');
expect(inner).not.toHaveClass(filledClassName);
expect(container.querySelector(`.${filledClassName}`)).not.toBeInTheDocument();
});

it('should unset `filled` and filledClassName classes if the value becomes empty', () => {
it('should unset filledClassName classes if the value becomes empty', () => {
const filledClassName = 'custom-filled-class';
const { container, rerender } = render(
<Input value='some value' filledClassName={filledClassName} />,
);

rerender(<Input value='' filledClassName={filledClassName} />);

const inner = container.querySelector('.inner');

expect(inner).not.toHaveClass('filled');
expect(inner).not.toHaveClass(filledClassName);
expect(container.querySelector(`.${filledClassName}`)).not.toBeInTheDocument();
});

it('should show clear button only if input has value', () => {
Expand Down Expand Up @@ -198,32 +197,28 @@ describe('Input', () => {
});

describe('when component is uncontrolled', () => {
it('should set `filled` and filledClassName classes when defaultValue passed', () => {
it('should filledClassName classes when defaultValue passed', () => {
const filledClassName = 'custom-filled-class';
const { container } = render(
<Input defaultValue='some value' filledClassName={filledClassName} />,
);

const inner = container.querySelector('.inner');
const component = container.querySelector(`.${filledClassName}`);

expect(inner).toHaveClass('filled');
expect(inner).toHaveClass(filledClassName);
expect(component).toBeInTheDocument();
});

it('should not set `filled` and filledClassName classes if the value is empty', () => {
it('should not filledClassName classes if the value is empty', () => {
const filledClassName = 'custom-filled-class';
const { container } = render(<Input filledClassName={filledClassName} />);

const inner = container.querySelector('.inner');

expect(inner).not.toHaveClass('filled');
expect(inner).not.toHaveClass(filledClassName);
expect(container.querySelector(`.${filledClassName}`)).not.toBeInTheDocument();
});

it('should unset `filled` and filledClassName classes if value becomes empty', async () => {
it('should unset filledClassName classes if value becomes empty', async () => {
const dataTestId = 'test-id';
const filledClassName = 'custom-filled-class';
const { getByTestId } = render(
const { container, getByTestId } = render(
<Input
defaultValue='some value'
dataTestId={dataTestId}
Expand All @@ -239,8 +234,8 @@ describe('Input', () => {
input.blur();

expect(input.value).toBe('');
expect(input).not.toHaveClass('filled');
expect(input).not.toHaveClass(filledClassName);

expect(container.querySelector(`.${filledClassName}`)).not.toBeInTheDocument();
});

it('should show clear button only if input has value', async () => {
Expand Down
21 changes: 11 additions & 10 deletions packages/input/src/Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,11 @@ export type InputProps = Omit<
*/
className?: string;

/**
* Дополнительный класс для поля
*/
fieldClassName?: string;

/**
* Дополнительный класс инпута
*/
Expand Down Expand Up @@ -158,13 +163,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
type = 'text',
block = false,
bottomAddons,
className,
dataTestId,
clear = false,
disabled,
error,
success,
hint,
className,
fieldClassName,
inputClassName,
labelClassName,
addonsClassName,
Expand Down Expand Up @@ -284,15 +290,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
return (
<FormControl
ref={wrapperRef}
className={cn(
styles.formControl,
className,
focused && focusedClassName,
filled && filledClassName,
{
[styles.focusVisible]: focusVisible,
},
)}
className={cn(className, focused && focusedClassName, filled && filledClassName)}
fieldClassName={cn(fieldClassName, {
[styles.focusVisible]: focusVisible,
})}
labelClassName={labelClassName}
addonsClassName={addonsClassName}
size={size}
Expand Down
4 changes: 2 additions & 2 deletions packages/input/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Object {
class="component s"
>
<div
class="formControl inner filled"
class="inner filled"
>
<div
class="inputWrapper"
Expand All @@ -34,7 +34,7 @@ Object {
class="component s"
>
<div
class="formControl inner filled"
class="inner filled"
>
<div
class="inputWrapper"
Expand Down
4 changes: 2 additions & 2 deletions packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
exports[`IntlPhoneInput should match snapshot 1`] = `
<div>
<div
class="component m hasLeftAddons"
class="component m m hasLeftAddons"
>
<div
class="formControl m inner filled"
class="inner filled"
>
<div
class="addons leftAddons addons"
Expand Down

0 comments on commit 8847c5a

Please sign in to comment.