Design Guidance section #1167
Design Guidance section #1167
Conversation
Typograpghy tweaks
Merging icon and a11y pages into design guidance section
gregwoo-microsoft
changed the title
- Added a description - Added tooltips for 5 types - Added logic to close/open tooltip - (small fix to progress ring page to remove warning)
- Changed title style - Made tiles square and icons slightly smaller - Change icon name style - Switched code glyph section w/ text glyph (made more sense since we provide the XAML code first then C#)
- Updated styles - Updated descriptions - Made image smaller - changed label by example - added automation name sample
redundant information
- Updated styles - fixed code snipped of landmark sample - added description to landmark/heading samples
- added link to accessibility insights app - added styles - fixed margins/padding
|
Awesome work on the colors section @chingucoding :)! Really cool! One concern I do have is the stretching of the ColorTiles. Ideally, the tiles would reflow underneath each other on resize (like what a GridView would do), right? But I'm guessing that might be tricky with the no. of different variations 🤔
|
|
I was afraid that someone would ask about that. With the different number of elements in the samples, I don't think there is an easy way for that. A control like GridView or ItemsRepeater will always create rows and fill them but I don't think would make the last elements stretch the rest of the row like we currently have with the hardcoded layouts. I'm really open for suggestions here since the text spanning multiple lines is not ideal. |
|
I think that it's fine to keep it like this for V1 and eventually look to improve it in the future. Thoughts? |
Yep agree.. @chingucoding Since the WinUI brush name is the longest, I could imagine we could maybe hide that on small screensizes (under an i button with a tooltip)? And maybe the Toolkit's UniformGrid could be helpful as well. The challenging bit is the many different layouts that we want to support.. but yeah, I agree it's fine for V1.. once we get it in I'm happy to try some stuff out :) |
|
@gregwoo-microsoft @chingucoding The HEX code would be different for Light vs. Dark theme.. We could do something fancy by swapping out the hex codes based on the selected theme - but maybe better to leave this out completely for V1? Especially since it's information not super relevant for devs - we want them to use the WinUI brush and NOT hardcode colors using HEX values. And if we link to the Figma file at the top of the page (that has the extensive overview of all colors, with HEX values included) they could always look it up if needed? Thoughts? Also makes the page a bit less information dense :)!
|
|
You are raising a very good point there @niels9001, especially the fact that developers should use the brushes and not have to resort to the colors. In my opinion, I think we can get rid of them. If people want the colors, they can still get that information from Figma. |
|
@gregwoo-microsoft @niels9001 I implemented the changes we discussed:
What is currently missing is the sticky header and adding missing brushes. I'm not sure how easy the sticky header will be since we are inside an ItemsPage which also provides scrolling of our content. Regarding missing brushes, what do you both think about adding a small "i" button that users can click to know why the brush is red? |
Yes, makes sense. I'd leave the i and sticky header stuff for now and tackle those in seperate PRs once this gets merged maybe? |
Sure, works for me. After all, don't want to drag out PRs waiting on this even longer. |
gregwoo-microsoft
changed the title
Description
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes