Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[vNext] Tokenize Segmented Control #940

Merged
merged 28 commits into from
Mar 11, 2022
Merged

[vNext] Tokenize Segmented Control #940

merged 28 commits into from
Mar 11, 2022

Conversation

huwilkes
Copy link
Collaborator

@huwilkes huwilkes commented Mar 9, 2022 •
edited
Loading

Platforms Impacted

  • iOS
  • macOS

Description of changes

Convert the Segmented Control to a tokenized control. Also update the demo controller to support the new theme/token overrides.

Verification

Before After
SegmentedControl_before_light SegmentedControl_after_light
SegmentedControl_before_dark SegmentedControl_after_dark
SegmentedControl_before_color SegmentedControl_after_color
SegmentedControl_rtl_before SegmentedControl_rtl_after
SegmentedControl_after_themes

Pull request checklist

This PR has considered:

  • Light and Dark appearances
  • iOS supported versions (all major versions greater than or equal current target deployment version)
  • VoiceOver and Keyboard Accessibility
  • Internationalization and Right to Left layouts
  • Different resolutions (1x, 2x, 3x)
  • Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
  • iPad Pointer interaction
  • SwiftUI consumption (validation or new demo scenarios needed)
  • Objective-C exposure (provide it only if needed)
Microsoft Reviewers: Open in CodeFlow

@huwilkes
Add tokens for the Segmented Control
d5e7fd1
@huwilkes
Put SegmentedControlTokens in alphabetical order
2c268b0
@huwilkes
Update SegmentedControl to conform to TokenizedControlInternal
495ef85
@huwilkes
Update Segmented Control to get colors from tokens
18c7412
@huwilkes
Remove Segmented Control color extension and color from style
6399251
@huwilkes
Move selectionChangeAnimationDuration out of style and remove unused …
a296bc1 
…backgroundHasRoundedCorners
@huwilkes
Rename Style to SegmentedControlStyle and move to SegmentedControlTokens
401ec7b
@huwilkes
Remove custom colors from Segmented Control
4e1b854 
New token system says we should use override tokens, not individual custom colors
@huwilkes
Change name of updateWindowSpecificColors to updateColors
38f3dbb
@huwilkes
Update view hierarchy comment to have the right color names
509b2a8
@huwilkes
Update call to updateWindowSpecificColors in color demo controller
4302435
@huwilkes
Add call to updateSegmentedControlTokens to didMoveToWindow so we get…
fe3c088 
… the tokens for the right style
@huwilkes
Update horizontalInset token to medium spacing
08b876e
@huwilkes
Help the tokens make their way down to the actual segment buttons
47b95b1
@huwilkes
Move added code to roughly the right spot
2eeecef 
The organization in this file is a bit of a mess, so I'll just put the new code in roughly the right spot and we can come back and reorder the rest of the file some other time.
@huwilkes
Update demo controller to support theme overrides
457b1d8
@huwilkes
Add observer for didChangeTheme to SegmentedControl
5b1c984
@huwilkes
Update SegmentedControl demo to change onBrand background colors
e5a024a
@huwilkes
Update the Segmented Control to look for the right theme wide override
47beed8
@huwilkes
Move the Segmented Control to the vNext section
3b620a0
@huwilkes
Move Segmented Control demo window/theme background color update to a…
a7795f1 
… new class

The previous implementation would load blue when first launching the Segmented Control demo even if the theme was set to green because the window wasn't ready in viewDidLoad.
@huwilkes huwilkes requested a review from a team as a code owner March 9, 2022 00:31
@huwilkes huwilkes added the fluent2-tokens Changes meant to be merged to the fluent2-tokens branch. label Mar 9, 2022
@harrieshin
Copy link
Contributor

Screen Shot 2022-03-08 at 8 10 08 PM
what is this weird line in the segmented control in your gif?

@harrieshin
Copy link
Contributor

tested RTL?

@huwilkes
Copy link
Collaborator Author

huwilkes commented Mar 9, 2022

Screen Shot 2022-03-08 at 8 10 08 PM what is this weird line in the segmented control in your gif?

I'm not sure, but it was there before my changes. It doesn't really show up in the view hierarchy, and it goes away if you scroll at all. Could just be a simulator rendering issue? I can check an actual device.

@harrieshin
Copy link
Contributor

Screen Shot 2022-03-08 at 8 10 08 PM what is this weird line in the segmented control in your gif?

I'm not sure, but it was there before my changes. It doesn't really show up in the view hierarchy, and it goes away if you scroll at all. Could just be a simulator rendering issue? I can check an actual device.

that's concerning. try simulator slow animation? something is not calculated right?

@huwilkes huwilkes merged commit 3093481 into microsoft:vnext-tokens Mar 11, 2022
@huwilkes huwilkes deleted the huwilkes-segmentedControlTokenization branch July 15, 2022 20:28
@huwilkes huwilkes mentioned this pull request Nov 15, 2022
Merged
11 tasks
@huwilkes huwilkes mentioned this pull request Dec 8, 2022
Closed
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@harrieshin harrieshin harrieshin left review comments

@mischreiber mischreiber mischreiber approved these changes

@rdeassis rdeassis rdeassis approved these changes

Assignees
No one assigned
Labels
fluent2-tokens Changes meant to be merged to the fluent2-tokens branch.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@huwilkes @harrieshin @mischreiber @rdeassis