VKCOM · SevereCloud · Jul 6, 2026
@@ -251,34 +251,6 @@
   color: var(--vkui--color_text_negative);
 }
 
-/**
- * VKCOM
- */
-
-.vkcom {
-  inline-size: 400px;
-  box-shadow:
-    0 0 2px rgb(0, 0, 0, 0.12),
-    0 0 96px rgb(0, 0, 0, 0.16);
-}
-
-.vkcom .content {
-  padding-block-end: 20px;
-}
-
-.vkcom .actions {
-  padding-block: 0 12px;
-  padding-inline: 20px;
-}
-
-.vkcom .button {
-  order: 2;
-}
-
-.vkcom .buttonModeCancel {
-  order: 1;
-}
-
 .dismiss {
   position: absolute;
   inset-block-start: 8px;

@@ -16,11 +16,9 @@ import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
 import { Alert, type AlertProps } from './Alert';
 import styles from './Alert.module.css';
-import buttonStyles from '../Button/Button.module.css';
 import modalDismissButtonStyles from '../ModalDismissButton/ModalDismissButton.module.css';
 import popoutWrapperStyles from '../PopoutWrapper/PopoutWrapper.module.css';
 import captionStyles from '../Typography/Caption/Caption.module.css';
-import footnoteStyles from '../Typography/Footnote/Footnote.module.css';
 import titleStyles from '../Typography/Title/Title.module.css';
 import typographyStyles from '../Typography/Typography.module.css';
 
@@ -393,36 +391,6 @@ describe('Alert', () => {
     }),
   );
 
-  it.each([
-    {
-      mode: 'cancel' as const,
-      className: styles.buttonModeCancel,
-      buttonClassName: buttonStyles.modeSecondary,
-    },
-    {
-      mode: 'destructive' as const,
-      className: undefined,
-      buttonClassName: buttonStyles.modePrimary,
-    },
-  ])(
-    'should have className "$className" ans "$buttonClassName" with mode "$mode" in VKCOM platform',
-    withFakeTimers(async ({ mode, className, buttonClassName }) => {
-      const result = render(
-        <ConfigProvider platform={Platform.VKCOM}>
-          <Alert
-            onClosed={vi.fn()}
-            actions={[{ 'title': 'Allow', mode, 'data-testid': 'allow-test-id' }]}
-          />
-        </ConfigProvider>,
-      );
-      await waitCSSKeyframesAnimation(result.getByRole('alertdialog'), {
-        runOnlyPendingTimers: true,
-      });
-      className && expect(screen.getByTestId('allow-test-id')).toHaveClass(className);
-      expect(screen.getByTestId('allow-test-id')).toHaveClass(buttonClassName);
-    }),
-  );
-
   describe('handles dismissButtonMode', () => {
     fakeTimersForScope();
     it.each<AlertProps['dismissButtonMode']>([
@@ -493,13 +461,6 @@ describe('Alert', () => {
       descriptionClassNames: [captionStyles.level1],
       platform: Platform.IOS,
     },
-    {
-      title: 'Header',
-      titleClassNames: [titleStyles.level2, typographyStyles.weight2],
-      description: 'Text',
-      descriptionClassNames: [footnoteStyles.host],
-      platform: Platform.VKCOM,
-    },
     {
       title: 'Header',
       titleClassNames: [titleStyles.level2, typographyStyles.weight2],

@@ -4,7 +4,7 @@ import type * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { AnchorHTMLAttributesOnly } from '../../types';
-import { Button, type ButtonProps } from '../Button/Button';
+import { Button } from '../Button/Button';
 import { Tappable } from '../Tappable/Tappable';
 import type { AlertActionInterface } from './Alert';
 import styles from './Alert.module.css';
@@ -37,22 +37,7 @@ const AlertActionIos = ({ mode, ...restProps }: AlertActionProps) => {
 };
 
 const AlertActionBase = ({ mode, ...restProps }: AlertActionProps) => {
-  const platform = usePlatform();
-
-  let buttonMode: ButtonProps['mode'] = 'tertiary';
-
-  if (platform === 'vkcom') {
-    buttonMode = mode === 'cancel' ? 'secondary' : 'primary';
-  }
-
-  return (
-    <Button
-      className={classNames(styles.button, mode === 'cancel' && styles.buttonModeCancel)}
-      mode={buttonMode}
-      size="m"
-      {...restProps}
-    />
-  );
+  return <Button mode="tertiary" size="m" {...restProps} />;
 };
 
 export const AlertAction = (props: AlertActionProps): React.ReactNode => {

@@ -1,8 +1,5 @@
-'use client';
-
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { usePlatform } from '../../hooks/usePlatform';
 import type { AlertActionInterface, AlertProps } from './Alert';
 import { AlertAction } from './AlertAction';
 import styles from './Alert.module.css';
@@ -33,17 +30,12 @@ export const AlertActions = ({
   actionsAlign,
   actionsLayout,
 }: AlertActionsProps): React.ReactNode => {
-  const platform = usePlatform();
-
-  const direction: AlertProps['actionsLayout'] =
-    platform === 'vkcom' ? 'horizontal' : actionsLayout;
-
   return (
     <div
       className={classNames(
         styles.actions,
         actionsAlign && alignStyles[actionsAlign],
-        direction && directionStyles[direction],
+        actionsLayout && directionStyles[actionsLayout],
       )}
     >
       {actions.map((action, i) => {

@@ -129,7 +129,6 @@ export const AlertBase = ({
         className={classNames(
           styles.host,
           platform === 'ios' && styles.ios,
-          platform === 'vkcom' && styles.vkcom,
           closing ? styles.closing : styles.opening,
           isDesktop && styles.desktop,
         )}

@@ -5,7 +5,6 @@ import type * as React from 'react';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HasChildren } from '../../types';
 import { Caption } from '../Typography/Caption/Caption';
-import { Footnote } from '../Typography/Footnote/Footnote';
 import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './Alert.module.css';
@@ -17,22 +16,18 @@ interface AlertTypography extends HasChildren {
 export const AlertTitle = (props: AlertTypography): React.ReactNode => {
   const platform = usePlatform();
 
-  switch (platform) {
-    case 'ios':
-      return <Title className={styles.title} weight="1" level="3" {...props} />;
-    default:
-      return <Title className={styles.title} weight="2" level="2" {...props} />;
+  if (platform === 'ios') {
+    return <Title className={styles.title} weight="1" level="3" {...props} />;
   }
+
+  return <Title className={styles.title} weight="2" level="2" {...props} />;
 };
 export const AlertDescription = (props: AlertTypography): React.ReactNode => {
   const platform = usePlatform();
 
-  switch (platform) {
-    case 'vkcom':
-      return <Footnote className={styles.description} {...props} />;
-    case 'ios':
-      return <Caption className={styles.description} {...props} />;
-    default:
-      return <Text Component="span" className={styles.description} weight="3" {...props} />;
+  if (platform === 'ios') {
+    return <Caption className={styles.description} {...props} />;
   }
+
+  return <Text Component="span" className={styles.description} weight="3" {...props} />;
 };