@vkontakte/vkui 4.31.0 → 4.32.0

package/src/components/Button/Button.css

@@ -10,6 +10,11 @@
   user-select: none;
   border-radius: var(--vkui--size_border_radius--regular);
   max-width: 100%;
+  min-width: var(--vkui--size_button_minimum_width--regular);
+}
+
+.Button--singleIcon {
+  min-width: var(--vkui--size_button_small_height--compact);
 }
 
 .Button--stretched {
@@ -25,7 +30,6 @@
   justify-content: center;
   width: 100%;
   min-height: inherit;
-  padding: 1px 16px;
   text-align: center;
   box-sizing: border-box;
 }
@@ -51,38 +55,130 @@
   opacity: 0.64;
 }
 
-/* only 1 icon cases */
-/* sizeY: compact */
-.Button--singleIcon.Button--sz-s .Button__in {
-  padding: 0 9px;
+.Button__content {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.Button--singleIcon.Button--sz-m .Button__in {
-  padding: 0 10px;
+.Button--sz-s .Button__content:first-child {
+  padding-left: var(--vkui--size_button_base_small_padding_horizontal--regular);
 }
 
-.Button--singleIcon.Button--sz-l .Button__in {
-  padding: 0 6px;
+.Button--sz-s .Button__content:last-child,
+.Button--sz-s .Button__after {
+  padding-right: var(
+    --vkui--size_button_base_small_padding_horizontal--regular
+  );
 }
 
-/* sizeX: REGULAR */
-.Button--singleIcon.Button--sizeY-regular.Button--sz-s .Button__in {
-  padding: 0 9px;
+.Button--sz-m .Button__content:first-child {
+  padding-left: var(
+    --vkui--size_button_base_medium_padding_horizontal--regular
+  );
 }
 
-.Button--singleIcon.Button--sizeY-regular.Button--sz-l .Button__in {
-  padding: 0 10px;
+.Button--sz-m .Button__content:last-child,
+.Button--sz-m .Button__after {
+  padding-right: var(
+    --vkui--size_button_base_medium_padding_horizontal--regular
+  );
 }
 
-.Button--singleIcon .Button__before:only-child,
-.Button--singleIcon .Button__after:only-child {
-  margin: 0;
+.Button--sz-l .Button__content:first-child {
+  padding-left: var(--vkui--size_button_base_large_padding_horizontal--regular);
 }
 
-.Button__content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+.Button--sz-l .Button__content:last-child,
+.Button--sz-l .Button__after {
+  padding-right: var(
+    --vkui--size_button_base_large_padding_horizontal--regular
+  );
+}
+
+.Button--sz-s .Button__before {
+  padding-left: var(
+    --vkui--size_button_base_small_padding_horizontal_icon--regular
+  );
+}
+
+.Button--sz-m .Button__before {
+  padding-left: var(
+    --vkui--size_button_base_medium_padding_horizontal_icon--regular
+  );
+}
+
+.Button--sz-l .Button__before {
+  padding-left: var(
+    --vkui--size_button_base_large_padding_horizontal_icon--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-s .Button__content:first-child {
+  padding-left: var(
+    --vkui--size_button_tertiary_small_padding_horizontal--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-s .Button__content:last-child,
+.Button--lvl-tertiary.Button--sz-s .Button__after {
+  padding-right: var(
+    --vkui--size_button_tertiary_small_padding_horizontal--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-m .Button__content:first-child {
+  padding-left: var(
+    --vkui--size_button_tertiary_medium_padding_horizontal--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-m .Button__content:last-child,
+.Button--lvl-tertiary.Button--sz-m .Button__after {
+  padding-right: var(
+    --vkui--size_button_tertiary_medium_padding_horizontal--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-l .Button__content:first-child {
+  padding-left: var(
+    --vkui--size_button_tertiary_large_padding_horizontal--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-l .Button__content:last-child,
+.Button--lvl-tertiary.Button--sz-l .Button__after {
+  padding-right: var(
+    --vkui--size_button_tertiary_large_padding_horizontal--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-s .Button__before {
+  padding-left: var(
+    --vkui--size_button_tertiary_small_padding_horizontal_icon--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-m .Button__before {
+  padding-left: var(
+    --vkui--size_button_tertiary_medium_padding_horizontal_icon--regular
+  );
+}
+
+.Button--lvl-tertiary.Button--sz-l .Button__before {
+  padding-left: var(
+    --vkui--size_button_tertiary_large_padding_horizontal_icon--regular
+  );
+}
+
+.Button--singleIcon .Button__after,
+.Button--singleIcon .Button__before,
+.Button--lvl-tertiary.Button--singleIcon .Button__after,
+.Button--lvl-tertiary.Button--singleIcon .Button__before {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .Button__content--caps {
@@ -452,10 +548,6 @@
   box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_contrast--active);
 }
 
-.Button__before:not(:last-child) {
-  margin-left: -4px;
-}
-
 .Button__before:not(:last-child) + .Button__content {
   margin-left: 6px;
 }
@@ -474,8 +566,6 @@
 
 .Button--sz-l .Button__in {
   justify-content: center;
-  padding-left: 20px;
-  padding-right: 20px;
 }
 
 .Button:not(.Button--sz-s) .Button__content {
@@ -489,24 +579,50 @@
   min-height: var(--vkui--size_button_medium_height--compact);
 }
 
+.Button--sz-m.Button--singleIcon {
+  width: var(--vkui--size_button_medium_height--compact);
+}
+
 .Button--sz-l {
   min-height: var(--vkui--size_button_large_height--compact);
 }
 
+.Button--sz-l.Button--singleIcon {
+  width: var(--vkui--size_button_large_height--compact);
+}
+
 /**
  * sizeY REGULAR
  */
 .Button--sizeY-regular {
   min-height: var(--vkui--size_button_small_height--regular);
 }
+/**
+ * v5 MOVE TO NEW ADAPTIVITY
+ */
+.Button--sizeY-regular.Button--singleIcon {
+  width: var(--vkui--size_button_small_height--regular);
+}
 
 .Button--sizeY-regular.Button--sz-m {
   min-height: var(--vkui--size_button_medium_height--regular);
 }
+/**
+ * v5 MOVE TO NEW ADAPTIVITY
+ */
+.Button--sizeY-regular.Button--sz-l.Button--singleIcon {
+  width: var(--vkui--size_button_medium_height--regular);
+}
 
 .Button--sizeY-regular.Button--sz-l {
   min-height: var(--vkui--size_button_large_height--regular);
 }
+/**
+ * v5 MOVE TO NEW ADAPTIVITY
+ */
+.Button--sizeY-regular.Button--sz-l.Button--singleIcon {
+  width: var(--vkui--size_button_large_height--regular);
+}
 
 /**
  * CMP:
@@ -529,7 +645,22 @@
 }
 
 .Banner__actions > .Button--lvl-tertiary {
-  margin: 4px 16px 2px -16px;
+  margin: 4px 16px 2px
+    calc(
+      -1 * var(--vkui--size_button_tertiary_small_padding_horizontal--regular)
+    );
+}
+
+.Banner__actions > .Button--sz-m.Button--lvl-tertiary {
+  margin-left: calc(
+    -1 * var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)
+  );
+}
+
+.Banner__actions > .Button--sz-l.Button--lvl-tertiary {
+  margin-left: calc(
+    -1 * var(--vkui--size_button_tertiary_large_padding_horizontal--regular)
+  );
 }
 
 .Banner__actions > .Button--lvl-tertiary:first-child {
@@ -544,7 +675,7 @@
 
 .Banner__actions > .Button:not(.Button--lvl-tertiary) + .Button--lvl-tertiary {
   margin-top: 2px;
-  margin-left: -16px;
+  margin-left: -12px;
 }
 
 .Banner__actions > .Button--lvl-tertiary + .Button--lvl-tertiary {

package/src/components/Button/Button.tsx

@@ -3,7 +3,7 @@ import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Caption } from "../Typography/Caption/Caption";
 import { HasAlign, HasComponent } from "../../types";
@@ -14,8 +14,8 @@ import {
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
 import { PlatformType, IOS, VKCOM, ANDROID } from "../../lib/platform";
-import Spinner from "../Spinner/Spinner";
-import Headline from "../Typography/Headline/Headline";
+import { Spinner } from "../Spinner/Spinner";
+import { Headline } from "../Typography/Headline/Headline";
 import "./Button.css";
 
 export interface VKUIButtonProps extends HasAlign {
@@ -60,10 +60,10 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
   switch (size) {
     case "l":
       if (isCompact) {
-        return <Text weight="medium" {...restProps} />;
+        return <Text weight="2" {...restProps} />;
       }
       if (platform === ANDROID) {
-        return <Headline weight="medium" {...restProps} />;
+        return <Headline weight="2" {...restProps} />;
       }
       return <Title level="3" weight="2" {...restProps} />;
     case "m":
@@ -73,7 +73,7 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
         );
       }
 
-      return <Text weight="medium" {...restProps} />;
+      return <Text weight="2" {...restProps} />;
     case "s":
     default:
       if (platform === IOS) {
@@ -191,7 +191,11 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     >
       {loading && <Spinner size="small" vkuiClass="Button__spinner" />}
       <span vkuiClass="Button__in">
-        {before && <span vkuiClass="Button__before">{before}</span>}
+        {before && (
+          <span vkuiClass="Button__before" role="presentation">
+            {before}
+          </span>
+        )}
         {children && (
           <ButtonTypography
             size={size}
@@ -203,12 +207,19 @@ const ButtonComponent: React.FC<ButtonProps> = ({
             {children}
           </ButtonTypography>
         )}
-        {after && <span vkuiClass="Button__after">{after}</span>}
+        {after && (
+          <span vkuiClass="Button__after" role="presentation">
+            {after}
+          </span>
+        )}
       </span>
     </Tappable>
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Button
+ */
 export const Button = withAdaptivity(ButtonComponent, {
   sizeY: true,
 });

package/src/components/Button/Readme.md

@@ -21,18 +21,18 @@ const Example = () => {
   const buttonBefore =
     addBefore &&
     (size === "s" ? (
-      <Icon12Add />
+      <Icon12Add aria-hidden />
     ) : size === "m" ? (
-      <Icon16Add />
+      <Icon16Add aria-hidden />
     ) : (
-      <Icon24Add />
+      <Icon24Add aria-hidden />
     ));
   const buttonAfter =
     addAfter &&
     (size === "s" ? (
-      <Icon12Tag />
+      <Icon12Tag aria-hidden />
     ) : size === "m" ? (
-      <Icon24ChevronCompactRight />
+      <Icon24ChevronCompactRight aria-hidden />
     ) : (
       <Counter>16</Counter>
     ));

package/src/components/ButtonGroup/ButtonGroup.css

@@ -1,6 +1,7 @@
 .ButtonGroup {
   display: inline-flex;
-  align-items: flex-start; /* Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */
+  align-items: flex-start; /* [Примечание 1] Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */
+  max-width: 100%; /* [Примечание 2] Чтобы блок не выходил за границы контейнера (связано с [Примечание 4]) */
 }
 
 .ButtonGroup--stretched {
@@ -19,8 +20,7 @@
 /* stylelint-disable vkui/atomic */
 
 /**
- * # Обоснование
- * Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
+ * [Примечание 3] Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
  */
 
 /* "gap" для mode="vertical" */
@@ -37,6 +37,18 @@
 }
 
 /* "gap" для mode="horizontal" */
+.ButtonGroup--mode-horizontal > *:not(.ButtonGroup) {
+  /**
+   * [Примечание 4]
+   *
+   * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
+   * из-за чего элементы при переполнении будут выходить за границы контейнера.
+   *
+   * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
+   */
+  min-width: 0;
+}
+
 .ButtonGroup--mode-horizontal.ButtonGroup--gap-space > *:not(:last-child) {
   margin-right: var(--vkui--size_button_group_gap_space--regular);
 }

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -22,6 +22,9 @@ export interface ButtonGroupProps
   stretched?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ButtonGroup
+ */
 export const ButtonGroup: React.FC<ButtonGroupProps> = ({
   mode = "horizontal",
   gap = "m",

package/src/components/Calendar/Calendar.tsx

@@ -60,6 +60,9 @@ export interface CalendarProps
 
 const warn = warnOnce("Calendar");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Calendar
+ */
 export const Calendar: React.FC<CalendarProps> = ({
   value,
   onChange,

package/src/components/CalendarDays/CalendarDays.tsx

@@ -80,12 +80,7 @@ export const CalendarDays: React.FC<CalendarDaysProps> = ({
         )}
       >
         {daysNames.map((dayName) => (
-          <Caption
-            level="1"
-            weight="regular"
-            vkuiClass="CalendarDays__weekday"
-            key={dayName}
-          >
+          <Caption key={dayName} level="1" vkuiClass="CalendarDays__weekday">
             {dayName}
           </Caption>
         ))}

package/src/components/CalendarHeader/CalendarHeader.css

@@ -11,8 +11,8 @@
   position: absolute;
 }
 
-.CalendarHeader__pickers > :not(:last-child) {
-  margin-right: 4px;
+.CalendarHeader__picker + .CalendarHeader__picker {
+  margin-left: 4px;
 }
 
 .CalendarHeader__nav-icon {
@@ -35,19 +35,6 @@
   left: 0;
 }
 
-.CalendarHeader__picker-icon {
-  margin-top: -4px;
-  color: var(--vkui--color_icon_secondary);
-}
-
-.CalendarHeader__month_name {
+.CalendarHeader__month {
   text-transform: capitalize;
 }
-
-.CalendarHeader__pickers-placeholder {
-  text-transform: capitalize;
-}
-
-.CalendarHeader__pickers .CustomSelectDropdown__CustomScrollView {
-  max-height: 184px;
-}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -7,16 +7,13 @@ import {
 } from "@vkontakte/icons";
 import Tappable from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
-import {
-  CustomSelect,
-  CustomSelectProps,
-  SelectType,
-} from "../CustomSelect/CustomSelect";
-import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption";
+import { SelectType } from "../Select/Select";
+import { CustomSelect } from "../CustomSelect/CustomSelect";
 import { SizeType } from "../../hoc/withAdaptivity";
 import { getMonths, getYears } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
+import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
 import "./CalendarHeader.css";
 
 export interface CalendarHeaderProps
@@ -42,18 +39,6 @@ export interface CalendarHeaderProps
   onPrevMonth?(): void;
 }
 
-const renderOption: CustomSelectProps["renderOption"] = ({
-  option,
-  children,
-  ...props
-}) => {
-  return (
-    <CustomSelectOption {...props}>
-      <span vkuiClass="CalendarHeader__month_name">{children}</span>
-    </CustomSelectOption>
-  );
-};
-
 export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   viewDate,
   onChange,
@@ -94,7 +79,14 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
     [onChange, viewDate]
   );
 
-  const months = React.useMemo(() => getMonths(locale), [locale]);
+  const months = React.useMemo(
+    () =>
+      getMonths(locale).map(({ value, label }) => ({
+        value,
+        label: <span vkuiClass="CalendarHeader__month">{label}</span>,
+      })),
+    [locale]
+  );
 
   const currentYear = viewDate.getFullYear();
 
@@ -108,82 +100,78 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   return (
     <div vkuiClass="CalendarHeader" className={className}>
       {prevMonth && (
-        <Tappable
-          vkuiClass={classNames(
-            "CalendarHeader__nav-icon",
-            "CalendarHeader__nav-icon-prev"
-          )}
-          onClick={onPrevMonth}
-          aria-label={`${prevMonthAriaLabel}, ${formatter.format(
-            subMonths(viewDate, 1)
-          )}`}
-        >
-          {prevMonthIcon}
-        </Tappable>
+        <AdaptivityProvider sizeX={SizeType.REGULAR}>
+          <Tappable
+            vkuiClass={classNames(
+              "CalendarHeader__nav-icon",
+              "CalendarHeader__nav-icon-prev"
+            )}
+            onClick={onPrevMonth}
+            aria-label={`${prevMonthAriaLabel}, ${formatter.format(
+              subMonths(viewDate, 1)
+            )}`}
+          >
+            {prevMonthIcon}
+          </Tappable>
+        </AdaptivityProvider>
+      )}
+      {disablePickers ? (
+        <Paragraph vkuiClass="CalendarHeader__pickers" weight="2">
+          <span vkuiClass="CalendarHeader__month">
+            {new Intl.DateTimeFormat(locale, {
+              month: "long",
+            }).format(viewDate)}
+          </span>
+          &nbsp;
+          {new Intl.DateTimeFormat(locale, {
+            year: "numeric",
+          }).format(viewDate)}
+        </Paragraph>
+      ) : (
+        <div vkuiClass="CalendarHeader__pickers">
+          <CustomSelect
+            vkuiClass="CalendarHeader__picker"
+            value={viewDate.getMonth()}
+            options={months}
+            dropdownOffsetDistance={4}
+            fixDropdownWidth={false}
+            sizeY={SizeType.COMPACT}
+            icon={<Icon12Dropdown />}
+            onChange={onMonthsChange}
+            forceDropdownPortal={false}
+            selectType={SelectType.accent}
+            aria-label={changeMonthAriaLabel}
+          />
+          <CustomSelect
+            vkuiClass="CalendarHeader__picker"
+            value={viewDate.getFullYear()}
+            options={years}
+            dropdownOffsetDistance={4}
+            fixDropdownWidth={false}
+            sizeY={SizeType.COMPACT}
+            icon={<Icon12Dropdown />}
+            onChange={onYearChange}
+            forceDropdownPortal={false}
+            selectType={SelectType.accent}
+            aria-label={changeYearAriaLabel}
+          />
+        </div>
       )}
-      <div vkuiClass="CalendarHeader__pickers">
-        {disablePickers ? (
-          <React.Fragment>
-            <Paragraph
-              weight="2"
-              vkuiClass="CalendarHeader__pickers-placeholder"
-            >
-              {new Intl.DateTimeFormat(locale, {
-                month: "long",
-              }).format(viewDate)}
-            </Paragraph>
-            <Paragraph
-              weight="2"
-              vkuiClass="CalendarHeader__pickers-placeholder"
-            >
-              {new Intl.DateTimeFormat(locale, {
-                year: "numeric",
-              }).format(viewDate)}
-            </Paragraph>
-          </React.Fragment>
-        ) : (
-          <React.Fragment>
-            <CustomSelect
-              value={viewDate.getMonth()}
-              options={months}
-              renderOption={renderOption}
-              dropdownOffsetDistance={4}
-              fixDropdownWidth={false}
-              sizeY={SizeType.COMPACT}
-              icon={<Icon12Dropdown />}
-              onChange={onMonthsChange}
-              forceDropdownPortal={false}
-              selectType={SelectType.Plain}
-              aria-label={changeMonthAriaLabel}
-            />
-            <CustomSelect
-              value={viewDate.getFullYear()}
-              options={years}
-              dropdownOffsetDistance={4}
-              fixDropdownWidth={false}
-              sizeY={SizeType.COMPACT}
-              icon={<Icon12Dropdown />}
-              onChange={onYearChange}
-              forceDropdownPortal={false}
-              selectType={SelectType.Plain}
-              aria-label={changeYearAriaLabel}
-            />
-          </React.Fragment>
-        )}
-      </div>
       {nextMonth && (
-        <Tappable
-          vkuiClass={classNames(
-            "CalendarHeader__nav-icon",
-            "CalendarHeader__nav-icon-next"
-          )}
-          onClick={onNextMonth}
-          aria-label={`${nextMonthAriaLabel}, ${formatter.format(
-            addMonths(viewDate, 1)
-          )}`}
-        >
-          {nextMonthIcon}
-        </Tappable>
+        <AdaptivityProvider sizeX={SizeType.REGULAR}>
+          <Tappable
+            vkuiClass={classNames(
+              "CalendarHeader__nav-icon",
+              "CalendarHeader__nav-icon-next"
+            )}
+            onClick={onNextMonth}
+            aria-label={`${nextMonthAriaLabel}, ${formatter.format(
+              addMonths(viewDate, 1)
+            )}`}
+          >
+            {nextMonthIcon}
+          </Tappable>
+        </AdaptivityProvider>
       )}
     </div>
   );