@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/Popper/Popper.tsx

@@ -58,6 +58,9 @@ const ARROW_PADDING = 8;
 const ARROW_WIDTH = 20;
 const ARROW_HEIGHT = 8;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Popper
+ */
 export const Popper: React.FC<PopperProps> = ({
   targetRef,
   children,

package/src/components/Progress/Progress.css

@@ -1,6 +1,6 @@
 .Progress {
   border-radius: 1px;
-  background: var(--loader_track_fill);
+  background: var(--loader_track_fill, var(--vkui--color_track_background));
   height: 2px;
 }
 
@@ -8,5 +8,5 @@
   height: 100%;
   border-radius: inherit;
   transition: width 0.2s ease;
-  background: var(--accent);
+  background: var(--accent, var(--vkui--color_stroke_accent));
 }

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { HasRootRef } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Progress.css";
 
 export interface ProgressProps
@@ -13,13 +11,14 @@ export interface ProgressProps
 const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 
-const Progress: React.FC<ProgressProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Progress
+ */
+export const Progress: React.FC<ProgressProps> = ({
   value = 0,
   getRootRef,
   ...restProps
 }: ProgressProps) => {
-  const platform = usePlatform();
-
   const progress = Math.max(
     PROGRESS_MIN_VALUE,
     Math.min(value, PROGRESS_MAX_VALUE)
@@ -33,17 +32,13 @@ const Progress: React.FC<ProgressProps> = ({
       aria-valuemin={PROGRESS_MIN_VALUE}
       aria-valuemax={PROGRESS_MAX_VALUE}
       ref={getRootRef}
-      vkuiClass={getClassName("Progress", platform)}
+      vkuiClass="Progress"
     >
-      <div vkuiClass="Progress__bg" aria-hidden="true" />
       <div
         vkuiClass="Progress__in"
         style={{ width: `${progress}%` }}
-        aria-hidden="true"
+        aria-hidden
       />
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Progress;

package/src/components/Progress/Readme.md

@@ -1,14 +1,12 @@
-```
-  <View activePanel="progress">
-    <Panel id="progress">
-      <PanelHeader>
-        Progress
-      </PanelHeader>
-      <Group>
-        <Div>
-          <Progress value={40} />
-        </Div>
-      </Group>
-    </Panel>
-  </View>
+```jsx
+<View activePanel="progress">
+  <Panel id="progress">
+    <PanelHeader>Progress</PanelHeader>
+    <Group>
+      <FormItem id="progresslabel" top="Прогресс">
+        <Progress aria-labelledby="progresslabel" value={40} />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/PromoBanner/PromoBanner.tsx

@@ -48,6 +48,10 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const warn = warnOnce("PromoBanner");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/PromoBanner
+ */
 const PromoBanner = (props: PromoBannerProps) => {
   const platform = usePlatform();
   const { bannerData = {}, onClose, ...restProps } = props;

package/src/components/PullToRefresh/PullToRefresh.css

@@ -29,18 +29,20 @@
   transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
     opacity 220ms ease-out;
   opacity: 0;
+  background: var(
+    --background_suggestions,
+    var(--vkui--color_background_modal)
+  );
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .PullToRefresh--ios .PullToRefresh__spinner {
-  color: var(--icon_outline_secondary);
-}
-
-.PullToRefresh--android .PullToRefresh__spinner,
-.PullToRefresh--vkcom .PullToRefresh__spinner {
-  background: var(--background_suggestions);
-  border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  color: var(--accent);
+  border-radius: none;
+  box-shadow: none;
+  background: none;
+  color: var(--icon_outline_secondary, var(--vkui--color_icon_medium));
 }
 
 .PullToRefresh--watching .PullToRefresh__spinner {