feat(plasma-*, sdds-*): passing data-attrs into Item

salute-developers · Dec 9, 2024 · 19bf509 · 19bf509
1 parent 71aad13
commit 19bf509
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 9 deletions.
diff --git 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(
+            <div style={{ width: '300px' }}>
+                <Combobox id="single" items={items} label="Label" placeholder="Placeholder" />
+            </div>,
+        );
+
+        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
@@ -13,6 +13,8 @@ const items = [
         label: 'Северная Америка',
         contentLeft: <IconLocation color="inherit" />,
         contentRight: <IconLocation color="inherit" />,
+        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(
+            <div style={{ width: '300px' }}>
+                <Dropdown id="#single" items={items}>
+                    <Button text="Список стран" />
+                </Dropdown>
+            </div>,
+        );
+
+        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
@@ -11,6 +11,8 @@ const items = [
         label: 'Северная Америка',
         contentLeft: <IconLocation color="inherit" />,
         contentRight: <IconLocation color="inherit" />,
+        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(
+            <div style={{ width: '300px' }}>
+                <Select id="single" items={items} label="Label" placeholder="Placeholder" />
+            </div>,
+        );
+
+        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
@@ -30,7 +30,7 @@ export const Item: FC<ItemProps> = ({
     ariaLevel,
     ariaLabel,
 }) => {
-    const { value, label, disabled, contentLeft, contentRight } = item;
+    const { value, label, disabled, contentLeft, contentRight, className, ...rest } = item;
 
     const ref = useRef<HTMLLIElement | null>(null);
 
@@ -83,7 +83,8 @@ export const Item: FC<ItemProps> = ({
 
     return (
         <Wrapper
-            className={cx(disabledClassName, focusedClass, activeClass)}
+            {...rest}
+            className={cx(disabledClassName, focusedClass, activeClass, className)}
             id={getItemId(treeId, value)}
             ref={ref}
             onClick={handleClick}

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.ts
@@ -13,7 +13,7 @@ export type ItemOption = {
      */
     label: string;
     /**
-     * Список дочерних items.
+     * Список дочерних items
      */
     items?: Array<ItemOption>;
     /**
@@ -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
@@ -26,7 +26,18 @@ export const DropdownItem: FC<DropdownItemProps> = ({
     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<HTMLLIElement | null>(null);
 
@@ -94,8 +105,9 @@ export const DropdownItem: FC<DropdownItemProps> = ({
             {dividerBefore && <Divider variant={variant} />}
 
             <Wrapper
+                {...rest}
                 ref={ref}
-                className={cx(isDisabledClassName, focusedClass, activeClass)}
+                className={cx(isDisabledClassName, focusedClass, activeClass, className)}
                 id={getItemId(treeId, value.toString())}
                 role={itemRole}
                 onClick={handleClick}

diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts
@@ -12,7 +12,7 @@ export type DropdownItemOption = {
      */
     label: string;
     /**
-     * Список дочерних items.
+     * Список дочерних items
      */
     items?: Array<DropdownItemOption>;
     /**
@@ -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
@@ -30,7 +30,7 @@ export const Item: FC<ItemProps> = ({
     ariaLevel,
     ariaLabel,
 }) => {
-    const { value, label, disabled, isDisabled, contentLeft, contentRight } = item;
+    const { value, label, disabled, isDisabled, contentLeft, contentRight, className, ...rest } = item;
 
     const ref = useRef<HTMLLIElement | null>(null);
 
@@ -84,7 +84,8 @@ export const Item: FC<ItemProps> = ({
 
     return (
         <Wrapper
-            className={cx(disabledClassName, focusedClass, activeClass)}
+            {...rest}
+            className={cx(disabledClassName, focusedClass, activeClass, className)}
             id={getItemId(treeId, value.toString())}
             ref={ref}
             onClick={handleClick}

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.types.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.types.ts
@@ -13,7 +13,7 @@ export type ItemOption = {
      */
     label: string;
     /**
-     * Список дочерних items.
+     * Список дочерних items
      */
     items?: Array<ItemOption>;
     /**
@@ -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
@@ -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(
+            <div style={{ width: '300px' }}>
+                <Combobox id="single" items={items} label="Label" placeholder="Placeholder" />
+            </div>,
+        );
+
+        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
@@ -13,6 +13,8 @@ const items = [
         label: 'Северная Америка',
         contentLeft: <IconLocation color="inherit" />,
         contentRight: <IconLocation color="inherit" />,
+        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(
+            <div style={{ width: '300px' }}>
+                <Dropdown id="#single" items={items}>
+                    <Button text="Список стран" />
+                </Dropdown>
+            </div>,
+        );
+
+        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
@@ -11,6 +11,8 @@ const items = [
         label: 'Северная Америка',
         contentLeft: <IconLocation color="inherit" />,
         contentRight: <IconLocation color="inherit" />,
+        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(
+            <div style={{ width: '300px' }}>
+                <Select id="single" items={items} label="Label" placeholder="Placeholder" />
+            </div>,
+        );
+
+        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);