Skip to content

Port SettingsCard/Expander from WCT and update SUI to use it - #20232

Merged
Carlos Zamora (carlos-zamora) merged 26 commits into
mainfrom
dev/cazamor/sui-rejuv/setting-container
Aug 24, 2026
Merged

Carlos Zamora (carlos-zamora) merged 26 commits into
mainfrom
dev/cazamor/sui-rejuv/setting-container

Conversation

@carlos-zamora

@carlos-zamora Carlos Zamora (carlos-zamora) commented May 15, 2026 •

Copy link
Copy Markdown
Contributor

Summary of the Pull Request

Ports the SettingsCard and SettingsExpander from Windows Community Toolkit to the TerminalSettingsEditor project:

  • Windows Community Toolkit code: https://github.com/CommunityToolkit/Windows/tree/main/components/SettingsControls/src
    • SettingsCard and SettingsExpander were ported over and reuse our macros to reduce boilerplate.
    • A few deviations exist since WCT targets WinUI 3 but TSE uses WinUI 2 (i.e. chevron rendering)
    • One deviation specific to TSE: Description is applied as AutomationProperties.FullDescription for accessibility. This is for accessibility compliance. Description text should be read out by the screen reader (scan mode isn't enough). Prior to this change, we would expose it as HelpText. This change exposes it as FullDescription which is more fitting as it's generally an opt-in behavior for screen reader users to hear. This prevents the user from being overwhelmed with information.
  • SettingsControlsHelpers is used to make this much easier to review. Any converters, triggers, or other classes that are used for the migration were added there.

Additionally, this PR performs the migration to use these new controls and removes SettingContainer entirely. Associated changes:

  • Resources: renamed keys .HelpText --> .Description
  • Deleting SettingContainerStyle.xaml and moving anything that's still used to CommonResources.xaml
  • Appearances: BackgroundImageSettingsVisible --> BackgroundImageSettingsEnabled to make use of the disabled styling
  • GenerateSettingsIndex.ps1 was updated to target SettingsCard/SettingsExpander for the search index

Other notable changes as a part of using the new controls:

  • Navigators (i.e. "Advanced" button in Profiles page, Extensions page) were also converted to use SettingsCard
  • Utils.h/cpp includes a fix for deep link to work for nested settings (i.e. "Foreground", "Columns")

Switching to use the WCT port directly allows us to iterate faster on the settings UI and be more consistent with the Windows ecosystem. However, this does mean that the "reset button" had to be removed from the individual settings. This was already a weird pattern, so removing it shouldn't be too much of an issue. However, there was value to being able to reset settings. To provide this kind of functionality, a "reset" button is being added to the profile pages. This clears all settings in a profile so that they can apply their own customizations on top. It sacrifices granularity for simplicity and is a better understood concept.

Validation Steps Performed

  • settings search should pick up and navigate to settings properly
  • accessibility audit

PR Checklist

Related to #17000

Comment thread src/cascadia/TerminalSettingsEditor/SettingsExpander.cpp Fixed
@github-actions

This comment has been minimized.

@carlos-zamora

Copy link
Copy Markdown
Contributor Author

UI changes I noticed while poking around:

  • Clicking middle of expander doesn't open anymore
  • Profile > Icon: expander contents are much larger
  • Container height changed 64 px -> 66 px
  • Expander chevron has additional padding to left (against preview value)
  • Profile > Appearance > Color scheme: padding inside expander looks bad
  • Profile > Appearance > "Variable font axes" & "Font features": "+ Add new" button is misaligned

I hit a point where I could go in and make everything look the same as we have it now, but I felt that that mildly contradicted the idea behind trying to make the UI "consistent" by using these controls.

Niels Laute (@niels9001) I'll go through and do a second pass fixing the things above. Can you also go through it and point out any inconsistencies with the UI that should be addressed? The main files that are probably of interest are:

  • src/cascadia/TerminalSettingsEditor/SettingsControlsStyle.xaml
  • src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml

Once we figure that out and this gets reviewed/merged, we can probably use SettingsCards in #20215.

@niels9001

Copy link
Copy Markdown
Contributor

UI changes I noticed while poking around:

  • Clicking middle of expander doesn't open anymore
  • Profile > Icon: expander contents are much larger
  • Container height changed 64 px -> 66 px
  • Expander chevron has additional padding to left (against preview value)
  • Profile > Appearance > Color scheme: padding inside expander looks bad
  • Profile > Appearance > "Variable font axes" & "Font features": "+ Add new" button is misaligned

I hit a point where I could go in and make everything look the same as we have it now, but I felt that that mildly contradicted the idea behind trying to make the UI "consistent" by using these controls.

Niels Laute (@niels9001) I'll go through and do a second pass fixing the things above. Can you also go through it and point out any inconsistencies with the UI that should be addressed? The main files that are probably of interest are:

  • src/cascadia/TerminalSettingsEditor/SettingsControlsStyle.xaml
  • src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml

Once we figure that out and this gets reviewed/merged, we can probably use SettingsCards in #20215.

The issue is that we are now mixing-and-matching SettingsCard/SettingsExpander with SettingsContainer. The Toolkit's settings controls have all visual states and logic built-in: for example, if you host a ToggleSwitch as part of the Content, it will automatically apply the right style to make it right-aligned. Now, we are overriding that style again with a manual style. Therefore, you see a lot of inconsistencies because there are style overrides happening.

How big is the gap between SettingsContainer and the Settings controls? Like, could we deprecate it completely and port over the things that are required to SettingsCard (which gets hosted by the Expander too?

Comment thread src/cascadia/TerminalSettingsEditor/SettingContainer.cpp Fixed
Comment thread src/cascadia/TerminalSettingsEditor/SettingsControlsStyle.xaml Fixed
@github-actions

This comment has been minimized.

Comment thread src/cascadia/TerminalSettingsEditor/SettingsCard.cpp Fixed
Comment thread src/cascadia/TerminalSettingsEditor/SettingsCard.cpp Fixed
Comment thread src/cascadia/TerminalSettingsEditor/SettingsCard.cpp Fixed
Comment thread src/cascadia/TerminalSettingsEditor/SettingsCard.cpp Fixed
Comment thread src/cascadia/TerminalSettingsEditor/SettingsCard.cpp Fixed
Comment thread src/cascadia/TerminalSettingsEditor/SettingsControlsStyle.xaml Fixed
Comment thread src/cascadia/TerminalSettingsEditor/SettingsExpander.idl Fixed
Comment thread src/cascadia/TerminalSettingsEditor/StyleExtensions.idl Fixed
@github-actions

This comment has been minimized.

Comment thread src/cascadia/TerminalSettingsEditor/SettingsCard.cpp Fixed
@github-actions

This comment has been minimized.

@carlos-zamora
Carlos Zamora (carlos-zamora) force-pushed the dev/cazamor/sui-rejuv/setting-container branch from 834a37e to f7eb2fb Compare May 21, 2026 02:19
@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

Comment thread src/cascadia/TerminalSettingsEditor/SettingsControlsStyle.xaml Fixed
@github-actions

This comment has been minimized.

@carlos-zamora

This comment was marked as resolved.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

44/69 wait this does get rid of the "inherit" buttons still doesn't it

blocking to finish review, not because any of these changes are particularly objectionable except for the one (you know the one)

Comment thread src/cascadia/TerminalSettingsEditor/Resources/de-DE/Resources.resw
Comment thread tools/GenerateSettingsIndex.ps1 Outdated
Comment thread src/cascadia/TerminalSettingsModel/IAppearanceConfig.idl Outdated
@@ -5,6 +5,7 @@

#include "pch.h"
#include "Utils.h"
#include <winrt/Microsoft.Terminal.Settings.Editor.h>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

surprised this isn't in our pch already

Comment thread src/cascadia/TerminalSettingsEditor/SettingsExpander.cpp Outdated
Comment thread src/cascadia/TerminalSettingsEditor/SettingsControlsHelpers.idl Outdated
Comment thread src/cascadia/TerminalSettingsEditor/SettingsCard.idl Outdated
Comment thread src/cascadia/TerminalSettingsEditor/ProfileViewModel.cpp Outdated
@microsoft-github-policy-service microsoft-github-policy-service Bot added Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something and removed Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something labels Aug 7, 2026

@lhecker Leonard Hecker (lhecker) left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

6000 lines, yep looks good. 👍

controlToFocus.StartBringIntoView();
controlToFocus.Focus(winrt::Windows::UI::Xaml::FocusState::Programmatic);
// will end up doing nothing.
winrt::Microsoft::Terminal::Settings::ExpandAncestorsAndBringIntoView(page.template as<winrt::Windows::UI::Xaml::FrameworkElement>(), controlToFocus);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the first time I see a legit use of template foo in years. I'm reminded once again that C++ is not a real language. This is so ugly. lol

Comment thread src/cascadia/TerminalSettingsEditor/SettingsExpander.cpp
Comment thread src/cascadia/TerminalSettingsEditor/Utils.cpp Outdated
Comment thread src/cascadia/TerminalSettingsEditor/SettingsExpander.cpp
Comment thread tools/GenerateSettingsIndex.ps1 Outdated
Comment thread src/cascadia/TerminalSettingsEditor/Utils.cpp Fixed
Comment thread src/cascadia/TerminalSettingsEditor/Utils.cpp Fixed
@github-actions

This comment has been minimized.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LFG!

@carlos-zamora
Carlos Zamora (carlos-zamora) merged commit 86d15ae into main Aug 24, 2026
20 checks passed
@carlos-zamora
Carlos Zamora (carlos-zamora) deleted the dev/cazamor/sui-rejuv/setting-container branch August 24, 2026 23:20
Carlos Zamora (carlos-zamora) added a commit that referenced this pull request Aug 25, 2026
## Summary of the Pull Request
Updates the settings UI to introduce a new Profiles page. This page
includes:
- a "Profile Defaults" navigator
- a "Color Schemes" navigator (removed top-level item in favor of this)
- an "add profile" split button (removed AddProfile page in favor of
this)
- a navigator for each profile
  - tooltips were added for the "hidden"/"orphaned" info badge

## Validation Steps Performed
Scenarios:
- [x] settings search
   - [X] defaults
   - [X] color schemes
   - [X] setting in defaults
- [X] breadcrumbs
- [X] navigate to individual profiles (via search and not)
- [X] update settings for a profile
- [X] accessibility testing

## PR Checklist
Related to #17000
Stacked on #20232
Dustin L. Howett (DHowett) pushed a commit that referenced this pull request Sep 8, 2026
…20582)

Aggregated localization changes for #20215, #20633, #20199 and #20232.
Co-authored-by: Console Service Bot <consvc@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

Sponsor
SponsoredKunjungi sekarang
Promo