@vkontakte/vkui 4.34.0 → 4.34.1

package/src/components/Input/Readme.md

@@ -1,34 +1,77 @@
 Надстройка над `<input type="text" />`. Компонент принимает все валидные для этого элемента свойства.
 
-```jsx
-const textInput = React.createRef();
-const clear = () => (textInput.current.value = "");
-
-<View activePanel="input">
-  <Panel id="input">
-    <PanelHeader>Input</PanelHeader>
-    <Group>
-      <FormItem top="Фамилия">
-        <Input type="text" defaultValue="Петров" />
-      </FormItem>
-      <FormItem>
-        <Input type="text" defaultValue="Иванов" align="center" />
-      </FormItem>
-      <FormItem>
-        <Input type="text" defaultValue="Сидоров" align="right" />
+```jsx { "props": { "layout": false, "iframe": false } }
+const ExampleBase = ({ formItemStatus }) => {
+  const [before, setBefore] = useState(undefined);
+  const [after, setAfter] = useState(undefined);
+  const [align, setAlign] = useState("left");
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <FormLayout>
+      <FormItem top="align">
+        <Select
+          value={align}
+          onChange={(e) => setAlign(e.target.value)}
+          options={[
+            { label: "left", value: "left" },
+            { label: "center", value: "center" },
+            { label: "right", value: "right" },
+          ]}
+        />
       </FormItem>
-      <FormItem top="С иконкой">
+      <Checkbox
+        description="Icon24WalletOutline for example"
+        checked={!!before}
+        onChange={(e) =>
+          e.target.checked
+            ? setBefore(<Icon24WalletOutline />)
+            : setBefore(undefined)
+        }
+      >
+        before
+      </Checkbox>
+      <Checkbox
+        description="Icon20User for example"
+        checked={!!after}
+        onChange={(e) =>
+          e.target.checked ? setAfter(<Icon20User />) : setAfter(undefined)
+        }
+      >
+        after
+      </Checkbox>
+      <Checkbox
+        checked={disabled}
+        onChange={(e) => setDisabled(e.target.checked)}
+      >
+        disabled
+      </Checkbox>
+      <FormItem top="📝 Пример" status={formItemStatus}>
         <Input
+          before={before}
+          after={after}
           type="text"
-          defaultValue="Смирнов"
-          after={<Icon20User aria-hidden="true" />}
+          align={align}
+          defaultValue="Lorem ipsum dolor sit amet"
+          disabled={disabled}
         />
       </FormItem>
-      <FormItem top="С IconButton">
+    </FormLayout>
+  );
+};
+
+const ExampleWithIcon = ({ formItemStatus }) => {
+  const textInput = React.createRef();
+  const clear = () => (textInput.current.value = "");
+
+  return (
+    <FormLayout>
+      <FormItem top="📝 Пример с кликабельной иконкой" status={formItemStatus}>
         <Input
           getRef={textInput}
           type="text"
-          defaultValue="Кузнецов"
+          placeholder="Ну ведь брокколи это вкусно и полезно 😢"
+          defaultValue="Брокколи 🥦"
           after={
             <IconButton
               hoverMode="opacity"
@@ -40,7 +83,68 @@ const clear = () => (textInput.current.value = "");
           }
         />
       </FormItem>
-    </Group>
-  </Panel>
-</View>;
+    </FormLayout>
+  );
+};
+
+const Example = () => {
+  const [sizeY, setSizeY] = useState("regular");
+  const [formItemStatus, setFormItemStatus] = useState("default");
+
+  return (
+    <AdaptivityProvider sizeY={sizeY}>
+      <div style={rootContainerStyles}>
+        <div style={demoContainerStyles}>
+          <ExampleBase formItemStatus={formItemStatus} />
+          <Spacing size={16} />
+          <Separator />
+          <Spacing size={16} />
+          <ExampleWithIcon formItemStatus={formItemStatus} />
+        </div>
+
+        <div style={propsContainerStyles}>
+          <FormItem top="AdaptivityProvider[sizeY]">
+            <Select
+              value={sizeY}
+              onChange={(e) => setSizeY(e.target.value)}
+              options={[
+                { label: "compact", value: "compact" },
+                { label: "regular", value: "regular" },
+              ]}
+            />
+          </FormItem>
+          <FormItem top="FormItem[status]">
+            <Select
+              value={formItemStatus}
+              onChange={(e) => setFormItemStatus(e.target.value)}
+              options={[
+                { label: "default", value: "default" },
+                { label: "error", value: "error" },
+                { label: "valid", value: "valid" },
+              ]}
+            />
+          </FormItem>
+        </div>
+      </div>
+    </AdaptivityProvider>
+  );
+};
+
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+};
+
+const demoContainerStyles = {
+  flexGrow: 2,
+  minWidth: 320,
+};
+
+const propsContainerStyles = {
+  minWidth: 200,
+  marginRight: "auto",
+};
+
+<Example />;
 ```

package/src/components/ScreenSpinner/ScreenSpinner.css

@@ -22,7 +22,7 @@
   background: var(--tabbar_background, var(--vkui--color_background_modal));
   box-shadow: var(--vkui--elevation4);
   border-radius: var(--vkui--size_border_radius--regular);
-  color: var(--overlay_status_icon, --vkui--color_icon_medium);
+  color: var(--overlay_status_icon, var(--vkui--color_icon_medium));
 }
 
 .ScreenSpinner__icon {

package/src/components/Select/Select.css

@@ -21,7 +21,8 @@
 .Select__container {
   flex-grow: 1;
   flex-shrink: 1;
-  padding: 7px 11px;
+  padding-right: 12px;
+  padding-left: 12px;
   color: var(--text_primary, var(--vkui--color_text_primary));
   box-sizing: border-box;
   position: relative;
@@ -29,6 +30,27 @@
   overflow: hidden;
 }
 
+.Select--hasBefore .Select__container {
+  padding-left: 0;
+}
+
+.Select--hasAfter .Select__container {
+  padding-right: 0;
+}
+
+.Select--multiline .Select__container {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.Select--sizeY-compact.Select--multiline .Select__container {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 .Select__title {
   display: block;
 }
@@ -51,14 +73,6 @@
   text-align: center;
 }
 
-/**
- * sizeY REGULAR
- * TODO v5.0.0 поправить под новую адаптивность
- */
-.Select--sizeY-regular .Select__container {
-  padding: 11px;
-}
-
 /**
  * CMP:
  * CalendarHeader

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -50,8 +50,10 @@ const SelectMimicryComponent = ({
         !children && "Select--empty",
         multiline && "Select--multiline",
         align && `Select--align-${align}`,
-        `Select--sizeX-${sizeX}`,
-        `Select--sizeY-${sizeY}`
+        `Select--sizeX-${sizeX}`, // TODO v5.0.0 поправить под новую адаптивность
+        `Select--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность
+        before && "Select--hasBefore",
+        after && "Select--hasAfter"
       )}
       getRootRef={getRootRef}
       onClick={disabled ? undefined : onClick}

