fix(Group): add missed CSS class for sizeX="regular" (#7345)

Класс `Group--sizeX-regular` должен был быть ещё в PR #7284, но видимо случайно ревертнул когда пушил. Без него не будет автоопределения для `mode="card"`, когда `mode === "none"` и `sizeX === "regular"`. Также исправляем тест из под #7333 – падал из-за того, что в PR был старый мастер без #7284. --- - caused by #7284, #7333
VKCOM · Aug 8, 2024 · 58e02bf · 58e02bf
1 parent 8970227
commit 58e02bf
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/packages/vkui/src/components/Group/Group.test.tsx b/packages/vkui/src/components/Group/Group.test.tsx
@@ -34,7 +34,7 @@ describe('Group', () => {
       isInsideModal: true,
       sizeX: undefined,
       layout: undefined,
-      className: classNames(styles['Group--mode-plain'], styles['Group--inside-modal']),
+      className: classNames(styles['Group--mode-plain'], styles['Group--mode-plain-inside-modal']),
     },
     {
       mode: undefined,
@@ -94,15 +94,46 @@ describe('Group', () => {
     },
   );
 
-  it('should force show separator', () => {
-    const { container } = render(
-      <Group separator="show" data-testid="group">
+  it.each(['show', 'hide', 'auto'] as const)('should force show separator', (separator) => {
+    const getSeparatorEl = (container: HTMLElement) =>
+      container.getElementsByClassName(styles['Group__separator-sibling'])[0] ?? null;
+
+    const modeNoneResult = render(
+      <Group separator={separator}>
         <div />
       </Group>,
     );
-    expect(container.getElementsByClassName(styles['Group__separator--separator'])[0]).toHaveClass(
-      styles['Group__separator--force'],
+    const modePlainResult = render(
+      <Group separator={separator} mode="plain">
+        <div />
+      </Group>,
     );
+    const modeCardResult = render(
+      <Group separator={separator} mode="card">
+        <div />
+      </Group>,
+    );
+    const modeNoneSeparatorEl = getSeparatorEl(modeNoneResult.container);
+    const modePlainSeparatorEl = getSeparatorEl(modePlainResult.container);
+    const modeCardSeparatorEl = getSeparatorEl(modeCardResult.container);
+
+    switch (separator) {
+      case 'show':
+        expect(modeNoneSeparatorEl).toHaveClass(styles['Group__separator-sibling--forced']);
+        expect(modePlainSeparatorEl).toHaveClass(styles['Group__separator-sibling--forced']);
+        expect(modeCardSeparatorEl).not.toHaveClass(styles['Group__separator-sibling--forced']);
+        break;
+      case 'auto':
+        expect(modeNoneSeparatorEl).not.toHaveClass(styles['Group__separator-sibling--forced']);
+        expect(modePlainSeparatorEl).not.toHaveClass(styles['Group__separator-sibling--forced']);
+        expect(modeCardSeparatorEl).not.toHaveClass(styles['Group__separator-sibling--forced']);
+        break;
+      case 'hide':
+        expect(modeNoneSeparatorEl).toBeNull();
+        expect(modePlainSeparatorEl).toBeNull();
+        expect(modeCardSeparatorEl).toBeNull();
+        break;
+    }
   });
 
   it('check DEV errors', () => {

diff --git a/packages/vkui/src/components/Group/Group.tsx b/packages/vkui/src/components/Group/Group.tsx
@@ -12,7 +12,8 @@ import styles from './Group.module.css';
 
 const sizeXClassNames = {
   none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),
-  ['compact']: styles['Group--sizeX-compact'],
+  regular: styles['Group--sizeX-regular'],
+  compact: styles['Group--sizeX-compact'],
 };
 
 const stylesMode = {
@@ -140,7 +141,7 @@ export const Group = ({
         baseClassName={classNames(
           'vkuiInternalGroup',
           styles['Group'],
-          sizeX !== 'regular' && sizeXClassNames[sizeX],
+          sizeXClassNames[sizeX],
           mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'],
           stylesMode[mode],
           stylesPadding[padding],