@vkontakte/vkui 4.35.2 → 4.36.1

package/src/components/PanelHeader/PanelHeader.css

@@ -21,7 +21,7 @@
   align-items: center;
   white-space: nowrap;
   position: relative;
-  background: var(--header_background);
+  background: var(--header_background, var(--vkui--color_background_content));
 }
 
 .PanelHeader--trnsp .PanelHeader__in {
@@ -34,7 +34,7 @@
 
 .PanelHeader__before {
   box-sizing: border-box;
-  color: var(--header_tint);
+  color: var(--header_tint, var(--vkui--color_icon_accent_themed));
   display: flex;
   flex-shrink: 0;
 }
@@ -50,14 +50,17 @@
 }
 
 .PanelHeader__content-in {
-  color: var(--header_text);
+  color: var(--header_text, var(--vkui--color_text_primary));
   font-weight: 500;
   font-family: var(--font-display);
 }
 
 .PanelHeader::before,
 .PanelHeader__in {
-  height: var(--panelheader_height);
+  height: var(
+    --panelheader_height,
+    var(--vkui--size_panel_header_height--regular)
+  );
   padding-top: var(--safe-area-inset-top);
 }
 
@@ -65,7 +68,7 @@
   display: flex;
   justify-content: flex-end;
   box-sizing: border-box;
-  color: var(--header_tint);
+  color: var(--header_tint, var(--vkui--color_icon_accent_themed));
 }
 
 .PanelHeader--vkapps .PanelHeader__after {
@@ -76,7 +79,10 @@
  * iOS
  */
 .PanelHeader--ios {
-  --panelheader_height: var(--panelheader_height_ios);
+  --panelheader_height: var(
+    --panelheader_height_ios,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
 .PanelHeader--ios .PanelHeader__before {
@@ -110,10 +116,6 @@
   padding: 0 4px;
 }
 
-.PanelHeader--ios.PanelHeader--no-before .PanelHeader__content > * {
-  padding-left: 0;
-}
-
 .PanelHeader--ios.PanelHeader--no-before .PanelHeader__content {
   padding-left: 8px;
 }
@@ -167,15 +169,6 @@
   padding: 0 4px;
 }
 
-.PanelHeader--android.PanelHeader--no-before .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-before .PanelHeader__content > * {
-  padding-left: 0;
-}
-
-.PanelHeader--android.PanelHeader--no-before .PanelHeader__content {
-  padding-left: 16px;
-}
-
 .SplitCol--spaced
   .PanelHeader--android.PanelHeader--no-before:not(.ModalPageHeader__in)
   .PanelHeader__content {
@@ -191,6 +184,10 @@
   padding-right: 16px;
 }
 
+.PanelHeader--android.PanelHeader--no-before .PanelHeader__content {
+  padding-left: 16px;
+}
+
 .SplitCol--spaced
   .PanelHeader--android.PanelHeader--no-after:not(.ModalPageHeader__in)
   .PanelHeader__content {
@@ -206,7 +203,10 @@
  * VKCOM
  */
 .PanelHeader--vkcom {
-  --panelheader_height: var(--panelheader_height_vkcom);
+  --panelheader_height: var(
+    --panelheader_height_vkcom,
+    var(--vkui--size_panel_header_height--regular)
+  );
 
   position: relative;
   z-index: 10;
@@ -219,7 +219,10 @@
   right: var(--thin-border);
   bottom: 0;
   height: var(--thin-border);
-  background-color: var(--header_background);
+  background-color: var(
+    --header_background,
+    var(--vkui--color_background_content)
+  );
   content: "";
 }
 
@@ -246,3 +249,7 @@
   flex-shrink: 0;
   flex-grow: 1;
 }
+
+.PanelHeader--no-before .PanelHeader__content > * {
+  padding-left: 0;
+}

package/src/components/PanelHeader/PanelHeader.tsx

@@ -127,20 +127,19 @@ const PanelHeaderComponent = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("PanelHeader", platform),
-        {
-          "PanelHeader--trnsp": transparent,
-          "PanelHeader--shadow": needShadow,
-          "PanelHeader--vis": visor,
-          "PanelHeader--sep": separator && visor,
-          "PanelHeader--vkapps":
-            webviewType === WebviewType.VKAPPS && !isInsideModal,
-          "PanelHeader--no-before": !before,
-          "PanelHeader--no-after": !after,
-          "PanelHeader--fixed": isFixed,
-        },
+        transparent && "PanelHeader--trnsp",
+        needShadow && "PanelHeader--shadow",
+        visor && "PanelHeader--vis",
+        separator && visor && "PanelHeader--sep",
+        webviewType === WebviewType.VKAPPS &&
+          !isInsideModal &&
+          "PanelHeader--vkapps",
+        !before && "PanelHeader--no-before",
+        !after && "PanelHeader--no-after",
+        isFixed && "PanelHeader--fixed",
+        // TODO v5.0.0 поправить под новую адаптивность
         `PanelHeader--sizeX-${sizeX}`
       )}
       ref={isFixed ? getRootRef : getRef}

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -15,7 +15,6 @@ import {
   SizeType,
   AdaptivityProps,
 } from "../../hoc/withAdaptivity";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import "./PanelHeaderBack.css";
 
