@vkontakte/vkui 4.32.0 → 4.33.0

package/src/components/ContentCard/ContentCard.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Card, CardProps } from "../Card/Card";
 import { Caption } from "../Typography/Caption/Caption";
-import { Title } from "../Typography/Title/Title";
+import { Headline } from "../Typography/Headline/Headline";
 import { Text } from "../Typography/Text/Text";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { HasRef, HasRootRef } from "../../types";
@@ -52,36 +50,33 @@ const warn = warnOnce("ContentCard");
 /**
  * @see https://vkcom.github.io/VKUI/#/ContentCard
  */
-const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
-  const {
-    subtitle,
-    header,
-    text,
-    caption,
-    // card props
-    className,
-    mode,
-    style,
-    getRootRef,
-    // img props
-    getRef,
-    maxHeight,
-    image,
-    src,
-    srcSet,
-    alt,
-    width,
-    height,
-    crossOrigin,
-    decoding,
-    loading,
-    referrerPolicy,
-    sizes,
-    useMap,
-    ...restProps
-  } = props;
-  const platform = usePlatform();
-
+export const ContentCard = ({
+  subtitle,
+  header,
+  text,
+  caption,
+  // card props
+  className,
+  mode = "shadow",
+  style,
+  getRootRef,
+  // img props
+  getRef,
+  maxHeight,
+  image,
+  src,
+  srcSet,
+  alt,
+  width,
+  height,
+  crossOrigin,
+  decoding,
+  loading,
+  referrerPolicy,
+  sizes,
+  useMap,
+  ...restProps
+}: ContentCardProps) => {
   const source = image || src;
 
   if (image && process.env.NODE_ENV === "development") {
@@ -92,10 +87,10 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
     <Card
       mode={mode}
       getRootRef={getRootRef}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("ContentCard", platform), {
-        "ContentCard--disabled": restProps.disabled,
-      })}
+      vkuiClass={classNames(
+        "ContentCard",
+        restProps.disabled && "ContentCard--disabled"
+      )}
       style={style}
       className={className}
     >
@@ -126,30 +121,30 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
         )}
         <div vkuiClass="ContentCard__body">
           {hasReactNode(subtitle) && (
-            <Caption caps vkuiClass="ContentCard__text" weight="1" level="3">
+            <Caption
+              vkuiClass="ContentCard__text ContentCard__subtitle"
+              weight="1"
+              level="3"
+              caps
+            >
               {subtitle}
             </Caption>
           )}
           {hasReactNode(header) && (
-            <Title vkuiClass="ContentCard__text" weight="3" level="1">
+            <Headline vkuiClass="ContentCard__text" weight="2" level="1">
               {header}
-            </Title>
+            </Headline>
           )}
           {hasReactNode(text) && (
             <Text vkuiClass="ContentCard__text">{text}</Text>
           )}
           {hasReactNode(caption) && (
-            <Caption vkuiClass="ContentCard__text">{caption}</Caption>
+            <Caption vkuiClass="ContentCard__text ContentCard__caption">
+              {caption}
+            </Caption>
           )}
         </div>
       </Tappable>
     </Card>
   );
 };
