Skip to content

Commit ddd263b

Browse files
artemmufazalovartemmufazalov
authored
feat: update to uikit5 (#607)
1 parent 3484e6c commit ddd263b

File tree

98 files changed

+1819
-772
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+1819
-772
lines changed

‎package-lock.json

+157-87
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010
},
1111
"dependencies": {
1212
"@gravity-ui/axios-wrapper": "^1.3.0",
13+
"@gravity-ui/components": "^2.9.1",
1314
"@gravity-ui/date-utils": "^1.1.1",
1415
"@gravity-ui/i18n": "^1.0.0",
15-
"@gravity-ui/navigation": "^0.4.0",
16+
"@gravity-ui/navigation": "^1.8.0",
1617
"@gravity-ui/paranoid": "^1.4.0",
1718
"@gravity-ui/react-data-table": "^1.0.3",
1819
"@types/react": "^17.0.58",
@@ -40,7 +41,7 @@
4041
"reselect": "4.1.6",
4142
"sass": "1.32.8",
4243
"web-vitals": "1.1.2",
43-
"ydb-ui-components": "^3.3.1"
44+
"ydb-ui-components": "^3.5.0"
4445
},
4546
"scripts": {
4647
"start": "react-app-rewired start",
@@ -107,11 +108,11 @@
107108
"@commitlint/cli": "^15.0.0",
108109
"@commitlint/config-conventional": "^15.0.0",
109110
"@gravity-ui/eslint-config": "^1.0.2",
110-
"@gravity-ui/icons": "^2.2.0",
111+
"@gravity-ui/icons": "^2.8.1",
111112
"@gravity-ui/prettier-config": "^1.0.1",
112113
"@gravity-ui/stylelint-config": "^1.0.1",
113114
"@gravity-ui/tsconfig": "^1.0.0",
114-
"@gravity-ui/uikit": "^4.11.1",
115+
"@gravity-ui/uikit": "^5.24.0",
115116
"@playwright/test": "^1.31.1",
116117
"@testing-library/jest-dom": "^5.15.0",
117118
"@testing-library/react": "^11.2.7",
@@ -139,6 +140,6 @@
139140
"url": "^0.11.0"
140141
},
141142
"peerDependencies": {
142-
"@gravity-ui/uikit": "^3.0.1"
143+
"@gravity-ui/uikit": "^5.24.0"
143144
}
144145
}

‎src/components/BasicNodeViewer/BasicNodeViewer.scss

+3-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
@import '../../styles/mixins.scss';
22

33
.basic-node-viewer {
4-
font-size: var(--yc-text-body-2-font-size);
5-
line-height: var(--yc-text-body-2-line-height);
6-
74
display: flex;
85
align-items: center;
96

107
margin: 15px 0;
118

9+
@include body-2-typography();
10+
1211
&__title {
1312
margin: 0 20px 0 0;
1413

15-
font-size: var(--yc-text-body-2-font-size);
1614
font-weight: 600;
17-
line-height: var(--yc-text-body-2-line-height);
1815
text-transform: uppercase;
1916
}
2017

@@ -25,15 +22,10 @@
2522
&__label {
2623
margin-right: 10px;
2724

28-
font-size: var(--yc-text-body-2-font-size);
2925
line-height: 18px;
3026
white-space: nowrap;
3127

32-
color: var(--yc-color-text-hint);
33-
34-
.yc-root_theme_dark & {
35-
color: var(--yc-color-text-hint);
36-
}
28+
color: var(--g-color-text-hint);
3729
}
3830

3931
&__link {

‎src/components/CircularProgressBar/CircularProgressBar.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
}
2222

2323
&__circle-bg {
24-
stroke: var(--yc-color-base-simple-hover);
24+
stroke: var(--g-color-base-simple-hover);
2525

2626
fill: none;
2727
}
@@ -30,13 +30,13 @@
3030
fill: none;
3131

3232
&_status_good {
33-
stroke: var(--yc-color-private-green-550);
33+
stroke: var(--ydb-color-status-green);
3434
}
3535
&_status_warning {
36-
stroke: var(--yc-color-private-yellow-550);
36+
stroke: var(--ydb-color-status-yellow);
3737
}
3838
&_status_danger {
39-
stroke: var(--yc-color-private-red-550);
39+
stroke: var(--ydb-color-status-red);
4040
}
4141
}
4242
}

‎src/components/DateRange/DateRange.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
min-width: 190px;
44
padding: 5px 8px;
55

