@vkontakte/vkui 6.1.2 → 6.2.0

package/src/components/Typography/DisplayTitle/DisplayTitle.module.css

@@ -0,0 +1,27 @@
+.DisplayTitle--level-1 {
+  font-size: var(--vkui--font_display_title1--font_size--regular);
+  line-height: var(--vkui--font_display_title1--line_height--regular);
+  font-weight: var(--vkui--font_display_title1--font_weight--regular);
+  font-family: var(--vkui--font_display_title1--font_family--regular);
+}
+
+.DisplayTitle--level-2 {
+  font-size: var(--vkui--font_display_title2--font_size--regular);
+  line-height: var(--vkui--font_display_title2--line_height--regular);
+  font-weight: var(--vkui--font_display_title2--font_weight--regular);
+  font-family: var(--vkui--font_display_title2--font_family--regular);
+}
+
+.DisplayTitle--level-3 {
+  font-size: var(--vkui--font_display_title3--font_size--regular);
+  line-height: var(--vkui--font_display_title3--line_height--regular);
+  font-weight: var(--vkui--font_display_title3--font_weight--regular);
+  font-family: var(--vkui--font_display_title3--font_family--regular);
+}
+
+.DisplayTitle--level-4 {
+  font-size: var(--vkui--font_display_title4--font_size--regular);
+  line-height: var(--vkui--font_display_title4--line_height--regular);
+  font-weight: var(--vkui--font_display_title4--font_weight--regular);
+  font-family: var(--vkui--font_display_title4--font_family--regular);
+}

package/src/components/Typography/DisplayTitle/DisplayTitle.tsx

@@ -0,0 +1,38 @@
+import { classNames } from '@vkontakte/vkjs';
+import { Typography, TypographyProps } from '../Typography';
+import styles from './DisplayTitle.module.css';
+
+const stylesLevel = {
+  '1': styles['DisplayTitle--level-1'],
+  '2': styles['DisplayTitle--level-2'],
+  '3': styles['DisplayTitle--level-3'],
+  '4': styles['DisplayTitle--level-4'],
+};
+
+export interface DisplayTitleProps extends TypographyProps {
+  level?: '1' | '2' | '3' | '4';
+}
+
+/**
+ * Используется для крупных заголовков.
+ *
+ * @see https://vkcom.github.io/VKUI/#/DisplayTitle
+ */
+export const DisplayTitle = ({
+  className,
+  level = '1',
+  Component = 'span',
+  normalize = true,
+  inline = false,
+  ...restProps
+}: DisplayTitleProps) => {
+  return (
+    <Typography
+      Component={Component}
+      normalize={normalize}
+      inline={inline}
+      className={classNames(className, stylesLevel[level])}
+      {...restProps}
+    />
+  );
+};

package/src/components/Typography/Footnote/Footnote.tsx

