Skip to content

[8.19] [Appearance Menu] Add new contrast setting (#227339)#227604

Closed
kibanamachine wants to merge 1 commit intoelastic:8.19from
kibanamachine:backport/8.19/pr-227339
Closed

[8.19] [Appearance Menu] Add new contrast setting (#227339)#227604
kibanamachine wants to merge 1 commit intoelastic:8.19from
kibanamachine:backport/8.19/pr-227339

Conversation

@kibanamachine
Copy link
Contributor

Backport

This will backport the following commits from main to 8.19:

Questions ?

Please refer to the Backport tool documentation

Closes elastic#227309

## Summary

![high-contrast-mode-appearance-menu](https://github.com/user-attachments/assets/2e1353b6-934b-4f01-ab5a-13639247327e)

This adds support for contrast mode alongside in the "Appearance Modal"
alongside the existing color mode setting.

* Added support for contrast mode in the `AppearanceModal` component,
including a new `ContrastModeGroup` and updated logic to handle both
color mode and contrast mode changes.
* Resolved a TODO and updated the `useAppearance` hook to manage
contrast mode alongside color mode

## How to test

### Cloud
* Add the following to your `kibana.dev.yml`

```yml
xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM="
```

* Make the following change on L29 of the `maybe_add_cloud_links.ts`
file

```diff
--- a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
@@ -26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security, cloud }: MaybeAddCloudLinks
   const userObservable = defer(() => security.authc.getCurrentUser()).pipe(
     // Check if user is a cloud user.
     map((user) => user.elastic_cloud_user),
+    map(() => true),
     // If user is not defined due to an unexpected error, then fail *open*.
     catchError(() => of(true)),
     filter((isElasticCloudUser) => isElasticCloudUser === true),
```

* You should now see the "Appearance" link in the user menu

## Release Note

Added support for high-contrast mode through the "Appearance modal"
accessible from the User Profile icon at the top of the screen.

## Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [X] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
~~- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~~
- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
~~- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~
~~- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~~
~~- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed~~
- [X] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [X] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

---------

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
(cherry picked from commit f368fad)
@kibanamachine kibanamachine added the backport This PR is a backport of another PR label Jul 11, 2025
@kibanamachine kibanamachine enabled auto-merge (squash) July 11, 2025 10:29
@elasticmachine
Copy link
Contributor

elasticmachine commented Jul 11, 2025

💔 Build Failed

Failed CI Steps

History

cc @tsullivan

@tsullivan
Copy link
Member

Closing this because #216242 was never backported to 8.19

@tsullivan tsullivan closed this Jul 14, 2025
auto-merge was automatically disabled July 14, 2025 18:05

Pull request was closed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants