feat: update to uikit5 #607
Conversation
artemmufazalov
force-pushed
the
uikit5
branch
from
e5671ea
to
71afcbd
Compare
| @@ -10,9 +10,10 @@ | |||
| }, | |||
| "dependencies": { | |||
| "@gravity-ui/axios-wrapper": "^1.3.0", | |||
| "@gravity-ui/components": "^2.9.1", | |||
There was a problem hiding this comment.
Added new package to dependencies, since the embedded ui could be also used as a package itself
| // Colors for tablets, status icons and progress bars | ||
| --ydb-color-status-grey: var(--g-color-base-neutral-heavy); | ||
| --ydb-color-status-green: var(--g-color-base-positive-heavy); | ||
| --ydb-color-status-yellow: var(--g-color-base-warning-heavy); | ||
| --ydb-color-status-orange: #ff922e; | ||
| --ydb-color-status-red: var(--g-color-base-danger-heavy); | ||
| --ydb-color-status-blue: var(--g-color-base-info-heavy); | ||
| --ydb-color-status-black: var(--g-color-base-misc-heavy); |
There was a problem hiding this comment.
Assigned most used colors to intermediary variables to make it possible to update them more easily
| @@ -1,66 +0,0 @@ | |||
| import {useState, useEffect} from 'react'; | |||
There was a problem hiding this comment.
This component wasn't used
artemmufazalov
force-pushed
the
uikit5
branch
from
71afcbd
to
6c5e05a
Compare
| @import './themes/dark'; | ||
| @import './themes/dark-hc'; | ||
|
|
||
| // Override @gravity-ui/uikit color palette with our own colors |
There was a problem hiding this comment.
Override ukit5 orange palette with cloud palette
| export const IconWrapper = (props: IconProps) => <Icon {...props} />; | ||
|
|
||
| IconWrapper.displayName = 'Icon'; | ||
| Icon.displayName = 'Icon'; |
There was a problem hiding this comment.
When update to new uikit, some problems with Icon with overrided styles occurred. So I updated Icon display name and removed almost alll yc-button__text style overrides
Related issue: #344
| {text} | ||
| {'\u00a0'} |
There was a problem hiding this comment.
Separate text and space, so null and undefined text will not be shown
| border-radius: 8px; | ||
| background-color: transparent; | ||
|
|
||
| &_active { | ||
| border-color: var(--yc-color-base-info-heavy); | ||
| background-color: var(--yc-color-base-selection); | ||
| border-color: var(--g-color-base-info-medium); |
There was a problem hiding this comment.
Color palette was changed, new -heavy is too bright, so replaced it with -medium
artemmufazalov
force-pushed
the
uikit5
branch
from
6c5e05a
to
79cf0ef
Compare
| &__user-icon { | ||
| color: var(--yc-color-text-misc); | ||
| } |
There was a problem hiding this comment.
User icon should have the same color as other navigation items
| @@ -94,6 +94,7 @@ | |||
| overflow: auto; | |||
|
|
|||
| min-width: 200px; | |||
| max-width: unset; | |||
There was a problem hiding this comment.
Without it max-width from uikit was applied and there wasn't enough space for the content
| @@ -54,18 +52,3 @@ | |||
|
|
|||
| word-break: break-word; | |||
| } | |||
|
|
|||
| .tablet-tooltip { | |||
| @@ -1,40 +1,5 @@ | |||
| @import '../../../../../../styles/mixins.scss'; | |||
|
|
|||
| .indicator { | |||
| <Settings.Item title={title} renderTitleComponent={renderTitleComponent}> | ||
| <Settings.Item | ||
| title={title} | ||
| highlightedTitle={title} |
There was a problem hiding this comment.
highlightedTitle is passed to renderTitleComponent
artemmufazalov
force-pushed
the
uikit5
branch
from
79cf0ef
to
3d8cf9c
Compare
No description provided.