-
-ContentCard.defaultProps = {
-  mode: "shadow",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ContentCard;

package/src/components/ContentCard/Readme.md

@@ -36,6 +36,12 @@ const Example = () => {
               header="ContentCard example"
               caption="VKUI Styleguide > Blocks > ContentCard"
             />
+            <ContentCard
+              subtitle="VKUI"
+              header="ContentCard example"
+              caption="VKUI Styleguide > Blocks > ContentCard"
+              mode="tint"
+            />
             <ContentCard
               onClick={() => {}}
               src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"

package/src/components/DateInput/DateInput.tsx

@@ -4,7 +4,7 @@ import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
 import { Calendar, CalendarProps } from "../Calendar/Calendar";
 import { Popper, Placement } from "../Popper/Popper";
 import { multiRef } from "../../lib/utils";
-import IconButton from "../IconButton/IconButton";
+import { IconButton } from "../IconButton/IconButton";
 import { classNames } from "../../lib/classNames";
 import { FormField } from "../FormField/FormField";
 import { HasRootRef } from "../../types";

package/src/components/DatePicker/DatePicker.tsx

@@ -210,7 +210,7 @@ const DatePickerNative: React.FC<
 /**
  * @see https://vkcom.github.io/VKUI/#/DatePicker
  */
-const DatePicker: React.FC<DatePickerProps> = ({
+const DatePickerComponent: React.FC<DatePickerProps> = ({
   hasMouse,
   defaultValue,
   ...props
@@ -235,7 +235,8 @@ const DatePicker: React.FC<DatePickerProps> = ({
   return <Cmp {...props} {...value} onDateChange={onDateChange} />;
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(DatePicker, {
+export const DatePicker = withAdaptivity(DatePickerComponent, {
   hasMouse: true,
 });
+
+DatePicker.displayName = "DatePicker";

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -6,7 +6,7 @@ import {
   CalendarRangeProps,
 } from "../CalendarRange/CalendarRange";
 import { Popper, Placement } from "../Popper/Popper";
-import IconButton from "../IconButton/IconButton";
+import { IconButton } from "../IconButton/IconButton";
 import { HasRootRef } from "../../types";
 import { useDateInput } from "../../hooks/useDateInput";
 import { useAdaptivity } from "../../hooks/useAdaptivity";

package/src/components/Epic/Epic.tsx

@@ -20,10 +20,7 @@ export interface EpicProps
 
 const warn = warnOnce("Epic");
 
-/**
- * @see https://vkcom.github.io/VKUI/#/Epic
- */
-export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
+const EpicComponent: React.FC<EpicProps & AdaptivityContextInterface> = (
   props
 ) => {
   const platform = usePlatform();
@@ -60,7 +57,11 @@ export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Epic, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Epic
+ */
+export const Epic = withAdaptivity(EpicComponent, {
   viewWidth: true,
 });
+
+Epic.displayName = "Epic";

package/src/components/FixedLayout/FixedLayout.css

@@ -18,7 +18,7 @@
 }
 
 .FixedLayout--filled {
-  background: var(--background_content);
+  background: var(--background_content, var(--vkui--color_background_content));
 }
 
 .FixedLayout--top {

package/src/components/FixedLayout/FixedLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
+import { IOS } from "../../lib/platform";
 import { classNames } from "../../lib/classNames";
 import { HasRef, HasRootRef } from "../../types";
 import { SplitColContext } from "../SplitCol/SplitCol";
@@ -31,7 +31,7 @@ export interface FixedLayoutState {
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */
-const FixedLayout: React.FC<FixedLayoutProps> = ({
+export const FixedLayout: React.FC<FixedLayoutProps> = ({
   children,
   style,
   vertical,
@@ -54,12 +54,10 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
       {...restProps}
       fixed
       ref={getRootRef}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("FixedLayout", platform),
-        {
-          "FixedLayout--filled": filled,
-        },
+        "FixedLayout",
+        platform === IOS && "FixedLayout--ios",
+        filled && "FixedLayout--filled",
         `FixedLayout--${vertical}`
       )}
       style={{ ...style, width }}
@@ -70,6 +68,3 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
     </TooltipContainer>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default FixedLayout;

package/src/components/FocusVisible/FocusVisible.css

@@ -5,7 +5,7 @@
   right: 2px;
   bottom: 2px;
   border-radius: inherit;
-  box-shadow: 0 0 0 2px var(--accent);
+  box-shadow: 0 0 0 2px var(--accent, var(--vkui--color_stroke_accent));
   user-select: none;
   pointer-events: none;
   overflow: hidden;

package/src/components/FocusVisible/FocusVisible.tsx

@@ -1,19 +1,16 @@
-import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import "./FocusVisible.css";
 
 export type FocusVisibleMode = "inside" | "outside";
 
-interface FocusVisibleProps {
+export interface FocusVisibleProps {
   mode: FocusVisibleMode;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
  */
-export const FocusVisible: React.FC<FocusVisibleProps> = ({
-  mode,
-}: FocusVisibleProps) => (
+export const FocusVisible = ({ mode }: FocusVisibleProps) => (
   <span
     aria-hidden="true"
     vkuiClass={classNames("FocusVisible", `FocusVisible--${mode}`)}

package/src/components/FormItem/FormItem.css

@@ -1,6 +1,7 @@
 .FormItem {
   display: block;
-  padding: 12px var(--formitem_padding);
+  padding: var(--vkui--size_form_item_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .FormItem--removable {
@@ -9,9 +10,12 @@
 }
 
 .FormItem__removable {
-  flex-grow: 1;
-  min-width: 0;
   max-width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  padding: 0;
+  min-width: 1px;
   overflow: hidden;
 }
 
@@ -21,21 +25,21 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
 }
 
 .FormItem__bottom {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   padding-top: 8px;
 }
 
 .FormItem--error .FormItem__bottom {
-  color: var(--field_error_border);
+  color: var(--field_error_border, var(--vkui--color_text_negative));
 }
 
 .FormItem--valid .FormItem__bottom,
 .FormItem--verified .FormItem__bottom {
-  color: var(--field_valid_border);
+  color: var(--field_valid_border, var(--vkui--color_text_positive));
 }
 
 /**
@@ -67,18 +71,23 @@
   flex-shrink: 0;
   flex-basis: 0;
   padding: 0;
-  min-width: 0;
+  min-width: 1px;
 }
 
 .FormLayoutGroup--horizontal .FormItem + .FormItem {
   margin-left: 24px;
 }
 
-.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop {
-  margin-top: -28px;
+.FormItem--withTop .FormItem__removable,
+.FormLayoutGroup--removable .FormItem--withTop {
+  margin-top: calc(
+    -2px - var(--vkui--font_subhead--line_height--regular) - 8px
+  );
 }
 
-.FormLayoutGroup--removable
-  .FormItem--ios.FormItem--withTop.FormItem--sizeY-compact {
-  margin-top: -26px;
+.FormItem--withTop.FormItem--sizeY-compact .FormItem__removable,
+.FormLayoutGroup--removable .FormItem--withTop.FormItem--sizeY-compact {
+  margin-top: calc(
+    -2px - var(--vkui--font_subhead--line_height--compact) - 6px
+  );
 }

package/src/components/FormItem/FormItem.tsx

@@ -58,15 +58,12 @@ export const FormItem: React.FC<FormItemProps> = ({
     <Component
       {...restProps}
       ref={rootEl}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("FormItem", platform),
+        getClassName("FormItem", platform), // TODO: v5 remove
         `FormItem--${status}`,
         `FormItem--sizeY-${sizeY}`,
-        {
-          "FormItem--withTop": hasReactNode(top),
-          "FormItem--removable": removable,
-        }
+        hasReactNode(top) && "FormItem--withTop",
+        removable && "FormItem--removable"
       )}
     >
       {removable ? (

package/src/components/FormLayout/FormLayout.tsx

@@ -13,7 +13,9 @@ export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
  */
-const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {
+export const FormLayout: React.FC<FormLayoutProps> = (
+  props: FormLayoutProps
+) => {
   const {
     children,
     Component = "form",
@@ -37,6 +39,3 @@ const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default FormLayout;

package/src/components/FormLayoutGroup/FormLayoutGroup.css

@@ -1,6 +1,7 @@
 .FormLayoutGroup--horizontal {
   display: flex;
-  padding: 12px var(--vkui--size_base_padding_horizontal--regular);
+  padding: var(--vkui--size_form_item_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .FormLayoutGroup__removable {

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -23,7 +23,7 @@ export interface FormLayoutGroupProps
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
  */
-const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
+export const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
   children,
   mode = "vertical",
   removable,
@@ -40,14 +40,11 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
   return (
     <div
       ref={rootEl}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("FormLayoutGroup", platform),
+        getClassName("FormLayoutGroup", platform), // TODO: v5 remove
         `FormLayoutGroup--sizeY-${sizeY}`,
         `FormLayoutGroup--${mode}`,
-        {
-          "FormLayoutGroup--removable": isRemovable,
-        }
+        isRemovable && "FormLayoutGroup--removable"
       )}
       {...restProps}
     >
@@ -70,6 +67,3 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default FormLayoutGroup;