From 758101e5fb936034ccca104451e51aa34a4210ed Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Mon, 10 Jul 2023 18:54:45 +0300 Subject: [PATCH 1/8] fix(AdaptiveTabs): disable tabs should not be clickable --- src/components/AdaptiveTabs/AdaptiveTabs.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.tsx b/src/components/AdaptiveTabs/AdaptiveTabs.tsx index 8d1ace1b..3bf57fc8 100644 --- a/src/components/AdaptiveTabs/AdaptiveTabs.tsx +++ b/src/components/AdaptiveTabs/AdaptiveTabs.tsx @@ -75,7 +75,7 @@ class Tab extends React.Component {
{title}
@@ -839,7 +839,9 @@ export class AdaptiveTabs extends React.Component, Adapt style={{maxWidth: items.length > 1 ? maxWidth : '100%'}} className={b('tab-container', {'last-tab': isLastTab, 'no-overflow': noOverflow})} onClick={(e) => { - this.onTabClick(item.id, e); + if (!item.disabled) { + this.onTabClick(item.id, e); + } }} > {wrapTo ? wrapTo(item, tabNode, tabIndex) : tabNode} From 3f9827593bd3f21d39c63c03de66932ed8abab3f Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Mon, 10 Jul 2023 18:57:31 +0300 Subject: [PATCH 2/8] fix(FormRow): stories not work --- src/components/FormRow/__stories__/FormRow.stories.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/FormRow/__stories__/FormRow.stories.tsx b/src/components/FormRow/__stories__/FormRow.stories.tsx index 255a913a..66f816a2 100644 --- a/src/components/FormRow/__stories__/FormRow.stories.tsx +++ b/src/components/FormRow/__stories__/FormRow.stories.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import {ComponentMeta, ComponentStory} from '@storybook/react'; -import {HelpPopover, TextInput} from '@gravity-ui/uikit'; +import {Meta, StoryFn} from '@storybook/react'; +import {TextInput} from '@gravity-ui/uikit'; import {FormRow} from '../FormRow'; +import {HelpPopover} from '../../HelpPopover'; const fieldId = 'form-row-input-id'; const fieldDescriptionId = `${fieldId}-description`; @@ -22,9 +23,9 @@ export default { children: argTypeReactNode, labelHelpPopover: argTypeReactNode, }, -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (args) => ; +const Template: StoryFn = (args) => ; export const Default = Template.bind({}); From 366ff75b331d1ea77914d960046d1edfd116394a Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Mon, 10 Jul 2023 18:58:32 +0300 Subject: [PATCH 3/8] fix(FormRow): required star position --- src/components/FormRow/FormRow.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FormRow/FormRow.scss b/src/components/FormRow/FormRow.scss index 7745bf15..22cca750 100644 --- a/src/components/FormRow/FormRow.scss +++ b/src/components/FormRow/FormRow.scss @@ -28,6 +28,7 @@ &__required-mark { line-height: 0; + vertical-align: baseline; color: var(--yc-color-text-danger); font-size: inherit; } From 2579ec5a2aa2943db6ef0347130ce13cd81d0266 Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Mon, 10 Jul 2023 18:59:16 +0300 Subject: [PATCH 4/8] feat!: update uikit --- .storybook/decorators/withTheme.tsx | 16 ------- package-lock.json | 15 ++++--- package.json | 4 +- src/components/ActionsPanel/ActionsPanel.scss | 2 +- src/components/AdaptiveTabs/AdaptiveTabs.scss | 10 ++--- .../ChangelogDialog/ChangelogDialog.scss | 2 +- .../ChangelogDialog/components/Item/Item.scss | 4 +- src/components/FormRow/FormRow.scss | 4 +- src/components/ItemSelector/ItemSelector.scss | 2 +- src/components/Notification/Notification.scss | 42 +++++++++---------- .../Notifications/Notifications.scss | 10 ++--- .../Notifications/NotificationsEmptyState.tsx | 2 +- .../__stories__/Notifications.stories.tsx | 2 +- .../PlaceholderContainerShowcase.scss | 2 +- src/components/PromoSheet/PromoSheet.scss | 42 +++++++++---------- .../SharePopover/ShareList/ShareList.scss | 2 +- src/components/SharePopover/SharePopover.scss | 4 +- .../StoriesLayout/StoriesLayout.scss | 16 +++---- .../StoriesPreview/StoriesPreview.scss | 6 +-- 19 files changed, 85 insertions(+), 102 deletions(-) delete mode 100644 .storybook/decorators/withTheme.tsx diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx deleted file mode 100644 index 55cfc848..00000000 --- a/.storybook/decorators/withTheme.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import type {DecoratorFn} from '@storybook/react'; -import {useTheme} from '@gravity-ui/uikit'; - -export const withTheme: DecoratorFn = (Story, context) => { - const themeValue = context.globals.theme; - const [theme, setTheme] = useTheme(); - - React.useEffect(() => { - if (theme !== themeValue) { - setTheme(themeValue); - } - }, [theme, themeValue, setTheme]); - - return ; -}; diff --git a/package-lock.json b/package-lock.json index 65a18872..f640fa48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "@gravity-ui/prettier-config": "^1.0.0", "@gravity-ui/stylelint-config": "^1.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^4.7.0", + "@gravity-ui/uikit": "^5.0.0-beta.0", "@storybook/addon-essentials": "^7.0.26", "@storybook/cli": "^7.0.18", "@storybook/preset-scss": "^1.0.3", @@ -62,9 +62,9 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "@gravity-ui/uikit": "^4.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@gravity-ui/uikit": "^4.0.0 | ^5.0.0-beta.0", + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -3400,9 +3400,9 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-4.22.1.tgz", - "integrity": "sha512-BeH8IgIFp1HRoJYWEkMd4OfwSOpD5u9vAU/187APopYTX+vLgsS+n7FYRFKGIcBr//0bwhzu1D/G1lW1luQlXg==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.0.0-beta.0.tgz", + "integrity": "sha512-lAwg+0qMR8XqZISjllJAEkxpUlUFqmGlNHu3HYXVoPpg8QwkmhpQ52iDkzfGyU4U12+5Gr7iJDAEMozHr2aGMw==", "dev": true, "dependencies": { "@gravity-ui/i18n": "^1.1.0", @@ -3418,7 +3418,6 @@ "react-transition-group": "^4.4.5", "react-virtualized-auto-sizer": "^1.0.20", "react-window": "^1.8.9", - "resize-observer-polyfill": "^1.5.1", "tabbable": "^6.1.2", "tslib": "^2.5.3", "utility-types": "^3.10.0" diff --git a/package.json b/package.json index 79a1ef23..57df8c67 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@gravity-ui/prettier-config": "^1.0.0", "@gravity-ui/stylelint-config": "^1.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^4.7.0", + "@gravity-ui/uikit": "^5.0.0-beta.0", "@storybook/addon-essentials": "^7.0.26", "@storybook/cli": "^7.0.18", "@storybook/preset-scss": "^1.0.3", @@ -89,7 +89,7 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "@gravity-ui/uikit": "^4.0.0", + "@gravity-ui/uikit": "^5.0.0-beta.0", "react": "^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" }, diff --git a/src/components/ActionsPanel/ActionsPanel.scss b/src/components/ActionsPanel/ActionsPanel.scss index 6b5f0587..5c2a5524 100644 --- a/src/components/ActionsPanel/ActionsPanel.scss +++ b/src/components/ActionsPanel/ActionsPanel.scss @@ -2,7 +2,7 @@ .#{variables.$ns}actions-panel { box-sizing: border-box; - background-color: var(--yc-color-base-special); + background-color: var(--g-color-base-brand); min-width: 200px; height: 52px; padding: 4px 20px; diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.scss b/src/components/AdaptiveTabs/AdaptiveTabs.scss index 0369948c..ba9d3383 100644 --- a/src/components/AdaptiveTabs/AdaptiveTabs.scss +++ b/src/components/AdaptiveTabs/AdaptiveTabs.scss @@ -4,11 +4,11 @@ $block: '.#{variables.$ns}adaptive-tabs'; #{$block} { - --gc-tabs-color-divider: var(--yc-color-line-generic); - --gc-tabs-color-border-active: var(--yc-color-text-info); - --gc-tabs-color-text-active: var(--yc-color-text-primary); - --gc-tabs-color-text-inactive: var(--yc-color-text-complementary); - --gc-tabs-color-text-disabled: var(--yc-color-text-secondary); + --gc-tabs-color-divider: var(--g-color-line-generic); + --gc-tabs-color-border-active: var(--g-color-text-info); + --gc-tabs-color-text-active: var(--g-color-text-primary); + --gc-tabs-color-text-inactive: var(--g-color-text-complementary); + --gc-tabs-color-text-disabled: var(--g-color-text-secondary); &_size { &_m { --gc-tabs-height: 36px; diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss index 9f445dee..22b81a8f 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.scss +++ b/src/components/ChangelogDialog/ChangelogDialog.scss @@ -27,7 +27,7 @@ $maxItemsHeight: 70vh; } &__empty-placeholder { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); text-align: center; } } diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss index 1f8edaa6..d14e046f 100644 --- a/src/components/ChangelogDialog/components/Item/Item.scss +++ b/src/components/ChangelogDialog/components/Item/Item.scss @@ -12,8 +12,8 @@ $metaWidth: 124px; } &__date { - line-height: var(--yc-text-subheader-3-line-height); - color: var(--yc-color-text-secondary); + line-height: var(--g-text-subheader-3-line-height); + color: var(--g-color-text-secondary); } &__label-new { diff --git a/src/components/FormRow/FormRow.scss b/src/components/FormRow/FormRow.scss index 22cca750..e5ed7b1c 100644 --- a/src/components/FormRow/FormRow.scss +++ b/src/components/FormRow/FormRow.scss @@ -29,7 +29,7 @@ &__required-mark { line-height: 0; vertical-align: baseline; - color: var(--yc-color-text-danger); + color: var(--g-color-text-danger); font-size: inherit; } @@ -46,7 +46,7 @@ &__field-description { margin: 10px 0 0; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); word-break: break-word; } } diff --git a/src/components/ItemSelector/ItemSelector.scss b/src/components/ItemSelector/ItemSelector.scss index 6fdf66b3..b67f1ac6 100644 --- a/src/components/ItemSelector/ItemSelector.scss +++ b/src/components/ItemSelector/ItemSelector.scss @@ -16,7 +16,7 @@ $block: '.#{variables.$ns}item-selector'; padding-top: 8px; &:not(:last-child) { - border-right: 1px solid var(--yc-color-line-generic); + border-right: 1px solid var(--g-color-line-generic); } } diff --git a/src/components/Notification/Notification.scss b/src/components/Notification/Notification.scss index 99d33ba5..4283a623 100644 --- a/src/components/Notification/Notification.scss +++ b/src/components/Notification/Notification.scss @@ -13,7 +13,7 @@ $notificationSourceIconSize: 36px; width: 100%; &:hover { - background: var(--yc-color-base-simple-hover); + background: var(--g-color-base-simple-hover); } &__right { @@ -47,7 +47,7 @@ $notificationSourceIconSize: 36px; &__right-meta { display: flex; gap: 4px; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } &__right-title { @@ -55,20 +55,20 @@ $notificationSourceIconSize: 36px; font-size: 13px; line-height: 18px; - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); } &__right-content { font-size: 13px; line-height: 18px; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } &_unread { - background: var(--yc-color-base-selection); + background: var(--g-color-base-selection); &:hover { - background: var(--yc-color-base-selection-hover); + background: var(--g-color-base-selection-hover); } } @@ -94,20 +94,20 @@ $notificationSourceIconSize: 36px; } &__action_icon { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } &_theme_success { - border-left: 4px solid var(--yc-color-line-positive); + border-left: 4px solid var(--g-color-line-positive); } &_theme_info { - border-left: 4px solid var(--yc-color-line-info); + border-left: 4px solid var(--g-color-line-info); } &_theme_warning { - border-left: 4px solid var(--yc-color-line-warning); + border-left: 4px solid var(--g-color-line-warning); } &_theme_danger { - border-left: 4px solid var(--yc-color-line-danger); + border-left: 4px solid var(--g-color-line-danger); } &__swipe-wrap { @@ -148,39 +148,39 @@ $notificationSourceIconSize: 36px; } &__swipe-action_theme_base { - background: var(--yc-color-base-misc); + background: var(--g-color-base-misc-light); } &__swipe-action_theme_base &__swipe-action-icon { - background: var(--yc-color-text-misc); + background: var(--g-color-text-misc-light); } &__swipe-action_theme_base &__swipe-action-text { - color: var(--yc-color-text-misc); + color: var(--g-color-text-misc-heavy); } &__swipe-action_theme_warning { - background: var(--yc-color-base-warning); + background: var(--g-color-base-warning-light); } &__swipe-action_theme_warning &__swipe-action-icon { - background: var(--yc-color-base-warning-heavy); + background: var(--g-color-base-warning-heavy); } &__swipe-action_theme_warning &__swipe-action-text { - color: var(--yc-color-base-warning-heavy); + color: var(--g-color-text-warning-heavy); } &__swipe-action_theme_danger { - background: var(--yc-color-base-danger); + background: var(--g-color-base-danger-light); } &__swipe-action_theme_danger &__swipe-action-icon { - background: var(--yc-color-base-danger-heavy); + background: var(--g-color-base-danger-heavy); } &__swipe-action_theme_danger &__swipe-action-text { - color: var(--yc-color-base-danger-heavy); + color: var(--g-color-text-danger-heavy); } &__swipe-action-icon { padding: 8px; border-radius: 100%; - color: var(--yc-color-base-background); + color: var(--g-color-base-background); } &__swipe-action-text { diff --git a/src/components/Notifications/Notifications.scss b/src/components/Notifications/Notifications.scss index 335fd378..ec09b915 100644 --- a/src/components/Notifications/Notifications.scss +++ b/src/components/Notifications/Notifications.scss @@ -5,14 +5,14 @@ $block: '.#{variables.$ns}notifications'; #{$block} { display: flex; flex-direction: column; - color: var(--yc-color-text-primary); - background: var(--yc-color-base-background); + color: var(--g-color-text-primary); + background: var(--g-color-base-background); height: 100%; &__head { display: flex; padding: 16px; - border-bottom: 1px solid var(--yc-color-line-generic); + border-bottom: 1px solid var(--g-color-line-generic); } &__head-title { @@ -22,7 +22,7 @@ $block: '.#{variables.$ns}notifications'; font-size: 17px; line-height: 24px; - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); } &__body { @@ -65,7 +65,7 @@ $block: '.#{variables.$ns}notifications'; &__notification-wrapper:not(:first-child)::before { content: ''; display: block; - border-top: 1px solid var(--yc-color-line-generic); + border-top: 1px solid var(--g-color-line-generic); margin: 0 12px; } diff --git a/src/components/Notifications/NotificationsEmptyState.tsx b/src/components/Notifications/NotificationsEmptyState.tsx index f3901413..c477109c 100644 --- a/src/components/Notifications/NotificationsEmptyState.tsx +++ b/src/components/Notifications/NotificationsEmptyState.tsx @@ -12,7 +12,7 @@ const nothingFoundDarkSvg = ` diff --git a/src/components/Notifications/__stories__/Notifications.stories.tsx b/src/components/Notifications/__stories__/Notifications.stories.tsx index 32c9a852..47ab5660 100644 --- a/src/components/Notifications/__stories__/Notifications.stories.tsx +++ b/src/components/Notifications/__stories__/Notifications.stories.tsx @@ -12,7 +12,7 @@ const Template: ComponentStory = (args) => (
Date: Mon, 10 Jul 2023 19:31:23 +0300 Subject: [PATCH 5/8] 2.0.0-beta.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f640fa48..30ddf47b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gravity-ui/components", - "version": "1.9.0", + "version": "2.0.0-beta.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gravity-ui/components", - "version": "1.9.0", + "version": "2.0.0-beta.0", "license": "MIT", "dependencies": { "@bem-react/classname": "^1.6.0", diff --git a/package.json b/package.json index 57df8c67..4f826a89 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gravity-ui/components", - "version": "1.9.0", + "version": "2.0.0-beta.0", "description": "", "license": "MIT", "main": "./build/cjs/index.js", From 1324d9387bd314946203315f648aff8918b650ea Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Thu, 13 Jul 2023 21:21:42 +0300 Subject: [PATCH 6/8] feat: update uikit --- package-lock.json | 10 +++++----- package.json | 4 ++-- src/components/AdaptiveTabs/AdaptiveTabs.scss | 2 +- .../ChangelogDialog/components/Item/Item.tsx | 2 +- src/components/PromoSheet/PromoSheet.scss | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30ddf47b..586de90c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "@gravity-ui/prettier-config": "^1.0.0", "@gravity-ui/stylelint-config": "^1.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^5.0.0-beta.0", + "@gravity-ui/uikit": "^5.0.0-beta.4", "@storybook/addon-essentials": "^7.0.26", "@storybook/cli": "^7.0.18", "@storybook/preset-scss": "^1.0.3", @@ -62,7 +62,7 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "@gravity-ui/uikit": "^4.0.0 | ^5.0.0-beta.0", + "@gravity-ui/uikit": "^5.0.0-beta.4", "react": "^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } @@ -3400,9 +3400,9 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "5.0.0-beta.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.0.0-beta.0.tgz", - "integrity": "sha512-lAwg+0qMR8XqZISjllJAEkxpUlUFqmGlNHu3HYXVoPpg8QwkmhpQ52iDkzfGyU4U12+5Gr7iJDAEMozHr2aGMw==", + "version": "5.0.0-beta.4", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.0.0-beta.4.tgz", + "integrity": "sha512-2TBBbgMENqGpgX8UiSmtBRvzjZIP4qVsZlxRD3dKZe+vanWng+Dud1Q0bncbgYhrV8EdkbIlnceT1nSWx88RXQ==", "dev": true, "dependencies": { "@gravity-ui/i18n": "^1.1.0", diff --git a/package.json b/package.json index 4f826a89..af1c3f42 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@gravity-ui/prettier-config": "^1.0.0", "@gravity-ui/stylelint-config": "^1.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^5.0.0-beta.0", + "@gravity-ui/uikit": "^5.0.0-beta.4", "@storybook/addon-essentials": "^7.0.26", "@storybook/cli": "^7.0.18", "@storybook/preset-scss": "^1.0.3", @@ -89,7 +89,7 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "@gravity-ui/uikit": "^5.0.0-beta.0", + "@gravity-ui/uikit": "^5.0.0-beta.4", "react": "^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" }, diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.scss b/src/components/AdaptiveTabs/AdaptiveTabs.scss index ba9d3383..048144e0 100644 --- a/src/components/AdaptiveTabs/AdaptiveTabs.scss +++ b/src/components/AdaptiveTabs/AdaptiveTabs.scss @@ -5,7 +5,7 @@ $block: '.#{variables.$ns}adaptive-tabs'; #{$block} { --gc-tabs-color-divider: var(--g-color-line-generic); - --gc-tabs-color-border-active: var(--g-color-text-info); + --gc-tabs-color-border-active: var(--g-color-line-brand); --gc-tabs-color-text-active: var(--g-color-text-primary); --gc-tabs-color-text-inactive: var(--g-color-text-complementary); --gc-tabs-color-text-disabled: var(--g-color-text-secondary); diff --git a/src/components/ChangelogDialog/components/Item/Item.tsx b/src/components/ChangelogDialog/components/Item/Item.tsx index 1d7e440a..9c560575 100644 --- a/src/components/ChangelogDialog/components/Item/Item.tsx +++ b/src/components/ChangelogDialog/components/Item/Item.tsx @@ -44,7 +44,7 @@ export function Item({className, data, onStoryClick}: ItemProps) { {data.storyId && onStoryClick ? (