package/src/components/SplitCol/SplitCol.css

@@ -7,7 +7,7 @@
 }
 
 .SplitCol--spaced {
-  padding: 0 var(--vkui--size_split_col_padding_horizontal--regular);
+  margin: 0 var(--vkui--size_split_col_padding_horizontal--regular);
 }
 
 .SplitCol--fixed {

package/src/components/Textarea/Textarea.css

@@ -9,8 +9,9 @@
   box-sizing: border-box;
   resize: none;
   appearance: none;
-  line-height: 20px;
-  font-size: 16px;
+  font-weight: var(--vkui--font_text--font_weight--regular);
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
   color: var(--text_primary, var(--vkui--color_text_primary));
   padding: 12px;
   max-height: 204px;
@@ -26,7 +27,8 @@
 
 /* TODO. v5.0.0 Новая адаптивность */
 .Textarea--sizeY-compact .Textarea__el {
-  font-size: 15px;
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
   max-height: 196px;
 }
 

package/src/hoc/withAdaptivity.tsx

@@ -24,10 +24,10 @@ interface Config {
 export function withAdaptivity<T extends AdaptivityProps>(
   TargetComponent: React.ComponentType<T>,
   config: Config
-): React.ComponentType<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
-  const AdaptivityConsumer: React.ComponentType<
-    Omit<T, keyof AdaptivityContextInterface> & SizeProps
-  > = (props: Omit<T, keyof AdaptivityContextInterface> & SizeProps) => {
+): React.FC<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
+  const AdaptivityConsumer = (
+    props: Omit<T, keyof AdaptivityContextInterface> & SizeProps
+  ) => {
     const context = React.useContext(AdaptivityContext);
     let update = false;
 

package/src/hoc/withContext.tsx

@@ -4,7 +4,7 @@ export function withContext<T, X>(
   Component: React.ComponentType<T>,
   Ctx: React.Context<X>,
   prop: string
-): React.ComponentType<T> {
+): React.FC<T> {
   function WithContext(props: T) {
     const context = React.useContext<X>(Ctx);
 

package/src/hoc/withPlatform.tsx

@@ -5,7 +5,7 @@ import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProvid
 
 export function withPlatform<T extends HasPlatform>(
   Component: React.ComponentType<T>
-): React.ComponentType<Omit<T, keyof HasPlatform>> {
+): React.FC<Omit<T, keyof HasPlatform>> {
   function WithPlatform(props: Omit<T, keyof HasPlatform>) {
     const ssrContext = React.useContext(SSRContext);
     const { platform } = React.useContext(ConfigProviderContext);