Skip to content

Commit

Permalink
Add the ability to specify a second custom logo for PatternFly 6
Browse files Browse the repository at this point in the history
  • Loading branch information
cajieh committed Feb 20, 2025
1 parent 2890ccc commit d210f79
Showing 1 changed file with 206 additions and 0 deletions.
206 changes: 206 additions & 0 deletions enhancements/console/custom-logos.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
---
title: custom-logos
authors:
- "@cajieh"
reviewers:
- "@jhadvig "
- "@spadgett"
- "@everettraven"
- "@JoelSpeed"
approvers:
- "@spadgett"
api-approvers:
- "@JoelSpeed"
creation-date: 2025-02-11
last-updated: 2025-02-11
---

# Custom Logos

## Summary

The OpenShift Container Platform (OCP) web console was upgraded to PatternFly 6. In PatternFly 6, the masthead color changes based on the mode (light or dark). As a result, a single custom logo may not be suitable for both theme modes.

Add the ability to specify custom logos to support light and dark theme modes for the masthead and favicon.

## Background info

The OpenShift Container Platform (OCP) web console was upgraded to PatternFly 6. In PatternFly 6, the masthead color changes based on the mode (light or dark). As a result, a single custom logo may not be suitable for both theme modes.

To address this, we need to allow users to add custom logos for both the masthead and favicon that are compatible with light and dark themes. This ensures that the logos are always visible and aesthetically pleasing, regardless of the theme mode.

The custom logos feature will enable users to specify different logos for the masthead and favicon based on the theme mode. This will involve exposing a new API endpoint to support custom logos for both light and dark themes.

## Motivation

The existing OKD and OpenShift logos are designed for a dark masthead background and include white text, making them less effective in a light theme. To ensure logos remain visible and visually appealing in both light and dark themes, users need the ability to add custom logos for the masthead and favicon that adapt to the theme mode. To support this, a new API endpoint will be introduced, allowing users to specify different logos for light and dark themes.

### User Stories

* As an OpenShift web console user, I want to be able to add different custom logos for light and dark theme modes in the masthead and favicon.

### Goals

This feature should allow users to add custom logos for the masthead and favicon that are compatible with both light and dark theme modes in the OpenShift web console.

### Non-Goals


## Proposal

### API Design Details

The configuration for custom logos will include support for both masthead and favicon types, with separate files for light and dark themes:

```yaml
customLogos:
- type: Masthead
themes:
- type: Light
file:
key: logo-light.svg
name: masthead-logo-light
- type: Dark
file:
key: logo-dark.svg
name: masthead-logo-dark
- type: Favicon
themes:
- type: Light
file:
key: favicon-light.png
name: favicon-logo-light
- type: Dark
file:
key: favicon-dark.png
name: favicon-logo-dark
```
### Workflow Description
├── spec
│ ├── customization
│ ├── customLogos
│ ├── type
│ ├── themes
│ ├── type
│ ├── file
│ ├── key
│ ├── name
└── ...
### API Extensions
N/A
### Risks and Mitigations
1. Users could set both the `CustomLogoFile` and `CustomLogos` APIs. The `CustomLogos` API configuration will take precedence over the old `CustomLogoFile` field.

2. Each of the Console supported themes can be configured individually by setting either the Light or Dark theme type or by applying a default theme to all supported themes using the Default theme type. If the Default theme type is set along with a specific Dark or Light theme, the specific theme setting will override the default one.

4. Users might experience confusion with the introduction of new logo configuration options, especially if they are familiar with using previous method, represented by the `CustomLogo` field, which will be deprecated. Provide a comprehensive documentation that guide users through the transition. Include clear instructions about the changes and their benefits.


### Drawbacks

N/A

### Attributes Description

#### customLogos
- `type`: Enumerate which specifies the type of custom logo. Available custom logo types are `Masthead` and `Favicon`.
- `themes`: A list of themes for which the custom logo is defined.

#### themes
- `type`: Enumerate which specifies the type of theme. Available theme types are `Light`, `Dark` and `Default`.
- `file`: Contains the file details for the custom logo.

#### file
- `key`: The key or path to the custom logo file.
- `name`: The name of the ConfigMap containing the custom logo file.

## Test Plan

Provide tests as part of the console `CustomLogos` implementation and verify that it was shown in the UI. The following tests will be added:
- Unit tests for API
- Unit and E2E tests for console-operator
- E2E tests for console


## Graduation Criteria

N/A


#### Dev Preview -> Tech Preview

N/A

### Tech Preview -> GA

N/A

### Dev Preview -> Tech Preview

N/A

#### Removing a deprecated feature

The current custom logo field in `customization.customLogo` is deprecated and will be removed at some point in the future. Users are encouraged to transition to the new custom logos configuration that supports light and dark theme modes for the masthead and favicon. The new custom logos feature also includes support for a default theme for all unspecified themes.

N/A

#### Failure Modes

N/A

### Removing a deprecated feature

N/A

## Upgrade / Downgrade Strategy

N/A

## Version Skew Strategy

N/A

## Operational Aspects of API Extensions

N/A

## Support Procedures

N/A

## Tracking Link

For more information, refer to the [OpenShift Documentation](https://docs.openshift.com/container-platform/4.17/web_console/customizing-the-web-console.html#adding-a-custom-logo_customizing-web-console).

// TODO: Update the URL to point to CustomLogos docs later on.

### Implementation Details/Notes/Constraints

N/A

### Topology Considerations

N/A

#### Hypershift / Hosted Control Planes

N/A

#### Standalone Clusters

N/A

#### Single-node Deployments or MicroShift

N/A

## Alternatives

0 comments on commit d210f79

Please sign in to comment.