From fe2d02d8d97f7763503b69fb85a887a6b81349fb Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Fri, 15 Dec 2023 00:28:29 +0700
Subject: [PATCH] fix: rest of TODO (FormLayout & SubnavigationButton) (#6280)

---
 packages/vkui/src/components/FormLayout/FormLayout.tsx |  6 +-----
 .../src/components/RootComponent/RootComponent.tsx     |  2 +-
 .../SubnavigationBar/SubnavigationBar.module.css       |  7 +------
 .../components/SubnavigationBar/SubnavigationBar.tsx   |  7 +------
 .../SubnavigationButton/SubnavigationButton.module.css |  7 +------
 styleguide/pages/migration_v6.md                       | 10 ++++++++++
 6 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/vkui/src/components/FormLayout/FormLayout.tsx b/packages/vkui/src/components/FormLayout/FormLayout.tsx
index ec5af1b176..a1cde41f28 100644
--- a/packages/vkui/src/components/FormLayout/FormLayout.tsx
+++ b/packages/vkui/src/components/FormLayout/FormLayout.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
 import { HasComponent, HasRef, HasRootRef } from '../../types';
 import styles from './FormLayout.module.css';
 
@@ -17,20 +16,17 @@ export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
 export const FormLayout = ({
   children,
   Component = 'form',
-  getRef, // TOOD [>=6]: remove
   getRootRef,
   onSubmit = preventDefault,
   className,
   ...restProps
 }: FormLayoutProps) => {
-  const formLayoutRef = useExternRef(getRef, getRootRef);
-
   return (
     <Component
       {...restProps}
       className={classNames(styles['FormLayout'], className)}
       onSubmit={onSubmit}
-      ref={formLayoutRef}
+      ref={getRootRef}
     >
       {children}
       {Component === 'form' && (
diff --git a/packages/vkui/src/components/RootComponent/RootComponent.tsx b/packages/vkui/src/components/RootComponent/RootComponent.tsx
index bc83e6d8aa..0d463aad06 100644
--- a/packages/vkui/src/components/RootComponent/RootComponent.tsx
+++ b/packages/vkui/src/components/RootComponent/RootComponent.tsx
@@ -6,7 +6,7 @@ export interface RootComponentProps<T>
   extends React.AllHTMLAttributes<T>,
     HasRootRef<T>,
     HasComponent {
-  baseClassName?: string;
+  baseClassName?: string | false;
 }
 
 /**
diff --git a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.module.css b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.module.css
index a4a5c5b64f..a741d8b711 100644
--- a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.module.css
+++ b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.module.css
@@ -26,12 +26,7 @@
   margin-inline-start: var(--vkui--size_subnavigation_bar_gap--regular);
 }
 
-/**
- * CMP:
- * SubnavigationBar
- */
-
-:global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationBar__item {
+.SubnavigationBar--mode-fixed .SubnavigationBar__item {
   flex: 1;
   min-inline-size: 0;
 }
diff --git a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
index 4273acdd54..ae63071ae5 100644
--- a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
+++ b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
@@ -50,12 +50,7 @@ export const SubnavigationBar = ({
 
   return (
     <RootComponent
-      // TODO: [>=6]
-      // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`
-      // и удалить применение селектора в `SubnavigationButton.module.css`.
-      // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`
-      // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')
-      baseClassName={mode === 'fixed' ? 'vkuiInternalSubnavigationBar--mode-fixed' : undefined}
+      baseClassName={mode === 'fixed' && styles['SubnavigationBar--mode-fixed']}
       {...restProps}
     >
       <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>
diff --git a/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.module.css b/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.module.css
index 4c9b97f664..2ff47110fe 100644
--- a/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.module.css
+++ b/packages/vkui/src/components/SubnavigationButton/SubnavigationButton.module.css
@@ -1,5 +1,5 @@
 .SubnavigationButton {
-  display: inline-block;
+  inline-size: 100%;
   user-select: none;
   border-radius: var(--vkui--size_border_radius--regular);
 }
@@ -167,8 +167,3 @@
   --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_primary);
 }
-
-:global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationButton {
-  flex: 1;
-  min-inline-size: 0;
-}
diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md
index a497bd4344..156fc633a4 100644
--- a/styleguide/pages/migration_v6.md
+++ b/styleguide/pages/migration_v6.md
@@ -26,6 +26,7 @@
   - <a href="{{anchor}}">`FixedLayout`</a>
   - <a href="{{anchor}}">`Footer`</a>
   - <a href="{{anchor}}">`FormItem`</a>
+  - <a href="{{anchor}}">`FormLayout`</a>
   - <a href="{{anchor}}">`Gradient`</a>
   - <a href="{{anchor}}">`Header`</a>
   - <a href="{{anchor}}">`ModalCard` и `ModaCardBase`</a>
@@ -527,6 +528,15 @@ npx @vkontakte/vkui-codemods --help
 
 <br/>
 
+### [`FormLayout`](#/FormLayout)
+
+```diff
+- <FormLayout getRef={ref}>...</FormLayout>
++ <FormLayout getRootRef={ref}>...</FormLayout>
+```
+
+<br/>
+
 ### [`Gradient`](#/Gradient)
 
 - У свойства `mode` были удалены значения `black` и `white`, используйте `tint` или `default`.