fix: rest of TODO (FormLayout & SubnavigationButton) (#6280)

VKCOM · Dec 14, 2023 · fe2d02d · fe2d02d
1 parent 3893bfa
commit fe2d02d
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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`.