Thanks to visit codestin.com
Credit goes to github.com

Skip to content

v7.9.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 23 Oct 13:35
· 22 commits to master since this release
v7.9.0
ce21f9c

Миграция на slotProps

В рамках подготовки к исправлению проблемы, что у некоторых компонентов пользовательские свойства передаются не в корневой элемент, а во внутренний (#2342), добавлено новое API slotProps для прокидывания свойств во внутренние элементы компонента (спасибо за идею библиотеке компонентов MUI ❤️). Пока что свойство добавлено только для проблемных компонентов, где это возможно, за исключением Snackbar. В будущем будем рассматривать идею перехода на такое API и в других компонентах где есть свойства по типу inputProps, arrowProps и т.п.

Рекомендуем заранее мигрировать на новое API, чтобы упростить обновление до VKUI v8.

Ниже список компонентов, у которых появилось свойство slotProps в рамках текущего релиза.

  • Input:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037) 
      <Input
   value="value"
-  data-testid="input"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    input: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "input"
+    }
+  }};
/>
  • TextArea:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037) 
      <TextArea
   value="value"
-  data-testid="textArea"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    textArea: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "textArea"
+    }
+  }};
/>
  • WriteBar:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037) 
      <WriteBar
   value="value"
-  data-testid="textArea"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    textArea: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "textArea"
+    }
+  }};
/>
  • Search:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037) 
      <Search
   value="value"
   onChange={onChange}
-  data-testid="input"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    input: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "input"
+    }
+  }};
/>
  • Switch:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036) 
      <Switch
   defaultChecked
-  data-testid="input"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    input: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "input"
+    }
+  }};
/>
  • Radio:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
    • Устарели свойства labelProps и getRef. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036) 
      <Radio
-  labelProps={{
-    'aria-label': 'some label',
-  }}
-  data-testid="input"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    root: {
+      'aria-label': 'some label',
+    },
+    input: {
+      getRootRef: handleRef,
+      'data-testid': 'input',
+      'aria-label': 'some label' 
+    }
+  }}
/>
  • Checkbox:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036) 
      <Checkbox
   defaultChecked
-  data-testid="input"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    input: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "input"
+    }
+  }};
/>
  • File:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
    • Свойство getRef устарели. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036) 
      <File
   mode="secondary"
-  data-testid="input"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    input: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "input"
+    }
+  }};
/>
  • NativeSelect:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036) 
      <NativeSelect
   value={selectedOption}
   onChange={(_, newValue) => setSelectedOption(newValue)}
-  data-testid="input"
-  aria-label="some label"
-  getRef={handleRef}
+  slotProps={{
+    select: {
+      'getRootRef': handleRef,
+      'aria-label': "some label"
+      'data-testid': "input"
+    }
+  }};
>
  ...
</NativeSelect>
  • CustomSelect:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
    • Свойства getRef, getSelectInputRef, nativeSelectTestId устарели. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036) 
      <CustomSelect
   value={selectedOption}
   options={options
   onChange={(_, newValue) => setSelectedOption(newValue)}
-  data-testid="input"
-  aria-label="some label"
-  getRef={selectRef}
-  getSelectInputRef={inputRef}
-  nativeSelectTestId="select-id"
+  slotProps={{
+    select: {
+      getRootRef: selectRef,
+      'data-testid': 'select-id',
+    },
+    input: {
+      getRootRef: inputRef,
+      'aria-label': "some label"
+      'data-testid': "input",
+    }
+  }};
/>
  • ChipsSelect:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9059)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9059) 
      <ChipsSelect
  id="favoriteGroups"
-  data-testid="input"
-  getRef={inputRef}
+  slotProps={{
+    input: {
+      getRootRef: inputRef,
+      'data-testid': "input"
+    }
+  }}
/>
  • ChipsInput:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9059)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9059) 
      <ChipsInput
  id="favoriteGroups"
-  data-testid="input"
-  getRef={inputRef}
+  slotProps={{
+    input: {
+      getRootRef: inputRef,
+      'data-testid': "input"
+    }
+  }}
/>
  • SplitLayout:
    • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9059)
    • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9059) 
      <SplitLayout
  center={title}
-  data-testid="content"
-  getRef={contentRef}
+  slotProps={{
+    content: {
+      'getRootRef': contentRef,
+      'data-testid': 'content'
+    },
+  }}
/>

Новые компоненты

  • Box: Компонент, для создания раскладок с поддержкой отступов, размеров, позиционирования и flex-свойств (#8957)

Улучшения

  • Snackbar: Добавлено свойство slotProps.action для прокидывания пользовательских свойств, например, data-testid (#9062)
  • MiniInfoCell: Изменен цвет шеврона при mode accent и base (#9089)
  • Gallery: Добавлены свойства animationDuration и animationEasing для изменения длительности и функция анимации слайда соответственно (#9090)

Зависимости

  • Пакет @vkontakte/vkjs обвлен до версии 2.0.2
Assets 2
Loading