Uno.Themes icon indicating copy to clipboard operation
Uno.Themes copied to clipboard

Published 20 hours ago • verified publisher icon unoplatform

NavigationView colors different from FigmaFile

Open iurycarlos opened this issue 1 year ago • 9 comments

Current behavior

Background Pane color is different between Themes and Figma File

image

Expected behavior

We need to have the same colors on both sides

How to reproduce it (as minimally and precisely as possible)

Just use the latest version of the QA Figma File and process a screen with a Nav View.

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

  • [ ] iOS
  • [ ] Android
  • [ ] WebAssembly
  • [ ] UWP
  • [ ] MacOS

Anything else we need to know?

iurycarlos avatar Sep 28 '23 13:09 iurycarlos

FYI @kazo0

agneszitte avatar Oct 06 '23 23:10 agneszitte

@iurycarlos I believe the Pane background needs to be set by overriding certain lightweight styling resources.

https://learn.microsoft.com/en-us/windows/apps/design/controls/navigationview#pane-backgrounds

cc @carldebilly / @agneszitte

NavigationView is an adaptive control that implements top-level navigation patterns for your app.

kazo0 avatar Oct 08 '23 15:10 kazo0

Latest version of Figma File was changed, now they are equal:

image

iurycarlos avatar Oct 09 '23 11:10 iurycarlos

Oh! I was confused, i used the old version of the nav view, since it wasn't merged yet. That means the issue shouldn't be closed. Sorry!

iurycarlos avatar Nov 30 '23 16:11 iurycarlos

Ok, just a list of what is different between Figma File and Uno Themes:

  • [ ] Default Panel background in MaterialNavigationViewStyle (white) is not the same as Figma File (purple)
  • [ ] Item's label is not appearing in the collapsed version
  • [ ] Back arrow shouldn't appear (in figma file it is optional, is that a way to do that?)
  • [ ] Space between sandwich button and the sections should be greater
  • [ ] Spacing between Section Title and items is different
  • [ ] Spacing between items is different
  • [ ] Seems items font weight is different

Latest screenshot:

image

image

Figma File source:

https://www.figma.com/file/trM3i5qUPmFBcnxWXXmnuF/branch/ewmJs0WraTrwmE9Sp8cvwE/Uno-Platform-Material-Toolkit?type=design&node-id=14747%3A65219&mode=design&t=42eudIx4FPbwvTSs-1

iurycarlos avatar Nov 30 '23 17:11 iurycarlos

@iurycarlos One thing I'm not sure about is, in the non collapsed version, the label is shown as "item label" and in the collapsed version, it's "label", should we just cutoff the words like that and leave enough space for a certain number of letters, or are we supposed to have separate name for the collapsed and the non-collapse version?

Marc-Antoine-Soucy avatar Dec 20 '23 16:12 Marc-Antoine-Soucy

@NVLudwig, i think you are the one to answer that :)

iurycarlos avatar Dec 20 '23 17:12 iurycarlos

Great question, In both compact and expanded it should be: • the same label • on a single line of text • filling the max width • truncated (...) is it runs over.

NVLudwig avatar Dec 21 '23 15:12 NVLudwig

Hello everyone!

So, latest version from figma versus themes default style:

  • [ ] Default Background from Figma is: SurfaceVariant and for themes, seems to be Surface.
  • [ ] When we change items corner radius, it doesn't affect the visual result
  • [ ] When overriding the NavigationView.Background, we can see that it a background underneath the content and the Side Panel. So, it doesn't reflect the Figma visual at all.
  • [ ] Labels for items in collapsed are not visible in Uno side as they are in Figma File
  • [ ] NavigationView CornerRadius does nothing

@NVLudwig @carldebilly

image

iurycarlos avatar Feb 08 '24 20:02 iurycarlos