@@ -41,10 +40,12 @@ export const PanelHeaderBackComponent = ({
     <PanelHeaderButton
       {...restProps}
       aria-label={ariaLabel}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
-        "PanelHeaderBack--has-label": showLabel && !!label,
-      })}
+      vkuiClass={classNames(
+        "PanelHeaderBack",
+        platform === IOS && "PanelHeaderBack--ios",
+        platform === VKCOM && "PanelHeaderBack--vkcom",
+        showLabel && !!label && "PanelHeaderBack--has-label"
+      )}
       label={showLabel && label}
     >
       {platform === ANDROID && <Icon28ArrowLeftOutline />}

package/src/components/PanelHeaderButton/PanelHeaderButton.css

@@ -21,6 +21,12 @@
   right: 2px;
 }
 
+.PanelHeaderButton--primitive {
+  height: 48px;
+  line-height: 48px;
+  padding: 0 12px;
+}
+
 /*
  * iOS
  */
@@ -35,7 +41,6 @@
 .PanelHeaderButton--ios.PanelHeaderButton--primitive {
   height: 44px;
   line-height: 44px;
-  padding: 0 12px;
 }
 
 .PanelHeaderButton--ios .Icon--24 {
@@ -50,16 +55,10 @@
  * Android
  */
 
-.PanelHeaderButton--android {
+.PanelHeaderButton--android.PanelHeaderButton--notPrimitive {
   border-radius: 50%;
 }
 
-.PanelHeaderButton--android.PanelHeaderButton--primitive {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 12px;
-}
-
 .PanelHeaderButton--android .Icon--24 {
   padding: 12px;
 }
@@ -72,7 +71,7 @@
 * VKCOM
 */
 .PanelHeaderButton--vkcom {
-  color: var(--header_text_secondary);
+  color: var(--header_text_secondary, var(--vkui--color_text_secondary));
 }
 
 .PanelHeaderButton--vkcom > :not(.Counter) {
@@ -91,12 +90,6 @@
   padding: 10px;
 }
 
-.PanelHeaderButton--vkcom.PanelHeaderButton--primitive {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 10px;
-}
-
 .PanelHeaderButton--vkcom.PanelHeaderButton--notPrimitive {
   border-radius: 50%;
 }

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -88,12 +88,12 @@ export const PanelHeaderButton = ({
       Component={restProps.href ? "a" : "button"}
       activeEffectDelay={200}
       activeMode={activeMode}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("PanelHeaderButton", platform), {
-        "PanelHeaderButton--primary": primary,
-        "PanelHeaderButton--primitive": isPrimitive,
-        "PanelHeaderButton--notPrimitive": !isPrimitive && !isPrimitiveLabel,
-      })}
+      vkuiClass={classNames(
+        getClassName("PanelHeaderButton", platform),
+        primary && "PanelHeaderButton--primary",
+        isPrimitive && "PanelHeaderButton--primitive",
+        !isPrimitive && !isPrimitiveLabel && "PanelHeaderButton--notPrimitive"
+      )}
     >
       {isPrimitive ? (
         <ButtonTypography primary={primary}>{children}</ButtonTypography>

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -3,7 +3,7 @@ import {
   PanelHeaderButton,
   PanelHeaderButtonProps,
 } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { getTitleFromChildren } from "../../lib/utils";
 import { usePlatform } from "../../hooks/usePlatform";
 
@@ -20,11 +20,7 @@ export const PanelHeaderClose = ({
       aria-label={getTitleFromChildren(children)}
       {...restProps}
     >
-      {platform === ANDROID || platform === VKCOM ? (
-        <Icon28CancelOutline />
-      ) : (
-        children
-      )}
+      {platform === IOS ? children : <Icon28CancelOutline />}
     </PanelHeaderButton>
   );
 };

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -25,8 +25,7 @@
 }
 
 .PanelHeaderContent__status,
-.PanelHeaderContent__children-in,
-.PanelHeaderContent__children .Headline {
+.PanelHeaderContent__children-in {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -36,7 +35,7 @@
   order: 1;
   margin-top: 1px;
   max-width: 100%;
-  color: var(--header_text_secondary);
+  color: var(--header_text_secondary, var(--vkui--color_text_secondary));
 }
 
 .PanelHeaderContent__children {
@@ -55,30 +54,29 @@
   align-items: center;
   justify-content: flex-start;
   margin-left: 2px;
-  color: var(--header_tint);
+  color: var(--header_tint, var(--vkui--color_icon_accent));
 }
 
 .PanelHeaderContent__width {
   width: 1000px;
 }
 
+.PanelHeaderContent__in--centered {
+  align-items: center;
+}
+
 /**
  * iOS
  */
 
-.PanelHeaderContent--ios .PanelHeaderContent__before ~ .PanelHeaderContent__in {
-  align-items: flex-start;
-}
-
-.PanelHeaderContent--ios .PanelHeaderContent__in {
-  align-items: center;
-}
-
 .PanelHeaderContent--ios .PanelHeaderContent__children-in {
   font-size: 21px;
   font-family: var(--font-display);
   font-weight: 500;
-  line-height: var(--panelheader_height_ios);
+  line-height: var(
+    --panelheader_height_ios,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
 /**
@@ -89,19 +87,15 @@
   font-size: 23px;
   font-family: var(--font-display);
   font-weight: 500;
-  line-height: var(--panelheader_height);
+  line-height: var(
+    --panelheader_height,
+    var(--vkui--size_panel_header_height--regular)
+  );
 }
 
 /**
  * VKCOM
  */
-
-.PanelHeaderContent--vkcom
-  .PanelHeaderContent__before
-  ~ .PanelHeaderContent__in {
-  align-items: flex-start;
-}
-
-.PanelHeaderContent--vkcom .PanelHeaderContent__in {
-  align-items: center;
+.PanelHeader--no-before .PanelHeaderContent--vkcom {
+  padding-left: 16px;
 }

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
 import { Tappable } from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
+import { getClassName } from "../../helpers/getClassName";
 import { Caption } from "../Typography/Caption/Caption";
 import { Headline } from "../Typography/Headline/Headline";
-import { IOS, Platform } from "../../lib/platform";
+import { IOS, ANDROID, Platform } from "../../lib/platform";
 import { Text } from "../Typography/Text/Text";
 import { HasPlatform } from "../../types";
 import "./PanelHeaderContent.css";
@@ -71,19 +72,24 @@ export const PanelHeaderContent = ({
         activeMode: "opacity",
       }
     : {};
-  const baseClassNames = getClassName("PanelHeaderContent", platform);
 
   return (
     <div
       {...rootProps}
-      vkuiClass={baseClassNames}
+      vkuiClass={getClassName("PanelHeaderContent", platform)}
       style={style}
       className={className}
     >
       {hasReactNode(before) && (
         <div vkuiClass="PanelHeaderContent__before">{before}</div>
       )}
-      <InComponent {...inProps} vkuiClass="PanelHeaderContent__in">
+      <InComponent
+        {...inProps}
+        vkuiClass={classNames(
+          "PanelHeaderContent__in",
+          !before && platform !== ANDROID && "PanelHeaderContent__in--centered"
+        )}
+      >
         {hasReactNode(status) && (
           <Caption vkuiClass="PanelHeaderContent__status">{status}</Caption>
         )}

package/src/components/PanelHeaderContext/PanelHeaderContext.css

@@ -34,49 +34,34 @@
   animation: vkui-animation-panelheadercontext-fade-out 0.2s ease;
 }
 
-/*
- iOS
- */
-
-.PanelHeaderContext--ios.PanelHeaderContext--opened .PanelHeaderContext__in {
+.PanelHeaderContext--opened .PanelHeaderContext__in {
   animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
 }
 
-.PanelHeaderContext--ios.PanelHeaderContext--closing .PanelHeaderContext__in {
+.PanelHeaderContext--closing .PanelHeaderContext__in {
   animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
 }
 
-.PanelHeaderContext--ios .List {
-  background: var(--header_background);
+.PanelHeaderContext .List {
+  background: var(--header_background, var(--vkui--color_background_content));
 }
 
 /*
  Android
  */
-.PanelHeaderContext--android .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom .PanelHeaderContext__in {
+.PanelHeaderContext__in {
   padding: 8px;
   box-sizing: border-box;
 }
 
-.PanelHeaderContext--android.PanelHeaderContext--opened .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom.PanelHeaderContext--opened .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
+.PanelHeaderContext--ios .PanelHeaderContext__in {
+  padding: 0;
 }
 
-.PanelHeaderContext--android.PanelHeaderContext--closing
-  .PanelHeaderContext__in,
-.PanelHeaderContext--vkcom.PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
-}
-
-.PanelHeaderContext--android .List,
-.PanelHeaderContext--vkcom .List,
-.PanelHeaderContext--desktop.PanelHeaderContext--ios .List {
+.PanelHeaderContext--rounded .List {
   overflow: hidden;
   border-radius: 12px;
   padding: 8px 0;
-  background: var(--header_background);
 }
 
 /*
@@ -85,13 +70,12 @@
 
 .PanelHeaderContext--desktop .PanelHeaderContext__in {
   padding: 12px 8px;
-  box-sizing: border-box;
 }
 
 .PanelHeaderContext--desktop .PanelHeaderContext__content {
   border-radius: 12px;
   overflow: hidden;
-  background: var(--header_background);
+  background: var(--header_background, var(--vkui--color_background_content));
 }
 
 .PanelHeaderContext--desktop .PanelHeaderContext__content {

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
 import { ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
+import { IOS } from "../../lib/platform";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { useTimeout } from "../../hooks/useTimeout";
@@ -69,12 +69,16 @@ export const PanelHeaderContext = ({
   return (
     <FixedLayout
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("PanelHeaderContext", platform), {
-        "PanelHeaderContext--opened": opened,
-        "PanelHeaderContext--closing": closing,
-        "PanelHeaderContext--desktop": isDesktop,
-      })}
+      vkuiClass={classNames(
+        "PanelHeaderContext",
+        platform === IOS && "PanelHeaderContext--ios",
+        opened && "PanelHeaderContext--opened",
+        closing && "PanelHeaderContext--closing",
+        isDesktop && "PanelHeaderContext--desktop",
+        // TODO v5.0.0 поправить под новую адаптивность
+        (platform !== IOS || (platform === IOS && isDesktop)) &&
+          "PanelHeaderContext--rounded"
+      )}
       vertical="top"
     >
       <div