6-
color: var(--yc-color-text-primary);
7-
border: 1px solid var(--yc-color-line-generic);
8-
border-radius: var(--yc-border-radius-m);
6+
color: var(--g-color-text-primary);
7+
border: 1px solid var(--g-color-line-generic);
8+
border-radius: var(--g-border-radius-m);
99
background: transparent;
1010
}
1111
}

‎src/components/DiagnosticCard/DiagnosticCard.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
padding: 16px;
66
padding-bottom: 28px;
77

8-
border: 1px solid var(--yc-color-line-generic);
8+
border: 1px solid var(--g-color-line-generic);
99
border-radius: 8px;
1010
background-color: transparent;
1111

1212
&_active {
13-
border-color: var(--yc-color-base-info-heavy);
14-
background-color: var(--yc-color-base-selection);
13+
border-color: var(--g-color-base-info-medium);
14+
background-color: var(--g-color-base-selection);
1515
}
1616

1717
&:hover {
1818
cursor: pointer;
1919

20-
box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow);
20+
box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
2121
}
2222
}

‎src/components/Divider/Divider.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
height: 100%;
44
margin: 0 4px;
55

6-
background-color: var(--yc-color-line-generic);
6+
background-color: var(--g-color-line-generic);
77
}

‎src/components/EmptyState/EmptyState.scss

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../styles/mixins.scss';
2+
13
.empty-state {
24
padding: 20px;
35

@@ -31,10 +33,10 @@
3133

3234
margin-right: 60px;
3335

34-
color: var(--yc-color-base-info-hover);
36+
color: var(--g-color-base-info-light-hover);
3537

36-
.yc-root_theme_dark & {
37-
color: var(--yc-color-base-generic);
38+
.g-root_theme_dark & {
39+
color: var(--g-color-base-generic);
3840
}
3941
}
4042

@@ -45,21 +47,18 @@
4547
font-weight: 500;
4648

4749
&_size_s {
48-
font-size: var(--yc-text-subheader-3-font-size);
49-
line-height: var(--yc-text-subheader-3-line-height);
50+
@include lead-typography();
5051
}
5152

5253
&_size_m {
53-
font-size: var(--yc-text-header-2-font-size);
54-
line-height: var(--yc-text-header-2-line-height);
54+
@include header-2-typography();
5555
}
5656
}
5757

5858
&__description {
5959
grid-area: description;
6060

61-
font-size: var(--yc-text-body-2-font-size);
62-
line-height: var(--yc-text-body-2-line-height);
61+
@include body-2-typography();
6362
}
6463

