diff --git a/package.json b/package.json index c64234e374..3285a385d5 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "@typescript-eslint/parser": "^2.0.0", "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.2.0", "@vkontakte/eslint-config": "2.5.0", - "@vkontakte/icons": "^1.91.0", + "@vkontakte/icons": "^1.100.0", "@vkontakte/vk-bridge": "^2.1.3", "@vkontakte/vkjs": "^0.20.0", "autoprefixer": "^9.8.0", diff --git a/src/components/Badge/Badge.css b/src/components/Badge/Badge.css index 2755d14424..37e1018ac8 100644 --- a/src/components/Badge/Badge.css +++ b/src/components/Badge/Badge.css @@ -1,4 +1,5 @@ .Badge { + display: block; flex-grow: 0; flex-shrink: 0; width: 6px; diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 7eaee6e718..ff26208e5e 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -14,13 +14,13 @@ export const Badge: FunctionComponent = ({ const platform = usePlatform(); return ( -
-
+ ); }; diff --git a/src/components/Badge/Readme.md b/src/components/Badge/Readme.md index d6955120f7..4da8a78637 100644 --- a/src/components/Badge/Readme.md +++ b/src/components/Badge/Readme.md @@ -6,17 +6,15 @@ Бейдж В пунктах меню}> - } badge={}> + } badge={}> Уведомления В переключателях}> - }>Диалоги - }> - Сообщения - + }>Диалоги + }>Сообщения @@ -27,7 +25,7 @@ 12} text="Сообщения"> - } text="Клипы"> + } text="Клипы"> diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css index 32962490b6..ede9e898b8 100644 --- a/src/components/Banner/Banner.css +++ b/src/components/Banner/Banner.css @@ -71,10 +71,12 @@ z-index: 2; width: 48px; height: 48px; - display: flex; - align-items: center; - justify-content: center; + margin: 0; + padding: 12px; color: var(--icon_tertiary); + border: none; + background-color: transparent; + cursor: pointer; } .Banner__dismissIcon:active { diff --git a/src/components/Banner/Banner.e2e.tsx b/src/components/Banner/Banner.e2e.tsx new file mode 100644 index 0000000000..d04d9eab41 --- /dev/null +++ b/src/components/Banner/Banner.e2e.tsx @@ -0,0 +1,18 @@ +import Avatar from '../Avatar/Avatar'; +import Banner, { BannerProps } from './Banner'; +import Button from '../Button/Button'; +import { describeScreenshotFuzz } from '../../testing/e2e/utils'; + +describe('Banner', () => { + describeScreenshotFuzz((props: BannerProps ) => ( + } + header="Баста в Ледовом" + subheader="Большой концерт" + asideMode="dismiss" + actions={} + {...props} + />), [{ + size: ['s', 'm'], + }]); +}); diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index ba698b83eb..5bad7d4322 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -27,7 +27,7 @@ export interface BannerProps extends HTMLAttributes { /** * Срабатывает при клике на иконку крестика при `asideMode="dismiss"`. */ - onDismiss?: MouseEventHandler; + onDismiss?: MouseEventHandler; /** * Содержимое, отображаемое в левой части баннера. */ @@ -137,10 +137,14 @@ const Banner: FunctionComponent = (props: BannerProps) => { {asideMode === 'dismiss' &&
-
+
+
} diff --git a/src/components/Banner/__image_snapshots__/banner-android-bright_light-1-snap.png b/src/components/Banner/__image_snapshots__/banner-android-bright_light-1-snap.png new file mode 100644 index 0000000000..c8cfa979a1 --- /dev/null +++ b/src/components/Banner/__image_snapshots__/banner-android-bright_light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f4cebbfd32dde68edc25276576d67bd1b2981c6d3c07b55cbb11d35f91ba2d1c +size 16782 diff --git a/src/components/Banner/__image_snapshots__/banner-android-space_gray-1-snap.png b/src/components/Banner/__image_snapshots__/banner-android-space_gray-1-snap.png new file mode 100644 index 0000000000..37c503a673 --- /dev/null +++ b/src/components/Banner/__image_snapshots__/banner-android-space_gray-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7a48a6bab71760dfd49cc7a7b220cd85a5a226994d29ee0bfdde23d67e87b8ee +size 50817 diff --git a/src/components/Banner/__image_snapshots__/banner-ios-bright_light-1-snap.png b/src/components/Banner/__image_snapshots__/banner-ios-bright_light-1-snap.png new file mode 100644 index 0000000000..9cadb836ce --- /dev/null +++ b/src/components/Banner/__image_snapshots__/banner-ios-bright_light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fae4dd3a9ff322349f4e99db0eacfba87f7872c7e450a0b432eca3bcd896ef90 +size 52039 diff --git a/src/components/Banner/__image_snapshots__/banner-ios-space_gray-1-snap.png b/src/components/Banner/__image_snapshots__/banner-ios-space_gray-1-snap.png new file mode 100644 index 0000000000..08e1ca6e7c --- /dev/null +++ b/src/components/Banner/__image_snapshots__/banner-ios-space_gray-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:433b87e5a7f0f6c41716779a2751afe760cdd02cf4a549aecaff3338bf648b8d +size 52230 diff --git a/src/components/Banner/__image_snapshots__/banner-vkcom-vkcom-1-snap.png b/src/components/Banner/__image_snapshots__/banner-vkcom-vkcom-1-snap.png new file mode 100644 index 0000000000..6fe64a1d9e --- /dev/null +++ b/src/components/Banner/__image_snapshots__/banner-vkcom-vkcom-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:af6ca9c79fc92d36f328c85067a338d2ead265b61ef73e722e0d1e76e1ad8cf5 +size 49768 diff --git a/src/components/Cell/Cell.css b/src/components/Cell/Cell.css index 0a2951cab1..14dc2f3f05 100644 --- a/src/components/Cell/Cell.css +++ b/src/components/Cell/Cell.css @@ -26,35 +26,31 @@ .Cell__checkbox { display: none; } -/* TODO избавиться от специфичного селектора после облегчения селекторов SimpleCell */ -.Cell .Cell__marker { + +.Cell--selectable .Cell__marker { + position: relative; flex-shrink: 0; + width: 24px; + height: 24px; + margin-right: 16px; padding: 0; -} -/* TODO избавиться от специфичного селектора после облегчения селекторов SimpleCell */ -.Cell .Cell__marker--off { - display: block; color: var(--icon_tertiary); } -/* TODO избавиться от специфичного селектора после облегчения селекторов SimpleCell */ -.Cell .Cell__marker--on { - display: none; -} -.Cell--selectable .Cell__marker { - margin-right: 16px; +.Cell--selectable .Cell__marker-in--checked { + position: absolute; + top: 0; + left: 0; + visibility: hidden; + color: var(--accent); } .Cell--selectable.Cell--disabled { opacity: .6; } -.Cell__checkbox:checked ~ .Cell__marker--on { - display: block; -} - -.Cell__checkbox:checked ~ .Cell__marker--off { - display: none; +.Cell--selectable .Cell__checkbox:checked ~ .Cell__marker .Cell__marker-in--checked { + visibility: initial; } .Cell--removable .SimpleCell { diff --git a/src/components/Cell/Cell.tsx b/src/components/Cell/Cell.tsx index 328156641c..924fbe467d 100644 --- a/src/components/Cell/Cell.tsx +++ b/src/components/Cell/Cell.tsx @@ -164,6 +164,7 @@ export const Cell: FC = (props: CellProps) => { {...restProps} disabled={draggable || removable || disabled} Component={selectable ? 'label' : Component} + htmlFor={selectable ? name : undefined} before={ {(platform === ANDROID || platform === VKCOM) && draggable && ( @@ -186,8 +187,10 @@ export const Cell: FC = (props: CellProps) => { checked={checked} disabled={disabled} /> - - + + + + )} {before} diff --git a/src/components/CellButton/Readme.md b/src/components/CellButton/Readme.md index 32367c6494..45c7aa4070 100644 --- a/src/components/CellButton/Readme.md +++ b/src/components/CellButton/Readme.md @@ -11,9 +11,9 @@ } mode="danger">Удалить беседу Аватарки}> - }>Добавить участников - }>Создать беседу - }>Создать плейлист + }>Добавить участников + }>Создать беседу + }>Создать плейлист Центрирование}> }>Создать беседу diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index b8451b9f51..c73d42be9a 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -44,17 +44,15 @@ export const Checkbox: React.FunctionComponent = ({
- {sizeY === SizeType.COMPACT || platform === VKCOM ? - - : - + {sizeY === SizeType.COMPACT || platform === VKCOM + ? + : }
- {sizeY === SizeType.COMPACT || platform === VKCOM ? - - : - + {sizeY === SizeType.COMPACT || platform === VKCOM + ? + : }
{children} diff --git a/src/components/Chip/Chip.css b/src/components/Chip/Chip.css index d407bc5175..db7f33495a 100644 --- a/src/components/Chip/Chip.css +++ b/src/components/Chip/Chip.css @@ -25,6 +25,9 @@ .Chip__remove { margin-left: 4px; margin-right: -2px; + padding: 0; + border: none; + background: transparent; cursor: pointer; } diff --git a/src/components/Chip/Chip.e2e.tsx b/src/components/Chip/Chip.e2e.tsx new file mode 100644 index 0000000000..cbfa4603bb --- /dev/null +++ b/src/components/Chip/Chip.e2e.tsx @@ -0,0 +1,8 @@ +import Chip, { ChipProps } from './Chip'; +import { describeScreenshotFuzz } from '../../testing/e2e/utils'; + +describe('Chip', () => { + describeScreenshotFuzz((props: ChipProps) => (Arctic Monkeys), [{ + removable: [false, true], + }]); +}); diff --git a/src/components/Chip/Chip.test.tsx b/src/components/Chip/Chip.test.tsx index 85e16aff32..f28936a4bd 100644 --- a/src/components/Chip/Chip.test.tsx +++ b/src/components/Chip/Chip.test.tsx @@ -13,7 +13,7 @@ describe('Chip', () => { Белый, ); - userEvent.click(screen.queryByLabelText('Удалить чип')); + userEvent.click(screen.getByRole('button')); expect(onRemove).toHaveBeenCalled(); }); diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index e0379ff785..2c3a622371 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -29,11 +29,12 @@ const Chip: FC = (props: ChipProps) => { {hasReactNode(after) &&
{after}
} {removable &&
-
}
diff --git a/src/components/Chip/__image_snapshots__/chip-android-bright_light-1-snap.png b/src/components/Chip/__image_snapshots__/chip-android-bright_light-1-snap.png new file mode 100644 index 0000000000..6a95b8dc0e --- /dev/null +++ b/src/components/Chip/__image_snapshots__/chip-android-bright_light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7f211f559da2d6224d9d1f4f7ce13d00e0ac00ce5ef27a76c573a1d5c3dd053c +size 7909 diff --git a/src/components/Chip/__image_snapshots__/chip-android-space_gray-1-snap.png b/src/components/Chip/__image_snapshots__/chip-android-space_gray-1-snap.png new file mode 100644 index 0000000000..04924080d8 --- /dev/null +++ b/src/components/Chip/__image_snapshots__/chip-android-space_gray-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7e5a54c6dc4d62693ba1daf16101493f9bf29f036a9363964987735926b2b5a3 +size 7794 diff --git a/src/components/Chip/__image_snapshots__/chip-ios-bright_light-1-snap.png b/src/components/Chip/__image_snapshots__/chip-ios-bright_light-1-snap.png new file mode 100644 index 0000000000..6a95b8dc0e --- /dev/null +++ b/src/components/Chip/__image_snapshots__/chip-ios-bright_light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7f211f559da2d6224d9d1f4f7ce13d00e0ac00ce5ef27a76c573a1d5c3dd053c +size 7909 diff --git a/src/components/Chip/__image_snapshots__/chip-ios-space_gray-1-snap.png b/src/components/Chip/__image_snapshots__/chip-ios-space_gray-1-snap.png new file mode 100644 index 0000000000..04924080d8 --- /dev/null +++ b/src/components/Chip/__image_snapshots__/chip-ios-space_gray-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7e5a54c6dc4d62693ba1daf16101493f9bf29f036a9363964987735926b2b5a3 +size 7794 diff --git a/src/components/Chip/__image_snapshots__/chip-vkcom-vkcom-1-snap.png b/src/components/Chip/__image_snapshots__/chip-vkcom-vkcom-1-snap.png new file mode 100644 index 0000000000..5a2b2a7c57 --- /dev/null +++ b/src/components/Chip/__image_snapshots__/chip-vkcom-vkcom-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a1c75ace66c30a3e56378098a0ded7b081fa23ca0e46e2a1dbd4267c8f0c98b8 +size 4341 diff --git a/src/components/ChipsInput/Readme.md b/src/components/ChipsInput/Readme.md index 873f475e8f..ca8c67ed0d 100644 --- a/src/components/ChipsInput/Readme.md +++ b/src/components/ChipsInput/Readme.md @@ -1,6 +1,4 @@ -Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`. - -Изменить визуальное оформление значений можно с помощью `renderChip`. +Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`. Изменить визуальное оформление значений можно с помощью `renderChip`. Поле ввода принимает все валидные для `` значения. @@ -38,9 +36,10 @@ class Example extends React.Component { ( - } + before={} {...rest} > {label} diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx index 615456e842..e059e99444 100644 --- a/src/components/Gallery/Gallery.tsx +++ b/src/components/Gallery/Gallery.tsx @@ -400,7 +400,7 @@ class BaseGallery extends Component {bullets && -
+