feat(EmptyState): update EmptyState with updates for penta #9947

wise-king-sullyman · 2024-01-08T20:06:57Z

What: Closes #9928

Additional issues:

Adds the new penta status modifiers via a status prop on the main EmptyState component. That prop will also set our typical status icons automatically for consumer convenience and to try and drive consistency.

Also reworks the component generally a bit. Discussion with @mcoker lead to the realization that design intent requires the title to be present, so having the EmptyStateHeader component passed in composably wasn't ideal. This PR adds EmptyStateHeader and EmptyStateIcon directly into EmptyState and managed by props at the top level for that reason.

Convenience link: https://patternfly-react-pr-9947.surge.sh/components/empty-state

wise-king-sullyman · 2024-01-08T20:10:52Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

@@ -10,37 +11,78 @@ export enum EmptyStateVariant {
  full = 'full'
 }

+export type EmptyStateStatus = 'danger' | 'warning' | 'success' | 'info' | 'custom';
+export type EmptyStateVariantType = 'xs' | 'sm' | 'lg' | 'xl' | 'full';


I've gone back and forth on keeping the EmptyStateVariant enum, figured it could be left for a followup PR if we do want to remove it though.

I think we should decide on exporting union types like this or exporting enums more broadly before we make the call for the sake of consistency.

wise-king-sullyman · 2024-01-08T20:11:50Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

 export interface EmptyStateProps extends React.HTMLProps<HTMLDivElement> {
  /** Additional classes added to the empty state */
  className?: string;
  /** Content rendered inside the empty state */
-  children: React.ReactNode;
+  children?: React.ReactNode;


children changed to optional because titleText has been lifted and changed to required.

wise-king-sullyman · 2024-01-08T20:12:48Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

+  /** Status style options added to the empty state icon */
+  status?: EmptyStateStatus;
+  /** Additional class names to apply to the empty state header */
+  headerClassName?: string;
+  /** Additional props passed to the empty state header container */
+  headerProps?: React.HTMLProps<HTMLDivElement>;
+  /** Additional classes added to the title inside empty state header */
+  titleClassName?: string;
+  /** Text of the title inside empty state header, will be wrapped in headingLevel */
+  titleText: React.ReactNode;
+  /** Empty state icon element to be rendered. Can also be a spinner component */
+  icon?: React.ComponentType<any>;
+  /** Additional props passed to the icon element */
+  iconProps?: EmptyStateIconProps;
+  /** The heading level to use, default is h1 */
+  headingLevel?: EmptyStateHeadingLevel;


It seems that I need to explicit include the EmptyStateHeader props here for our props table to work properly. At some point in the future we should be able to remove this and just have EmptyStateProps extend EmptyStateHeaderProps, that will require a docs framework update though.

wise-king-sullyman · 2024-01-08T20:46:18Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

-);
+}: EmptyStateProps) => {
+  const statusIcon = status && statusIcons[status];
+  const icon = customIcon || statusIcon;


One decision point: if we have the status prop set a default icon should the icon prop override it, or the other way around?

I think as a consumer I would prefer the former so that I can have the status apply custom colors to my passed icon, so that's what I went with, but I'm not dead set.

Agreed. I only have one hesitation with that, but it's something that can be covered in a11y docs (passing an icon that doesn't visually represent the status)

wise-king-sullyman · 2024-01-08T20:48:02Z

packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx

-
-export interface IconProps extends Omit<React.HTMLProps<SVGElement>, 'size'> {
-  /** Changes the color of the icon.  */
-  color?: string;


Color prop removed as the status prop will allow color customization in a themed way.

If they really need to consumers can still apply colors directly to the icon they pass in.

wise-king-sullyman · 2024-01-08T20:49:43Z

packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx

+  };
+
+  return (
+    <EmptyState status={status} titleText={titleMap[status]} headingLevel="h4">


I think having the status and title change when clicking a button in the example was a nice way of showing the different options, but if we want to just keep this simpler I'm fine to remove these features.

While I do like it, I might lean more towards using a Select outside the EmptyState itself like we do in other examples. Not a blocker, though, and this could be something we could possibly revisit when we're able to dig into rendering examples with "option toggles" similar to Carbon and other library pages.

patternfly-build · 2024-01-08T20:54:26Z

Preview: https://patternfly-react-pr-9947.surge.sh

A11y report: https://patternfly-react-pr-9947-a11y.surge.sh

wise-king-sullyman · 2024-01-12T15:51:50Z

If we proceed with this approach we will want code mods to move the EmptyStateHeader props to the EmptyState and update imports accordingly.

tlabaj

I would suggest grouping all the header related props together into an object.

tlabaj · 2024-01-12T16:02:00Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

  /** Modifies empty state max-width and sizes of icon, title and body */
-  variant?: 'xs' | 'sm' | 'lg' | 'xl' | 'full';
+  variant?: EmptyStateVariantType;


I would actually lean towards making EmptyStateVariantType an enum and list out the union here like we do elsewhere for consistency.

tlabaj · 2024-01-12T16:02:16Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

  /** Cause component to consume the available height of its container */
  isFullHeight?: boolean;
+  /** Status of the empty state, will set a default status icon and color. Icon can be overwritten using the icon prop */
+  status?: EmptyStateStatus;


Same comment as above here.

tlabaj · 2024-01-12T16:03:55Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

+  /** Additional class names to apply to the empty state header */
+  headerClassName?: string;
+  /** Additional props passed to the empty state header container */
+  headerProps?: React.HTMLProps<HTMLDivElement>;


Should this be of type EmptyStateHeaderProps?

Removed this prop and iconProps per our discussion at the group review.

tlabaj · 2024-01-12T16:05:55Z

packages/react-core/src/components/EmptyState/EmptyState.tsx

+    <div
+      className={css(
+        styles.emptyState,
+        variant === 'xs' && styles.modifiers.xs,


can lines 67 -70 be simplified to variant === 'xs' && styles.modifiers.[variant]. if variant id notfull

tlabaj · 2024-01-12T16:07:19Z

packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx

-import { EmptyStateIconProps } from './EmptyStateIcon';
+import { EmptyStateIcon, EmptyStateIconProps } from './EmptyStateIcon';
+
+export type EmptyStateHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';


same comment about an enum for this.

andrew-ronaldson

Design looks good. Thanks

thatblindgeye

Overall things look good. Had a question below and replied to a couple of your comments above (nothing blocking).

packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx

mcoker

L🍕TM

srambach

Looks good! 🥃

wise-king-sullyman linked an issue Jan 8, 2024 that may be closed by this pull request

Consume core updates: Empty state ( Follow up to issue) #9928

Closed

feat(EmptyState): update EmptyState with updates for penta

70a3cd5

wise-king-sullyman force-pushed the empty-state-penta-changes branch from 1a9302e to 70a3cd5 Compare January 8, 2024 20:43

wise-king-sullyman commented Jan 8, 2024

View reviewed changes

wise-king-sullyman marked this pull request as ready for review January 8, 2024 21:22

wise-king-sullyman requested review from thatblindgeye, mcoker, a team, mfrances17, andrew-ronaldson and lboehling and removed request for a team January 8, 2024 21:22

tlabaj added css review labels Jan 9, 2024

tlabaj requested changes Jan 12, 2024

View reviewed changes

andrew-ronaldson approved these changes Jan 12, 2024

View reviewed changes

wise-king-sullyman added 3 commits January 12, 2024 17:31

chore(EmptyState): tighten down props and types

4645c02

chore(EmptyState): update headingLevel type

cba4cf0

chore(EmptyState): fix status example

5869a0f

wise-king-sullyman requested a review from tlabaj January 15, 2024 15:58

thatblindgeye reviewed Jan 15, 2024

View reviewed changes

packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx Outdated Show resolved Hide resolved

wise-king-sullyman added 2 commits January 15, 2024 16:45

chore(EmptyState): remove iconProps prop from EmptyStateHeader

d8fdee8

fix(EmptyState): finish removing iconProps from EmptyStateHeader

dbcc79e

wise-king-sullyman requested a review from thatblindgeye January 15, 2024 22:06

thatblindgeye approved these changes Jan 16, 2024

View reviewed changes

tlabaj approved these changes Jan 16, 2024

View reviewed changes

mcoker approved these changes Jan 17, 2024

View reviewed changes

srambach approved these changes Jan 17, 2024

View reviewed changes

thatblindgeye merged commit 07cbb82 into patternfly:v6 Jan 17, 2024
13 checks passed

This was referenced Jan 17, 2024

Consume core updates: Empty state ( Follow up to issue) #9928

Closed

EmptyState - Move EmptyStateHeader into EmptyState patternfly/pf-codemods#550

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(EmptyState): update EmptyState with updates for penta #9947

feat(EmptyState): update EmptyState with updates for penta #9947

wise-king-sullyman commented Jan 8, 2024 •

edited

Loading

wise-king-sullyman Jan 8, 2024

wise-king-sullyman Jan 8, 2024

wise-king-sullyman Jan 8, 2024

wise-king-sullyman Jan 8, 2024

thatblindgeye Jan 15, 2024

wise-king-sullyman Jan 8, 2024

wise-king-sullyman Jan 8, 2024

thatblindgeye Jan 15, 2024

patternfly-build commented Jan 8, 2024 •

edited

Loading

wise-king-sullyman commented Jan 12, 2024

tlabaj left a comment

tlabaj Jan 12, 2024

tlabaj Jan 12, 2024

tlabaj Jan 12, 2024

wise-king-sullyman Jan 12, 2024

tlabaj Jan 12, 2024

tlabaj Jan 12, 2024

andrew-ronaldson left a comment

thatblindgeye left a comment

mcoker left a comment

srambach left a comment

feat(EmptyState): update EmptyState with updates for penta #9947

feat(EmptyState): update EmptyState with updates for penta #9947

Conversation

wise-king-sullyman commented Jan 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patternfly-build commented Jan 8, 2024 • edited Loading

wise-king-sullyman commented Jan 12, 2024

tlabaj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrew-ronaldson left a comment

Choose a reason for hiding this comment

thatblindgeye left a comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

srambach left a comment

Choose a reason for hiding this comment

wise-king-sullyman commented Jan 8, 2024 •

edited

Loading

patternfly-build commented Jan 8, 2024 •

edited

Loading