[UIK-5742][side-panel] redesign - #3129
Conversation
df72aa1 to
36fbb65
Compare
…e-panel-redesign Signed-off-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
| <Children /> | ||
| </ButtonLink.Text> | ||
| </SBack>, | ||
| <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft} />, |
There was a problem hiding this comment.
@ilyabrower @sheila-semrush i think, it should have an accessible name, aria-label
There was a problem hiding this comment.
not necessarily, see comment above
| <Children /> | ||
| </ButtonLink.Text> | ||
| </SBack>, | ||
| <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft} />, |
There was a problem hiding this comment.
@sheila-semrush i'm not sure icon color is correct here
Figma:
There was a problem hiding this comment.
the color in figma was incorrect, I fixed it. But it shouldn't be color in code also, it should be use=secondary. I fixed it in the example, but we might not want to fix it here because we might not want to update the back button at all. Left another comment about it above.
| <Children /> | ||
| </ButtonLink.Text> | ||
| </SBack>, | ||
| <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft} />, |
There was a problem hiding this comment.
@sheila-semrush In figma i see size =300, which is correct?
There was a problem hiding this comment.
nope, I fixed it in the example. About here - see other comments
| margin-bottom: var(--intergalactic-spacing-1x, 4px); | ||
| padding-right: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-4x, 16px)); | ||
| margin-top: var(--intergalactic-spacing-1x, 4px); | ||
| padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px); |
There was a problem hiding this comment.
we agreed to implement the Back button and all corresponding styles only in the example, including gap (it's implemented as margin there, which is ok)
| box-sizing: border-box; | ||
| flex-shrink: 0; | ||
| flex-direction: column; | ||
| justify-content: center; |
There was a problem hiding this comment.
@sheila-semrush is that expected? because in figma i see align-items=center
There was a problem hiding this comment.
the structure is different in Figma & implementation, so this is fine
…e-panel-redesign Signed-off-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
| const { styles } = props; | ||
|
|
||
| return sstyled(styles)( | ||
| <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft}> |
There was a problem hiding this comment.
@ilyabrower if we deprecate the Back button and replace with a buttonlink in the examples, maybe we should keep its old code?
4 participants
Motivation and Context
How has this been tested?
Screenshots (if appropriate):
Types of changes
Checklist: