diff --git a/.changeset/hungry-items-wave.md b/.changeset/hungry-items-wave.md new file mode 100644 index 0000000000..3c00abb28b --- /dev/null +++ b/.changeset/hungry-items-wave.md @@ -0,0 +1,6 @@ +--- +"@alfalab/core-components-select": minor +"@alfalab/core-components-input-autocomplete": minor +--- + +Компонент FormControl заменен на mobile/desktop версии для мобильных и десктопных версий компонентов diff --git a/.changeset/rotten-geese-dream.md b/.changeset/rotten-geese-dream.md new file mode 100644 index 0000000000..9932dba406 --- /dev/null +++ b/.changeset/rotten-geese-dream.md @@ -0,0 +1,6 @@ +--- +"@alfalab/core-components-date-time-input": minor +"@alfalab/core-components-date-range-input": minor +--- + +Компонент Input заменен на mobile/desktop версии для мобильных и десктопных версий компонентов diff --git a/.changeset/tricky-balloons-cry.md b/.changeset/tricky-balloons-cry.md new file mode 100644 index 0000000000..16a0e3665b --- /dev/null +++ b/.changeset/tricky-balloons-cry.md @@ -0,0 +1,5 @@ +--- +"@alfalab/core-components-form-control": major +--- + +Для компонента FormControl добавлены мобильная и адаптивная версии компонента. Responsive компонент теперь экспортируется из индексного файла diff --git a/.changeset/unlucky-queens-battle.md b/.changeset/unlucky-queens-battle.md new file mode 100644 index 0000000000..c1f3cc9ea0 --- /dev/null +++ b/.changeset/unlucky-queens-battle.md @@ -0,0 +1,5 @@ +--- +"@alfalab/core-components-input": major +--- + +- Для компонента Input добавлены мобильная и адаптивная версии компонента. Responsive компонент теперь экспортируется из индексного файла diff --git a/packages/amount-input/src/Component.test.tsx b/packages/amount-input/src/Component.test.tsx index d9dbc04d16..2347f17c76 100644 --- a/packages/amount-input/src/Component.test.tsx +++ b/packages/amount-input/src/Component.test.tsx @@ -11,6 +11,20 @@ import { AmountInput } from './index'; import { AmountInputProps } from './Component'; describe('AmountInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // deprecated + removeListener: jest.fn(), // deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + function renderAmountInput( value: AmountInputProps['value'], currency: CurrencyCodes | null = 'RUR', diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx index 8085c2d431..2ce63b9906 100644 --- a/packages/amount-input/src/Component.tsx +++ b/packages/amount-input/src/Component.tsx @@ -108,6 +108,7 @@ export const AmountInput = forwardRef( clear = false, onChange, onClear, + breakpoint = 1024, ...restProps }, ref, @@ -255,6 +256,7 @@ export const AmountInput = forwardRef( pattern={`[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`} dataTestId={dataTestId} ref={ref} + breakpoint={breakpoint} /> ); diff --git a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap index a91d5acdf0..7a9808e4e5 100644 --- a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap @@ -9,10 +9,10 @@ Object { class="container bold" >
block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'width:800px;padding: 0 270px; transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe( diff --git a/packages/amount-input/tsconfig.json b/packages/amount-input/tsconfig.json index c089e448a3..fd06972eb1 100644 --- a/packages/amount-input/tsconfig.json +++ b/packages/amount-input/tsconfig.json @@ -7,6 +7,8 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-input/*": ["../input/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"] } }, diff --git a/packages/bank-card/src/Component.test.tsx b/packages/bank-card/src/Component.test.tsx index 935e93172f..b587fbb361 100644 --- a/packages/bank-card/src/Component.test.tsx +++ b/packages/bank-card/src/Component.test.tsx @@ -5,6 +5,20 @@ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon'; import { BankCard } from './index'; describe('BankCard', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const VISA_VALID_NUMBER = '4111111111111111'; const MC_VALID_NUMBER = '5500000000000004'; const MIR_VALID_NUMBER = '2201382000000013'; diff --git a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap index caf003b26d..4aed4effe7 100644 --- a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap +++ b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap @@ -31,10 +31,10 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
{ + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const getSelectedDay = () => document.querySelector('td[aria-selected="true"]') as HTMLButtonElement; diff --git a/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap index 3c646b0d52..cd62875c16 100644 --- a/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap @@ -7,10 +7,10 @@ exports[`CalendarInput Display tests should match snapshot 1`] = ` tabindex="-1" >
block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + } )); describe('CalendarInput | interactions tests', () => { diff --git a/packages/calendar-input/tsconfig.json b/packages/calendar-input/tsconfig.json index 883c92a33c..03fb166c15 100644 --- a/packages/calendar-input/tsconfig.json +++ b/packages/calendar-input/tsconfig.json @@ -7,6 +7,8 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], + "@alfalab/core-components-input/*": ["../input/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-calendar/*": ["../calendar/src/*"], "@alfalab/core-components-*": ["../*/src"] diff --git a/packages/calendar-range/src/Component.screenshots.test.tsx b/packages/calendar-range/src/Component.screenshots.test.tsx index 394d27b5a5..4431e9f100 100644 --- a/packages/calendar-range/src/Component.screenshots.test.tsx +++ b/packages/calendar-range/src/Component.screenshots.test.tsx @@ -16,7 +16,10 @@ describe('CalendarRange', () => selectorView: 'full', }, }, - 'transform: scale(0.8)', + 'width:800px;transform: scale(0.8)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe( diff --git a/packages/calendar-range/src/Component.test.tsx b/packages/calendar-range/src/Component.test.tsx index b0d803fec8..1fd4c310a7 100644 --- a/packages/calendar-range/src/Component.test.tsx +++ b/packages/calendar-range/src/Component.test.tsx @@ -15,6 +15,20 @@ import { CalendarRange } from './index'; jest.useFakeTimers(); describe('CalendarRange', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const defaultDate = new Date('October 01, 2020 00:00:00'); const currentDate = new Date(); const currentMonth = startOfMonth(currentDate); @@ -241,7 +255,6 @@ describe('CalendarRange', () => { await waitFor(() => { fireEvent.click(inputFrom); - expect( document.querySelector('.from-calendar button.month .buttonContent'), ).toHaveTextContent(currentMonthName); diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap index 3b124dc15c..4a97a4d700 100644 --- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap +++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap @@ -7,10 +7,10 @@ exports[`CalendarRange Display tests should match snapshot 1`] = ` >
block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe( diff --git a/packages/date-input/src/Component.test.tsx b/packages/date-input/src/Component.test.tsx index 845b1b248f..c7d00e2cf7 100644 --- a/packages/date-input/src/Component.test.tsx +++ b/packages/date-input/src/Component.test.tsx @@ -5,6 +5,20 @@ import { render, waitFor } from '@testing-library/react'; import { DateInput } from './index'; describe('DateInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Display tests', () => { it('should match snapshot', () => { expect(render().container).toMatchSnapshot(); diff --git a/packages/date-input/src/__snapshots__/Component.test.tsx.snap b/packages/date-input/src/__snapshots__/Component.test.tsx.snap index cdeef5f1c8..3f142b3d06 100644 --- a/packages/date-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/date-input/src/__snapshots__/Component.test.tsx.snap @@ -3,10 +3,10 @@ exports[`DateInput Display tests should match snapshot 1`] = `
& +export type DateRangeInputDesktopProps = Omit< + DateRangeInputProps, + 'view' | 'picker' | 'onClose' | 'InputComponent' +> & ConditionalProps; export const DateRangeInputDesktop = forwardRef( - (props, ref) => , + (props, ref) => ( + + ), ); diff --git a/packages/date-range-input/src/Component.mobile.tsx b/packages/date-range-input/src/Component.mobile.tsx index bd211f86b6..4b136d3abb 100644 --- a/packages/date-range-input/src/Component.mobile.tsx +++ b/packages/date-range-input/src/Component.mobile.tsx @@ -3,6 +3,7 @@ import React, { forwardRef } from 'react'; import { CalendarMobile } from '@alfalab/core-components-calendar/mobile'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { InputProps } from '@alfalab/core-components-input'; +import { InputMobile } from '@alfalab/core-components-input/mobile'; import { ConditionalProps, @@ -10,9 +11,20 @@ import { DateRangeInputProps, } from './components/date-range-input'; -export type DateRangeInputMobileProps = Omit & +export type DateRangeInputMobileProps = Omit< + DateRangeInputProps, + 'view' | 'picker' | 'onClose' | 'InputComponent' +> & ConditionalProps; export const DateRangeInputMobile = forwardRef( - (props, ref) => , + (props, ref) => ( + + ), ); diff --git a/packages/date-range-input/src/Component.responsive.tsx b/packages/date-range-input/src/Component.responsive.tsx index ed035d2362..75f5f42d79 100644 --- a/packages/date-range-input/src/Component.responsive.tsx +++ b/packages/date-range-input/src/Component.responsive.tsx @@ -10,7 +10,7 @@ import { DateRangeInputMobile } from './Component.mobile'; export type DateRangeInputResponsiveProps = Omit< DateRangeInputProps, - 'view' | 'picker' | 'onClose' + 'view' | 'picker' | 'onClose' | 'InputComponent' > & ConditionalProps & { /** diff --git a/packages/date-range-input/src/Component.screenshots.test.tsx b/packages/date-range-input/src/Component.screenshots.test.tsx index c46264fb33..dd4bf55b5d 100644 --- a/packages/date-range-input/src/Component.screenshots.test.tsx +++ b/packages/date-range-input/src/Component.screenshots.test.tsx @@ -26,7 +26,10 @@ describe('DateRangeInput', () => block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe( diff --git a/packages/date-range-input/src/Component.test.tsx b/packages/date-range-input/src/Component.test.tsx index 7c5121610c..a96c16ab66 100644 --- a/packages/date-range-input/src/Component.test.tsx +++ b/packages/date-range-input/src/Component.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; -import { act, fireEvent, getByTestId, render, waitFor } from '@testing-library/react'; +import { act, fireEvent, render, waitFor } from '@testing-library/react'; import { DateRangeInputDesktop as DateRangeInput } from './desktop'; import { parseDateString } from './utils'; diff --git a/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap b/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap index bcea8993b0..ec99e460e8 100644 --- a/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/date-range-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ exports[`DateRangeInput Display tests should match snapshot 1`] = ` class="component" >
diff --git a/packages/date-range-input/src/components/date-range-input/Component.tsx b/packages/date-range-input/src/components/date-range-input/Component.tsx index 3c7963022c..f722a51c46 100644 --- a/packages/date-range-input/src/components/date-range-input/Component.tsx +++ b/packages/date-range-input/src/components/date-range-input/Component.tsx @@ -18,7 +18,7 @@ import type { CalendarDesktopProps } from '@alfalab/core-components-calendar/des import type { CalendarMobileProps } from '@alfalab/core-components-calendar/mobile'; import { usePeriod } from '@alfalab/core-components-calendar/shared'; import { IconButton } from '@alfalab/core-components-icon-button'; -import { Input, InputProps } from '@alfalab/core-components-input'; +import { InputProps } from '@alfalab/core-components-input'; import { Popover, PopoverProps } from '@alfalab/core-components-popover'; import { useDidUpdateEffect } from '@alfalab/hooks'; import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon'; @@ -155,6 +155,11 @@ export type DateRangeInputProps = Omit & */ view?: 'desktop' | 'mobile'; + /** + * Компонент инпута + */ + InputComponent?: ElementType; + /** * Запретить ввод с клавиатуры */ @@ -184,6 +189,7 @@ export const DateRangeInput = React.forwardRef - - {rightAddons} - {picker && ( - - )} - - } - /> + {InputComponent ? ( + + {rightAddons} + {picker && ( + + )} + + } + /> + ) : null} {picker && ( ; +export type DateTimeInputDesktopProps = Omit; export const DateTimeInputDesktop = forwardRef( - (props, ref) => , + (props, ref) => ( + + ), ); diff --git a/packages/date-time-input/src/Component.mobile.tsx b/packages/date-time-input/src/Component.mobile.tsx index 80ff096484..9a24d8efbb 100644 --- a/packages/date-time-input/src/Component.mobile.tsx +++ b/packages/date-time-input/src/Component.mobile.tsx @@ -3,11 +3,20 @@ import React, { forwardRef } from 'react'; import { CalendarMobile } from '@alfalab/core-components-calendar/mobile'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { InputProps } from '@alfalab/core-components-input'; +import { InputMobile } from '@alfalab/core-components-input/mobile'; import { DateTimeInput, DateTimeInputProps } from './components/date-time-input/Component'; -export type DateTimeInputMobileProps = Omit; +export type DateTimeInputMobileProps = Omit; export const DateTimeInputMobile = forwardRef( - (props, ref) => , + (props, ref) => ( + + ), ); diff --git a/packages/date-time-input/src/Component.responsive.tsx b/packages/date-time-input/src/Component.responsive.tsx index b63c9e82b8..66ed388ba6 100644 --- a/packages/date-time-input/src/Component.responsive.tsx +++ b/packages/date-time-input/src/Component.responsive.tsx @@ -8,7 +8,7 @@ import { DateTimeInputProps } from './components/date-time-input/Component'; import { DateTimeInputDesktop } from './Component.desktop'; import { DateTimeInputMobile } from './Component.mobile'; -export type DateTimeInputResponsiveProps = Omit & { +export type DateTimeInputResponsiveProps = Omit & { /** * Контрольная точка, с нее начинается desktop версия * @default 1024 diff --git a/packages/date-time-input/src/Component.screenshots.test.tsx b/packages/date-time-input/src/Component.screenshots.test.tsx index d9483d9013..d52142df9a 100644 --- a/packages/date-time-input/src/Component.screenshots.test.tsx +++ b/packages/date-time-input/src/Component.screenshots.test.tsx @@ -26,7 +26,10 @@ describe('DateTimeInput', () => block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe( diff --git a/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap b/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap index 85e4ffe1e6..7faf696a97 100644 --- a/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/date-time-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ exports[`DateTimeInput Display tests should match snapshot 1`] = ` class="component" >
diff --git a/packages/date-time-input/src/components/date-time-input/Component.tsx b/packages/date-time-input/src/components/date-time-input/Component.tsx index f002ef3f71..712808003e 100644 --- a/packages/date-time-input/src/components/date-time-input/Component.tsx +++ b/packages/date-time-input/src/components/date-time-input/Component.tsx @@ -17,7 +17,7 @@ import type { CalendarDesktopProps } from '@alfalab/core-components-calendar/des import type { CalendarMobileProps } from '@alfalab/core-components-calendar/mobile'; import { dateInLimits } from '@alfalab/core-components-calendar/shared'; import { IconButton } from '@alfalab/core-components-icon-button'; -import { Input, InputProps } from '@alfalab/core-components-input'; +import { InputProps } from '@alfalab/core-components-input'; import { Popover, PopoverProps } from '@alfalab/core-components-popover'; import { useDidUpdateEffect } from '@alfalab/hooks'; import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon'; @@ -145,6 +145,11 @@ export type DateTimeInputProps = Omit & { */ view?: 'desktop' | 'mobile'; + /** + * Компонент инпута + */ + InputComponent?: ElementType; + /** * Запретить ввод с клавиатуры */ @@ -171,6 +176,7 @@ export const DateTimeInput = React.forwardRef - - {rightAddons} - {picker && ( - - )} - - } - /> + {InputComponent ? ( + + {rightAddons} + {picker && ( + + )} + + } + /> + ) : null} {picker && ( ; + +export const FormControlDesktop = forwardRef( + (restProps, ref) => ( + + ), +); diff --git a/packages/form-control/src/Component.mobile.tsx b/packages/form-control/src/Component.mobile.tsx new file mode 100644 index 0000000000..0f039318d3 --- /dev/null +++ b/packages/form-control/src/Component.mobile.tsx @@ -0,0 +1,20 @@ +import React, { forwardRef } from 'react'; + +import { BaseFormControl, BaseFormControlProps } from './components/base-form-control'; + +import defaultColors from './default.mobile.module.css'; +import invertedColors from './inverted.mobile.module.css'; +import styles from './mobile.module.css'; + +const colorStyles = { + default: defaultColors, + inverted: invertedColors, +}; + +export type FormControlMobileProps = Omit; + +export const FormControlMobile = forwardRef( + (restProps, ref) => ( + + ), +); diff --git a/packages/form-control/src/Component.responsive.tsx b/packages/form-control/src/Component.responsive.tsx new file mode 100644 index 0000000000..ec04cee633 --- /dev/null +++ b/packages/form-control/src/Component.responsive.tsx @@ -0,0 +1,32 @@ +import React, { forwardRef } from 'react'; + +import { useMatchMedia } from '@alfalab/core-components-mq'; + +import { BaseFormControlProps } from './components/base-form-control'; +import { FormControlDesktop } from './Component.desktop'; +import { FormControlMobile } from './Component.mobile'; + +export type FormControlProps = Omit & { + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; + + /** + * Значение по-умолчанию для хука useMatchMedia + */ + defaultMatchMediaValue?: boolean | (() => boolean); +}; + +export const FormControl = forwardRef( + ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => { + const query = `(min-width: ${breakpoint}px)`; + + const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue); + + const Component = isDesktop ? FormControlDesktop : FormControlMobile; + + return ; + }, +); diff --git a/packages/form-control/src/Component.test.tsx b/packages/form-control/src/Component.test.tsx index 110f4b82f7..eed8bf2870 100644 --- a/packages/form-control/src/Component.test.tsx +++ b/packages/form-control/src/Component.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { FormControl } from './index'; +import { FormControlDesktop as FormControl } from './desktop'; describe('FormControl', () => { describe('Snapshots tests', () => { diff --git a/packages/form-control/src/__snapshots__/Component.test.tsx.snap b/packages/form-control/src/__snapshots__/Component.test.tsx.snap index 89b6720f79..8bbce28c23 100644 --- a/packages/form-control/src/__snapshots__/Component.test.tsx.snap +++ b/packages/form-control/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
, "container":
, "container":
, "container":
, "container":
This is hint @@ -431,10 +431,10 @@ Object { , "container":
This is hint @@ -511,10 +511,10 @@ Object { "baseElement":
, "container":
, "container":
This is label
, "container":
This is label
, "container":
& { +export type StyleColors = { + default: { + [key: string]: string; + }; + inverted: { + [key: string]: string; + }; +}; + +export type BaseFormControlProps = HTMLAttributes & { /** * Растягивает компонент на ширину контейнера */ @@ -115,9 +124,19 @@ export type FormControlProps = HTMLAttributes & { * Компонент поля (инпут, textarea и пр.) */ children?: ReactNode; + + /** + * Основные стили компонента. + */ + styles: { [key: string]: string }; + + /** + * Стили компонента для default и inverted режима. + */ + colorStyles?: StyleColors; }; -export const FormControl = React.forwardRef( +export const BaseFormControl = React.forwardRef( ( { block = false, @@ -141,6 +160,8 @@ export const FormControl = React.forwardRef( bottomAddons, children, dataTestId, + styles, + colorStyles = { default: {}, inverted: {} }, ...restProps }, ref, @@ -151,64 +172,95 @@ export const FormControl = React.forwardRef(
{label && labelView === 'outer' && ( - {label} + + {label} + )}
{leftAddons && ( -
+
{leftAddons}
)} -
+
{label && labelView === 'inner' && ( - + {label}
- {label} + {label}
)} -
{children}
+
{children}
{rightAddons && ( -
+
{rightAddons}
)} @@ -217,7 +269,11 @@ export const FormControl = React.forwardRef( {errorMessage && ( {errorMessage} @@ -225,7 +281,11 @@ export const FormControl = React.forwardRef( )} {hint && !errorMessage && ( - {hint} + + {hint} + )}
); diff --git a/packages/form-control/src/components/base-form-control/default.module.css b/packages/form-control/src/components/base-form-control/default.module.css new file mode 100644 index 0000000000..5afcbae2fd --- /dev/null +++ b/packages/form-control/src/components/base-form-control/default.module.css @@ -0,0 +1,39 @@ +@import '../../vars.css'; + +.component { + color: var(--form-control-color); +} + +.label { + color: var(--form-control-label-color); +} + +.hint { + color: var(--form-control-hint-color); +} + +/* DISABLED STATE */ + +.disabled { + color: var(--form-control-disabled-color); +} + +.disabled.filled .label { + color: var(--form-control-disabled-filled-label-color); +} + +/* FOCUS STATE */ + +.focused:not(.disabled):not(.hasError):before { + border-bottom: var(--form-control-focus-border-bottom); +} + +/* ERROR STATE */ + +.error { + color: var(--form-control-error-color); +} + +.hasError .label { + color: var(--form-control-error-label-color); +} diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/components/base-form-control/index.module.css similarity index 92% rename from packages/form-control/src/index.module.css rename to packages/form-control/src/components/base-form-control/index.module.css index 36d390eabe..38ad72b8c1 100644 --- a/packages/form-control/src/index.module.css +++ b/packages/form-control/src/components/base-form-control/index.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .component { font-family: var(--form-control-font-family); @@ -93,8 +92,6 @@ display: block; margin-bottom: calc(var(--gap-s) / 2); - padding: var(--form-control-sub-paddings); - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -108,7 +105,6 @@ .s .inner { min-height: var(--form-control-s-min-height); - border-radius: var(--form-control-s-border-radius); } .s .hasInnerLabel .input > * { @@ -121,7 +117,6 @@ .m .inner { min-height: var(--form-control-m-min-height); - border-radius: var(--form-control-m-border-radius); } .m .hasInnerLabel .input > * { @@ -134,7 +129,6 @@ .l .inner { min-height: var(--form-control-l-min-height); - border-radius: var(--form-control-l-border-radius); } .l .hasInnerLabel .input > * { @@ -147,7 +141,6 @@ .xl .inner { min-height: var(--form-control-xl-min-height); - border-radius: var(--form-control-xl-border-radius); } .xl .label { diff --git a/packages/form-control/src/components/base-form-control/index.ts b/packages/form-control/src/components/base-form-control/index.ts new file mode 100644 index 0000000000..e51a5d2440 --- /dev/null +++ b/packages/form-control/src/components/base-form-control/index.ts @@ -0,0 +1 @@ +export * from './Component'; diff --git a/packages/form-control/src/components/base-form-control/inverted.module.css b/packages/form-control/src/components/base-form-control/inverted.module.css new file mode 100644 index 0000000000..17110f86fc --- /dev/null +++ b/packages/form-control/src/components/base-form-control/inverted.module.css @@ -0,0 +1,39 @@ +@import '../../vars.css'; + +.component { + color: var(--form-control-inverted-color); +} + +.label { + color: var(--form-control-inverted-label-color); +} + +.hint { + color: var(--form-control-inverted-hint-color); +} + +/* DISABLED STATE */ + +.disabled { + color: var(--form-control-inverted-disabled-color); +} + +.disabled.filled .label { + color: var(--form-control-inverted-disabled-filled-label-color); +} + +/* FOCUS STATE */ + +.focused:not(.disabled):not(.hasError):before { + border-bottom: var(--form-control-inverted-focus-border-bottom); +} + +/* ERROR STATE */ + +.error { + color: var(--form-control-inverted-error-color); +} + +.hasError .label { + color: var(--form-control-inverted-error-label-color); +} diff --git a/packages/form-control/src/default.module.css b/packages/form-control/src/default.desktop.module.css similarity index 65% rename from packages/form-control/src/default.module.css rename to packages/form-control/src/default.desktop.module.css index bfeb7cf563..d30d648bee 100644 --- a/packages/form-control/src/default.module.css +++ b/packages/form-control/src/default.desktop.module.css @@ -1,10 +1,5 @@ -@import '../../themes/src/default.css'; @import './vars.css'; -.component { - color: var(--form-control-color); -} - .inner { background-color: var(--form-control-bg-color); } @@ -14,33 +9,20 @@ border-bottom: var(--form-control-border-bottom); } -.label { - color: var(--form-control-label-color); -} - -.hint { - color: var(--form-control-hint-color); -} - /* DISABLED STATE */ .disabled { background-color: var(--form-control-disabled-bg-color); - color: var(--form-control-disabled-color); box-shadow: var(--form-control-disabled-shadow); } -.disabled.hasError { - box-shadow: var(--form-control-error-disabled-shadow); - background-color: var(--form-control-disabled-bg-color); -} - .disabled:before { border-bottom: var(--form-control-disabled-border-bottom); } -.disabled.filled .label { - color: var(--form-control-disabled-filled-label-color); +.disabled.hasError { + box-shadow: var(--form-control-error-disabled-shadow); + background-color: var(--form-control-disabled-bg-color); } /* HOVER STATE */ @@ -51,10 +33,6 @@ /* FOCUS STATE */ -.focused:not(.disabled):not(.hasError):before { - border-bottom: var(--form-control-focus-border-bottom); -} - .focused.inner, .focused.inner:hover { background-color: var(--form-control-focus-bg-color); @@ -65,21 +43,11 @@ } } -/* ERROR STATE */ - -.error { - color: var(--form-control-error-color); -} - -.hasError .label { - color: var(--form-control-error-label-color); +.hasError { + box-shadow: var(--form-control-error-shadow); + background-color: var(--form-control-error-bg-color); } .hasError:before { border-bottom: var(--form-control-error-border-bottom); } - -.hasError { - box-shadow: var(--form-control-error-shadow); - background-color: var(--form-control-error-bg-color); -} diff --git a/packages/form-control/src/default.mobile.module.css b/packages/form-control/src/default.mobile.module.css new file mode 100644 index 0000000000..3f64b060f8 --- /dev/null +++ b/packages/form-control/src/default.mobile.module.css @@ -0,0 +1,53 @@ +@import './vars.css'; + +.inner { + background-color: var(--form-control-mobile-bg-color); +} + +/* Нижняя граница */ +.inner:before { + border-bottom: var(--form-control-mobile-border-bottom); +} + +/* DISABLED STATE */ + +.disabled { + background-color: var(--form-control-mobile-disabled-bg-color); + box-shadow: var(--form-control-mobile-disabled-shadow); +} + +.disabled:before { + border-bottom: var(--form-control-mobile-disabled-border-bottom); +} + +.disabled.hasError { + box-shadow: var(--form-control-error-mobile-disabled-shadow); + background-color: var(--form-control-mobile-disabled-bg-color); +} + +/* HOVER STATE */ + +.inner:not(.disabled):hover { + background-color: var(--form-control-mobile-hover-bg-color); +} + +/* FOCUS STATE */ + +.focused.inner, +.focused.inner:hover { + background-color: var(--form-control-focus-mobile-bg-color); + box-shadow: var(--form-control-focus-mobile-shadow); + + &.hasError { + box-shadow: var(--form-control-focus-error-mobile-shadow); + } +} + +.hasError { + box-shadow: var(--form-control-error-mobile-shadow); + background-color: var(--form-control-error-mobile-bg-color); +} + +.hasError:before { + border-bottom: var(--form-control-error-mobile-border-bottom); +} diff --git a/packages/form-control/src/desktop.module.css b/packages/form-control/src/desktop.module.css new file mode 100644 index 0000000000..554d77433c --- /dev/null +++ b/packages/form-control/src/desktop.module.css @@ -0,0 +1,31 @@ +@import './vars.css'; + +.above { + padding: var(--form-control-sub-paddings); +} + +.sub { + padding: var(--form-control-sub-paddings); +} + +.error { + padding: var(--form-control-sub-paddings); +} + +/* SIZES */ + +.s .inner { + border-radius: var(--form-control-s-border-radius); +} + +.m .inner { + border-radius: var(--form-control-m-border-radius); +} + +.l .inner { + border-radius: var(--form-control-l-border-radius); +} + +.xl .inner { + border-radius: var(--form-control-xl-border-radius); +} diff --git a/packages/form-control/src/desktop.ts b/packages/form-control/src/desktop.ts new file mode 100644 index 0000000000..12c7c2339e --- /dev/null +++ b/packages/form-control/src/desktop.ts @@ -0,0 +1 @@ +export * from './Component.desktop'; diff --git a/packages/form-control/src/docs/Component.docs.mdx b/packages/form-control/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..214808d2ac --- /dev/null +++ b/packages/form-control/src/docs/Component.docs.mdx @@ -0,0 +1,23 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/form-control/src/docs/Component.stories.mdx b/packages/form-control/src/docs/Component.stories.mdx deleted file mode 100644 index ab9fd484b9..0000000000 --- a/packages/form-control/src/docs/Component.stories.mdx +++ /dev/null @@ -1,67 +0,0 @@ -import { Meta, Story, Markdown } from '@storybook/addon-docs'; -import { text, select, boolean } from '@storybook/addon-knobs'; -import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; -import { ComponentHeader, Tabs } from 'storybook/blocks'; -import { FormControl } from '@alfalab/core-components-form-control'; - -import packageJson from '../../package.json'; -import Development from './development.mdx'; -import Description from './description.mdx'; -import Changelog from '../../CHANGELOG.md?raw'; - - - -{/* Canvas */} - - - {React.createElement(() => { - const colors = select('colors', ['default', 'inverted'], 'default'); - return ( -
- } - leftAddons={boolean('leftAddons', false) && } - bottomAddons={boolean('bottomAddons', false) && bottom text} - /> -
- ); - })} - - -{/* Docs */} - - - -} - changelog={{Changelog}} - development={} -/> diff --git a/packages/form-control/src/docs/Component.stories.tsx b/packages/form-control/src/docs/Component.stories.tsx new file mode 100644 index 0000000000..232fdecc4a --- /dev/null +++ b/packages/form-control/src/docs/Component.stories.tsx @@ -0,0 +1,134 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { text, select, boolean } from '@storybook/addon-knobs'; +import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; +import { FormControl } from '@alfalab/core-components-form-control'; +import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; +import { FormControlDesktop } from '@alfalab/core-components-form-control/desktop'; + +const meta: Meta = { + title: 'Components/FormControl', + component: FormControl, + id: 'FormControl', +}; + +type Story = StoryObj; + +export const form_control: Story = { + name: 'FormControl', + render: () => { + const colors = select('colors', ['default', 'inverted'], 'default'); + return ( +
+ } + leftAddons={boolean('leftAddons', false) && } + bottomAddons={boolean('bottomAddons', false) && bottom text} + /> +
+ ); + }, +}; + +export const form_control_mobile: Story = { + name: 'FormControlMobile', + render: () => { + const colors = select('colors', ['default', 'inverted'], 'default'); + return ( +
+ } + leftAddons={boolean('leftAddons', false) && } + bottomAddons={boolean('bottomAddons', false) && bottom text} + /> +
+ ); + }, +}; + +export const form_control_desktop: Story = { + name: 'FormControlDesktop', + render: () => { + const colors = select('colors', ['default', 'inverted'], 'default'); + return ( +
+ } + leftAddons={boolean('leftAddons', false) && } + bottomAddons={boolean('bottomAddons', false) && bottom text} + /> +
+ ); + }, +}; + +export default meta; diff --git a/packages/form-control/src/docs/development.mdx b/packages/form-control/src/docs/development.mdx index 5e832d1cb3..ba345d444c 100644 --- a/packages/form-control/src/docs/development.mdx +++ b/packages/form-control/src/docs/development.mdx @@ -1,17 +1,22 @@ import { CssVars } from 'storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; -import { FormControl as FormControlTS } from '../Component'; +import { FormControlDesktop } from '../Component.desktop'; +import { FormControlMobile } from '../Component.mobile'; +import { FormControl } from '../Component.responsive'; import vars from '!!raw-loader!../vars.css'; ## Подключение ```jsx import { FormControl } from '@alfalab/core-components/form-control'; +import { FormControlMobile } from '@alfalab/core-components/form-control/mobile'; +import { FormControlDesktop } from '@alfalab/core-components/form-control/desktop'; ``` +Из индекса импортируется responsive версия компонента. ## Свойства - + ## Переменные diff --git a/packages/form-control/src/index.ts b/packages/form-control/src/index.ts index e51a5d2440..6e49866c64 100644 --- a/packages/form-control/src/index.ts +++ b/packages/form-control/src/index.ts @@ -1 +1 @@ -export * from './Component'; +export * from './Component.responsive'; diff --git a/packages/form-control/src/inverted.module.css b/packages/form-control/src/inverted.desktop.module.css similarity index 65% rename from packages/form-control/src/inverted.module.css rename to packages/form-control/src/inverted.desktop.module.css index b3e17e5e66..fe48143a3d 100644 --- a/packages/form-control/src/inverted.module.css +++ b/packages/form-control/src/inverted.desktop.module.css @@ -1,10 +1,5 @@ -@import '../../themes/src/default.css'; @import './vars.css'; -.component { - color: var(--form-control-inverted-color); -} - .inner { background-color: var(--form-control-inverted-bg-color); } @@ -14,33 +9,20 @@ border-bottom: var(--form-control-inverted-border-bottom); } -.label { - color: var(--form-control-inverted-label-color); -} - -.hint { - color: var(--form-control-inverted-hint-color); -} - /* DISABLED STATE */ .disabled { background-color: var(--form-control-inverted-disabled-bg-color); - color: var(--form-control-inverted-disabled-color); box-shadow: var(--form-control-inverted-disabled-shadow); } -.disabled.hasError { - box-shadow: var(--form-control-inverted-error-disabled-shadow); - background-color: var(--form-control-inverted-disabled-bg-color); -} - .disabled:before { border-bottom: var(--form-control-inverted-disabled-border-bottom); } -.disabled.filled .label { - color: var(--form-control-inverted-disabled-filled-label-color); +.disabled.hasError { + box-shadow: var(--form-control-inverted-error-disabled-shadow); + background-color: var(--form-control-inverted-disabled-bg-color); } /* HOVER STATE */ @@ -51,10 +33,6 @@ /* FOCUS STATE */ -.focused:not(.disabled):not(.hasError):before { - border-bottom: var(--form-control-inverted-focus-border-bottom); -} - .focused.inner, .focused.inner:hover { background-color: var(--form-control-inverted-focus-bg-color); @@ -65,21 +43,11 @@ } } -/* ERROR STATE */ - -.error { - color: var(--form-control-inverted-error-color); -} - -.hasError .label { - color: var(--form-control-inverted-error-label-color); +.hasError { + box-shadow: var(--form-control-inverted-error-shadow); + background-color: var(--form-control-inverted-error-bg-color); } .hasError:before { border-bottom: var(--form-control-inverted-error-border-bottom); } - -.hasError { - box-shadow: var(--form-control-inverted-error-shadow); - background-color: var(--form-control-inverted-error-bg-color); -} diff --git a/packages/form-control/src/inverted.mobile.module.css b/packages/form-control/src/inverted.mobile.module.css new file mode 100644 index 0000000000..ee38790a9f --- /dev/null +++ b/packages/form-control/src/inverted.mobile.module.css @@ -0,0 +1,53 @@ +@import './vars.css'; + +.inner { + background-color: var(--form-control-inverted-mobile-bg-color); +} + +/* Нижняя граница */ +.inner:before { + border-bottom: var(--form-control-inverted-mobile-border-bottom); +} + +/* DISABLED STATE */ + +.disabled { + background-color: var(--form-control-mobile-inverted-disabled-bg-color); + box-shadow: var(--form-control-mobile-inverted-disabled-shadow); +} + +.disabled:before { + border-bottom: var(--form-control-inverted-mobile-disabled-border-bottom); +} + +.disabled.hasError { + box-shadow: var(--form-control-inverted-error-mobile-disabled-shadow); + background-color: var(--form-control-mobile-inverted-disabled-bg-color); +} + +/* HOVER STATE */ + +.inner:not(.disabled):hover { + background-color: var(--form-control-inverted-mobile-hover-bg-color); +} + +/* FOCUS STATE */ + +.focused.inner, +.focused.inner:hover { + background-color: var(--form-control-inverted-focus-mobile-bg-color); + box-shadow: var(--form-control-inverted-focus-mobile-shadow); + + &.hasError { + box-shadow: var(--form-control-inverted-focus-error-mobile-shadow); + } +} + +.hasError { + box-shadow: var(--form-control-inverted-error-mobile-shadow); + background-color: var(--form-control-inverted-error-mobile-bg-color); +} + +.hasError:before { + border-bottom: var(--form-control-inverted-error-mobile-border-bottom); +} diff --git a/packages/form-control/src/mobile.module.css b/packages/form-control/src/mobile.module.css new file mode 100644 index 0000000000..b59f9f3c10 --- /dev/null +++ b/packages/form-control/src/mobile.module.css @@ -0,0 +1,31 @@ +@import './vars.css'; + +.above { + padding: var(--form-control-mobile-sub-paddings); +} + +.sub { + padding: var(--form-control-mobile-sub-paddings); +} + +.error { + padding: var(--form-control-mobile-sub-paddings); +} + +/* SIZES */ + +.s .inner { + border-radius: var(--form-control-mobile-s-border-radius); +} + +.m .inner { + border-radius: var(--form-control-mobile-m-border-radius); +} + +.l .inner { + border-radius: var(--form-control-mobile-l-border-radius); +} + +.xl .inner { + border-radius: var(--form-control-mobile-xl-border-radius); +} diff --git a/packages/form-control/src/mobile.ts b/packages/form-control/src/mobile.ts new file mode 100644 index 0000000000..b9fe097b67 --- /dev/null +++ b/packages/form-control/src/mobile.ts @@ -0,0 +1 @@ +export * from './Component.mobile'; diff --git a/packages/form-control/src/vars.css b/packages/form-control/src/vars.css index 3eb52096a7..00aecb7822 100644 --- a/packages/form-control/src/vars.css +++ b/packages/form-control/src/vars.css @@ -89,6 +89,56 @@ --form-control-m-border-radius: var(--border-radius-m); --form-control-l-border-radius: var(--border-radius-m); --form-control-xl-border-radius: var(--border-radius-l); + + /* paddings mobile */ + --form-control-mobile-sub-paddings: 0 var(--gap-2xs); + + /* border-radius mobile */ + --form-control-mobile-s-border-radius: 10px; + --form-control-mobile-m-border-radius: 10px; + --form-control-mobile-l-border-radius: 10px; + --form-control-mobile-xl-border-radius: 10px; + + /* color mobile */ + --form-control-mobile-bg-color: var(--color-light-specialbg-secondary-transparent); + --form-control-inverted-mobile-bg-color: var(--color-light-specialbg-secondary-transparent-inverted); + + /* disabled mobile */ + --form-control-mobile-disabled-bg-color: var(--color-light-bg-primary); + --form-control-mobile-inverted-disabled-bg-color: var(--color-light-bg-primary-inverted); + --form-control-mobile-disabled-shadow: inset 0 0 0 1px var(--color-light-border-secondary); + --form-control-mobile-inverted-disabled-shadow: inset 0 0 0 1px + var(--color-light-border-secondary-inverted); + + /* hover mobile */ + --form-control-mobile-hover-bg-color: var(--color-light-specialbg-secondary-transparent); + --form-control-inverted-mobile-hover-bg-color: var(--color-light-specialbg-secondary-transparent-inverted); + + /* focus mobile */ + --form-control-focus-mobile-shadow: none; + --form-control-focus-mobile-bg-color: var(--color-light-specialbg-secondary-transparent); + --form-control-focus-error-mobile-shadow: none; + --form-control-inverted-focus-error-mobile-shadow: none; + --form-control-inverted-focus-mobile-bg-color: var(--color-light-specialbg-secondary-transparent-inverted); + --form-control-inverted-focus-mobile-shadow: none; + + /* error mobile */ + --form-control-error-mobile-shadow: none; + --form-control-inverted-error-mobile-shadow: none; + --form-control-error-mobile-bg-color: var(--color-light-specialbg-secondary-transparent); + --form-control-inverted-error-mobile-bg-color: var(--color-light-specialbg-secondary-transparent-inverted); + --form-control-error-mobile-disabled-shadow: var(--form-control-mobile-disabled-shadow); + --form-control-inverted-error-mobile-disabled-shadow: var( + --form-control-mobile-inverted-disabled-shadow + ); + + /* border-bottom mobile */ + --form-control-mobile-border-bottom: 0; + --form-control-inverted-mobile-border-bottom: 0; + --form-control-mobile-disabled-border-bottom: 0; + --form-control-inverted-mobile-disabled-border-bottom: 0; + --form-control-error-mobile-border-bottom: 0; + --form-control-inverted-error-mobile-border-bottom: 0; } @define-mixin form-control-sub { @@ -96,5 +146,4 @@ /* adjusting overall height 👌 */ margin-top: 6px; - padding: var(--form-control-sub-paddings); } diff --git a/packages/form-control/tsconfig.json b/packages/form-control/tsconfig.json index fee37a72ff..d84bde735e 100644 --- a/packages/form-control/tsconfig.json +++ b/packages/form-control/tsconfig.json @@ -3,6 +3,11 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "dist", - "rootDirs": ["src"] - } + "rootDirs": ["src"], + "baseUrl": ".", + "paths": { + "@alfalab/core-components-*": ["../*/src"], + } + }, + "references": [{ "path": "../mq" }] } diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-dark-preview-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-dark-preview-snap.png index 5aaa9e941a..4f8bd6aa78 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-dark-preview-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8be0fa22503ec6aed9baf84039dbefd3727f709d50ea2e6cf568dee152bb1688 -size 13701 +oid sha256:62fe950c893be02ae23ed7d8c47250493941790f4c0e2493f4167986ef6485d5 +size 13748 diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png index f658408239..88c02fdbb9 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1b09424fdd07ce1a6eb36b546a1a1b8b7997cfb66a057abd406b1bc1236a4623 -size 18446 +oid sha256:6dc864f96045d1358ba8ddadc185a0ec2e2372bbb27a413f2889995390421523 +size 18404 diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-3-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-3-snap.png index e4022c180f..f0772b40c4 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-3-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b3733e90a1ed27b0334a5cf588f093e1db2df52cbe6c6da87a3cf5261e11a2c5 -size 8003 +oid sha256:160db7eca2f7e7a7702006d235081a2c444c8bcda4357844ec031e2339f64f01 +size 7736 diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-preview-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-preview-snap.png index aff98b980d..8d387b1903 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-preview-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:df522d14eee9528fa103a0b59f4e70abb967117c2ad3ab234789429884daa3f5 -size 13753 +oid sha256:2f1819f5a94d4638f561ae12dda42d5cca2a5d932568f3e928480a6cd9a3dbf8 +size 13943 diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap index 6395c452d3..4f2a6074dc 100644 --- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap @@ -15,12 +15,13 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in closed class="component" >
@@ -60,12 +61,13 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s class="component" >
@@ -180,10 +182,10 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s class="bottomAddons" >
diff --git a/packages/input-autocomplete/src/autocomplete-field/Component.tsx b/packages/input-autocomplete/src/autocomplete-field/Component.tsx index c46a2ec63c..de91282332 100644 --- a/packages/input-autocomplete/src/autocomplete-field/Component.tsx +++ b/packages/input-autocomplete/src/autocomplete-field/Component.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react'; import mergeRefs from 'react-merge-refs'; import cn from 'classnames'; -import { Input as DefaultInput } from '@alfalab/core-components-input'; +import { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop'; import type { FieldProps } from '@alfalab/core-components-select/shared'; import { InputAutocompleteDesktopProps } from '../Component.desktop'; diff --git a/packages/input-autocomplete/src/autocomplete-mobile-field/Component.tsx b/packages/input-autocomplete/src/autocomplete-mobile-field/Component.tsx index 753186f0ec..7808f34ef6 100644 --- a/packages/input-autocomplete/src/autocomplete-mobile-field/Component.tsx +++ b/packages/input-autocomplete/src/autocomplete-mobile-field/Component.tsx @@ -1,16 +1,19 @@ import React, { useRef, useState } from 'react'; import cn from 'classnames'; -import { FormControl, FormControlProps } from '@alfalab/core-components-form-control'; +import { + FormControlMobile, + FormControlMobileProps, +} from '@alfalab/core-components-form-control/mobile'; +import { InputAutocompleteProps } from '@alfalab/core-components-input-autocomplete'; import type { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared'; import { useFocus } from '@alfalab/hooks'; import styles from './index.module.css'; -export type AutocompleteMobileFieldProps = FormControlProps & - Omit & { - value?: string; - }; +export type AutocompleteMobileFieldProps = FormControlMobileProps & + Omit & + Pick; export const AutocompleteMobileField = ({ size = 'm', @@ -45,7 +48,7 @@ export const AutocompleteMobileField = ({ onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} > - {placeholder}} {filled &&
{value}
}
- +
); }; diff --git a/packages/input-autocomplete/tsconfig.json b/packages/input-autocomplete/tsconfig.json index cf0174c956..820b029c1c 100644 --- a/packages/input-autocomplete/tsconfig.json +++ b/packages/input-autocomplete/tsconfig.json @@ -9,6 +9,8 @@ "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], + "@alfalab/core-components-input/*": ["../input/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/input/package.json b/packages/input/package.json index 657d79f70f..0053bebec9 100644 --- a/packages/input/package.json +++ b/packages/input/package.json @@ -6,6 +6,26 @@ "license": "MIT", "main": "index.js", "module": "./esm/index.js", + "exports": { + ".": { + "import": "./esm/index.js", + "require": "./index.js" + }, + "./mobile": { + "import": "./esm/mobile.js", + "require": "./mobile.js" + }, + "./desktop": { + "import": "./esm/desktop.js", + "require": "./desktop.js" + }, + "./esm": "./esm/index.js", + "./cssm": "./cssm/index.js", + "./modern": "./modern/index.js", + "./esm/*": "./esm/*", + "./cssm/*": "./cssm/*", + "./modern/*": "./modern/*" + }, "publishConfig": { "access": "public", "directory": "dist" @@ -17,6 +37,7 @@ "@alfalab/core-components-button": "^8.5.1", "@alfalab/core-components-form-control": "^9.0.6", "@alfalab/core-components-badge": "^5.1.1", + "@alfalab/core-components-mq": "^4.1.4", "@alfalab/hooks": "^1.13.0", "@alfalab/icons-glyph": "^2.108.0", "classnames": "^2.3.1", diff --git a/packages/input/src/Component.desktop.tsx b/packages/input/src/Component.desktop.tsx new file mode 100644 index 0000000000..bf6bbd1939 --- /dev/null +++ b/packages/input/src/Component.desktop.tsx @@ -0,0 +1,24 @@ +import React, { forwardRef } from 'react'; + +import { FormControlDesktop } from '@alfalab/core-components-form-control/desktop'; + +import { BaseInput, BaseInputProps } from './components/base-input'; + +import defaultColors from './default.desktop.module.css'; +import invertedColors from './inverted.desktop.module.css'; + +const colorStyles = { + default: defaultColors, + inverted: invertedColors, +}; + +export type InputDesktopProps = Omit; + +export const InputDesktop = forwardRef((restProps, ref) => ( + +)); diff --git a/packages/input/src/Component.mobile.tsx b/packages/input/src/Component.mobile.tsx new file mode 100644 index 0000000000..81987fb6f2 --- /dev/null +++ b/packages/input/src/Component.mobile.tsx @@ -0,0 +1,24 @@ +import React, { forwardRef } from 'react'; + +import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; + +import { BaseInput, BaseInputProps } from './components/base-input'; + +import defaultColors from './default.mobile.module.css'; +import invertedColors from './inverted.mobile.module.css'; + +const colorStyles = { + default: defaultColors, + inverted: invertedColors, +}; + +export type InputMobileProps = Omit; + +export const InputMobile = forwardRef((restProps, ref) => ( + +)); diff --git a/packages/input/src/Component.responsive.tsx b/packages/input/src/Component.responsive.tsx new file mode 100644 index 0000000000..2253b7251f --- /dev/null +++ b/packages/input/src/Component.responsive.tsx @@ -0,0 +1,32 @@ +import React, { forwardRef } from 'react'; + +import { useMatchMedia } from '@alfalab/core-components-mq'; + +import { BaseInputProps } from './components/base-input'; +import { InputDesktop } from './Component.desktop'; +import { InputMobile } from './Component.mobile'; + +export type InputProps = Omit & { + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; + + /** + * Значение по-умолчанию для хука useMatchMedia + */ + defaultMatchMediaValue?: boolean | (() => boolean); +}; + +export const Input = forwardRef( + ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => { + const query = `(min-width: ${breakpoint}px)`; + + const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue); + + const Component = isDesktop ? InputDesktop : InputMobile; + + return ; + }, +); diff --git a/packages/input/src/Component.test.tsx b/packages/input/src/Component.test.tsx index 2f28cc606e..304702d89c 100644 --- a/packages/input/src/Component.test.tsx +++ b/packages/input/src/Component.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Input } from './index'; +import { InputDesktop as Input } from './desktop'; describe('Input', () => { Object.defineProperty(window, 'matchMedia', { diff --git a/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-2-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-2-snap.png index 7854efa38b..cfda09bf55 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-2-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:33f79a1248ac9b13b2ca7cc72ab1e0baed35f5f12419dfbda81e422c0cfe8327 -size 8919 +oid sha256:81d8bef59aef636a2c16390f6a55f5f6347f9f7810b29c13f078eb438d88e9b8 +size 9620 diff --git a/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-snap.png index 4706d1b1d3..62c4a04580 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-disabled-prop-mobile-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:72378584947bdcfa5a4c46f06a0868b9d5f06064c444f8777912d2caae2718f5 -size 8696 +oid sha256:56a5e837ca666eb1f267dfd1358dc19a266aa480f1d6c362a3862bbb2f8b1f2a +size 9535 diff --git a/packages/input/src/__snapshots__/Component.test.tsx.snap b/packages/input/src/__snapshots__/Component.test.tsx.snap index 4db2ad233f..be6e7e1f63 100644 --- a/packages/input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
@@ -30,10 +30,10 @@ Object { , "container":
diff --git a/packages/input/src/component.screenshots.test.tsx b/packages/input/src/component.screenshots.test.tsx index d0763de0ed..120b876f08 100644 --- a/packages/input/src/component.screenshots.test.tsx +++ b/packages/input/src/component.screenshots.test.tsx @@ -16,7 +16,7 @@ const screenshotTesting = setupScreenshotTesting({ const clip = { x: 0, y: 0, width: 350, height: 150 }; -describe('Input ', () => +describe('Input', () => createPreview( { componentName: 'Input', @@ -27,7 +27,10 @@ describe('Input ', () => block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe('Input | screenshots label view and value prop', () => { diff --git a/packages/input/src/Component.tsx b/packages/input/src/components/base-input/Component.tsx similarity index 91% rename from packages/input/src/Component.tsx rename to packages/input/src/components/base-input/Component.tsx index 84611cefaf..df25e1ff8a 100644 --- a/packages/input/src/Component.tsx +++ b/packages/input/src/components/base-input/Component.tsx @@ -1,6 +1,7 @@ import React, { AnimationEvent, ChangeEvent, + ElementType, Fragment, InputHTMLAttributes, MouseEvent, @@ -14,7 +15,6 @@ import cn from 'classnames'; import { Badge } from '@alfalab/core-components-badge'; import { Button } from '@alfalab/core-components-button'; -import { FormControl } from '@alfalab/core-components-form-control'; import { useFocus } from '@alfalab/hooks'; import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'; import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon'; @@ -24,12 +24,21 @@ import defaultColors from './default.module.css'; import styles from './index.module.css'; import invertedColors from './inverted.module.css'; -const colorStyles = { +const colorCommonStyles = { default: defaultColors, inverted: invertedColors, }; -export type InputProps = Omit< +export type StyleColors = { + default: { + [key: string]: string; + }; + inverted: { + [key: string]: string; + }; +}; + +export type BaseInputProps = Omit< InputHTMLAttributes, | 'size' | 'type' @@ -103,7 +112,7 @@ export type InputProps = Omit< /** * Ref для обертки input */ - wrapperRef?: React.Ref; + wrapperRef?: React.Ref | null; /** * Слот слева @@ -179,14 +188,23 @@ export type InputProps = Omit< * Обработчик MouseUp по полю */ onMouseUp?: (event: MouseEvent) => void; + /** + * Идентификатор для систем автоматизированного тестирования + */ + FormControlComponent?: ElementType; /** * Идентификатор для систем автоматизированного тестирования */ dataTestId?: string; + + /** + * Стили компонента для default и inverted режима. + */ + colorStyles?: StyleColors; }; -export const Input = React.forwardRef( +export const BaseInput = React.forwardRef( ( { size = 's', @@ -223,6 +241,8 @@ export const Input = React.forwardRef( defaultValue, wrapperRef, readOnly, + FormControlComponent, + colorStyles = { default: {}, inverted: {} }, ...restProps }, ref, @@ -327,7 +347,7 @@ export const Input = React.forwardRef( tabIndex={-1} > )} @@ -361,8 +381,8 @@ export const Input = React.forwardRef( ); }; - return ( - ( {...restProps} className={cn( styles.input, + colorCommonStyles[colors].input, colorStyles[colors].input, { [styles.error]: error, [colorStyles[colors].error]: error, [styles[size]]: hasInnerLabel, [styles.hasInnerLabel]: hasInnerLabel, - [colorStyles[colors].hasInnerLabel]: hasInnerLabel, + [colorCommonStyles[colors].hasInnerLabel]: hasInnerLabel, }, inputClassName, )} @@ -414,16 +435,7 @@ export const Input = React.forwardRef( data-test-id={dataTestId} aria-label={typeof label === 'string' ? label : undefined} /> - - ); + + ) : null; }, ); - -/** - * Для отображения в сторибуке - */ -Input.defaultProps = { - size: 's', - type: 'text', - block: false, -}; diff --git a/packages/input/src/default.module.css b/packages/input/src/components/base-input/default.module.css similarity index 83% rename from packages/input/src/default.module.css rename to packages/input/src/components/base-input/default.module.css index b8ed16c844..80847b483c 100644 --- a/packages/input/src/default.module.css +++ b/packages/input/src/components/base-input/default.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .input { color: var(--input-color); @@ -45,9 +44,3 @@ .input:focus::placeholder { color: var(--input-focus-placeholder-color); } - -/* ERROR STATE */ -.error { - color: var(--input-error-color); - caret-color: var(--input-error-color); -} diff --git a/packages/input/src/index.module.css b/packages/input/src/components/base-input/index.module.css similarity index 97% rename from packages/input/src/index.module.css rename to packages/input/src/components/base-input/index.module.css index 58b264430b..802b99ea13 100644 --- a/packages/input/src/index.module.css +++ b/packages/input/src/components/base-input/index.module.css @@ -1,6 +1,5 @@ -@import '../../themes/src/default.css'; -@import '../../form-control/src/vars.css'; -@import './vars.css'; +@import '../../../../form-control/src/vars.css'; +@import '../../vars.css'; .input { @mixin paragraph_component; diff --git a/packages/input/src/components/base-input/index.ts b/packages/input/src/components/base-input/index.ts new file mode 100644 index 0000000000..e51a5d2440 --- /dev/null +++ b/packages/input/src/components/base-input/index.ts @@ -0,0 +1 @@ +export * from './Component'; diff --git a/packages/input/src/inverted.module.css b/packages/input/src/components/base-input/inverted.module.css similarity index 83% rename from packages/input/src/inverted.module.css rename to packages/input/src/components/base-input/inverted.module.css index 3a4b14f327..d8b2f454fb 100644 --- a/packages/input/src/inverted.module.css +++ b/packages/input/src/components/base-input/inverted.module.css @@ -1,5 +1,4 @@ -@import '../../themes/src/default.css'; -@import './vars.css'; +@import '../../vars.css'; .input { color: var(--input-inverted-color); @@ -45,9 +44,3 @@ .input:focus::placeholder { color: var(--input-inverted-focus-placeholder-color); } - -/* ERROR STATE */ -.error { - color: var(--input-inverted-error-color); - caret-color: var(--input-inverted-error-color); -} diff --git a/packages/input/src/default.desktop.module.css b/packages/input/src/default.desktop.module.css new file mode 100644 index 0000000000..07d10369d4 --- /dev/null +++ b/packages/input/src/default.desktop.module.css @@ -0,0 +1,7 @@ +@import './vars.css'; + +/* ERROR STATE */ +.error { + color: var(--input-error-color); + caret-color: var(--input-error-color); +} diff --git a/packages/input/src/default.mobile.module.css b/packages/input/src/default.mobile.module.css new file mode 100644 index 0000000000..8969c22362 --- /dev/null +++ b/packages/input/src/default.mobile.module.css @@ -0,0 +1,7 @@ +@import './vars.css'; + +/* ERROR STATE */ +.error { + color: var(--input-error-mobile-color); + caret-color: var(--input-error-mobile-color); +} diff --git a/packages/input/src/desktop.ts b/packages/input/src/desktop.ts new file mode 100644 index 0000000000..12c7c2339e --- /dev/null +++ b/packages/input/src/desktop.ts @@ -0,0 +1 @@ +export * from './Component.desktop'; diff --git a/packages/input/src/docs/Component.docs.mdx b/packages/input/src/docs/Component.docs.mdx new file mode 100644 index 0000000000..2447190566 --- /dev/null +++ b/packages/input/src/docs/Component.docs.mdx @@ -0,0 +1,24 @@ +import { Meta, Markdown } from '@storybook/addon-docs'; +import { ComponentHeader, Tabs } from 'storybook/blocks'; +import * as Stories from './Component.stories'; + +import Description from './description.mdx'; +import Development from './development.mdx'; +import Changelog from '../../CHANGELOG.md?raw'; +import packageJson from '../../package.json'; + + + + + +} + changelog={{Changelog}} + development={} +/> diff --git a/packages/input/src/docs/Component.stories.mdx b/packages/input/src/docs/Component.stories.mdx deleted file mode 100644 index fe01fcb047..0000000000 --- a/packages/input/src/docs/Component.stories.mdx +++ /dev/null @@ -1,76 +0,0 @@ -import { Meta, Story, Markdown } from '@storybook/addon-docs'; -import { text, select, boolean } from '@storybook/addon-knobs'; -import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; -import { ComponentHeader, Tabs } from 'storybook/blocks'; -import { Input } from '@alfalab/core-components-input'; - -import packageJson from '../../package.json'; -import Description from './description.mdx'; -import Development from './development.mdx'; -import Changelog from '../../CHANGELOG.md?raw'; - - - -{/* Canvas */} - - - {React.createElement(() => { - const colors = select('colors', ['default', 'inverted'], 'default'); - return ( -
- } - leftAddons={boolean('leftAddons', false) && } - bottomAddons={boolean('bottomAddons', false) && bottom text} - readOnly={boolean('readOnly', false)} - /> -
- ); - })} - - -{/* Docs */} - - - -} - changelog={{Changelog}} - development={} -/> diff --git a/packages/input/src/docs/Component.stories.tsx b/packages/input/src/docs/Component.stories.tsx new file mode 100644 index 0000000000..f607b42458 --- /dev/null +++ b/packages/input/src/docs/Component.stories.tsx @@ -0,0 +1,159 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { text, select, boolean } from '@storybook/addon-knobs'; + +import { StarMIcon } from '@alfalab/icons-glyph/StarMIcon'; +import { Input } from '@alfalab/core-components-input'; +import { InputMobile } from '@alfalab/core-components-input/mobile'; +import { InputDesktop } from '@alfalab/core-components-input/desktop'; + +const meta: Meta = { + title: 'Components/Input', + component: Input, + id: 'Input', +}; + +type Story = StoryObj; + +export const input: Story = { + name: 'Input', + render: () => { + const colors = select('colors', ['default', 'inverted'], 'default'); + return ( +
+ } + leftAddons={boolean('leftAddons', false) && } + bottomAddons={boolean('bottomAddons', false) && bottom text} + readOnly={boolean('readOnly', false)} + /> +
+ ); + }, +}; + +export const input_mobile: Story = { + name: 'InputMobile', + render: () => { + const colors = select('colors', ['default', 'inverted'], 'default'); + return ( +
+ } + leftAddons={boolean('leftAddons', false) && } + bottomAddons={boolean('bottomAddons', false) && bottom text} + readOnly={boolean('readOnly', false)} + /> +
+ ); + }, +}; + +export const input_desktop: Story = { + name: 'InputDesktop', + render: () => { + const colors = select('colors', ['default', 'inverted'], 'default'); + return ( +
+ } + leftAddons={boolean('leftAddons', false) && } + bottomAddons={boolean('bottomAddons', false) && bottom text} + readOnly={boolean('readOnly', false)} + /> +
+ ); + }, +}; + +export default meta; diff --git a/packages/input/src/docs/development.mdx b/packages/input/src/docs/development.mdx index d57d118553..f0b81eb90b 100644 --- a/packages/input/src/docs/development.mdx +++ b/packages/input/src/docs/development.mdx @@ -1,17 +1,22 @@ import { CssVars } from 'storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; -import { Input as InputTS } from '../Component'; +import { Input } from '../Component.responsive'; +import { InputDesktop} from '../Component.desktop'; +import { InputMobile } from '../Component.mobile'; import vars from '!!raw-loader!../vars.css'; ## Подключение ```jsx import { Input } from '@alfalab/core-components/input'; +import { InputDesktop } from '@alfalab/core-components/input/desktop'; +import { InputMobile } from '@alfalab/core-components/input/mobile'; ``` +Из индекса импортируется responsive версия компонента. ## Свойства - + ## Переменные diff --git a/packages/input/src/index.ts b/packages/input/src/index.ts index e51a5d2440..6e49866c64 100644 --- a/packages/input/src/index.ts +++ b/packages/input/src/index.ts @@ -1 +1 @@ -export * from './Component'; +export * from './Component.responsive'; diff --git a/packages/input/src/inverted.desktop.module.css b/packages/input/src/inverted.desktop.module.css new file mode 100644 index 0000000000..4828ece28c --- /dev/null +++ b/packages/input/src/inverted.desktop.module.css @@ -0,0 +1,7 @@ +@import './vars.css'; + +/* ERROR STATE */ +.error { + color: var(--input-inverted-error-color); + caret-color: var(--input-inverted-error-color); +} diff --git a/packages/input/src/inverted.mobile.module.css b/packages/input/src/inverted.mobile.module.css new file mode 100644 index 0000000000..5b5f2fd0f0 --- /dev/null +++ b/packages/input/src/inverted.mobile.module.css @@ -0,0 +1,7 @@ +@import './vars.css'; + +/* ERROR STATE */ +.error { + color: var(--input-inverted-error-mobile-color); + caret-color: var(--input-inverted-error-mobile-color); +} diff --git a/packages/input/src/mobile.ts b/packages/input/src/mobile.ts new file mode 100644 index 0000000000..b9fe097b67 --- /dev/null +++ b/packages/input/src/mobile.ts @@ -0,0 +1 @@ +export * from './Component.mobile'; diff --git a/packages/input/src/vars.css b/packages/input/src/vars.css index d7577f2a4e..98c61a11ff 100644 --- a/packages/input/src/vars.css +++ b/packages/input/src/vars.css @@ -30,4 +30,8 @@ /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */ --input-error-icon-not-alone-display: none; + + /* mobile */ + --input-error-mobile-color: var(--color-light-text-negative); + --input-inverted-error-mobile-color: var(--color-light-text-accent); } diff --git a/packages/input/tsconfig.json b/packages/input/tsconfig.json index b44e6ad660..0365cf4dd3 100644 --- a/packages/input/tsconfig.json +++ b/packages/input/tsconfig.json @@ -6,9 +6,16 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, - "references": [{ "path": "../button" }, { "path": "../form-control" }, { "path": "../loader" }, { "path": "../badge" }] + "references": [ + { "path": "../button" }, + { "path": "../form-control" }, + { "path": "../loader" }, + { "path": "../badge" }, + { "path": "../mq" } + ] } diff --git a/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap b/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap index e06db3cf0b..0737a5fd8d 100644 --- a/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap +++ b/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap @@ -10,10 +10,10 @@ exports[`IntlPhoneInput should match snapshot 1`] = ` tabindex="-1" >
block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); diff --git a/packages/masked-input/src/Component.test.tsx b/packages/masked-input/src/Component.test.tsx index e423ffa2c9..e969ad272a 100644 --- a/packages/masked-input/src/Component.test.tsx +++ b/packages/masked-input/src/Component.test.tsx @@ -8,6 +8,20 @@ import { MaskedInput } from './index'; const cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]; describe('MaskedInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Snapshots tests', () => { it('should match snapshot', () => { expect(render()).toMatchSnapshot(); diff --git a/packages/masked-input/src/Component.tsx b/packages/masked-input/src/Component.tsx index 10a1944d3d..15c7850a59 100644 --- a/packages/masked-input/src/Component.tsx +++ b/packages/masked-input/src/Component.tsx @@ -60,24 +60,27 @@ export const MaskedInput = React.forwardRef( }, ref, ) => { - const inputRef = useRef(null); + const [inputNode, setInputNode] = useState(null); const textMask = useRef(null); const [inputValue, setInputValue] = useState(value || defaultValue || ''); // Не показываем сырое значение до применения маски const [textHidden, setTextHidden] = useState(true); - const update = useCallback((newValue = '') => { - if (textMask.current && inputRef.current) { - try { - textMask.current.update(newValue); - } catch (e) { - // ignore masking errors - } + const update = useCallback( + (newValue = '') => { + if (textMask.current && inputNode) { + try { + textMask.current.update(newValue); + } catch (e) { + // ignore masking errors + } - setInputValue(inputRef.current.value); - } - }, []); + setInputValue(inputNode.value); + } + }, + [inputNode], + ); const handleInputChange = useCallback( (event: ChangeEvent) => { @@ -101,10 +104,10 @@ export const MaskedInput = React.forwardRef( ); useEffect(() => { - if (inputRef.current) { + if (inputNode) { textMask.current = createTextMaskInputElement({ mask, - inputElement: inputRef.current, + inputElement: inputNode, pipe: onBeforeDisplay, guide: false, keepCharPositions, @@ -115,7 +118,7 @@ export const MaskedInput = React.forwardRef( previousConformedValue: '', }); } - }, [onBeforeDisplay, mask, keepCharPositions]); + }, [onBeforeDisplay, mask, keepCharPositions, inputNode]); useEffect(() => { update(value || defaultValue); @@ -132,7 +135,7 @@ export const MaskedInput = React.forwardRef( value={inputValue} onChange={handleInputChange} onClear={handleClear} - ref={mergeRefs([ref, inputRef])} + ref={mergeRefs([ref, setInputNode])} /> ); }, diff --git a/packages/masked-input/src/__snapshots__/Component.test.tsx.snap b/packages/masked-input/src/__snapshots__/Component.test.tsx.snap index 12753389d3..67fe3ba337 100644 --- a/packages/masked-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/masked-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
@@ -30,10 +30,10 @@ Object { , "container":
diff --git a/packages/masked-input/tsconfig.json b/packages/masked-input/tsconfig.json index 0512210b22..66ae4e8a40 100644 --- a/packages/masked-input/tsconfig.json +++ b/packages/masked-input/tsconfig.json @@ -7,6 +7,8 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], + "@alfalab/core-components-input/*": ["../input/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"] } }, diff --git a/packages/number-input/src/Component.screenshots.test.tsx b/packages/number-input/src/Component.screenshots.test.tsx index ae0b87c231..d994503e87 100644 --- a/packages/number-input/src/Component.screenshots.test.tsx +++ b/packages/number-input/src/Component.screenshots.test.tsx @@ -11,5 +11,8 @@ describe('NumberInput ', () => block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); diff --git a/packages/number-input/src/__snapshots__/Component.test.tsx.snap b/packages/number-input/src/__snapshots__/Component.test.tsx.snap index c9691cc25e..30aed5ba84 100644 --- a/packages/number-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/number-input/src/__snapshots__/Component.test.tsx.snap @@ -3,10 +3,10 @@ exports[`NumberInput Snapshots tests should match snapshot 1`] = `
diff --git a/packages/password-input/src/component.screenshots.test.tsx b/packages/password-input/src/component.screenshots.test.tsx index 1b9992a673..d4d812e2be 100644 --- a/packages/password-input/src/component.screenshots.test.tsx +++ b/packages/password-input/src/component.screenshots.test.tsx @@ -22,7 +22,10 @@ describe('PasswordInput ', () => block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe( diff --git a/packages/password-input/tsconfig.json b/packages/password-input/tsconfig.json index 655eac24b6..69d97574b0 100644 --- a/packages/password-input/tsconfig.json +++ b/packages/password-input/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"] } }, diff --git a/packages/phone-input/src/Component.screenshots.test.ts b/packages/phone-input/src/Component.screenshots.test.ts index 7c8e5db2be..7577800046 100644 --- a/packages/phone-input/src/Component.screenshots.test.ts +++ b/packages/phone-input/src/Component.screenshots.test.ts @@ -11,5 +11,8 @@ describe('PhoneInput ', () => block: true, }, }, - 'padding: 0 270px; transform:scale(2.1)', + 'padding: 0 270px;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); diff --git a/packages/phone-input/src/Component.test.tsx b/packages/phone-input/src/Component.test.tsx index 449187cf66..8d8824ef6a 100644 --- a/packages/phone-input/src/Component.test.tsx +++ b/packages/phone-input/src/Component.test.tsx @@ -5,6 +5,20 @@ import userEvent from '@testing-library/user-event'; import { PhoneInput } from './index'; describe('PhoneInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const dataTestId = 'test-id'; it('should match snapshot', () => { diff --git a/packages/phone-input/src/__snapshots__/Component.test.tsx.snap b/packages/phone-input/src/__snapshots__/Component.test.tsx.snap index 589a1395e5..35a1d6b020 100644 --- a/packages/phone-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/phone-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ Object { "baseElement":
@@ -30,10 +30,10 @@ Object { , "container":
diff --git a/packages/phone-input/tsconfig.json b/packages/phone-input/tsconfig.json index 39f60d6d4a..a30f463810 100644 --- a/packages/phone-input/tsconfig.json +++ b/packages/phone-input/tsconfig.json @@ -7,6 +7,8 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], + "@alfalab/core-components-input/*": ["../input/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"] } }, diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap index 222d191cbe..6b17af06a5 100644 --- a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap @@ -14,6 +14,7 @@ exports[`Snapshots tests should display correctly 1`] = ` aria-controls="downshift-3-menu" aria-labelledby="downshift-3-label" class="component secondary m m component secondary component secondary block withRightAddons component" + formcontrolcomponent="[object Object]" id="downshift-2-input" tabindex="0" type="button" @@ -124,6 +125,7 @@ exports[`Snapshots tests should display correctly 3`] = ` aria-controls="downshift-19-menu" aria-labelledby="downshift-19-label" class="component secondary m m component secondary component secondary block withRightAddons component" + formcontrolcomponent="[object Object]" id="downshift-18-input" tabindex="0" type="button" @@ -180,6 +182,7 @@ exports[`Snapshots tests should display opened correctly 1`] = ` aria-controls="downshift-7-menu" aria-labelledby="downshift-7-label" class="component secondary m m component secondary component secondary block iconOnly component" + formcontrolcomponent="[object Object]" id="downshift-6-input" tabindex="0" type="button" @@ -1280,6 +1283,7 @@ exports[`Snapshots tests should display opened correctly 3`] = ` aria-controls="downshift-15-menu" aria-labelledby="downshift-15-label" class="component secondary m m component secondary component secondary block iconOnly component" + formcontrolcomponent="[object Object]" id="downshift-14-input" tabindex="0" type="button" @@ -2380,6 +2384,7 @@ exports[`Snapshots tests should display opened correctly 5`] = ` aria-controls="downshift-23-menu" aria-labelledby="downshift-23-label" class="component secondary m m component secondary component secondary block iconOnly component" + formcontrolcomponent="[object Object]" id="downshift-22-input" tabindex="0" type="button" diff --git a/packages/picker-button/tsconfig.json b/packages/picker-button/tsconfig.json index b29583da4b..a8bd93b190 100644 --- a/packages/picker-button/tsconfig.json +++ b/packages/picker-button/tsconfig.json @@ -8,6 +8,7 @@ "paths": { "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"], "@alfalab/core-components-*": ["../*/src"] } diff --git a/packages/pure-input/src/index.module.css b/packages/pure-input/src/index.module.css index ee3d38d563..d10f7c2025 100644 --- a/packages/pure-input/src/index.module.css +++ b/packages/pure-input/src/index.module.css @@ -1,5 +1,5 @@ @import '../../themes/src/default.css'; -@import '../../input/src/default.module.css'; +@import '../../input/src/components/base-input/default.module.css'; @import '../../form-control/src/vars.css'; .component { diff --git a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap index 4ec8355338..152633c50b 100644 --- a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap +++ b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap @@ -13,10 +13,10 @@ exports[`SelectWithTags Display tests should match snapshot 1`] = ` class="component xl" >
{ + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Display tests', () => { it('should match snapshot', () => { const { container } = render( diff --git a/packages/select-with-tags/src/component.tsx b/packages/select-with-tags/src/component.tsx index dfd302d105..cd7ee266ae 100644 --- a/packages/select-with-tags/src/component.tsx +++ b/packages/select-with-tags/src/component.tsx @@ -35,6 +35,7 @@ export const SelectWithTags = forwardRef( transformCollapsedTagText, transformTagText, Tag, + breakpoint, ...restProps }, ref, @@ -138,6 +139,7 @@ export const SelectWithTags = forwardRef( transformTagText, handleUpdatePopover, isPopoverOpen, + breakpoint, }} selected={selected || selectedTags} autocomplete={isAutocomplete} diff --git a/packages/select-with-tags/src/types.ts b/packages/select-with-tags/src/types.ts index 2bfe25f514..0661301c7e 100644 --- a/packages/select-with-tags/src/types.ts +++ b/packages/select-with-tags/src/types.ts @@ -74,4 +74,10 @@ export type SelectWithTagsProps = Omit< * Трансформировать текст компонента Тэг */ transformTagText?: (tagText?: ReactNode) => ReactNode; + + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; }; diff --git a/packages/select-with-tags/tsconfig.json b/packages/select-with-tags/tsconfig.json index 20234e5780..0df32af7a0 100644 --- a/packages/select-with-tags/tsconfig.json +++ b/packages/select-with-tags/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-tag/*": ["../tag/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"], diff --git a/packages/select/src/Component.desktop.tsx b/packages/select/src/Component.desktop.tsx index 493e41faf8..fbea406ef3 100644 --- a/packages/select/src/Component.desktop.tsx +++ b/packages/select/src/Component.desktop.tsx @@ -1,6 +1,9 @@ import React, { forwardRef } from 'react'; -import { FormControlProps } from '@alfalab/core-components-form-control/src/Component'; +import { + FormControlDesktop, + FormControlDesktopProps, +} from '@alfalab/core-components-form-control/desktop'; import { Arrow as DefaultArrow } from './components/arrow'; import { BaseSelect } from './components/base-select'; @@ -10,7 +13,7 @@ import { Option as DefaultOption } from './components/option'; import { OptionsList as DefaultOptionsList } from './components/options-list'; import { BaseSelectProps } from './typings'; -export type SelectFieldProps = Omit & Record; +export type SelectFieldProps = Omit & Record; export type SelectDesktopProps = Omit & { /** @@ -27,6 +30,7 @@ export const SelectDesktop = forwardRef( OptionsList = DefaultOptionsList, Optgroup = DefaultOptgroup, Option = DefaultOption, + fieldProps={}, ...restProps }, ref, @@ -35,6 +39,10 @@ export const SelectDesktop = forwardRef( ref={ref} Option={Option} Field={Field} + fieldProps={{ + FormControlComponent: FormControlDesktop, + ...(fieldProps as object), + }} Optgroup={Optgroup} OptionsList={OptionsList} Arrow={Arrow} diff --git a/packages/select/src/Component.mobile.tsx b/packages/select/src/Component.mobile.tsx index d30ec0c23d..0e82a71dbb 100644 --- a/packages/select/src/Component.mobile.tsx +++ b/packages/select/src/Component.mobile.tsx @@ -1,6 +1,7 @@ import React, { forwardRef, ReactNode } from 'react'; import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet'; +import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; import { Arrow as DefaultArrow } from './components/arrow'; import { BaseSelectMobile } from './components/base-select-mobile'; @@ -119,7 +120,10 @@ export const SelectMobile = forwardRef( open={openProp} size={size} optionsSize={optionsSize} - fieldProps={fieldProps} + fieldProps={{ + FormControlComponent: FormControlMobile, + ...(fieldProps as object), + }} optionProps={optionProps} Arrow={Arrow} Field={Field} diff --git a/packages/select/src/Component.modal.mobile.tsx b/packages/select/src/Component.modal.mobile.tsx index 9a3d5f66a6..c349904660 100644 --- a/packages/select/src/Component.modal.mobile.tsx +++ b/packages/select/src/Component.modal.mobile.tsx @@ -1,5 +1,6 @@ import React, { forwardRef } from 'react'; +import { FormControlMobile } from '@alfalab/core-components-form-control/mobile'; import { ModalMobile } from '@alfalab/core-components-modal/Component.mobile'; import { Arrow as DefaultArrow } from './components/arrow'; @@ -114,7 +115,10 @@ export const SelectModalMobile = forwardRef( open={openProp} size={size} optionsSize={optionsSize} - fieldProps={fieldProps} + fieldProps={{ + FormControlComponent: FormControlMobile, + ...(fieldProps as object), + }} optionProps={optionProps} Arrow={Arrow} Field={Field} diff --git a/packages/select/src/__image_snapshots__/select-dark-preview-snap.png b/packages/select/src/__image_snapshots__/select-dark-preview-snap.png index d3babd876d..bee56ac87c 100644 --- a/packages/select/src/__image_snapshots__/select-dark-preview-snap.png +++ b/packages/select/src/__image_snapshots__/select-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6d1ea8c563d4dddf1caa5b49152b44ff069243b449d105d93ebd3d0d90e4bfe3 -size 12694 +oid sha256:7f900d2b2bcc3af11178c4ca4aa01bf7faa2376a52d051b8b7d992fe5ff673e0 +size 12740 diff --git a/packages/select/src/__image_snapshots__/select-preview-snap.png b/packages/select/src/__image_snapshots__/select-preview-snap.png index 469d19e37b..dfa1f3b3ad 100644 --- a/packages/select/src/__image_snapshots__/select-preview-snap.png +++ b/packages/select/src/__image_snapshots__/select-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0f2df25f571ca3d424be49a75c7691125ceafed5ff0741a6860f327afef36ab8 -size 12681 +oid sha256:36efa2ae76aefc533956ada3dfed7e7724f53cc6853d54a156fcfd7c27d41bdf +size 12836 diff --git a/packages/select/src/__snapshots__/Component.test.tsx.snap b/packages/select/src/__snapshots__/Component.test.tsx.snap index 8ffd2c4e5c..d13b98d8f7 100644 --- a/packages/select/src/__snapshots__/Component.test.tsx.snap +++ b/packages/select/src/__snapshots__/Component.test.tsx.snap @@ -16,12 +16,12 @@ Object { class="component" >
@@ -74,12 +74,12 @@ Object { class="component" >
@@ -183,12 +183,12 @@ exports[`Select Snapshots tests should match snapshot with fatal error 1`] = ` class="component" >
@@ -247,12 +247,12 @@ exports[`Select Snapshots tests should match snapshot with visibleOptions 1`] = class="component" >
diff --git a/packages/select/src/components/field/Component.tsx b/packages/select/src/components/field/Component.tsx index 431db0605c..76a015674e 100644 --- a/packages/select/src/components/field/Component.tsx +++ b/packages/select/src/components/field/Component.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useRef, useState } from 'react'; +import React, { ElementType, useCallback, useRef, useState } from 'react'; import cn from 'classnames'; -import { FormControl, FormControlProps } from '@alfalab/core-components-form-control'; +import type { FormControlProps } from '@alfalab/core-components-form-control'; import { useFocus } from '@alfalab/hooks'; import { FieldProps as BaseFieldProps } from '../../typings'; @@ -9,6 +9,13 @@ import { joinOptions } from '../../utils'; import styles from './index.module.css'; +type FieldProps = { + /** + * Компонент FormControl + */ + FormControlComponent?: ElementType; +}; + export const Field = ({ size = 'm', open, @@ -29,8 +36,9 @@ export const Field = ({ innerProps, dataTestId, fieldClassName, + FormControlComponent, ...restProps -}: BaseFieldProps & FormControlProps) => { +}: BaseFieldProps & FormControlProps & FieldProps) => { const [focused, setFocused] = useState(false); const wrapperRef = useRef(null); @@ -53,46 +61,50 @@ export const Field = ({ onFocus={handleFocus} onBlur={handleBlur} > - - {rightAddons} - {/* TODO: стоит переделать, но это будет мажорка */} - {Arrow ? React.cloneElement(Arrow, { className: styles.arrow }) : null} - - ) - } - data-test-id={dataTestId} - {...restProps} - {...innerProps} - > -
- {showPlaceholder && ( - - {placeholder} - - )} - {filled &&
{value}
} -
- + {FormControlComponent ? ( + + {rightAddons} + {/* TODO: стоит переделать, но это будет мажорка */} + {Arrow + ? React.cloneElement(Arrow, { className: styles.arrow }) + : null} + + ) + } + data-test-id={dataTestId} + {...restProps} + {...innerProps} + > +
+ {showPlaceholder && ( + + {placeholder} + + )} + {filled &&
{value}
} +
+ + ) : null}
); }; diff --git a/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx b/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx index 7b78de83b2..efce050e8b 100644 --- a/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx +++ b/packages/select/src/presets/useLazyLoading/use-lazy-loading.test.tsx @@ -20,6 +20,20 @@ const mockOptions = (offset: number) => ({ }); describe('Select useLazyLoading hook', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const observe = jest.fn(); /* diff --git a/packages/select/tsconfig.json b/packages/select/tsconfig.json index 6b26fea992..21d8aae6b2 100644 --- a/packages/select/tsconfig.json +++ b/packages/select/tsconfig.json @@ -8,6 +8,7 @@ "paths": { "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"], "@alfalab/core-components-*": ["../*/src"] } diff --git a/packages/slider-input/src/Component.test.tsx b/packages/slider-input/src/Component.test.tsx index 8fe9c694c1..2171ad6c04 100644 --- a/packages/slider-input/src/Component.test.tsx +++ b/packages/slider-input/src/Component.test.tsx @@ -4,6 +4,20 @@ import { render, fireEvent } from '@testing-library/react'; import { SliderInput } from './index'; describe('SliderInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: true, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + it('should match snapshot', () => { const { container } = render(); expect(container).toMatchSnapshot(); diff --git a/packages/slider-input/src/__snapshots__/Component.test.tsx.snap b/packages/slider-input/src/__snapshots__/Component.test.tsx.snap index 9d78343704..e9c638e7f5 100644 --- a/packages/slider-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/slider-input/src/__snapshots__/Component.test.tsx.snap @@ -6,10 +6,10 @@ exports[`SliderInput should match snapshot 1`] = ` class="component s" >
block: true, }, }, - 'padding: 28px 270px 0; transform:scale(2.1)', + 'padding: 28px 270px 0;width:800px;transform:scale(2.1)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe('SliderInput | sprite', () => { diff --git a/packages/slider-input/tsconfig.json b/packages/slider-input/tsconfig.json index d00629c9a7..c95597e89b 100644 --- a/packages/slider-input/tsconfig.json +++ b/packages/slider-input/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"] } }, diff --git a/packages/table/tsconfig.json b/packages/table/tsconfig.json index 6760c1f5a0..0d5a502bc5 100644 --- a/packages/table/tsconfig.json +++ b/packages/table/tsconfig.json @@ -8,6 +8,7 @@ "paths": { "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-tag/*": ["../tag/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"], "@alfalab/core-components-*": ["../*/src"] diff --git a/packages/tabs/tsconfig.json b/packages/tabs/tsconfig.json index 31f9ef4f76..a574dd7f6a 100644 --- a/packages/tabs/tsconfig.json +++ b/packages/tabs/tsconfig.json @@ -9,6 +9,7 @@ "@alfalab/core-components-*": ["../*/src"], "@alfalab/core-components-modal/*": ["../modal/src/*"], "@alfalab/core-components-picker-button/*": ["../picker-button/src/*"], + "@alfalab/core-components-form-control/*": ["../form-control/src/*"], "@alfalab/core-components-tag/*": ["../tag/src/*"], "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"] diff --git a/packages/textarea/src/Component.test.tsx b/packages/textarea/src/Component.test.tsx index 18e27a5ff8..31637a9b88 100644 --- a/packages/textarea/src/Component.test.tsx +++ b/packages/textarea/src/Component.test.tsx @@ -5,6 +5,20 @@ import userEvent from '@testing-library/user-event'; import { Textarea } from './index'; describe('Textarea', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Snapshots tests', () => { it('should match snapshot', () => { const { container } = render(