-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: update to uikit5 #607
Conversation
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This component wasn't used
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Color palette was changed, new -heavy
is too bright, so replaced it with -medium
6c5e05a
to
79cf0ef
Compare
&__user-icon { | ||
color: var(--yc-color-text-misc); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused style
@@ -1,40 +1,5 @@ | |||
@import '../../../../../../styles/mixins.scss'; | |||
|
|||
.indicator { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused style
<Settings.Item title={title} renderTitleComponent={renderTitleComponent}> | ||
<Settings.Item | ||
title={title} | ||
highlightedTitle={title} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
highlightedTitle
is passed to renderTitleComponent
79cf0ef
to
3d8cf9c
Compare
No description provided.