FLUID-6771: Using custom css styles without UIO enactors break UIO panel

Metadata

Source
FLUID-6771
Type
Bug
Priority
High
Status
Closed
Resolution
Fixed
Assignee
N/A
Reporter
Daniel Cho
Created
2023-06-28T12:14:17.332-0400
Updated
2024-12-05T07:31:49.244-0500
Versions
  1. 4.6
Fixed Versions
N/A
Component
  1. UI Options

Description

UIO enactors use !important css rules to force apply styles in different contrast themes and I need to apply some custom css styles, so I changed stylesheet to use “uioStyleProps” instead of “uioStyles”. After the change, I am seeing that the UIO panel is broken in contrast themes.

Steps to reproduce:

  1. Get a copy of dev branch from here
  2. Change the eleventy-plugin-fluid version to 1.0.2
  3. Change uioStyles in line 2 of stylesheets.njk to uioStyleProps
  4. Run npm start
  5. Change the theme using UIO panel to contrast theme on the local build
  6. Notice that the panel’s background colour and foreground are incorrect

Environments

macOS Monterey v12.5

Comments

  • Justin Obara commented 2024-12-05T07:31:49.244-0500

    PR #1110 merged into the project repo at 9dfe6ec.