Updates colors guideline content. #3233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merged

nicolethoen merged 5 commits into patternfly:main from edonehoo:iss3167

Mar 1, 2023

Collaborator

edonehoo commented Oct 13, 2022

Closes #3167

edonehoo and others added 2 commits

October 13, 2022 13:38


          Updates status colors to match alert component recommendations. Also …

f76fe80

…makes small edits across file.


          Merge branch 'main' into iss3167

d1770a2

Collaborator

patternfly-build commented Oct 13, 2022 •

edited

Loading

PF4 preview: https://patternfly-org-pr-3233-v4.surge.sh/v4

Collaborator Author

edonehoo commented Oct 13, 2022

I think that technically the default toast alert in the screenshot here is the wrong color? Or at least doesn't match what's in the alert component docs from what I can tell.

edonehoo self-assigned this

edonehoo requested review from mcarrano and srambach

October 13, 2022 17:56

Member

mcarrano commented Oct 13, 2022

@edonehoo Did this page preview for you? When I try to preview this page does not load (https://patternfly-org-pr-3233-v4.surge.sh/v4/guidelines/colors)

Collaborator Author

edonehoo commented Oct 14, 2022

@mcarrano It opened yesterday for me fine. Now, it opens for me and quickly turns to a blank screen, though. Let me review the edits and see if I messed with anything that could cause that!


          Adjust grid item.

b587029

Collaborator Author

edonehoo commented Oct 14, 2022

@mcarrano okay I had accidentally messed up the color swatch grid items, but I just fixed it. Maybe that was why - the link works for me now!

mcarrano reviewed

View reviewed changes

Member

mcarrano left a comment

The page looks good to me. But @mcoker @mceledonia can you check to make sure that the status colors on the page now match the implementation?

evwilkin requested review from mceledonia and mcoker

January 4, 2023 15:44

mceledonia previously approved these changes

View reviewed changes

mcoker reviewed

View reviewed changes

Contributor

mcoker left a comment

LGTM, left some comments. None are blockers except maybe the XL shadow being in the list?

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md

    
                  <ColorSwatch color="--pf-global--danger-color--100" caption="alert icon">

                    This color is used as the icon color for the danger alert component.

                  </ColorSwatch> 

                  <ColorSwatch color="--pf-global--palette--red-50" caption="inline alert background">

Contributor

mcoker Feb 15, 2023

This one says "inline alert background" but the "-50" colors for the other statuses do not - should they?

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md

    
                  </ColorSwatch>

                  <ColorSwatch label="Small" color="--pf-global--BoxShadow--sm">

                    This variable is used to indicate a small shadow for the card component.

                    This variable displays a small shadow for the card component.

Contributor

mcoker Feb 15, 2023

We use small shadows for all kinds of things. I think better descriptions than what components use what shadows might be something more conceptual, like the size of the box or amount of depth or whatever the reason is behind a shadow choice.

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md

    
                  </p>

                  <ColorSwatch label="Large" color="--pf-global--BoxShadow--lg">

                    This variable is used to indicate a large shadow for many components, such as alerts and modals.

                    This variable displays a large shadow for many components, such as alerts and modals.

Contributor

mcoker Feb 15, 2023

The modal uses an xl shadow, and the xl shadow is missing from this list.

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md

    
              <Divider className="ws-colors-divider" />

              ## Shadows

              <Grid hasGutter>

Contributor

mcoker Feb 15, 2023

fwiw I don't know if we want to document it, but we have top, right, bottom, and left versions of all of these shadow sizes to create a shadow on that side of the box.

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md

    
                  </ColorSwatch>

                  <ColorSwatch color="--pf-global--link--Color">

                    This color is most commonly used as a link text and icon color for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.

                    This color is most commonly used for link text and icons for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.

Contributor

mcoker Feb 15, 2023

Blue icons use the same primary color variable as the blue text.

If this is referring to the link button, I think "primary color variable" is confusing, since "primary-color--[number]" is a variable and is different. Assuming it's the link button, I'd just say something like icons that are part of links use the same (link?) color variable as the text.

srambach reviewed

View reviewed changes

Member

srambach left a comment

Looks good 🌈 but one question about specifying disabled text colors.

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md Outdated

    
              <Grid hasGutter>

                <GridItem xl={6} lg={12} className="ws-colors-gridtext">

                  Status and state colors are important when communicating data and action aspects through the UI with the user. Our status colors cover a variety of statuses including default, danger, success, information, and warning.

                  Status and state colors are important considerations when communicating data and actions to the user through the UI. Our status colors cover default, danger, success, information, and warning statuses.

Member

srambach Feb 15, 2023

Maybe "indicators" instead of "considerations?"

Collaborator Author

edonehoo Feb 16, 2023

Made that change and also added "disabled" here. It seems to me like "disabled" refers to a "state", rather than a "status", but we don't have specific guidance on that distinction, so please let me know if it's typically used in a different way!

Member

srambach Feb 23, 2023

I think that's a good distinction between "state" and "status."

packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md

    
                    This color is most commonly used as an alternate disabled background color for many components, such as dropdowns and options menus.

                  <ColorSwatch color="--pf-global--palette--gold-50" caption="alert background">

                    This color is used as the background color for the warning inline alert component.

                  </ColorSwatch>

Member

srambach Feb 15, 2023

We don't have the disabled colors in this section any more. Should we? If not, should it be taken out of the accompanying graphic?

Collaborator Author

edonehoo Feb 16, 2023

Nope - that was a total mistake! I added it back in my last update.


          Adds disabled color swatches and makes minor content changes.

a94b2e4

edonehoo dismissed mceledonia’s stale review via

a94b2e4

February 16, 2023 15:48


          Quick update to status and state color description.

ea06ac0

nicolethoen requested review from mcarrano, mceledonia, mcoker and srambach

February 20, 2023 20:09

srambach approved these changes

View reviewed changes

Member

srambach left a comment

🌈 👍

nicolethoen merged commit d52628e into patternfly:main

nicolethoen added a commit that referenced this pull request

* changes to tooltip guidelines (#3400)

* changes to tooltip guidelines

* added indentation for images to be under each bullet

---------

Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.11.1
 - @patternfly/documentation-framework@1.6.1
 - patternfly-org-4@4.17.1

* feat(docs): customize tabs with optional tabText frontmatter (#3394)

* feat(docs): customize tabs with optional tabText frontmatter

* improved variable names

* updated examples to document tabName

* PR feedback - let to const

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0
 - @patternfly/documentation-framework@1.7.0
 - patternfly-org-4@4.18.0

* feat(docs): enabled manual ordering of sidenav (#3403)

* feat(docs): enabled manual ordering of sidenav

* cleanup & working

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.13.0
 - @patternfly/documentation-framework@1.8.0
 - patternfly-org-4@4.19.0

* fix(whitespace): test github actions

* add action guidance (#3347)

* add action guidance

* more additions

* action updates

* update last example image

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.13.1
 - @patternfly/documentation-framework@1.8.1
 - patternfly-org-4@4.19.1

* feat(trainings): remove broken trainings and replace some with blog style training (#3353)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.14.0
 - @patternfly/documentation-framework@1.9.0
 - patternfly-org-4@4.20.0

* docs(Badge): Small typo in a11y section (#3405)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.14.1
 - @patternfly/documentation-framework@1.9.1
 - patternfly-org-4@4.20.1

* Updates colors guideline content. (#3233)

* Updates status colors to match alert component recommendations. Also makes small edits across file.

* Adjust grid item.

* Adds disabled color swatches and makes minor content changes.

* Quick update to status and state color description.

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.14.2
 - @patternfly/documentation-framework@1.9.2
 - patternfly-org-4@4.20.2

* feat(docs): add react console documentation (#3366)

* feat(docs): add react console documentation

* fix(docs): add loader for jsx to extensions

* chore(docs): bump react console version

* chore(deps): bump console version

* chore(deps): bump console version

* fix(deps): re-added topology dependency

* chore(console): bump console version and generate screenshot

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.0
 - @patternfly/documentation-framework@1.10.0
 - patternfly-org-4@4.21.0

* chore: remove hard coded GA ID (#3431)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.1
 - @patternfly/documentation-framework@1.10.1
 - patternfly-org-4@4.21.1

* fix(menu): update and clarify description (#3438)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.2
 - @patternfly/documentation-framework@1.10.2
 - patternfly-org-4@4.21.2

* updates to skeleton guidelines (#3422)

* updates to skeleton guidelines

* sentence and grammar edits

* Trying again to stage and push

* Trying again to stage and push

* trying again to stage

* trying again to stage

* Update skeleton.md

* updated text but still need images

* Added centered files

* added images

* fixed everything from comments

* Update spinner.md

---------

Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.3
 - @patternfly/documentation-framework@1.10.3
 - patternfly-org-4@4.21.3

* fix(release): update docs for 2023.02 release (#3453)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.4
 - @patternfly/documentation-framework@1.10.4
 - patternfly-org-4@4.21.4

* Added guidance around disabling menu actions (#3424)

* Added guidance around disabling menu actions

* Updated disabled option guidelines

* Added example image for disabled actions

* Updated formatting of disabled menu guidance section

* Formatting of disabled menu section

* Adjusted image sizes

* Update menu.md

---------

Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>

* feat(v5): pull in alphas, set up doc-framework alpha (#3401)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.0
 - @patternfly/documentation-framework@2.0.0-alpha.1

* fix(whitespace): test github actions

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.1
 - @patternfly/documentation-framework@2.0.0-alpha.2

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.2
 - @patternfly/documentation-framework@2.0.0-alpha.3

* fix(README): small wording change to test build

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.3
 - @patternfly/documentation-framework@2.0.0-alpha.4

* fix(404 Page): Removed CardHeaderMain (#3429)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.4
 - @patternfly/documentation-framework@2.0.0-alpha.5

* chore(Card): update a11y card docs (#3384)

* update a11y card docs

* PR feedback

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

* format

---------

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.5
 - @patternfly/documentation-framework@2.0.0-alpha.6

* chore(multiple): updated verbiage for arialabel props or attributes (#3396)

* chore(multiple): updated verbiage for arialabel props or attributes

* Updated anchors to Link component

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.6
 - @patternfly/documentation-framework@2.0.0-alpha.7

* feat(docs-framework): add legacy ssl cli option (#3433)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.7
 - @patternfly/documentation-framework@2.0.0-alpha.8

* fix(versions): add alpha.0 of drag-drop

* fix(versions): fix typo

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.8
 - @patternfly/documentation-framework@2.0.0-alpha.9

* Update to website title PatternFly 5 (#3443)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.9
 - @patternfly/documentation-framework@2.0.0-alpha.10

* Update website IA for v5 (#3416)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.10
 - @patternfly/documentation-framework@2.0.0-alpha.11

* updated community with yew (#3461)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.11
 - @patternfly/documentation-framework@2.0.0-alpha.12

* chore(webpack5): Initial working commit with webpack5 (#3454)

* chore(webpack5): Initial working commit with dev server and build working so far for webpack 5 update

* chore(monaco): Update monaco plugin and dependent version

* fix ssr

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.12
 - @patternfly/documentation-framework@2.0.0-alpha.13

* fix(Tables): temporarily comment out tables so Table can be deprecated (#3468)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.13
 - @patternfly/documentation-framework@2.0.0-alpha.14

* Iss3159 (#3442)

* fix(Tabs): update tabs guidelines

* Update tabs.md

* Update tabs.md

---------

Co-authored-by: nicolethoen <nthoen@redhat.com>
Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0-alpha.14
 - @patternfly/documentation-framework@2.0.0-alpha.15

* rebased from main

---------

Co-authored-by: Tina Yip <98424339+tiyiprh@users.noreply.github.com>
Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>
Co-authored-by: patternfly-build <patternfly-build@redhat.com>
Co-authored-by: Nicole Thoen <nthoen@redhat.com>
Co-authored-by: E Gustavsson <eric@spytec.se>
Co-authored-by: edonehoo <105813956+edonehoo@users.noreply.github.com>
Co-authored-by: Austin Sullivan <ausulliv@redhat.com>
Co-authored-by: kelseamann <91503095+kelseamann@users.noreply.github.com>
Co-authored-by: Katie Edwards <94569315+kaedward@users.noreply.github.com>
Co-authored-by: Titani Labaj <39532947+tlabaj@users.noreply.github.com>
Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com>
Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Co-authored-by: mcarrano <mcarrano@redhat.com>
Co-authored-by: Dana Gutride <dgutride@gmail.com>
Co-authored-by: kuklas <78739379+kuklas@users.noreply.github.com>

nicolethoen added a commit that referenced this pull request


          Feat/2992 view all components (#3181)

* feat(docs): added component description to header above tabs

* feat(docs): added component description to header above tabs

* set up components-info.json, pass to webpack.base.config

* pass componentInfo to example.js

* working except for Links in mdx to avoid anchor tags

* update naming - image to illustration

* revert to dangerouslySetInnerHTML

* convert string to JSX to maintain router links

* remove word doc

* reapply tile fix

* clean up logic to avoid undefined errors

* fix form select & multiple file upload summaries

* sort View all components to top of components sidenav

* added component gallery

* pull in component summary, illustration link

* illustrations working, moved to v4

* insert toolbar & item count

* feat(docs): add component gallery

* increase toolbar width to offset pulling it left

* add optional chaining and default values for drawerPanelData

* add reset button in place of searchinput clear button

* design feedback & css styling

* responsive

* remove unused code, fix sticky top on mobile

* PR feedback 1

* gallery container sizing and spacing, default image

* coker feedback, refactor toolbar & fix search interaction

* fix hide sidebar based on search results

* persistent sidebar

* add list view

* remove sidebar, add beta labels, click to navigate

* data list max-width

* fix toolbar z-index, refactor duplicate code

* fix duplicate summary due to incorrect rebase

* Fix surge links?

* moving code into doc-framework

* add alias for v4 component images in doc-framework webpack base config

* remove link styling, nested links, beta labels on next components

* adding hasOverview field to trigger gallery view

* changes to tooltip guidelines (#3400)

* changes to tooltip guidelines

* added indentation for images to be under each bullet

---------

Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.11.1
 - @patternfly/documentation-framework@1.6.1
 - patternfly-org-4@4.17.1

* feat(docs): customize tabs with optional tabText frontmatter (#3394)

* feat(docs): customize tabs with optional tabText frontmatter

* improved variable names

* updated examples to document tabName

* PR feedback - let to const

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.12.0
 - @patternfly/documentation-framework@1.7.0
 - patternfly-org-4@4.18.0

* feat(docs): enabled manual ordering of sidenav (#3403)

* feat(docs): enabled manual ordering of sidenav

* cleanup & working

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.13.0
 - @patternfly/documentation-framework@1.8.0
 - patternfly-org-4@4.19.0

* fix(whitespace): test github actions

* add action guidance (#3347)

* add action guidance

* more additions

* action updates

* update last example image

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.13.1
 - @patternfly/documentation-framework@1.8.1
 - patternfly-org-4@4.19.1

* feat(trainings): remove broken trainings and replace some with blog style training (#3353)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.14.0
 - @patternfly/documentation-framework@1.9.0
 - patternfly-org-4@4.20.0

* docs(Badge): Small typo in a11y section (#3405)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.14.1
 - @patternfly/documentation-framework@1.9.1
 - patternfly-org-4@4.20.1

* Updates colors guideline content. (#3233)

* Updates status colors to match alert component recommendations. Also makes small edits across file.

* Adjust grid item.

* Adds disabled color swatches and makes minor content changes.

* Quick update to status and state color description.

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.14.2
 - @patternfly/documentation-framework@1.9.2
 - patternfly-org-4@4.20.2

* feat(docs): add react console documentation (#3366)

* feat(docs): add react console documentation

* fix(docs): add loader for jsx to extensions

* chore(docs): bump react console version

* chore(deps): bump console version

* chore(deps): bump console version

* fix(deps): re-added topology dependency

* chore(console): bump console version and generate screenshot

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.0
 - @patternfly/documentation-framework@1.10.0
 - patternfly-org-4@4.21.0

* chore: remove hard coded GA ID (#3431)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.1
 - @patternfly/documentation-framework@1.10.1
 - patternfly-org-4@4.21.1

* fix(menu): update and clarify description (#3438)

* chore(release): releasing packages [ci skip]

 - @patternfly/ast-helpers@0.15.2
 - @patternfly/documentation-framework@1.10.2
 - patternfly-org-4@4.21.2

* fix search params, remove hasOverview code

* Move page .md from docs-framework to v4

* fixed placement of beta labels

* split gallery page into composable components

* added customizable text, documented params

* fixed toolbar width

* moved .md file to pages directory

* move gallery page, remove hideSourceTabs

* updated to enable toggling of subsection parsing

* update & comment CSS

* updates per comments

---------

Co-authored-by: Tina Yip <98424339+tiyiprh@users.noreply.github.com>
Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>
Co-authored-by: patternfly-build <patternfly-build@redhat.com>
Co-authored-by: Nicole Thoen <nthoen@redhat.com>
Co-authored-by: E Gustavsson <eric@spytec.se>
Co-authored-by: edonehoo <105813956+edonehoo@users.noreply.github.com>
Co-authored-by: Austin Sullivan <ausulliv@redhat.com>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet