feat(EmptyState): apply tokens #6056

srambach · 2023-11-10T21:15:13Z

This also adds status modifiers for the empty state per conversation with @andrew-ronaldson. These set the icon's color to the appropriate status color.

patternfly-build · 2023-11-10T21:20:59Z

Preview: https://patternfly-pr-6056.surge.sh

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

mattnolting

Looking good!

@srambach looks like pf-m-link padding is off as well, should we open a separate issue?

mattnolting · 2023-11-21T14:54:13Z

src/patternfly/components/EmptyState/empty-state.scss

+  --#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--xs);
+  --#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--xs);


Suggested change

--#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--xs);

--#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--xs);

--#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--sm);

--#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--md);

@lboehling should the column-gap be --pf-t--global--spacer--md?

mattnolting · 2023-11-21T15:23:45Z

src/patternfly/components/EmptyState/empty-state.scss

+  --#{$empty-state}--body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$empty-state}--m-xs__body--FontSize: var(--pf-t--global--font--size--body);
+  --#{$empty-state}--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);


Suggested change

--#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);

--#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--heading--md);

Design spec shows 20px font-size here. Should it be --pf-t--global--font--size--heading--md?

@lboehling I suspect we still want a body text here? Can you confirm?

(@lboehling said to use Body Large - a change in Figma wasn't merged yet)

mattnolting · 2023-11-21T15:26:09Z

src/patternfly/components/EmptyState/empty-state.scss

+  }
 }

 .#{$empty-state}__content {


Suggested change

.#{$empty-state}__content {

.#{$empty-state}__content {

