Empty state - replace icons with brand illustrations

patternfly / patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project

115 stars 105 forks source link

Empty state - replace icons with brand illustrations #1284

Open mcarrano opened 1 year ago

mcarrano commented 1 year ago

Want to replace the existing PF-Icons coming from our icons set with illustrations pulled from the RH Brand Asset Library. Want to do this in a way that allows products that use the existing icons to maintain those icons but changes the default for PatternFly v5 and forward. Design issue with more detail here: https://github.com/patternfly/patternfly-design/issues/1198 This shows some standard options, but consumers should be allowed to customize.

Open question - how would we package and ship the SVGs for the new illustrations?

mcoker commented 1 year ago

@mcarrano I'm thinking we would

Add these to the pf-icon core webfont
- This will add them to react-icons automatically so they're available in react
Include them in core in the empty state examples/demos
- The icons aren't part of the empty state component, we just have examples/demos that show the icons to use
From my perspectivem react could either do the same (examples/demos show the icons to use, but it's up to the consumer to pick the right one or use their own), or we could have variants of the <EmptyState> or <EmptyStateIcon> components that include a default icon that is overridable. cc @tlabaj wdyt?

tlabaj commented 1 year ago

@mcoker Adding them to the pf-icon core webfont and thus react-icons works. The react <EmptyStateIcon>component is already built so that consumer passes the icon via the icon prop.

mcarrano commented 1 year ago

@mcoker @tlabaj I think it will be fine to have the new default illustrations passed as an icon. My only question is whether a developer could easily replace these with a custom SVG illustration that is not an icon. We don't want to restrict people in what can be placed here.

nicolethoen commented 1 year ago

we can do this as an opt in in the future.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.

lboehling commented 4 months ago

I'm moving this back to design so we can consider adding these alongside the new branded UI icon set. Even though they are technically mini illustrations, we may need to add them to the PF icon repo.