diff --git a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- multiple.snap.png b/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- multiple.snap.png deleted file mode 100644 index 45ba7a283f6..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- single.snap.png b/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- single.snap.png deleted file mode 100644 index b72b9968e6b..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- sizes.snap.png b/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- sizes.snap.png deleted file mode 100644 index 95f379988a8..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- sizes.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- views.snap.png b/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- views.snap.png deleted file mode 100644 index 940200f1291..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld -- views.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld keyboard navigation -- multiple.snap.png b/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld keyboard navigation -- multiple.snap.png deleted file mode 100644 index 336d4351d46..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld keyboard navigation -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld keyboard navigation -- single.snap.png b/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld keyboard navigation -- single.snap.png deleted file mode 100644 index 61484c8b7e2..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Combobox/plasma-b2c ComboboxOld keyboard navigation -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/chromium/Dropdown/plasma-b2c Dropdown -- prop hasArrow.snap.png b/cypress/snapshots/b2c/chromium/Dropdown/plasma-b2c Dropdown -- prop hasArrow.snap.png deleted file mode 100644 index 73c1a888d8d..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Dropdown/plasma-b2c Dropdown -- prop hasArrow.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/chromium/Dropdown/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png b/cypress/snapshots/b2c/chromium/Dropdown/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png deleted file mode 100644 index f36fefe023b..00000000000 Binary files a/cypress/snapshots/b2c/chromium/Dropdown/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- multiple.snap.png b/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- multiple.snap.png deleted file mode 100644 index bcb98426543..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- single.snap.png b/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- single.snap.png deleted file mode 100644 index 897d7bf470b..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- sizes.snap.png b/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- sizes.snap.png deleted file mode 100644 index cec21bce561..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- sizes.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- views.snap.png b/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- views.snap.png deleted file mode 100644 index 9c2a0151ca8..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld -- views.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld keyboard navigation -- multiple.snap.png b/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld keyboard navigation -- multiple.snap.png deleted file mode 100644 index 460c124779e..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld keyboard navigation -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld keyboard navigation -- single.snap.png b/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld keyboard navigation -- single.snap.png deleted file mode 100644 index 54d9e0cc6b7..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Combobox/plasma-b2c ComboboxOld keyboard navigation -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Dropdown/plasma-b2c Dropdown -- prop hasArrow.snap.png b/cypress/snapshots/b2c/webkit/Dropdown/plasma-b2c Dropdown -- prop hasArrow.snap.png deleted file mode 100644 index dadf5a7c3a2..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Dropdown/plasma-b2c Dropdown -- prop hasArrow.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/webkit/Dropdown/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png b/cypress/snapshots/b2c/webkit/Dropdown/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png deleted file mode 100644 index d7330c6c16c..00000000000 Binary files a/cypress/snapshots/b2c/webkit/Dropdown/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- multiple.snap.png b/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- multiple.snap.png deleted file mode 100644 index 007e6547528..00000000000 Binary files a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- single.snap.png b/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- single.snap.png deleted file mode 100644 index 105e5b9ef6d..00000000000 Binary files a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- sizes.snap.png b/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- sizes.snap.png deleted file mode 100644 index 17bf4d8e8fd..00000000000 Binary files a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- sizes.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- views.snap.png b/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- views.snap.png deleted file mode 100644 index 225e57d30ad..00000000000 Binary files a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld -- views.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png b/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png deleted file mode 100644 index 840f1375e3e..00000000000 Binary files a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld keyboard navigation -- single.snap.png b/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld keyboard navigation -- single.snap.png deleted file mode 100644 index 54f7a04025a..00000000000 Binary files a/cypress/snapshots/web/chromium/Combobox/plasma-web ComboboxOld keyboard navigation -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Dropdown/plasma-web Dropdown -- prop hasArrow.snap.png b/cypress/snapshots/web/chromium/Dropdown/plasma-web Dropdown -- prop hasArrow.snap.png deleted file mode 100644 index 698c44e7724..00000000000 Binary files a/cypress/snapshots/web/chromium/Dropdown/plasma-web Dropdown -- prop hasArrow.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Dropdown/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png b/cypress/snapshots/web/chromium/Dropdown/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png deleted file mode 100644 index 6ffd60c74a4..00000000000 Binary files a/cypress/snapshots/web/chromium/Dropdown/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Legacy/plasma-web CarouselOld -- default.snap.png b/cypress/snapshots/web/chromium/Legacy/plasma-web CarouselOld -- default.snap.png deleted file mode 100644 index cd5c4d9a73f..00000000000 Binary files a/cypress/snapshots/web/chromium/Legacy/plasma-web CarouselOld -- default.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- multiple.snap.png b/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- multiple.snap.png deleted file mode 100644 index 0cc495703d2..00000000000 Binary files a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- single.snap.png b/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- single.snap.png deleted file mode 100644 index 957f7772e1a..00000000000 Binary files a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- sizes.snap.png b/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- sizes.snap.png deleted file mode 100644 index 0e46cfd2dfc..00000000000 Binary files a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- sizes.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- views.snap.png b/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- views.snap.png deleted file mode 100644 index 3f5f256362d..00000000000 Binary files a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld -- views.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png b/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png deleted file mode 100644 index 711d14b8696..00000000000 Binary files a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld keyboard navigation -- single.snap.png b/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld keyboard navigation -- single.snap.png deleted file mode 100644 index 97a6f4c859f..00000000000 Binary files a/cypress/snapshots/web/chromium/Legacy/plasma-web ComboboxOld keyboard navigation -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- multiple.snap.png b/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- multiple.snap.png deleted file mode 100644 index 6ec29b62271..00000000000 Binary files a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- single.snap.png b/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- single.snap.png deleted file mode 100644 index 8ff452a4ad8..00000000000 Binary files a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- sizes.snap.png b/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- sizes.snap.png deleted file mode 100644 index ef2d0ca9cac..00000000000 Binary files a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- sizes.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- views.snap.png b/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- views.snap.png deleted file mode 100644 index 1daa8948c7a..00000000000 Binary files a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld -- views.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png b/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png deleted file mode 100644 index 7e82b6af363..00000000000 Binary files a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld keyboard navigation -- multiple.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld keyboard navigation -- single.snap.png b/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld keyboard navigation -- single.snap.png deleted file mode 100644 index 6cefe9465c9..00000000000 Binary files a/cypress/snapshots/web/webkit/Combobox/plasma-web ComboboxOld keyboard navigation -- single.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Dropdown/plasma-web Dropdown -- prop hasArrow.snap.png b/cypress/snapshots/web/webkit/Dropdown/plasma-web Dropdown -- prop hasArrow.snap.png deleted file mode 100644 index 38e2fef14ea..00000000000 Binary files a/cypress/snapshots/web/webkit/Dropdown/plasma-web Dropdown -- prop hasArrow.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/webkit/Dropdown/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png b/cypress/snapshots/web/webkit/Dropdown/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png deleted file mode 100644 index 758cc3d05f0..00000000000 Binary files a/cypress/snapshots/web/webkit/Dropdown/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png and /dev/null differ diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.tsx index 08615b80c48..8ac9f71aa9c 100644 --- a/packages/plasma-b2c/src/components/Combobox/Combobox.tsx +++ b/packages/plasma-b2c/src/components/Combobox/Combobox.tsx @@ -9,29 +9,20 @@ import type { ComboboxItemOption, ComboboxProps, DistributiveOmit, DistributiveP import React from 'react'; import { config } from './Combobox.config'; -import { Combobox as ComboboxOld } from './Legacy'; const mergedConfig = mergeConfig(comboboxNewConfig, config); const ComboboxNew = component(mergedConfig); type PropsFromConfig = keyof typeof config['variations']; -type PropsOld = ComponentProps & { items?: never }; - -type PropsNew = DistributiveOmit, PropsFromConfig> & +type Props = DistributiveOmit, PropsFromConfig> & DistributivePick, PropsFromConfig>; -type CommonProps = PropsOld | PropsNew; - const ComboboxComponent = ( - props: CommonProps, + props: Props, ref: React.ForwardedRef, ) => { - if (props.items) { - return ; - } - - return ; + return ; }; const Combobox = fixedForwardRef(ComboboxComponent); diff --git a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.Old.component-test.tsx b/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.Old.component-test.tsx deleted file mode 100644 index 8007cf4d5c9..00000000000 --- a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.Old.component-test.tsx +++ /dev/null @@ -1,457 +0,0 @@ -import React from 'react'; -import type { FC, PropsWithChildren } from 'react'; -import { createGlobalStyle } from 'styled-components'; -import { standard as standardTypo } from '@salutejs/plasma-typo'; -import { IconDone as IconDoneBase, IconTrash as IconTrashBase } from '@salutejs/plasma-icons'; -import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe } from '@salutejs/plasma-cy-utils'; - -const IconDone = () => ; -const IconTrash = () => ; -const StandardTypoStyle = createGlobalStyle(standardTypo); - -const getSelectItems = (slug: string, elemCount: number) => - [...Array(elemCount).keys()].map((num) => ({ - value: `${slug}_${num}`, - child: `${slug} ${num}`, - })); - -describe('plasma-b2c: ComboboxOld', () => { - const Combobox = getComponent('Combobox'); - const Checkbox = getComponent('Checkbox'); - const ComboboxItem = getComponent('ComboboxItem'); - - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( - - - {children} - - ); - - it('single', () => { - mount( - - - - - - - {getSelectItems('item', 4).map((item) => ( - - ))} - - - - - {getSelectItems('item', 3).map((item) => ( - : undefined} - /> - ))} - - , - ); - - cy.matchImageSnapshot({ - failureThreshold: 0.01, - failureThresholdType: 'percent', - }); - }); - - it('multiple', () => { - cy.viewport(500, 950); - mount( - - - - - - - {getSelectItems('item', 4).map((item) => ( - } /> - ))} - - - - - {getSelectItems('item', 3).map((item) => ( - } /> - ))} - - - - {getSelectItems('item', 4).map((item) => ( - } /> - ))} - - - - - {getSelectItems('item', 3).map((item) => ( - } /> - ))} - - , - ); - - cy.matchImageSnapshot({ - failureThreshold: 0.01, - failureThresholdType: 'percent', - }); - }); - - it('sizes', () => { - cy.viewport(500, 950); - mount( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - , - ); - - cy.matchImageSnapshot({ - failureThreshold: 0.01, - failureThresholdType: 'percent', - }); - }); - - it('views', () => { - mount( - - - - - - - {getSelectItems('item', 4).map((item) => ( - - ))} - - - - {getSelectItems('item', 4).map((item) => ( - - ))} - - - - - - - - , - ); - - cy.matchImageSnapshot({ - failureThreshold: 0.01, - failureThresholdType: 'percent', - }); - }); -}); - -describe('plasma-b2c: ComboboxOld keyboard navigation', () => { - const Combobox = getComponent('Combobox'); - const Checkbox = getComponent('Checkbox'); - const ComboboxItem = getComponent('ComboboxItem'); - const Button = getComponent('Button'); - - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( - - - {children} - - ); - - it('single', () => { - function Demo() { - const [value, setValue] = React.useState(undefined); - const handleOnChange = React.useCallback((newValue) => { - setValue(newValue); - }, []); - - return ( - <> - - - {getSelectItems('item', 2).map((item) => ( - : undefined} - /> - ))} - {getSelectItems('extra item', 3).map((item) => ( - : undefined} - /> - ))} - - - - ); - } - - mount( - - - , - ); - - cy.get('body').tab(); - - // открытие по ArrowDown - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.get('.popover-root').should('be.visible'); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - - // закрытие по Escape - cy.focused().trigger('keydown', { code: 'Escape' }); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.popover-root').should('not.be.visible'); - - // открытие по ArrowUp - cy.focused().trigger('keydown', { code: 'ArrowUp' }); - cy.get('.popover-root').should('be.visible'); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - - // навигация по выпадающему меню ArrowDown / ArrowUp - cy.focused() - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowUp' }) - .trigger('keydown', { code: 'ArrowUp' }); - cy.get('[data-value="item_0"]').should('be.focused'); - - // зацикливание через верх - cy.focused() - .trigger('keydown', { code: 'ArrowUp' }) - .trigger('keydown', { code: 'ArrowUp' }) - .trigger('keydown', { code: 'ArrowUp' }); - cy.get('[data-value="extra item_1"]').should('be.focused'); - - // зацикливание через низ - cy.focused() - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }); - cy.get('[data-value="item_0"]').should('be.focused'); - - // выбор элемента по Enter - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.combobox-target-input').should('have.attr', 'value', 'item 0'); - cy.get('.popover-root').should('not.be.visible'); - - // проверка чекбокса у выбранного значения - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - cy.get('[data-value="item_0"]').find('div').first().should('not.be.empty'); - - // очистка выбранного значения - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.combobox-target-input').should('have.attr', 'value', ''); - cy.get('.popover-root').should('not.be.visible'); - - // элементы не найдены - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - cy.focused().type('not item'); - cy.get('.popover-root').contains('Элементы не найдены'); - - // сработал фильтр и отобразил значения - cy.focused().clear(); - cy.focused().type('extra'); - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.get('[data-value="item_0"]').should('not.exist'); - cy.get('[data-value="item_1"]').should('not.exist'); - cy.get('[data-value="extra item_0"]').should('be.visible'); - cy.get('[data-value="extra item_1"]').should('be.visible'); - cy.get('[data-value="extra item_2"]').should('be.visible'); - - // закрытие по Tab и фокус на следующий элемент - cy.focused().trigger('keydown', { code: 'Tab' }); - cy.get('#button-focus').should('be.focused'); - cy.get('.popover-root').should('not.be.visible'); - - cy.matchImageSnapshot(); - }); - - it('multiple', () => { - function Demo() { - const [value, setValue] = React.useState(['item_0']); - const handleOnChange = React.useCallback((newValue) => { - setValue(newValue); - }, []); - - return ( - <> - - - {getSelectItems('item', 2).map((item) => ( - } /> - ))} - {getSelectItems('extra item', 3).map((item) => ( - } /> - ))} - - - - ); - } - - mount( - - - , - ); - - cy.get('body').tab(); - - // открытие по стрелке ArrowDown - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); - cy.get('.popover-root').should('be.visible'); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); - - // выбор нескольких элементов по ArrowDown и Enter - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.get('.popover-target').find('button').should('have.length', 3); - cy.get('[data-value="item_1"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('be.checked'); - cy.get('.popover-root').should('be.visible'); - - // фокус на последний чип по ArrowLeft - cy.focused().trigger('keydown', { code: 'ArrowLeft' }); - cy.get('.popover-target').find('button').eq(2).should('be.focused'); - - // фокус на первый чип по ArrowLeft до конца - cy.focused() - .trigger('keydown', { code: 'ArrowLeft' }) - .trigger('keydown', { code: 'ArrowLeft' }) - .trigger('keydown', { code: 'ArrowLeft' }) - .trigger('keydown', { code: 'ArrowLeft' }); - cy.get('.popover-target').find('button').eq(0).should('be.focused'); - - // фокус на инпуте по ArrowRight до конца - cy.focused() - .trigger('keydown', { code: 'ArrowRight' }) - .trigger('keydown', { code: 'ArrowRight' }) - .trigger('keydown', { code: 'ArrowRight' }) - .trigger('keydown', { code: 'ArrowRight' }); - cy.get('.combobox-target-input').should('be.focused'); - - // удалён последний чип по Backspace из фокуса на инпуте - cy.focused().trigger('keydown', { code: 'Backspace' }); - cy.get('.popover-target').find('button').should('have.length', 2); - cy.get('[data-value="item_1"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('not.be.checked'); - cy.get('.popover-root').should('be.visible'); - - // фокус на первый чип по ArrowLeft - cy.focused().trigger('keydown', { code: 'ArrowLeft' }).trigger('keydown', { code: 'ArrowLeft' }); - cy.get('.popover-target').find('button').eq(0).should('be.focused'); - - // удалён первый чип по Backspace - cy.focused().trigger('keydown', { code: 'Backspace' }); - cy.get('.popover-target').find('button').should('have.length', 1); - cy.get('[data-value="item_1"]').find('input').should('not.be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('not.be.checked'); - cy.get('.popover-root').should('be.visible'); - - // удалён оставшийся по Backspace и фокус на инпут - cy.focused().trigger('keydown', { code: 'Backspace' }); - cy.get('.popover-target').find('button').should('have.length', 0); - cy.get('[data-value="item_1"]').find('input').should('not.be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('not.be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('not.be.checked'); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.popover-root').should('be.visible'); - - // введено значение инпут и выбраны отфильтрованные элементы - cy.focused().type('item 1'); - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.get('.popover-target').find('button').should('have.length', 2); - cy.get('[data-value="item_1"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('be.checked'); - - // очистка выбранного значения - cy.focused().type(' '); - cy.focused().clear(); - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.get('.popover-target').find('button').should('have.length', 0); - - // закрытие по Tab и фокус на следующий элемент - cy.focused().trigger('keydown', { code: 'Tab' }); - cy.get('#button-focus').should('be.focused'); - cy.get('.popover-root').should('not.be.visible'); - - cy.matchImageSnapshot(); - }); -}); diff --git a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.config.ts b/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.config.ts deleted file mode 100644 index c205800f242..00000000000 --- a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.config.ts +++ /dev/null @@ -1,320 +0,0 @@ -import { css, comboboxOldTokens as comboboxTokens } from '@salutejs/plasma-new-hope/styled-components'; - -export const config = { - defaults: { - view: 'default', - size: 'm', - }, - variations: { - size: { - xs: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.5rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 0.5rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 0.375rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1rem; - ${comboboxTokens.itemPaddingTop}: 0.5rem; - ${comboboxTokens.itemPaddingRight}: 0.5rem; - ${comboboxTokens.itemPaddingBottom}: 0.5rem; - ${comboboxTokens.itemPaddingLeft}: 0.375rem; - ${comboboxTokens.itemBorderRadius}: 0.375rem; - ${comboboxTokens.itemContentLeftWidth}: 1.25rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.125rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 1.25rem; - ${comboboxTokens.chipPadding}: 0 0.375rem 0 0.625rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.25rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${comboboxTokens.targetArrowRight}: 0.5rem; - ${comboboxTokens.targetHeight}: 2rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.5rem; - ${comboboxTokens.targetPadding}: 0 2.5rem 0 0.75rem; - ${comboboxTokens.targetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - s: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.625rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 0.75rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 0.75rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1.5rem; - ${comboboxTokens.itemPaddingTop}: 0.5rem; - ${comboboxTokens.itemPaddingRight}: 0.75rem; - ${comboboxTokens.itemPaddingBottom}: 0.5rem; - ${comboboxTokens.itemPaddingLeft}: 0.75rem; - ${comboboxTokens.itemBorderRadius}: 0.5rem; - ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.25rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 1.75rem; - ${comboboxTokens.chipPadding}: 0 0.5rem 0 0.75rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.375rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); - - ${comboboxTokens.targetArrowRight}: 0.75rem; - ${comboboxTokens.targetHeight}: 2.5rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.625rem; - ${comboboxTokens.targetPadding}: 0 3rem 0 1rem; - ${comboboxTokens.targetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); - `, - m: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.75rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 0.875rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 0.875rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1.5rem; - ${comboboxTokens.itemPaddingTop}: 0.75rem; - ${comboboxTokens.itemPaddingRight}: 0.875rem; - ${comboboxTokens.itemPaddingBottom}: 0.75rem; - ${comboboxTokens.itemPaddingLeft}: 0.875rem; - ${comboboxTokens.itemBorderRadius}: 0.625rem; - ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.375rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 2.25rem; - ${comboboxTokens.chipPadding}: 0 0.875rem 0 0.625rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.5rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${comboboxTokens.targetArrowRight}: 0.875rem; - ${comboboxTokens.targetHeight}: 3rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.75rem; - ${comboboxTokens.targetPadding}: 0 3.25rem 0 1.25rem; - ${comboboxTokens.targetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - l: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.875rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 1rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 1rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1.5rem; - ${comboboxTokens.itemPaddingTop}: 1rem; - ${comboboxTokens.itemPaddingRight}: 1rem; - ${comboboxTokens.itemPaddingBottom}: 1rem; - ${comboboxTokens.itemPaddingLeft}: 1rem; - ${comboboxTokens.itemBorderRadius}: 0.75rem; - ${comboboxTokens.itemContentLeftWidth}: 1.875rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.5rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 2.75rem; - ${comboboxTokens.chipPadding}: 0 0.75rem 0 1rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.625rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${comboboxTokens.targetArrowRight}: 1rem; - ${comboboxTokens.targetHeight}: 3.5rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.875rem; - ${comboboxTokens.targetPadding}: 0 3.5rem 0 1.5rem; - ${comboboxTokens.targetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); - `, - }, - view: { - default: css` - ${comboboxTokens.targetColor}: var(--text-primary); - ${comboboxTokens.targetLabelColor}: var(--text-secondary); - ${comboboxTokens.targetArrowColor}: var(--text-secondary); - ${comboboxTokens.targetBackgroundColor}: var(--surface-transparent-primary); - ${comboboxTokens.targetBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${comboboxTokens.targetBackgroundColorActive}: var(--surface-transparent-primary-active); - ${comboboxTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - - ${comboboxTokens.background}: var(--surface-solid-card-brightness); - ${comboboxTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); /* TODO: Забирать из токена --shadow-down-soft-s */ - - ${comboboxTokens.itemBackground}: transparent; - ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemColor}: var(--text-primary); - ${comboboxTokens.itemContentLeftColor}: var(--text-accent); - - ${comboboxTokens.chipCloseIconColor}: var(--text-secondary); - ${comboboxTokens.chipColor}: var(--text-primary); - ${comboboxTokens.chipBackground}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorHover}: var(--text-primary); - ${comboboxTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${comboboxTokens.chipColorActive}: var(--text-primary); - ${comboboxTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${comboboxTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnly}: var(--text-primary); - ${comboboxTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnlyHover}: var(--text-primary); - ${comboboxTokens.chipOpacityReadonly}: 0.72; - - ${comboboxTokens.disabledOpacity}: 0.4; - ${comboboxTokens.focusColor}: var(--surface-accent); - `, - }, - }, -}; diff --git a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.stories.tsx b/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.stories.tsx deleted file mode 100644 index 5d6490d3b4c..00000000000 --- a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.stories.tsx +++ /dev/null @@ -1,266 +0,0 @@ -import React, { useState } from 'react'; -import type { ComponentProps } from 'react'; -import type { Meta, StoryObj } from '@storybook/react-vite'; -import { action } from 'storybook/actions'; -import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { IconDone } from '@salutejs/plasma-icons'; - -import { Checkbox } from '../../Checkbox/Checkbox'; - -import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox'; - -const placements: Array = ['top', 'bottom', 'right', 'left', 'auto']; -const enumerations: Array = ['comma', 'chip']; -const sizes: Array = ['xs', 's', 'm', 'l']; -const views: Array = ['default']; - -type StorySelectPropsCustom = { - skidding?: number; - distance?: number; -}; - -type ComboboxPrimitiveValue = string | number | boolean; - -type StorySelectProps = ComponentProps & StorySelectPropsCustom; - -const meta: Meta = { - title: 'Data Entry/Combobox', - decorators: [InSpacingDecorator], - component: Combobox, - argTypes: { - placement: { - options: placements, - control: { - type: 'select', - }, - }, - enumerationType: { - options: enumerations, - control: { - type: 'select', - }, - }, - size: { - options: sizes, - control: { - type: 'select', - }, - }, - view: { - options: views, - control: { - type: 'select', - }, - }, - }, - args: { - usePortal: false, - disabled: false, - readOnly: false, - label: 'Label', - placeholder: 'Placeholder', - enumerationType: 'comma', - size: 'm', - view: 'default', - placement: 'bottom', - }, -}; - -export default meta; - -const onChangeAction = action('onChange'); - -const iconDoneToSelectSizeMap: Record = { - xs: 'xs', - s: 's', - m: 's', - l: 's', -}; - -const checkboxToSelectSizeMap: Record = { - xs: 's', - s: 'm', - m: 'm', - l: 'm', -}; - -const getSelectItems = (slug: string, elemCount: number) => - [...Array(elemCount).keys()].map((num) => ({ - value: `${slug}_${num}`, - child: `${slug} ${num}`, - })); - -const SingleDemo = (args: StorySelectProps) => { - const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args; - - const [value, setValue] = useState('item_0'); - - const onChangeValue = (newValue?: ComboboxPrimitiveValue) => { - setValue(newValue); - onChangeAction(newValue); - }; - - return ( -
-

Combobox с единичным выбором

- - - {getSelectItems('item', 6).map((item) => ( - - ) : undefined - } - value={item.value} - text={item.child} - /> - ))} - -
- ); -}; - -const MultipleDemo = (args: StorySelectProps) => { - const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args; - - const [value, setValue] = useState | undefined>(['item_2', 'item_3']); - - const onChangeValue = (newValue?: Array) => { - setValue(newValue); - onChangeAction(newValue); - }; - - return ( -
-

Combobox с множественным выбором

- - - {getSelectItems('item', 6).map((item) => ( - } - value={item.value} - text={item.child} - /> - ))} - -
- ); -}; - -const AddCustomItemDemo = (args: StorySelectProps) => { - const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args; - - const [opened, setOpened] = useState(false); - const [items, setItems] = useState(getSelectItems('item', 1)); - const [value, setValue] = useState('item_0'); - - const onChangeValue = (newValue?: ComboboxPrimitiveValue) => { - setValue(newValue); - onChangeAction(newValue); - }; - - const onToggle = (openValue: boolean) => setOpened(openValue); - - const onKeyDown = (event: React.KeyboardEvent) => { - const { code } = event; - - if (code === 'Enter') { - const newValue = (event.target as HTMLInputElement).value; - const newItems = [...items]; - - if (newItems.find((item) => item.child === newValue)) { - return; - } - - newItems.push({ - value: `${newValue}_`, - child: (newValue || '').toString(), - }); - - setOpened(false); - setItems(newItems); - } - }; - - const filterFunction = () => true; - - return ( -
-

Combobox с добавлением пользовательского элемента

- - - - {items.map((item) => ( - - ) : undefined - } - value={item.value} - text={item.child} - /> - ))} - -
- ); -}; - -export const Legacy: StoryObj = { - render: (args) => ( - <> -

Combobox на композиционной архитектуре (deprecated)

- - - - - ), -}; diff --git a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.ts b/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.ts deleted file mode 100644 index c4c7c27528e..00000000000 --- a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { - comboboxOldConfig, - comboboxItemConfig, - comboboxDividerConfig, - comboboxFooterConfig, - comboboxGroupConfig, - comboboxHeaderConfig, - component, - mergeConfig, -} from '@salutejs/plasma-new-hope/styled-components'; - -import { config } from './Combobox.config'; - -const mergedConfig = mergeConfig(comboboxOldConfig, config); -export const Combobox = component(mergedConfig); - -const mergedItemConfig = mergeConfig(comboboxItemConfig); -export const ComboboxItem = component(mergedItemConfig); - -const mergedDividerConfig = mergeConfig(comboboxDividerConfig); -export const ComboboxDivider = component(mergedDividerConfig); - -const mergedFooterConfig = mergeConfig(comboboxFooterConfig); -export const ComboboxFooter = component(mergedFooterConfig); - -const mergedGroupConfig = mergeConfig(comboboxGroupConfig); -export const ComboboxGroup = component(mergedGroupConfig); - -const mergedHeaderConfig = mergeConfig(comboboxHeaderConfig); -export const ComboboxHeader = component(mergedHeaderConfig); diff --git a/packages/plasma-b2c/src/components/Combobox/Legacy/index.ts b/packages/plasma-b2c/src/components/Combobox/Legacy/index.ts deleted file mode 100644 index cfafc9b3851..00000000000 --- a/packages/plasma-b2c/src/components/Combobox/Legacy/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Combobox, ComboboxDivider, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxItem } from './Combobox'; diff --git a/packages/plasma-b2c/src/components/Combobox/index.ts b/packages/plasma-b2c/src/components/Combobox/index.ts index 2f0a6dd4a57..ddd27771b33 100644 --- a/packages/plasma-b2c/src/components/Combobox/index.ts +++ b/packages/plasma-b2c/src/components/Combobox/index.ts @@ -1,5 +1,2 @@ -export { ComboboxDivider, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxItem } from './Legacy'; - -export type { ComboboxOldProps as ComboboxProps, ComboboxItemOption } from '@salutejs/plasma-new-hope'; - +export type { ComboboxItemOption } from '@salutejs/plasma-new-hope'; export { Combobox } from './Combobox'; diff --git a/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx b/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx index 54d745f147d..57e8c393611 100644 --- a/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx +++ b/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx @@ -556,24 +556,6 @@ describe('plasma-b2c: Dropdown', () => { cy.matchImageSnapshot(); }); - it('prop: hasArrow', () => { - cy.viewport(1000, 500); - - mount( - - - - - ); - } - - mount( - - - , - ); - - cy.get('body').tab(); - - // открытие по ArrowDown - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.get('.popover-root').should('be.visible'); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - - // закрытие по Escape - cy.focused().trigger('keydown', { code: 'Escape' }); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.popover-root').should('not.be.visible'); - - // открытие по ArrowUp - cy.focused().trigger('keydown', { code: 'ArrowUp' }); - cy.get('.popover-root').should('be.visible'); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - - // навигация по выпадающему меню ArrowDown / ArrowUp - cy.focused() - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowUp' }) - .trigger('keydown', { code: 'ArrowUp' }); - cy.get('[data-value="item_0"]').should('be.focused'); - - // зацикливание через верх - cy.focused() - .trigger('keydown', { code: 'ArrowUp' }) - .trigger('keydown', { code: 'ArrowUp' }) - .trigger('keydown', { code: 'ArrowUp' }); - cy.get('[data-value="extra item_1"]').should('be.focused'); - - // зацикливание через низ - cy.focused() - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }) - .trigger('keydown', { code: 'ArrowDown' }); - cy.get('[data-value="item_0"]').should('be.focused'); - - // выбор элемента по Enter - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.combobox-target-input').should('have.attr', 'value', 'item 0'); - cy.get('.popover-root').should('not.be.visible'); - - // проверка чекбокса у выбранного значения - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - cy.get('[data-value="item_0"]').find('div').first().should('not.be.empty'); - - // очистка выбранного значения - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.combobox-target-input').should('have.attr', 'value', ''); - cy.get('.popover-root').should('not.be.visible'); - - // элементы не найдены - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(0); - cy.focused().type('not item'); - cy.get('.popover-root').contains('Элементы не найдены'); - - // сработал фильтр и отобразил значения - cy.focused().clear(); - cy.focused().type('extra'); - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.get('[data-value="item_0"]').should('not.exist'); - cy.get('[data-value="item_1"]').should('not.exist'); - cy.get('[data-value="extra item_0"]').should('be.visible'); - cy.get('[data-value="extra item_1"]').should('be.visible'); - cy.get('[data-value="extra item_2"]').should('be.visible'); - - // закрытие по Tab и фокус на следующий элемент - cy.focused().trigger('keydown', { code: 'Tab' }); - cy.get('#button-focus').should('be.focused'); - cy.get('.popover-root').should('not.be.visible'); - - cy.matchImageSnapshot(); - }); - - it('multiple', () => { - function Demo() { - const [value, setValue] = React.useState(['item_0']); - const handleOnChange = React.useCallback((newValue) => { - setValue(newValue); - }, []); - - return ( - <> - - - {getSelectItems('item', 2).map((item) => ( - } /> - ))} - {getSelectItems('extra item', 3).map((item) => ( - } /> - ))} - - - - ); - } - - mount( - - - , - ); - - cy.get('body').tab(); - - // открытие по стрелке ArrowDown - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); - cy.get('.popover-root').should('be.visible'); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); - - // выбор нескольких элементов по ArrowDown и Enter - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.get('.popover-target').find('button').should('have.length', 3); - cy.get('[data-value="item_1"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('be.checked'); - cy.get('.popover-root').should('be.visible'); - - // фокус на последний чип по ArrowLeft - cy.focused().trigger('keydown', { code: 'ArrowLeft' }); - cy.get('.popover-target').find('button').eq(2).should('be.focused'); - - // фокус на первый чип по ArrowLeft до конца - cy.focused() - .trigger('keydown', { code: 'ArrowLeft' }) - .trigger('keydown', { code: 'ArrowLeft' }) - .trigger('keydown', { code: 'ArrowLeft' }) - .trigger('keydown', { code: 'ArrowLeft' }); - cy.get('.popover-target').find('button').eq(0).should('be.focused'); - - // фокус на инпуте по ArrowRight до конца - cy.focused() - .trigger('keydown', { code: 'ArrowRight' }) - .trigger('keydown', { code: 'ArrowRight' }) - .trigger('keydown', { code: 'ArrowRight' }) - .trigger('keydown', { code: 'ArrowRight' }); - cy.get('.combobox-target-input').should('be.focused'); - - // удалён последний чип по Backspace из фокуса на инпуте - cy.focused().trigger('keydown', { code: 'Backspace' }); - cy.get('.popover-target').find('button').should('have.length', 2); - cy.get('[data-value="item_1"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('not.be.checked'); - cy.get('.popover-root').should('be.visible'); - - // фокус на первый чип по ArrowLeft - cy.focused().trigger('keydown', { code: 'ArrowLeft' }).trigger('keydown', { code: 'ArrowLeft' }); - cy.get('.popover-target').find('button').eq(0).should('be.focused'); - - // удалён первый чип по Backspace - cy.focused().trigger('keydown', { code: 'Backspace' }); - cy.get('.popover-target').find('button').should('have.length', 1); - cy.get('[data-value="item_1"]').find('input').should('not.be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('not.be.checked'); - cy.get('.popover-root').should('be.visible'); - - // удалён оставшийся по Backspace и фокус на инпут - cy.focused().trigger('keydown', { code: 'Backspace' }); - cy.get('.popover-target').find('button').should('have.length', 0); - cy.get('[data-value="item_1"]').find('input').should('not.be.checked'); - cy.get('[data-value="extra item_0"]').find('input').should('not.be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('not.be.checked'); - cy.get('.combobox-target-input').should('be.focused'); - cy.get('.popover-root').should('be.visible'); - - // введено значение инпут и выбраны отфильтрованные элементы - cy.focused().type('item 1'); - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.focused().trigger('keydown', { code: 'ArrowDown' }).trigger('keydown', { code: 'Enter' }); - cy.get('.popover-target').find('button').should('have.length', 2); - cy.get('[data-value="item_1"]').find('input').should('be.checked'); - cy.get('[data-value="extra item_1"]').find('input').should('be.checked'); - - // очистка выбранного значения - cy.focused().type(' '); - cy.focused().clear(); - cy.focused().trigger('keydown', { code: 'ArrowDown' }); - cy.focused().trigger('keydown', { code: 'Enter' }); - cy.get('.popover-target').find('button').should('have.length', 0); - - // закрытие по Tab и фокус на следующий элемент - cy.focused().trigger('keydown', { code: 'Tab' }); - cy.get('#button-focus').should('be.focused'); - cy.get('.popover-root').should('not.be.visible'); - - cy.matchImageSnapshot(); - }); -}); diff --git a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.config.ts b/packages/plasma-web/src/components/Combobox/Legacy/Combobox.config.ts deleted file mode 100644 index b00d00ac47a..00000000000 --- a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.config.ts +++ /dev/null @@ -1,320 +0,0 @@ -import { css, comboboxOldTokens as comboboxTokens } from '@salutejs/plasma-new-hope/styled-components'; - -export const config = { - defaults: { - view: 'default', - size: 'm', - }, - variations: { - size: { - xs: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.5rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 0.5rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 0.375rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1rem; - ${comboboxTokens.itemPaddingTop}: 0.5rem; - ${comboboxTokens.itemPaddingRight}: 0.5rem; - ${comboboxTokens.itemPaddingBottom}: 0.5rem; - ${comboboxTokens.itemPaddingLeft}: 0.375rem; - ${comboboxTokens.itemBorderRadius}: 0.375rem; - ${comboboxTokens.itemContentLeftWidth}: 1.25rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.125rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 1.25rem; - ${comboboxTokens.chipPadding}: 0 0.375rem 0 0.625rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.25rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${comboboxTokens.targetArrowRight}: 0.5rem; - ${comboboxTokens.targetHeight}: 2rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.5rem; - ${comboboxTokens.targetPadding}: 0 2.5rem 0 0.75rem; - ${comboboxTokens.targetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - s: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.625rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 0.75rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 0.75rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1.5rem; - ${comboboxTokens.itemPaddingTop}: 0.5rem; - ${comboboxTokens.itemPaddingRight}: 0.75rem; - ${comboboxTokens.itemPaddingBottom}: 0.5rem; - ${comboboxTokens.itemPaddingLeft}: 0.75rem; - ${comboboxTokens.itemBorderRadius}: 0.5rem; - ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.25rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 1.75rem; - ${comboboxTokens.chipPadding}: 0 0.5rem 0 0.75rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.375rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); - - ${comboboxTokens.targetArrowRight}: 0.75rem; - ${comboboxTokens.targetHeight}: 2.5rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.625rem; - ${comboboxTokens.targetPadding}: 0 3rem 0 1rem; - ${comboboxTokens.targetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); - `, - m: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.75rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 0.875rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 0.875rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1.5rem; - ${comboboxTokens.itemPaddingTop}: 0.75rem; - ${comboboxTokens.itemPaddingRight}: 0.875rem; - ${comboboxTokens.itemPaddingBottom}: 0.75rem; - ${comboboxTokens.itemPaddingLeft}: 0.875rem; - ${comboboxTokens.itemBorderRadius}: 0.625rem; - ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.375rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 2.25rem; - ${comboboxTokens.chipPadding}: 0 0.875rem 0 0.625rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.5rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${comboboxTokens.targetArrowRight}: 0.875rem; - ${comboboxTokens.targetHeight}: 3rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.75rem; - ${comboboxTokens.targetPadding}: 0 3.25rem 0 1.25rem; - ${comboboxTokens.targetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - l: css` - ${comboboxTokens.width}: 100%; - ${comboboxTokens.height}: auto; - ${comboboxTokens.borderRadius}: 0.875rem; - ${comboboxTokens.paddingTop}: 0.125rem; - ${comboboxTokens.paddingRight}: 0.125rem; - ${comboboxTokens.paddingBottom}: 0.125rem; - ${comboboxTokens.paddingLeft}: 0.125rem; - - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); - ${comboboxTokens.dividerHeight}: 0.063rem; - ${comboboxTokens.dividerMarginTop}: 0; - ${comboboxTokens.dividerMarginRight}: 1rem; - ${comboboxTokens.dividerMarginBottom}: 0; - ${comboboxTokens.dividerMarginLeft}: 1rem; - - ${comboboxTokens.itemWidth}: auto; - ${comboboxTokens.itemHeight}: 1.5rem; - ${comboboxTokens.itemPaddingTop}: 1rem; - ${comboboxTokens.itemPaddingRight}: 1rem; - ${comboboxTokens.itemPaddingBottom}: 1rem; - ${comboboxTokens.itemPaddingLeft}: 1rem; - ${comboboxTokens.itemBorderRadius}: 0.75rem; - ${comboboxTokens.itemContentLeftWidth}: 1.875rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); - - ${comboboxTokens.chipGap}: 0.25rem; - ${comboboxTokens.chipBorderRadius}: 0.5rem; - ${comboboxTokens.chipWidth}: auto; - ${comboboxTokens.chipHeight}: 2.75rem; - ${comboboxTokens.chipPadding}: 0 0.75rem 0 1rem; - ${comboboxTokens.chipClearContentMarginLeft}: 0.625rem; - ${comboboxTokens.chipClearContentMarginRight}: 0rem; - ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${comboboxTokens.targetArrowRight}: 1rem; - ${comboboxTokens.targetHeight}: 3.5rem; - ${comboboxTokens.targetWidth}: 100%; - ${comboboxTokens.targetRadius}: 0.875rem; - ${comboboxTokens.targetPadding}: 0 3.5rem 0 1.5rem; - ${comboboxTokens.targetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${comboboxTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; - ${comboboxTokens.targetInnerTop}: 0.5rem; - ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); - `, - }, - view: { - default: css` - ${comboboxTokens.targetColor}: var(--text-primary); - ${comboboxTokens.targetLabelColor}: var(--text-secondary); - ${comboboxTokens.targetArrowColor}: var(--text-secondary); - ${comboboxTokens.targetBorderColor}: var(--text-tertiary); - ${comboboxTokens.targetBorderColorHover}: var(--text-tertiary-hover); - ${comboboxTokens.targetBorderColorActive}: var(--text-tertiary-active); - ${comboboxTokens.targetBorderColorOpen}: var(--text-accent); - - ${comboboxTokens.background}: var(--surface-solid-card-brightness); - ${comboboxTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); /* TODO: Забирать из токена --shadow-down-soft-s */ - - ${comboboxTokens.itemBackground}: transparent; - ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemColor}: var(--text-primary); - ${comboboxTokens.itemContentLeftColor}: var(--text-accent); - - ${comboboxTokens.chipCloseIconColor}: var(--text-secondary); - ${comboboxTokens.chipColor}: var(--text-primary); - ${comboboxTokens.chipBackground}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorHover}: var(--text-primary); - ${comboboxTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${comboboxTokens.chipColorActive}: var(--text-primary); - ${comboboxTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${comboboxTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnly}: var(--text-primary); - ${comboboxTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnlyHover}: var(--text-primary); - ${comboboxTokens.chipOpacityReadonly}: 0.72; - - ${comboboxTokens.disabledOpacity}: 0.4; - ${comboboxTokens.focusColor}: var(--surface-accent); - `, - }, - }, -}; diff --git a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.stories.tsx b/packages/plasma-web/src/components/Combobox/Legacy/Combobox.stories.tsx deleted file mode 100644 index 5d6490d3b4c..00000000000 --- a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.stories.tsx +++ /dev/null @@ -1,266 +0,0 @@ -import React, { useState } from 'react'; -import type { ComponentProps } from 'react'; -import type { Meta, StoryObj } from '@storybook/react-vite'; -import { action } from 'storybook/actions'; -import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { IconDone } from '@salutejs/plasma-icons'; - -import { Checkbox } from '../../Checkbox/Checkbox'; - -import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox'; - -const placements: Array = ['top', 'bottom', 'right', 'left', 'auto']; -const enumerations: Array = ['comma', 'chip']; -const sizes: Array = ['xs', 's', 'm', 'l']; -const views: Array = ['default']; - -type StorySelectPropsCustom = { - skidding?: number; - distance?: number; -}; - -type ComboboxPrimitiveValue = string | number | boolean; - -type StorySelectProps = ComponentProps & StorySelectPropsCustom; - -const meta: Meta = { - title: 'Data Entry/Combobox', - decorators: [InSpacingDecorator], - component: Combobox, - argTypes: { - placement: { - options: placements, - control: { - type: 'select', - }, - }, - enumerationType: { - options: enumerations, - control: { - type: 'select', - }, - }, - size: { - options: sizes, - control: { - type: 'select', - }, - }, - view: { - options: views, - control: { - type: 'select', - }, - }, - }, - args: { - usePortal: false, - disabled: false, - readOnly: false, - label: 'Label', - placeholder: 'Placeholder', - enumerationType: 'comma', - size: 'm', - view: 'default', - placement: 'bottom', - }, -}; - -export default meta; - -const onChangeAction = action('onChange'); - -const iconDoneToSelectSizeMap: Record = { - xs: 'xs', - s: 's', - m: 's', - l: 's', -}; - -const checkboxToSelectSizeMap: Record = { - xs: 's', - s: 'm', - m: 'm', - l: 'm', -}; - -const getSelectItems = (slug: string, elemCount: number) => - [...Array(elemCount).keys()].map((num) => ({ - value: `${slug}_${num}`, - child: `${slug} ${num}`, - })); - -const SingleDemo = (args: StorySelectProps) => { - const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args; - - const [value, setValue] = useState('item_0'); - - const onChangeValue = (newValue?: ComboboxPrimitiveValue) => { - setValue(newValue); - onChangeAction(newValue); - }; - - return ( -
-

Combobox с единичным выбором

- - - {getSelectItems('item', 6).map((item) => ( - - ) : undefined - } - value={item.value} - text={item.child} - /> - ))} - -
- ); -}; - -const MultipleDemo = (args: StorySelectProps) => { - const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args; - - const [value, setValue] = useState | undefined>(['item_2', 'item_3']); - - const onChangeValue = (newValue?: Array) => { - setValue(newValue); - onChangeAction(newValue); - }; - - return ( -
-

Combobox с множественным выбором

- - - {getSelectItems('item', 6).map((item) => ( - } - value={item.value} - text={item.child} - /> - ))} - -
- ); -}; - -const AddCustomItemDemo = (args: StorySelectProps) => { - const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args; - - const [opened, setOpened] = useState(false); - const [items, setItems] = useState(getSelectItems('item', 1)); - const [value, setValue] = useState('item_0'); - - const onChangeValue = (newValue?: ComboboxPrimitiveValue) => { - setValue(newValue); - onChangeAction(newValue); - }; - - const onToggle = (openValue: boolean) => setOpened(openValue); - - const onKeyDown = (event: React.KeyboardEvent) => { - const { code } = event; - - if (code === 'Enter') { - const newValue = (event.target as HTMLInputElement).value; - const newItems = [...items]; - - if (newItems.find((item) => item.child === newValue)) { - return; - } - - newItems.push({ - value: `${newValue}_`, - child: (newValue || '').toString(), - }); - - setOpened(false); - setItems(newItems); - } - }; - - const filterFunction = () => true; - - return ( -
-

Combobox с добавлением пользовательского элемента

- - - - {items.map((item) => ( - - ) : undefined - } - value={item.value} - text={item.child} - /> - ))} - -
- ); -}; - -export const Legacy: StoryObj = { - render: (args) => ( - <> -

Combobox на композиционной архитектуре (deprecated)

- - - - - ), -}; diff --git a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.ts b/packages/plasma-web/src/components/Combobox/Legacy/Combobox.ts deleted file mode 100644 index c4c7c27528e..00000000000 --- a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { - comboboxOldConfig, - comboboxItemConfig, - comboboxDividerConfig, - comboboxFooterConfig, - comboboxGroupConfig, - comboboxHeaderConfig, - component, - mergeConfig, -} from '@salutejs/plasma-new-hope/styled-components'; - -import { config } from './Combobox.config'; - -const mergedConfig = mergeConfig(comboboxOldConfig, config); -export const Combobox = component(mergedConfig); - -const mergedItemConfig = mergeConfig(comboboxItemConfig); -export const ComboboxItem = component(mergedItemConfig); - -const mergedDividerConfig = mergeConfig(comboboxDividerConfig); -export const ComboboxDivider = component(mergedDividerConfig); - -const mergedFooterConfig = mergeConfig(comboboxFooterConfig); -export const ComboboxFooter = component(mergedFooterConfig); - -const mergedGroupConfig = mergeConfig(comboboxGroupConfig); -export const ComboboxGroup = component(mergedGroupConfig); - -const mergedHeaderConfig = mergeConfig(comboboxHeaderConfig); -export const ComboboxHeader = component(mergedHeaderConfig); diff --git a/packages/plasma-web/src/components/Combobox/Legacy/index.ts b/packages/plasma-web/src/components/Combobox/Legacy/index.ts deleted file mode 100644 index cfafc9b3851..00000000000 --- a/packages/plasma-web/src/components/Combobox/Legacy/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Combobox, ComboboxDivider, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxItem } from './Combobox'; diff --git a/packages/plasma-web/src/components/Combobox/index.ts b/packages/plasma-web/src/components/Combobox/index.ts index bd96fcfe1fa..f0faecdaf18 100644 --- a/packages/plasma-web/src/components/Combobox/index.ts +++ b/packages/plasma-web/src/components/Combobox/index.ts @@ -1,8 +1,2 @@ -export { ComboboxDivider, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxItem } from './Legacy'; - -export type { - ComboboxOldProps as ComboboxProps, - ComboboxItemOption, -} from '@salutejs/plasma-new-hope/styled-components'; - +export type { ComboboxItemOption } from '@salutejs/plasma-new-hope/styled-components'; export { Combobox } from './Combobox'; diff --git a/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx b/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx index 1bea4df49ec..8fc3314f303 100644 --- a/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx +++ b/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx @@ -555,24 +555,6 @@ describe('plasma-web: Dropdown', () => { cy.matchImageSnapshot(); }); - it('prop: hasArrow', () => { - cy.viewport(1000, 500); - - mount( - - -