Skip to content

Commit

Permalink
feat!: update uikit
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje committed Jul 10, 2023
1 parent 8180091 commit 9b35023
Show file tree
Hide file tree
Showing 19 changed files with 85 additions and 102 deletions.
16 changes: 0 additions & 16 deletions .storybook/decorators/withTheme.tsx
View file

This file was deleted.

15 changes: 7 additions & 8 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/ActionsPanel/ActionsPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions src/components/AdaptiveTabs/AdaptiveTabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/ChangelogDialog/ChangelogDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $maxItemsHeight: 70vh;
}

&__empty-placeholder {
color: var(--yc-color-text-secondary);
color: var(--g-color-text-secondary);
text-align: center;
}
}
4 changes: 2 additions & 2 deletions src/components/ChangelogDialog/components/Item/Item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/FormRow/FormRow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
}
}
2 changes: 1 addition & 1 deletion src/components/ItemSelector/ItemSelector.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
42 changes: 21 additions & 21 deletions src/components/Notification/Notification.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $notificationSourceIconSize: 36px;
width: 100%;

&:hover {
background: var(--yc-color-base-simple-hover);
background: var(--g-color-base-simple-hover);
}

&__right {
Expand Down Expand Up @@ -47,28 +47,28 @@ $notificationSourceIconSize: 36px;
&__right-meta {
display: flex;
gap: 4px;
color: var(--yc-color-text-secondary);
color: var(--g-color-text-secondary);
}

&__right-title {
font-weight: 500;
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);
}
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
10 changes: 5 additions & 5 deletions src/components/Notifications/Notifications.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Notifications/NotificationsEmptyState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const nothingFoundDarkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="172"
type Props = {content: React.ReactNode};

export const NotificationsEmptyState = React.memo(function NotificationsEmptyState(props: Props) {
const [theme] = useTheme();
const theme = useTheme();

return (
<div className={b('empty')}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Notifications/__stories__/Notifications.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Template: ComponentStory<typeof Notifications> = (args) => (
<div
style={{
borderRadius: '8px',
border: '1px solid var(--yc-color-line-generic)',
border: '1px solid var(--g-color-line-generic)',
margin: '4px',
width: '350px',
height: '470px',
Expand Down
2 changes: 1 addition & 1 deletion src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}

&__section + &__section {
border-top: 1px solid var(--yc-color-text-hint);
border-top: 1px solid var(--g-color-text-hint);
}

&__examples-row {
Expand Down
Loading

0 comments on commit 9b35023

Please sign in to comment.