diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx
index 4526c09dc7..9ed69a0f27 100644
--- a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx
+++ b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx
@@ -8,6 +8,8 @@ const items = [
{
value: 'north_america',
label: 'Северная Америка',
+ className: 'test-classname',
+ 'data-name': 'test-data-name',
},
{
value: 'south_america',
@@ -1167,6 +1169,22 @@ describe('plasma-b2c: Combobox', () => {
cy.matchImageSnapshot();
});
+ it('prop: item data-attrs', () => {
+ cy.viewport(400, 100);
+
+ mount(
+
+
+
,
+ );
+
+ cy.get('#single').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
it('flow: single uncontrolled', () => {
cy.viewport(1000, 500);
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 d2522e0b1a..b193615db0 100644
--- a/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx
+++ b/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx
@@ -13,6 +13,8 @@ const items = [
label: 'Северная Америка',
contentLeft: ,
contentRight: ,
+ className: 'test-classname',
+ 'data-name': 'test-data-name',
},
{
value: 'south_america',
@@ -548,6 +550,24 @@ describe('plasma-b2c: Dropdown', () => {
cy.matchImageSnapshot();
});
+ it('prop: item data-attrs', () => {
+ cy.viewport(400, 100);
+
+ mount(
+
+
+
+
+
,
+ );
+
+ cy.get('button').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
it('keyboard interactions', () => {
cy.viewport(1000, 500);
diff --git a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx
index a710a44815..e02a4513a9 100644
--- a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx
+++ b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx
@@ -11,6 +11,8 @@ const items = [
label: 'Северная Америка',
contentLeft: ,
contentRight: ,
+ className: 'test-classname',
+ 'data-name': 'test-data-name',
},
{
value: 'south_america',
@@ -763,6 +765,22 @@ describe('plasma-b2c: Select', () => {
cy.matchImageSnapshot();
});
+ it('prop: item data-attrs', () => {
+ cy.viewport(400, 100);
+
+ mount(
+
+
+
,
+ );
+
+ cy.get('#single').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
it('basic logic', () => {
cy.viewport(1000, 500);
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx
index 991bdb5f8e..dc7b6c19df 100644
--- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx
+++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx
@@ -30,7 +30,7 @@ export const Item: FC = ({
ariaLevel,
ariaLabel,
}) => {
- const { value, label, disabled, contentLeft, contentRight } = item;
+ const { value, label, disabled, contentLeft, contentRight, className, ...rest } = item;
const ref = useRef(null);
@@ -83,7 +83,8 @@ export const Item: FC = ({
return (
;
/**
@@ -28,6 +28,10 @@ export type ItemOption = {
* Слот для контента справа
*/
contentRight?: ReactNode;
+ /**
+ * Classname для item
+ */
+ className?: string;
};
export type ItemOptionTransformed = ItemOption & { parent?: ItemOption | null };
diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx
index 4944120c1b..381e5003f0 100644
--- a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx
+++ b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx
@@ -26,7 +26,18 @@ export const DropdownItem: FC = ({
ariaLevel,
ariaLabel,
}) => {
- const { value, label, disabled, isDisabled, contentLeft, contentRight, dividerBefore, dividerAfter } = item;
+ const {
+ value,
+ label,
+ disabled,
+ isDisabled,
+ contentLeft,
+ contentRight,
+ dividerBefore,
+ dividerAfter,
+ className,
+ ...rest
+ } = item;
const ref = useRef(null);
@@ -94,8 +105,9 @@ export const DropdownItem: FC = ({
{dividerBefore && }
;
/**
@@ -35,6 +35,11 @@ export type DropdownItemOption = {
* Отобразить ли разделитель после элемента
*/
dividerAfter?: boolean;
+ /**
+ * Classname для item
+ */
+ className?: string;
+
/**
* Выбранный item.
* @deprecated использовать ContentLeft || ContentRight
diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx
index 1545c55435..6a55d1c9eb 100644
--- a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx
+++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx
@@ -30,7 +30,7 @@ export const Item: FC = ({
ariaLevel,
ariaLabel,
}) => {
- const { value, label, disabled, isDisabled, contentLeft, contentRight } = item;
+ const { value, label, disabled, isDisabled, contentLeft, contentRight, className, ...rest } = item;
const ref = useRef(null);
@@ -84,7 +84,8 @@ export const Item: FC = ({
return (
;
/**
@@ -28,6 +28,10 @@ export type ItemOption = {
* Слот для контента справа
*/
contentRight?: ReactNode;
+ /**
+ * Classname для item
+ */
+ className?: string;
};
export type ItemOptionTransformed = ItemOption & { parent?: ItemOption | null };
@@ -63,6 +67,10 @@ export type MergedDropdownNode = {
disabled?: boolean;
contentRight?: ReactNode;
+ /**
+ * Classname для item
+ */
+ className?: string;
};
export type MergedDropdownNodeTransformed = MergedDropdownNode & { parent?: MergedDropdownNode | null };
diff --git a/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx
index 6678c668f1..c4cc84e543 100644
--- a/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx
+++ b/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx
@@ -8,6 +8,8 @@ const items = [
{
value: 'north_america',
label: 'Северная Америка',
+ className: 'test-classname',
+ 'data-name': 'test-data-name',
},
{
value: 'south_america',
@@ -1167,6 +1169,22 @@ describe('plasma-web: Combobox', () => {
cy.matchImageSnapshot();
});
+ it('prop: item data-attrs', () => {
+ cy.viewport(400, 100);
+
+ mount(
+
+
+
,
+ );
+
+ cy.get('#single').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
it('flow: single uncontrolled', () => {
cy.viewport(1000, 500);
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 fae37579f0..80318c0196 100644
--- a/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx
+++ b/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx
@@ -13,6 +13,8 @@ const items = [
label: 'Северная Америка',
contentLeft: ,
contentRight: ,
+ className: 'test-classname',
+ 'data-name': 'test-data-name',
},
{
value: 'south_america',
@@ -548,6 +550,24 @@ describe('plasma-web: Dropdown', () => {
cy.matchImageSnapshot();
});
+ it('prop: item data-attrs', () => {
+ cy.viewport(400, 100);
+
+ mount(
+
+
+
+
+
,
+ );
+
+ cy.get('button').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
it('keyboard interactions', () => {
cy.viewport(1000, 500);
diff --git a/packages/plasma-web/src/components/Select/Select.component-test.tsx b/packages/plasma-web/src/components/Select/Select.component-test.tsx
index bce2342ff2..29da179503 100644
--- a/packages/plasma-web/src/components/Select/Select.component-test.tsx
+++ b/packages/plasma-web/src/components/Select/Select.component-test.tsx
@@ -11,6 +11,8 @@ const items = [
label: 'Северная Америка',
contentLeft: ,
contentRight: ,
+ className: 'test-classname',
+ 'data-name': 'test-data-name',
},
{
value: 'south_america',
@@ -763,6 +765,22 @@ describe('plasma-web: Select', () => {
cy.matchImageSnapshot();
});
+ it('prop: item data-attrs', () => {
+ cy.viewport(400, 100);
+
+ mount(
+
+
+
,
+ );
+
+ cy.get('#single').realClick();
+ cy.get('[id$="tree_level_1"]').should('be.visible');
+
+ cy.get('[id$="north_america"]').should('have.class', 'test-classname');
+ cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name');
+ });
+
it('basic logic', () => {
cy.viewport(1000, 500);