row-gap: var(--#{$empty-state}__content--RowGap);

@mattnolting Can you tell me more about what you expect here? __content isn't a flex container so RowGap wouldn't apply.

I would expect our content containers to have a base layout, so they're flexible enough to include additional info. Any specific sub-components would then have padding to match the design spec.

In this example, the container provides base spacing of spacer--md for rows, where pf-v5-c-empty-state__body provides bottom padding.

Also, I'd make pf-v5-c-empty-state__body display: grid

srambach · 2023-12-01T16:11:42Z

NOTE: XL variation has a 2xl icon, which is in Figma but has not yet been brought over to our token variables with adjusted icon sizing.

mcoker

Just one comment, otherwise 👍👍

mcoker · 2023-12-07T16:30:32Z

src/patternfly/components/EmptyState/empty-state.scss


 .#{$empty-state}__content {
  max-width: var(--#{$empty-state}__content--MaxWidth);
+  max-width: var(--#{$empty-state}__content--RowGap);


did you mean to add this? the width constraints for the size variations isn't working with this in.

I did not! I will fix it.

mcoker

L🎄TM!

thatblindgeye

Looks good, only nit is we could add the empty state icon to the "extra small" example, not a blocker here.

Just to confirm @srambach, the "extra large" example having the incorrect icon size is expected until updated icon sizing from Figma is brought over?

srambach · 2023-12-07T20:34:25Z

Looks good, only nit is we could add the empty state icon to the "extra small" example, not a blocker here.

Ah - yes I think the old standard was not to include an icon possibly. I'll add the icon and change the text to say it's optional (per @lboehling )

Just to confirm @srambach, the "extra large" example having the incorrect icon size is expected until updated icon sizing from Figma is brought over?

It should have :) but I rebased to get it and we need to work out an icon size thing... stay tuned.

srambach · 2023-12-09T19:47:25Z

@thatblindgeye I added the icon to the XS variant, and I added a new token that's now in Figma for a 96px, 3xl icon.

patternfly-build · 2023-12-11T16:05:32Z

🎉 This PR is included in version 6.0.0-alpha.34 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat(breaker): bump this version to 6.0 (patternfly#5800) * fix: use prerelease tag format with dry run * fix: turn off dryrun * feat(tokens): add initial global tokens (patternfly#5843) * feat(Button): adds tokens and applies to buttons (patternfly#5908) * feat(table): apply tokens from hackathon (patternfly#5965) * feat(menu-toggle): add in work from hackathon (patternfly#5931) * feat(nav): adds tokens to page and nav (patternfly#5942) * chore(tokens): update tokens from figma (patternfly#5970) * feat(page): page and masthead updates from hackathon (patternfly#5968) * fix(tokens): add dark theme blend mode token (patternfly#5992) * feat(notificationBadge): refactor with tokens (patternfly#5991) * chore(masthead ): applied tokens (patternfly#6004) * feat(alert): apply tokens (patternfly#6002) * feat(alert): apply tokens * feat(alert): remove unused background color * feat(page): apply tokens (patternfly#6021) * feat(page): apply tokens * feat(page): undo menu__list change * feat(page): tweak spacing * fix(table): fix clickable overlay (patternfly#6025) * fix(box-shadow): typo in box shadow token names (patternfly#6039) * fix(badge): adds tokens, dropdown toggle icon (patternfly#6037) * feat(hint): apply tokens (patternfly#6030) * feat(hint): apply tokens * feat(hint): fix typo * feat(hint): update spacing * feat(hint): update border radius * feat(hint): fix heading font * feat(text, title, list): apply tokens (patternfly#6031) * feat(page): remove padding on nav sidebar (patternfly#6053) * fix(tokens): adjust font-weight base for headings (patternfly#6070) * feat(login): apply tokens (patternfly#6028) * feat(modal): add tokens to modal and about modal (patternfly#6042) * fix(font): use variable font, add opt-in for legacy font (patternfly#6073) * feat(ExpandableSection): added tokens (patternfly#6063) * feat(Tooltip): applied tokens (patternfly#6064) * feat(Popover): applied tokens (patternfly#6065) * feat(BackToTop): refactor with tokens (patternfly#6085) * feat(SkipToContent): refactor with tokens (patternfly#6090) * feat(Accordion): applied tokens (patternfly#6058) * feat(banner): refactor with tokens (patternfly#6081) * feat(InlineEdit): applied tokens Took a stab at applying the tokens here. There are some items that will be fixed with icon buttons. * chore(tokens): updates tokens from figma (patternfly#6103) * chore(tokens): updating usage of new font tokens (patternfly#6111) * feat(breadcrumb): apply tokens (patternfly#6060) * feat(HelperText): apply tokens (patternfly#6118) * feat(HelperText): first tokens * feat(HelperText): tokens changes * feat(HelperText): fixes * feat(Pagination): applied tokens (patternfly#6089) * feat(Pagination): applied tokens * Removed themes directory * Removed button and menutoggle styles, added wrapper * Removed padding vars for pagination container * Updated tokens and vars for padding * fix(Pagination): updated property order * Updated var names to remove md text * feat(avatar): apply tokens (patternfly#6122) * chore(ExpandableSection): updated Penta docs and focus/hover styling (patternfly#6124) * feat(EmptyState): apply tokens (patternfly#6056) * fix(form): keep form groups/controls from growing too wide (patternfly#6109) * chore(deps): update dependency @patternfly/react-core to v5.1.2 (patternfly#6113) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @patternfly/react-code-editor to v5.1.2 (patternfly#6112) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @patternfly/react-table to v5.1.2 (patternfly#6114) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(card/menu-toggle/check): alignment bugs (patternfly#6110) * feat(SimpleList): pull in new v6 branch (patternfly#6128) * chore: turn on dryrun until release fixed [ci skip] --------- Co-authored-by: Sarah Rambacher <srambach@redhat.com> Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Matt Nolting <matthew.nolting@gmail.com> Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Co-authored-by: Austin Sullivan <ausulliv@redhat.com> Co-authored-by: Andrew Ronaldson <aronalds@redhat.com> Co-authored-by: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

patternfly-build · 2024-01-14T14:39:29Z

🎉 This PR is included in version 6.0.0-alpha.61 🎉

The release is available on:

Your semantic-release bot 📦🚀

srambach requested review from andrew-ronaldson, lboehling, mattnolting and mcoker November 10, 2023 21:15

srambach linked an issue Nov 10, 2023 that may be closed by this pull request

Consume tokens: Empty state #5733

Closed

mattnolting requested changes Nov 21, 2023

View reviewed changes

srambach requested a review from mattnolting November 21, 2023 19:03

srambach force-pushed the 5733-empty-state-tokens branch from 887cc35 to 8cec574 Compare November 21, 2023 19:11

mcoker reviewed Dec 7, 2023

View reviewed changes

mcoker approved these changes Dec 7, 2023

View reviewed changes

thatblindgeye approved these changes Dec 7, 2023

View reviewed changes

srambach added 5 commits December 7, 2023 15:17

feat(EmptyState): apply tokens

c76531d

feat(EmptyState): adjust spacers

f765988

feat(EmptyState): adjust to match updated design

26263c7

feat(EmptyState): remove extra line

3f00ae9

feat(EmptyState): add icon to xs variant

5026a1b

feat(EmptyState): add 3xl icon size token

cf0ec45

srambach force-pushed the 5733-empty-state-tokens branch from 5652a59 to cf0ec45 Compare December 9, 2023 19:41

srambach requested a review from thatblindgeye December 9, 2023 19:46

thatblindgeye approved these changes Dec 11, 2023

View reviewed changes

mcoker merged commit 7713839 into patternfly:v6 Dec 11, 2023

patternfly-build added the released on @alpha label Dec 11, 2023

mcoker pushed a commit to mcoker/patternfly that referenced this pull request Dec 11, 2023

feat(EmptyState): apply tokens (patternfly#6056)

647c0ca

nicolethoen pushed a commit that referenced this pull request Dec 12, 2023

feat(EmptyState): apply tokens (#6056)

a11332a

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Dec 12, 2023

feat(EmptyState): apply tokens (patternfly#6056)

8d17b88

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Dec 19, 2023

feat(EmptyState): apply tokens (patternfly#6056)

18cd881

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Dec 27, 2023

feat(EmptyState): apply tokens (patternfly#6056)

eebcc8e

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 2, 2024

feat(EmptyState): apply tokens (patternfly#6056)

e5ad0db

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 3, 2024

feat(EmptyState): apply tokens (patternfly#6056)

a6bde99

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 4, 2024

feat(EmptyState): apply tokens (patternfly#6056)

5ec8c44

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(EmptyState): apply tokens (patternfly#6056)

f029324

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(EmptyState): apply tokens (patternfly#6056)

0b187ff

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(EmptyState): apply tokens (patternfly#6056)

ce64c09

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(EmptyState): apply tokens (patternfly#6056)

b01c1c4

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(EmptyState): apply tokens (patternfly#6056)

ea4df07

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(EmptyState): apply tokens (patternfly#6056)

3730329

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 16, 2024

feat(EmptyState): apply tokens (patternfly#6056)

9417b2d

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 16, 2024

feat(EmptyState): apply tokens (patternfly#6056)

2f26c46

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 16, 2024

feat(EmptyState): apply tokens (patternfly#6056)

3ddc9f0

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 16, 2024

feat(EmptyState): apply tokens (patternfly#6056)

d189c8d

patternfly-build mentioned this pull request Apr 16, 2025

The automated release is failing 🚨 #7464

Closed

		--#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--xs);
		--#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--xs);

	--#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
	--#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--heading--md);

	.#{$empty-state}__content {
	.#{$empty-state}__content {
	row-gap: var(--#{$empty-state}__content--RowGap);

feat(EmptyState): apply tokens #6056

feat(EmptyState): apply tokens #6056

Uh oh!

Conversation

srambach commented Nov 10, 2023

Uh oh!

patternfly-build commented Nov 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattnolting left a comment

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!

srambach commented Dec 1, 2023

Uh oh!

mcoker left a comment

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!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

srambach commented Dec 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

srambach commented Dec 9, 2023

Uh oh!

patternfly-build commented Dec 11, 2023

Uh oh!

patternfly-build commented Jan 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

patternfly-build commented Nov 10, 2023 •

edited

Loading

srambach commented Dec 7, 2023 •

edited

Loading