@@ -14,11 +14,13 @@ export const Footnote = ({
   caps,
   Component = 'span',
   normalize = true,
+  inline = false,
   ...restProps
 }: FootnoteProps) => (
   <Typography
     Component={Component}
     normalize={normalize}
+    inline={inline}
     className={classNames(className, styles['Footnote'], caps && styles['Footnote--caps'])}
     {...restProps}
   />

package/src/components/Typography/Headline/Headline.tsx

@@ -28,6 +28,7 @@ export const Headline = ({
   level = '1',
   Component = 'span',
   normalize = true,
+  inline = false,
   ...restProps
 }: HeadlineProps) => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -36,6 +37,7 @@ export const Headline = ({
     <Typography
       Component={Component}
       normalize={normalize}
+      inline={inline}
       weight={weight}
       className={classNames(
         className,

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -13,12 +13,14 @@ export const Paragraph = ({
   className,
   Component = 'span',
   normalize = false,
+  inline = false,
   ...restProps
 }: ParagraphProps) => {
   return (
     <Typography
       Component={Component}
       normalize={normalize}
+      inline={inline}
       className={classNames(className, styles['Paragraph'])}
       {...restProps}
     />

package/src/components/Typography/Subhead/Subhead.tsx

@@ -19,6 +19,7 @@ export const Subhead = ({
   className,
   Component = 'span',
   normalize = true,
+  inline = false,
   ...restProps
 }: SubheadProps) => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -27,6 +28,7 @@ export const Subhead = ({
     <Typography
       Component={Component}
       normalize={normalize}
+      inline={inline}
       className={classNames(
         className,
         styles['Subhead'],

package/src/components/Typography/Text/Text.tsx

@@ -19,6 +19,7 @@ export const Text = ({
   className,
   Component = 'span',
   normalize = true,
+  inline = false,
   ...restProps
 }: TextProps) => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -27,6 +28,7 @@ export const Text = ({
     <Typography
       Component={Component}
       normalize={normalize}
+      inline={inline}
       className={classNames(
         className,
         styles['Text'],

package/src/components/Typography/Title/Title.tsx

@@ -22,12 +22,14 @@ export const Title = ({
   level = '1',
   Component = 'span',
   normalize = true,
+  inline = false,
   ...restProps
 }: TitleProps) => {
   return (
     <Typography
       Component={Component}
       normalize={normalize}
+      inline={inline}
       className={classNames(className, stylesLevel[level])}
       {...restProps}
     />

package/src/components/Typography/Typography.module.css

@@ -4,6 +4,10 @@
   padding: 0;
 }
 
+.Typography--inline {
+  display: inline-block;
+}
+
 /* Мы утяжеляем селектор, чтобы перебить другие селекторы */
 .Typography--weight-1.Typography--weight-1.Typography--weight-1 {
   font-weight: var(--vkui--font_weight_accent1);

package/src/components/Typography/Typography.tsx

@@ -26,12 +26,17 @@ export interface TypographyProps
    * Убирает внешние отступы
    */
   normalize?: boolean;
+  /**
+   * Делает блок инлайновым
+   */
+  inline?: boolean;
 }
 
 export const Typography = ({
   weight,
   Component = 'span',
   normalize,
+  inline,
   ...restProps
 }: TypographyProps) => (
   <RootComponent
@@ -39,6 +44,7 @@ export const Typography = ({
     baseClassName={classNames(
       styles['Typography'],
       normalize && styles['Typography--normalize'],
+      inline && styles['Typography--inline'],
       weight && stylesWeight[weight],
     )}
     {...restProps}

package/src/components/View/View.module.css

@@ -1,20 +1,66 @@
 .View {
+  --vkui_internal--view_animation_translateY_initial: 80px;
+
   position: relative;
   block-size: 100%;
   inline-size: 100%;
   word-wrap: break-word;
 }
 
+@media (--reduce-motion) {
+  .View {
+    --vkui_internal--view_animation_translateY_initial: 0;
+  }
+}
+
 .View--animated,
 .View--swiping-back {
   overflow: hidden;
 }
 
-.View--animated .View__panel,
-.View--animated .View__header,
-.View--swiping-back .View__panel,
-.View--swiping-back .View__header {
+.View__panel-overlay {
+  display: none;
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  background-color: #000;
   pointer-events: none;
+  z-index: var(--vkui_internal--z_index_panel_header_fade);
+}
+
+.View__panel--prev .View__panel-overlay {
+  display: block;
+  animation: animation-ios-overlay-fade-in 0.6s var(--vkui--animation_easing_platform);
+}
+
+.View__panel--next .View__panel-overlay {
+  display: block;
+  animation: animation-ios-overlay-fade-out 0.6s var(--vkui--animation_easing_platform) forwards;
+}
+
+.View__panel--active .View__panel-overlay,
+.View__panel--prev ~ .View__panel--next .View__panel-overlay,
+.View__panel--next ~ .View__panel--prev .View__panel-overlay {
+  display: none;
+}
+
+.View__panel--swipe-back-next .View__panel-overlay {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.View__panel--swipe-back-next.View__panel--swipe-back-success .View__panel-overlay,
+.View__panel--swipe-back-next.View__panel--swipe-back-failed .View__panel-overlay {
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+}
+
+@media (--reduce-motion) {
+  .View__panel--prev .View__panel-overlay,
+  .View__panel--next .View__panel-overlay {
+    display: none;
+    animation: none;
+  }
 }
 
 .View__panels {
@@ -22,6 +68,10 @@
   inline-size: 100%;
 }
 
+.View__panel-in {
+  block-size: 100%;
+}
+
 .View__panel {
   position: relative;
   inline-size: 100%;
@@ -30,8 +80,11 @@
   isolation: isolate;
 }
 
-.View__panel-in {
-  block-size: 100%;
+.View--animated .View__panel,
+.View--animated .View__header,
+.View--swiping-back .View__panel,
+.View--swiping-back .View__header {
+  pointer-events: none;
 }
 
 .View--animated .View__panel,
@@ -42,51 +95,30 @@
   overflow: hidden;
 }
 
-.View__panel-overlay {
-  display: none;
-  position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  background-color: #000;
-  pointer-events: none;
-  z-index: var(--vkui_internal--z_index_panel_header_fade);
-}
-
 /**
  * Panel swipe back
  */
 
-.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-success {
+.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-success,
+.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-failed,
+.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success,
+.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed {
   transition: transform 0.3s var(--vkui--animation_easing_platform);
-  transform: translate3d(100%, 0, 0);
 }
 
+.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-failed,
 .View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success {
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
   transform: translate3d(0, 0, 0);
 }
 
-.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-failed {
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
-  transform: translate3d(0, 0, 0);
+.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-success {
+  transform: translate3d(100%, 0, 0);
 }
 
 .View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed {
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
   transform: translate3d(-50%, 0, 0);
 }
 
-.View--ios .View__panel--swipe-back-next .View__panel-overlay {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success .View__panel-overlay,
-.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed .View__panel-overlay {
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
-}
-
 /**
  * Panel transition
  */
@@ -99,33 +131,6 @@
   animation: animation-view-next-forward 0.3s var(--vkui--animation_easing_platform);
 }
 
-.View--no-motion .View__panel {
-  animation: none;
-}
-
-@keyframes animation-view-prev-back {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translateY(80px);
-  }
-}
-@keyframes animation-view-next-forward {
-  from {
-    opacity: 0;
-    transform: translateY(80px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .View--ios .View__panel--prev {
   animation: animation-ios-prev-forward 0.6s var(--vkui--animation_easing_platform);
 }
@@ -142,37 +147,54 @@
   animation: animation-ios-prev-back 0.6s var(--vkui--animation_easing_platform) forwards;
 }
 
-.View--ios .View__panel--prev .View__panel-overlay,
-.View--ios .View__panel--next .View__panel-overlay {
-  display: block;
-}
-
-.View--ios .View__panel--prev .View__panel-overlay {
-  animation: animation-ios-fade-in 0.6s var(--vkui--animation_easing_platform);
-}
+@media (--reduce-motion) {
+  .View--ios .View__panel--prev,
+  .View--ios .View__panel--next {
+    animation: none;
+  }
 
-.View--ios .View__panel--next .View__panel-overlay {
-  animation: animation-ios-fade-out 0.6s var(--vkui--animation_easing_platform) forwards;
-}
+  .View--ios .View__panel--next ~ .View__panel--prev {
+    animation-name: animation-view-prev-back;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+  }
 
-.View--ios .View__panel--prev ~ .View__panel--next .View__panel-overlay,
-.View--ios .View__panel--next ~ .View__panel--prev .View__panel-overlay {
-  display: none;
+  .View--ios .View__panel--prev ~ .View__panel--next {
+    animation-name: animation-view-next-forward;
+    animation-duration: 0.3s;
+    animation-fill-mode: none;
+  }
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.View--no-motion .View__panel,
 .View--ios.View--no-motion .View__panel,
 .View--ios.View--no-motion .View__panel :global(.vkuiInternalPanel__in) {
   animation: none;
 }
 
-/**
- * Active panel
- */
-.View--ios .View__panel--active .View__panel-overlay {
-  display: none;
+@keyframes animation-view-prev-back {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(var(--vkui_internal--view_animation_translateY_initial));
+  }
 }
+@keyframes animation-view-next-forward {
+  from {
+    opacity: 0;
+    transform: translateY(var(--vkui_internal--view_animation_translateY_initial));
+  }
 
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 @keyframes animation-ios-next-forward {
   from {
     transform: translate3d(100%, 0, 0);
@@ -209,7 +231,7 @@
     transform: translate3d(100%, 0, 0);
   }
 }
-@keyframes animation-ios-fade-in {
+@keyframes animation-ios-overlay-fade-in {
   from {
     opacity: 0;
   }
@@ -218,7 +240,7 @@
     opacity: 0.3;
   }
 }
-@keyframes animation-ios-fade-out {
+@keyframes animation-ios-overlay-fade-out {
   from {
     opacity: 0.3;
   }