[FEATURE] UI Customization: Component Provider by zhuje · Pull Request #241 · perses/shared

zhuje · 2026-08-19T18:45:43Z

Description

Create Component Provider as continuation of this initiative: UI Customization (perses/perses#3570).

Previous PRs towards this initiative:

Below is the Ladel story showing usage of the Component Provider to style Button and Alert components in line with Patternfly v6:

Screenshots

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.
E2E tests are stable and unlikely to be flaky.
See e2e docs for more details. Common issues include:
- Is the data inconsistent? You need to mock API requests.
- Does the time change? You need to use consistent time values or mock time utilities.
- Does it have loading states? You need to wait for loading to complete.

jgbernalp · 2026-08-20T07:53:13Z

  }
+
+  /* ---- Icon ---- */
+  .ps-Alert-icon {


icon should be its own component and we should compose it into the alert, rather than defining specific styling in alerts, this would make the Icon reusable in other contexts

If custom styling is needed for a composed component, then we can use the component class, e.g.:

.ps-Alert > .ps-Icon { ... }

Separated Icon as its own reusable component and updated the Alert files.

jgbernalp · 2026-08-20T08:03:09Z

    <div role={role} {...rest} ref={ref} className={classes} data-severity={severity}>
-      {children}
+      {resolvedIcon !== null && (
+        <span className="ps-Alert-icon" aria-hidden="true">


We should use BEM conventions here https://getbem.com/naming/

Updated to ps-Alert__icon

jgbernalp · 2026-08-20T08:04:15Z

+    cursor: wait;
+  }
+
+  .ps-Button-spinner {


Spinner should be also its own primitive component and we should compose it into the button when loading

Separated Spinner as its own primitive component.

jgbernalp · 2026-08-20T08:40:22Z

We should group the context providers and context into a contexts folder

Grouped into contexts

jgbernalp · 2026-08-20T08:42:39Z

+}
+
+export interface PersesIcons {
+  Error: React.ComponentType<React.SVGProps<SVGSVGElement>>;


Suggested change

Error: React.ComponentType<React.SVGProps<SVGSVGElement>>;

Error: React.ComponentType<SVGProps<SVGSVGElement>>;

jgbernalp · 2026-08-20T08:42:52Z

+import type { ButtonProps } from './primitives/Button/Button';
+
+export interface PersesComponents {
+  Button: React.ComponentType<ButtonProps>;


Suggested change

Button: React.ComponentType<ButtonProps>;

Button: ComponentType<ButtonProps>;

jgbernalp · 2026-08-20T08:47:11Z

+  ComponentsContextValue,
+} from './ComponentsProvider';
+
+export { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './icons';


We should avoid exporting all icons and components from this file, otherwise we will force consumers to load all the components even if they are not used. A better approach would be to expose a file they can import with the list of all the default components and icons, and initialize the application with the default ones or custom ones.

Updated ComponentsProvider no longer imports Button/Alert/icons internally

This file still exporting all primitives and icons, if a consumer imports @perses-dev/components/next they will be forced to import all components, even if they don't need them. We should export only the required components so the icons and components can be configured not the components and icons themselves.

jgbernalp · 2026-08-20T08:49:19Z

+
+export type { PersesComponents, PersesIcons, ComponentsContextValue, ComponentsProviderProps };
+
+const DEFAULT_COMPONENTS: PersesComponents = {


Instead of merging the default components we should make the components and icons in the provider mandatory, meaning consumers must initialize the components, even if they want to use the defaults. This will allow consumers to load only what they need without bloating their bundles with unnecessary components.

Updated ComponentsProvider so that the consumer must initialize default components.

jgbernalp · 2026-08-20T08:51:18Z

+}
+
+export function mergeRefs<T>(
+  innerRef: React.MutableRefObject<T | null>,


Suggested change

innerRef: React.MutableRefObject<T | null>,

innerRef: MutableRefObject<T | null>,

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

jgbernalp · 2026-08-21T08:48:22Z

+  const isDark = globalState.theme === 'dark';
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-perses-mode', isDark ? 'dark' : 'light');


I think it would be better to create a ThemeModeProvider provider and include it here rather than doing this manually. The css does not need to be inlined as we can create a css file and import it.

jgbernalp · 2026-08-21T08:49:37Z

+
+  let resolvedIcon: ReactNode;
+
+  if (icon !== undefined) {


Icon might be false or 0 and this will render an empty icon

jgbernalp · 2026-08-21T08:52:32Z

+const DEFAULT_SEVERITY_ICONS: Record<AlertSeverity, ComponentType<SVGProps<SVGSVGElement>>> = {
+  success: SuccessIcon,
+  info: InfoIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+};
+
+const SEVERITY_TO_PROVIDER_KEY: Record<AlertSeverity, keyof PersesIcons> = {
+  error: 'Error',
+  warning: 'Warning',
+  success: 'Success',
+  info: 'Info',
+};


This 2 mappings can be merged into one with a key and icon fields, so we don't have to maintain them synchronized

jgbernalp · 2026-08-21T09:00:47Z

+  hoverBg: string;
+}
+
+const PF_SOLID: Record<string, PfPalette> = {


Not sure this is the right way to test this. At this point we are aiming to test that the ComponentProvider can receive custom components to override the default one. Not something specific to Patternfly. We also need to test that overriding the tokens used by the component produces the intended customization. I suggest to simplify this custom Button, remove the Patternfly specifics and add a new story with customized tokens.

jgbernalp · 2026-08-21T09:10:02Z

 .env.production.local
 webpack.local.js

+.npmrc


is this intentional?

zhuje requested a review from a team as a code owner August 19, 2026 18:45

zhuje force-pushed the ui-customization-part3-component-provider branch 3 times, most recently from 3701918 to 88d7b67 Compare August 19, 2026 19:36

zhuje marked this pull request as draft August 19, 2026 19:40

zhuje force-pushed the ui-customization-part3-component-provider branch from 88d7b67 to 6f911e9 Compare August 19, 2026 19:48

zhuje mentioned this pull request Aug 19, 2026

[UI customization] Remove direct uses of Material UI from the Perses UI perses/perses#3733

Open

zhuje marked this pull request as ready for review August 19, 2026 19:56

zhuje force-pushed the ui-customization-part3-component-provider branch from 6f911e9 to d2bc721 Compare August 19, 2026 19:57

zhuje marked this pull request as draft August 19, 2026 20:23

zhuje force-pushed the ui-customization-part3-component-provider branch from 3db4542 to b63342b Compare August 19, 2026 22:45

zhuje marked this pull request as ready for review August 19, 2026 22:45

jgbernalp reviewed Aug 20, 2026

View reviewed changes

Comment thread components/.ladle/components.tsx Outdated

jgbernalp reviewed Aug 20, 2026

View reviewed changes

Comment thread components/.ladle/components.tsx Outdated

jgbernalp reviewed Aug 20, 2026

View reviewed changes

Comment thread components/src/next/icons/index.ts

jgbernalp reviewed Aug 20, 2026

View reviewed changes

[FEATURE] UI Customization. Create Component Provider

e445932

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

zhuje force-pushed the ui-customization-part3-component-provider branch from 25dfa3d to e445932 Compare August 21, 2026 01:20

jgbernalp reviewed Aug 21, 2026

View reviewed changes

Comment thread .gitignore

.env.production.local

webpack.local.js

.npmrc

jgbernalp Aug 21, 2026

Copy link
Copy Markdown

Contributor

Choose a reason for hiding this comment

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

is this intentional?

	Error: React.ComponentType<React.SVGProps<SVGSVGElement>>;
	Error: React.ComponentType<SVGProps<SVGSVGElement>>;

	Button: React.ComponentType<ButtonProps>;
	Button: ComponentType<ButtonProps>;


		export type { PersesComponents, PersesIcons, ComponentsContextValue, ComponentsProviderProps };

		const DEFAULT_COMPONENTS: PersesComponents = {

	innerRef: React.MutableRefObject<T \| null>,
	innerRef: MutableRefObject<T \| null>,

Uh oh!

Conversation

zhuje commented Aug 19, 2026

Description

Screenshots

Checklist

UI Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants