From ea17b295cfca1c7d7b8dda46954b2f49c6620369 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Fri, 2 Aug 2024 20:20:21 +0300
Subject: [PATCH] fix(Group): refactor styles for fix adaptivity

- related to #5344, #5364, #5371, #5642
---
 .../src/components/Group/Group.module.css     | 300 ++++++++++--------
 packages/vkui/src/components/Group/Group.tsx  |  21 +-
 2 files changed, 173 insertions(+), 148 deletions(-)

diff --git a/packages/vkui/src/components/Group/Group.module.css b/packages/vkui/src/components/Group/Group.module.css
index dd9b1bc0e4..44073e74ac 100644
--- a/packages/vkui/src/components/Group/Group.module.css
+++ b/packages/vkui/src/components/Group/Group.module.css
@@ -1,151 +1,52 @@
+/* stylelint-disable selector-max-universal */
+
+/**
+ * - sizeX="compact" -> mode="plain"
+ * - sizeX="regular" -> mode="card"
+ */
 .Group {
+  --vkui_internal--Group_padding: 0;
+
   color: var(--vkui--color_text_primary);
   padding-block: 8px;
 }
 
-.Group__header:empty {
-  display: none;
-}
-
-.Group--mode-plain:not(:first-of-type) > .Group__header {
-  margin-block-start: -8px;
+.Group--padding-s {
+  --vkui_internal--Group_padding: 4px;
 }
 
-@media (--sizeX-compact) {
-  .Group--sizeX-none.Group--mode-none:not(:first-of-type) > .Group__header {
-    margin-block-start: -8px;
-  }
+.Group--padding-m {
+  --vkui_internal--Group_padding: 8px;
 }
 
-.Group--mode-card > .Group__header {
-  margin-block-start: -4px;
-}
-
-@media (--sizeX-regular) {
-  .Group--sizeX-none.Group--mode-none > .Group__header {
-    margin-block-start: -4px;
-  }
-}
-
-.Group__separator--spacing,
-.Group__separator--separator {
-  display: none;
-}
-
-.Group__separator--spacing {
+.Group--mode-card,
+.Group--sizeX-regular.Group--mode-none {
+  padding: var(--vkui_internal--Group_padding);
   position: relative;
-  box-sizing: border-box;
-}
-
-/* stylelint-disable-next-line selector-max-universal */
-.Group--mode-plain + * + .Group__separator--separator {
-  display: block;
-}
-
-@media (--sizeX-compact) {
-  /* stylelint-disable-next-line selector-max-universal */
-  .Group--sizeX-none.Group--mode-none + * + .Group__separator--separator {
-    display: block;
-  }
-}
-
-.Group--mode-card + .Group__separator--spacing {
-  display: block;
-  block-size: 16px;
-  padding-block: 8px;
-  padding-inline: 0;
-}
-
-.Group--sizeX-compact.Group--mode-card + .Group__separator--spacing {
-  display: block;
-  block-size: 8px;
-  padding-block: 4px;
-}
-
-@media (--sizeX-regular) {
-  .Group--sizeX-none.Group--mode-none + .Group__separator--spacing {
-    display: block;
-    block-size: 16px;
-    padding-block: 8px;
-    padding-inline: 0;
-  }
-}
-@media (--sizeX-compact) {
-  .Group--sizeX-none.Group--mode-card + .Group__separator--spacing {
-    block-size: 8px;
-    padding-block: 4px;
-  }
-}
-
-.Group:last-of-type ~ .Group__separator {
-  display: none;
-}
-
-.Group:last-of-type ~ .Group__separator--force,
-.Group--mode-card:last-of-type + .Group__separator--spacing {
-  display: block;
-}
-
-@media (--sizeX-regular) {
-  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
-    display: block;
-  }
-}
-
-.Group--mode-card.Group--padding-s {
-  padding: 4px;
-}
-
-.Group--mode-card.Group--padding-m {
-  padding: 8px;
+  background: var(--vkui--color_background_content);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 @media (--sizeX-regular) {
-  .Group--sizeX-none.Group--inside-modal.Group--padding-s,
-  .Group--sizeX-none.Group--mode-none.Group--padding-s {
-    padding: 4px;
-  }
-
-  .Group--sizeX-none.Group--inside-modal.Group--padding-m,
-  .Group--sizeX-none.Group--mode-none.Group--padding-m {
-    padding: 8px;
+  .Group--sizeX-none.Group--mode-none {
+    padding: var(--vkui_internal--Group_padding);
+    position: relative;
+    background: var(--vkui--color_background_content);
+    border-radius: var(--vkui--size_border_radius_paper--regular);
   }
 }
 
-.Group--sizeX-compact,
 .Group--sizeX-compact.Group--mode-card {
   padding-inline: 0;
-}
-
-@media (--sizeX-compact) {
-  .Group--sizeX-none,
-  .Group--sizeX-none.Group--mode-card {
-    padding-inline: 0;
-  }
-}
-
-.Group--mode-card {
-  background: var(--vkui--color_background_content);
-  border-radius: var(--vkui--size_border_radius_paper--regular);
-  position: relative;
-}
-
-.Group--sizeX-compact.Group--mode-card {
   border-radius: var(--vkui--size_border_radius_promo--regular);
 }
 
 @media (--sizeX-compact) {
   .Group--sizeX-none.Group--mode-card {
+    padding-inline: 0;
     border-radius: var(--vkui--size_border_radius_promo--regular);
   }
 }
-@media (--sizeX-regular) {
-  .Group--sizeX-none.Group--mode-none {
-    background: var(--vkui--color_background_content);
-    border-radius: var(--vkui--size_border_radius_paper--regular);
-    position: relative;
-  }
-}
 
 .Group--sizeX-compact.Group--mode-card:first-of-type {
   border-start-start-radius: 0;
@@ -170,7 +71,8 @@
  * например поверх Tooltip
  * См. пример: Slider c пропом withTooltip
  */
-.Group--mode-card::before {
+.Group--mode-card::before,
+.Group--sizeX-regular.Group--mode-none::before {
   content: '';
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -206,16 +108,50 @@
   }
 }
 
-.Group--mode-plain + .Group__separator + .Group__separator {
-  padding-block: 8px;
+.Group .Group {
+  padding-inline: 0;
+}
+
+.Group .Group:first-of-type {
+  padding-block-start: 0;
+}
+
+.Group .Group:last-of-type {
+  padding-block-end: 0;
+}
+
+/**
+ * Header
+ */
+.Group__header:empty {
+  display: none;
+}
+
+.Group--mode-plain:not(:first-of-type) > .Group__header,
+.Group--sizeX-compact.Group--mode-none:not(:first-of-type) > .Group__header {
+  margin-block-start: -8px;
 }
 
 @media (--sizeX-compact) {
-  .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator {
-    padding-block: 8px;
+  .Group--sizeX-none.Group--mode-none:not(:first-of-type) > .Group__header {
+    margin-block-start: -8px;
+  }
+}
+
+.Group--mode-card > .Group__header,
+.Group--sizeX-regular.Group--mode-none > .Group__header {
+  margin-block-start: -4px;
+}
+
+@media (--sizeX-regular) {
+  .Group--sizeX-none.Group--mode-none > .Group__header {
+    margin-block-start: -4px;
   }
 }
 
+/**
+ * Description
+ */
 .Group__description {
   display: block;
   padding-block: 4px 16px;
@@ -223,23 +159,119 @@
   color: var(--vkui--color_text_secondary);
 }
 
-.Group .Group {
-  padding-inline: 0;
+/**
+ * Separator
+ */
+.Group__separator {
+  display: none;
 }
 
-.Group .Group:first-of-type {
-  padding-block-start: 0;
+.Group__separator::before {
+  content: '';
+  display: block;
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
+  block-size: var(--vkui--size_border--regular);
+  background: var(--vkui--color_separator_primary);
+  transform-origin: center top;
 }
 
-.Group .Group:last-of-type {
-  padding-block-end: 0;
+.Group--mode-plain + * + .Group__separator,
+.Group--sizeX-compact.Group--mode-none + * + .Group__separator {
+  display: block;
+}
+
+@media (--sizeX-compact) {
+  .Group--sizeX-none.Group--mode-none + * + .Group__separator {
+    display: block;
+  }
+}
+
+.Group--mode-plain + .Group__separator + .Group__separator,
+.Group--sizeX-compact.Group--mode-none + .Group__separator + .Group__separator {
+  padding-block: 8px;
+}
+
+@media (--sizeX-compact) {
+  .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator {
+    padding-block: 8px;
+  }
+}
+
+.Group--mode-plain:last-of-type ~ .Group__separator:not(.Group__separator--force),
+.Group--sizeX-compact.Group--mode-none:last-of-type
+  ~ .Group__separator:not(.Group__separator--force) {
+  display: none;
+}
+
+@media (--sizeX-compact) {
+  .Group--sizeX-none.Group--mode-none:last-of-type
+    ~ .Group__separator:not(.Group__separator--force) {
+    display: none;
+  }
+}
+
+/**
+* Spacing
+*/
+.Group__spacing {
+  display: none;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.Group--mode-card + .Group__spacing,
+.Group--sizeX-regular.Group--mode-none + .Group__spacing {
+  display: block;
+  block-size: 16px;
+  padding-block: 8px;
+}
+
+@media (--sizeX-regular) {
+  .Group--sizeX-none.Group--mode-none + .Group__spacing {
+    display: block;
+    block-size: 16px;
+    padding-block: 8px;
+  }
+}
+
+.Group--sizeX-compact.Group--mode-card + .Group__spacing {
+  block-size: 8px;
+  padding-block: 4px;
+}
+
+@media (--sizeX-compact) {
+  .Group--sizeX-none.Group--mode-card + .Group__spacing {
+    block-size: 8px;
+    padding-block: 4px;
+  }
+}
+
+.Group--mode-card:last-of-type ~ .Group__spacing,
+.Group--sizeX-regular.Group--mode-none:last-of-type ~ .Group__spacing {
+  display: none;
+}
+
+@media (--sizeX-regular) {
+  .Group--sizeX-none.Group--mode-none:last-of-type ~ .Group__spacing {
+    display: none;
+  }
+}
+
+.Group--mode-card:last-of-type + .Group__spacing,
+.Group--sizeX-regular.Group--mode-none:last-of-type + .Group__spacing {
+  display: block;
+}
+
+@media (--sizeX-regular) {
+  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__spacing {
+    display: block;
+  }
 }
 
 /*
  * CMP:
  * PanelHeader
  */
-/* stylelint-disable selector-max-universal */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalPanelHeader--vkcom) ~ .Group:first-of-type,
 :global(.vkuiInternalPanelHeader--vkcom) + * .Group:first-of-type {
diff --git a/packages/vkui/src/components/Group/Group.tsx b/packages/vkui/src/components/Group/Group.tsx
index a7ec62e78b..9b2b888a6f 100644
--- a/packages/vkui/src/components/Group/Group.tsx
+++ b/packages/vkui/src/components/Group/Group.tsx
@@ -7,7 +7,6 @@ import { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootContext } from '../AppRoot/AppRootContext';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';
-import { Separator } from '../Separator/Separator';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './Group.module.css';
 
@@ -120,7 +119,6 @@ export const Group = ({
         baseClassName={classNames(
           'vkuiInternalGroup',
           styles['Group'],
-          isInsideModal && styles['Group--inside-modal'],
           sizeX !== 'regular' && sizeXClassNames[sizeX],
           mode && stylesMode[mode],
           stylesPadding[padding],
@@ -133,19 +131,14 @@ export const Group = ({
         )}
       </RootComponent>
 
+      {separator !== 'hide' && <div className={styles['Group__spacing']} />}
       {separator !== 'hide' && (
-        <React.Fragment>
-          <div
-            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}
-          />
-          <Separator
-            className={classNames(
-              styles['Group__separator'],
-              styles['Group__separator--separator'],
-              separator === 'show' && styles['Group__separator--force'],
-            )}
-          />
-        </React.Fragment>
+        <div
+          className={classNames(
+            styles['Group__separator'],
+            separator === 'show' && styles['Group__separator--force'],
+          )}
+        />
       )}
     </>
   );