6564
&__actions {

‎src/components/EntityStatus/EntityStatus.scss

+19-29
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1+
@import '../../styles/mixins.scss';
2+
13
.entity-status {
24
display: inline-flex;
35
align-items: center;
46

57
max-width: 100%;
68
height: 100%;
79

8-
font-size: var(--yc-text-body-2-font-size);
9-
line-height: var(--yc-text-body-2-line-height);
10+
@include body-2-typography();
1011

1112
&__clipboard-button {
1213
display: none;
14+
justify-content: center;
1315
align-items: center;
1416

1517
margin-left: 8px;
@@ -33,28 +35,22 @@
3335
a {
3436
text-decoration: none;
3537

36-
color: var(--yc-color-text-link);
38+
color: var(--g-color-text-link);
3739
}
3840

3941
a:hover {
40-
color: var(--yc-color-text-link-hover);
42+
color: var(--g-color-text-link-hover);
4143
}
4244

4345
&__label {
4446
margin-right: 2px;
4547

46-
font-size: var(--yc-text-body-2-font-size);
47-
line-height: var(--yc-text-body-2-line-height);
48-
49-
color: var(--yc-color-text-complementary);
48+
color: var(--g-color-text-complementary);
5049

51-
&_size_m {
52-
font-size: var(--yc-text-body-2-font-size);
53-
line-height: var(--yc-text-body-2-line-height);
54-
}
50+
@include body-2-typography();
5551

5652
&_size_l {
57-
font-size: var(--yc-text-header-2-font-size);
53+
font-size: var(--g-text-header-2-font-size);
5854
}
5955
}
6056

@@ -108,45 +104,39 @@
108104
&__status-color {
109105
&_state_running,
110106
&_state_green {
111-
background-color: var(--yc-color-infographics-positive-heavy);
107+
background-color: var(--ydb-color-status-green);
112108
}
113109
&_state_yellow {
114-
background-color: var(--yc-color-infographics-warning-heavy);
110+
background-color: var(--ydb-color-status-yellow);
115111
}
116112
&_state_blue {
117-
background-color: var(--yc-color-infographics-info-heavy);
113+
background-color: var(--ydb-color-status-blue);
118114
}
119-
120115
&_state_red {
121-
background: var(--yc-color-infographics-danger-heavy);
116+
background-color: var(--ydb-color-status-red);
122117
}
123118
&_state_gray,
124119
&_state_grey {
125-
background: var(--yc-color-text-complementary);
120+
background-color: var(--ydb-color-status-grey);
126121
}
127122
&_state_orange {
128-
background: var(--yc-color-base-warning-orange);
123+
background-color: var(--ydb-color-status-orange);
129124
}
130125
}
131126

132127
&__label,
133128
&__status-icon {
134129
&_state_blue {
135-
color: var(--yc-color-infographics-info-heavy);
130+
color: var(--ydb-color-status-blue);
136131
}
137132
&_state_yellow {
138-
color: var(--yc-color-infographics-warning-heavy);
133+
color: var(--ydb-color-status-yellow);
139134
}
140135
&_state_orange {
141-
color: var(--yc-color-base-warning-orange);
136+
color: var(--ydb-color-status-orange);
142137
}
143138
&_state_red {
144-
color: var(--yc-color-infographics-danger-heavy);
139+
color: var(--ydb-color-status-red);
145140
}
146141
}
147-
148-
&_size_m {
149-
font-size: var(--yc-text-body-2-font-size);
150-
line-height: var(--yc-text-body-2-line-height);
151-
}
152142
}

‎src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import block from 'bem-cn-lite';
22

33
import {Link} from '@gravity-ui/uikit';
44

5-
import {IconWrapper} from '../Icon/Icon';
5+
import {Icon} from '../Icon/Icon';
66

77
import './ExternalLinkWithIcon.scss';
88

@@ -18,7 +18,7 @@ export const ExternalLinkWithIcon = ({title, url}: ExternalLinkWithIconProps) =>
1818
<Link href={url} target="_blank" className={b()}>
1919
{title}
2020
{'\u00a0'}
21-
<IconWrapper name="external" viewBox={'0 0 16 16'} width={16} height={16} />
21+
<Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
2222
</Link>
2323
);
2424
};

‎src/components/FullNodeViewer/FullNodeViewer.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@import '../../styles/mixins.scss';
22

33
.full-node-viewer {
4-
font-size: var(--yc-text-body-2-font-size);
5-
line-height: var(--yc-text-body-2-line-height);
4+
@include body-2-typography();
65

76
&__common-info {
87
display: flex;
@@ -29,8 +28,6 @@
2928
&__section-title {
3029
margin: 15px 0 10px;
3130

32-
font-size: var(--yc-text-body-2-font-size);
3331
font-weight: 600;
34-
line-height: var(--yc-text-body-2-line-height);
3532
}
3633
}

‎src/components/Fullscreen/Fullscreen.scss

+2-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.kv-fullscreen {
22
// should expand to fill the content area, keeping aside navigation visible
3-
// counts on .ycn-aside-header__content to have position: relative, it is set in App.scss
3+
// counts on .gn-aside-header__content to have position: relative, it is set in App.scss
44
position: absolute;
55
z-index: 10;
66
top: 0;
@@ -12,19 +12,12 @@
1212
overflow: hidden;
1313
flex-grow: 1;
1414

15-
background-color: var(--yc-color-base-background);
15+
background-color: var(--g-color-base-background);
1616

1717
&__close-button {
1818
position: fixed;
1919
z-index: 11;
2020
top: 8px;
2121
right: 20px;
22-
23-
.yc-button__text {
24-
display: flex;
25-
align-items: center;
26-
27-
margin: 0 6px;
28-
}
2922
}
3023
}

‎src/components/Icon/Icon.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,4 @@ export const Icon = ({
3232
);
3333
};
3434

35-
// When used with uikit components Icon is considered as text element and corresponding styles are applied
36-
// IconWrapper overrides displayName to 'Icon', so it will be considered as an icon with right styles
37-
export const IconWrapper = (props: IconProps) => <Icon {...props} />;
38-
39-
IconWrapper.displayName = 'Icon';
35+
Icon.displayName = 'Icon';

0 commit comments

Comments
 (0)