feat(Group): new token for border-radius on mobile + spacing 8px

packages/vkui/src/components/Group/Group.module.css

@@ -27,6 +27,8 @@
   }
 }
 
+/* ////////////////////////////////////////////////// */
+
 .Group__separator--spacing,
 .Group__separator--separator {
   display: none;
@@ -69,6 +71,8 @@
   }
 }
 
+/* ////////////////////////////////////////////////// */
+
 .Group--mode-card.Group--padding-s {
   padding: 4px;
 }
@@ -107,6 +111,15 @@
   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 {
+    border-radius: var(--vkui--size_border_radius_promo--regular);
+  }
+}
 @media (--sizeX-regular) {
   .Group--sizeX-none.Group--mode-none {
     background: var(--vkui--color_background_content);
@@ -118,16 +131,16 @@
 .Group--sizeX-compact.Group--mode-card:first-of-type {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
-  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
-  border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
+  border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
 }
 
 @media (--sizeX-compact) {
   .Group--sizeX-none.Group--mode-card:first-of-type {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
-    border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
-    border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+    border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
+    border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
   }
 }
 
@@ -174,14 +187,14 @@
   }
 }
 
-.Group--mode-plain + .Group__separator,
 .Group--mode-plain + .Group__separator + .Group__separator {
+  /* Это отступы когда layout=plain между группами и сепариком вннутри группы в группе ПЕРВОЕ ПРАВИЛО БЕСПОЛЕЗНО */
   padding-block: 8px;
 }
 
 @media (--sizeX-compact) {
-  .Group--sizeX-none.Group--mode-none + .Group__separator,
   .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator {
+    /* Это отступы когда layout=undefined между группами и сепариком вннутри группы в группе ПЕРВОЕ ПРАВИЛО БЕСПОЛЗЕНО */
     padding-block: 8px;
   }
 }
@@ -193,8 +206,8 @@
   color: var(--vkui--color_text_secondary);
 }
 
-.Group .Group,
-.Group .Group + .Group__separator {
+.Group .Group {
+  /* первое правило бесполезно, потому что всегда применяется к спэйсу, у которого через style задается отступ */
   padding-inline: 0;
 }
 

packages/vkui/src/components/Group/Group.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { SizeTypeValues } from '../../lib/adaptivity';
 import { warnOnce } from '../../lib/warnOnce';
 import { HTMLAttributesWithRootRef } from '../../types';
@@ -95,6 +96,7 @@ export const Group = ({
 }: GroupProps) => {
   const { isInsideModal } = React.useContext(ModalRootContext);
   const { sizeX = 'none' } = useAdaptivity();
+  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();
 
   const mode = useGroupMode(modeProps, sizeX, isInsideModal);
 
@@ -136,10 +138,16 @@ export const Group = ({
 
       {separator !== 'hide' && (
         <React.Fragment>
-          <Spacing
+          <div
             className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}
-            size={16}
-          />
+          >
+            {adaptiveSizeX.compact && (
+              <Spacing className={adaptiveSizeX.compact.className} size={8} />
+            )}
+            {adaptiveSizeX.regular && (
+              <Spacing className={adaptiveSizeX.regular.className} size={16} />
+            )}
+          </div>
           <Separator
             className={classNames(
               styles['Group__separator'],