Matthew BirtchandCursor Agent e3d074ff02 Migrate Toggle to Compass Switch (#39038)
* Migrate Toggle component to Compass Switch adapter

Rewrite components/toggle.tsx to wrap @mattermost/compass-ui Switch with
prop mapping and sibling labels for onText/offText. Update Jest tests and
snapshots for switch/checkbox semantics (role=switch, checked state).

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Place Toggle onText/offText on Compass Switch label

Pass state text through Switch children so Public/Private sits
left of the control and remains clickable for accessibility.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use medium Compass Switch for plugin enable control

PluginEnableButton Toggle size btn-sm → btn-md (Compass Switch medium).

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Stop forwarding legacy btn-toggle classes onto Compass Switch

Toggle is a Compass Switch adapter; call sites still passed
toggleClassName='btn-toggle-primary', which painted the old gray
rectangular track chrome from _toggle.scss behind the Switch.
Remove the prop, drop those call-site classNames, and delete the
unused legacy toggle stylesheet.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix post priority Switch double-toggle in menu items

Clicking the Compass Switch inside ToggleItem fired both Switch onChange
and MenuItem onClick for the same gesture, so the handler ran twice and
the control appeared stuck. Stop click propagation on the switch and add
a unit test covering switch and row activation.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use Compass Switch settings-row for channel settings toggles

Replace custom __text + Toggle header rows with Switch children +
secondaryLabel for configuration, discoverable, and shared-channels
sections. Drop obsolete header SCSS; keep existing testids/behavior.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate Admin Console LineSwitch rows to Compass Switch

Replace Toggle-based LineSwitch with AdminSettingsSwitch (children +
secondaryLabel), covering group mentions, team modes, and channel modes.
Public/Private uses state text as the primary label; domain input stays
as a footer under the switch. Delete unused LineSwitch styles and update
Cypress selectors for role=switch inputs.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate remaining Toggle call sites to Compass Switch

Replace production Toggle adapters with direct @mattermost/compass-ui
Switch usage across new channel modal, post priority, recaps, plugin
enable, user properties, auto-translation, IP filtering, and content
flagging reviewers. Delete the unused Toggle component and its tests.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Document medium Switch size for Admin Console Public/Private row

AdminSettingsSwitch intentionally uses Compass medium (14px) + semiBold
so short state labels like Public/Private match Channel Settings and do
not inherit the old Toggle btn-lg → large (16px) default.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix Team Modes separator when Sync Group Members is on

Omit the Sync row section separator only when no later row is visible.
ABAC still renders disabled while synced, so last must not track isSynced alone.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use static Public/Private Switch title in Channel Management

Stop swapping Switch children between "Public" and "Private". Keep a
static "Public channel or private channel" label with help text as
secondaryLabel; checked remains public and unchecked private. Update
Cypress assertions and channel_modes snapshots accordingly.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Show current Public/Private mode on channel Switch label

Use a dynamic primary label (Public channel / Private channel) so
checked state is scannable without a segmented control.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update Cypress for dynamic Public/Private Switch labels

Assert Public channel when checked and Private channel when unchecked.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix plugin enable Switch alignment next to actions menu

Zero Bootstrap label margin-bottom and Switch width:100% on the
PluginMetadataPanel enable control so it lines up with the ⋯ button.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use segmented Public/Private control in Channel Management

Replace the ambiguous Switch for channel privacy with a temporary
AdminSettingsSegmentedRow (Public | Private) until Compass ships a
segmented control. Update Cypress selectors accordingly.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix IP Filtering enable Switch not revealing edit config

Use event.checked for the Compass Switch, skip the filterToggle sync
effect while ipFilters is still null so an empty [] does not race the
fetch, and show EditSection whenever filters are loaded and the toggle
is on (do not wait on currentUsersIP).

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Increase Public/Private segmented control border radii

Round the track to 8px and active segments to 4px for a softer
Channel Management Public/Private control.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Increase Public/Private segmented control track padding

Bump &__segments padding from 2px to 4px.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Soften Public/Private segmented control border

Lower track border opacity from 0.16 to 0.08.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Darken Public/Private segmented control track background

Raise &__segments background opacity from 0.04 to 0.08.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Address review comments on Switch a11y and formatting

Align LDAP Cypress private-toggle assertion indentation, add
aria-labels on IP Filtering and Auto-translation switches, and fix
AdminSettingsSwitch import order for eslint import/order.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix eslint failures blocking Web App CI check-lint

Add blank line before comment in channel_modes and reorder imports
in post_priority_picker_item.test to satisfy import/order.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Align en catalogue isPublicDescr with segmented control copy

Update admin.channel_settings.channel_details.isPublicDescr to say
"Use this control" instead of "Use this switch", matching channel_modes.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix Switch migration CI failures in unit and Playwright tests

Update recap configuration queries to role=switch, refresh
channel_details snapshots for the Public/Private segmented control,
and assert/set Compass Switch via aria-checked check/uncheck in
Playwright helpers and related specs.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Stabilize Switch snapshots and fix Playwright check interception

Mock Compass Switch CSS-module styles in Jest so snapshots no longer
embed install-specific content hashes, and use force:true on Switch
check/uncheck so the wrapping label does not intercept pointer events.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update Channel Management Public/Private docs for segmented control

Replace toggle wording with select Public or Private, and refresh the
System Console screenshot to match AdminSettingsSegmentedRow.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Revert Public/Private docs wording; keep screenshot refresh only

The step text can stay as toggle between Public or Private; only the
stale screenshot needed updating for the segmented control.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Refresh Sync Group Members channel docs screenshot for Compass Switch

Replace the stale Channel Management flip-toggle image with an updated
System Console capture showing Sync Group Members enabled.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Refresh Anyone can join this team docs screenshot for Compass Switch

Replace the stale Team Management flip-toggle image with an updated
System Console capture showing Anyone can join enabled.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Refresh specific email domains team docs screenshot for Compass Switch

Replace the stale Team Management flip-toggle image with an updated
System Console capture showing email-domain restriction enabled.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Refresh Public/Private channel docs screenshot for segmented control

Replace the Channel Management Public/Private docs image with an updated
System Console capture showing the Public|Private segmented row.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Refresh Sync Group Members team docs screenshot for Compass Switch

Replace the stale Team Management flip-toggle image with an updated
System Console capture showing Sync Group Members enabled.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix Playwright Switch assertions for join/leave and scheduled recaps

Assert join/leave defaults with toBeChecked instead of the legacy active
CSS class, and pause/resume scheduled recaps via click plus polled
expect helpers so async-controlled Compass Switches can settle.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Bump @mattermost/compass-ui to 0.1.0-alpha.15

Upgrade the Compass UI dependency used by Switch and related admin
console controls.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Restore currentUsersIP gate for IP Filtering EditSection

Keep the Toggle→Switch migration scoped to the adapter swap. Showing
EditSection still requires the user's IP to be loaded, matching prior
behavior.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix plugin install Cypress asserts for Compass Switch aria-checked

Plugin enable controls use Switch (aria-checked), not segmented buttons
(aria-pressed). Update MM-T5714/MM-T5715 assertions accordingly.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Revert IP Filtering filterToggle sync to master behavior

The ipFilters === null early return and consolidated map were outside
the Toggle→Switch swap scope and mildly changed load-time behavior.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
2026-10-21 08:18:05 -04:00
2026-10-04 12:35:53 +08:00
2018-05-30 10:23:25 -04:00

Mattermost logo

Mattermost is an open core, self-hosted collaboration platform that offers chat, workflow automation, voice calling, screen sharing, and AI integration. This repo is the primary source for core development on the Mattermost platform; it's written in Go and React, runs as a single Linux binary, and relies on PostgreSQL. A new compiled version is released under an MIT license every month on the 16th.

Deploy Mattermost on-premises, or try it for free in the cloud.

mattermost user interface

Learn more about the following use cases with Mattermost:

Other useful resources:

Table of contents

Install Mattermost

Other install guides:

Native mobile and desktop apps

In addition to the web interface, you can also download Mattermost clients for Android, iOS, Windows PC, macOS, and Linux.

Get Mattermost on Google Play Get Mattermost on the App Store Get Mattermost on Windows PC Get Mattermost on Mac OSX Get Mattermost on Linux

Get security bulletins

Receive notifications of critical security updates. The sophistication of online attackers is perpetually increasing. If you're deploying Mattermost it's highly recommended you subscribe to the Mattermost Security Bulletin mailing list for updates on critical security releases.

Subscribe here

Get involved

Learn more

License

See the LICENSE file for license rights and limitations.

Get the latest news

Contributing

Small Image

Please see CONTRIBUTING.md. Join the Mattermost Contributors server to join community discussions about contributions, development, and more.

S
Description
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
Readme AGPL-3.0, Apache-2.0
2.6 GiB
0 Stars 3 Watchers 0 Forks
Languages
TypeScript 48.9%
Go 41.8%
JavaScript 5.1%
SCSS 2.3%
HTML 1.4%
Other 0.3%