Add note and example about required css files for spacing classes

[ianw]

It wasn't clear to me that the spacing.css is required to be explicitly imported to use these classes. Add a note on that.

[patternfly-build]

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

CSS Size Report

Name	Current	Previous	Diff %
There are no changes in CSS file sizes

A11y report: https://patternfly-pr-4297-coverage.surge.sh

[mcoker]

Hey @ianw thanks for the PR and thanks for exposing this hole in our docs! I talked with the PF team and we would like to explore how to:

• Add this note globally to all of our utilities, in an automated way if possible, so that the wording and everything is consistent. Maybe via a HBS partial that accepts arguments for the parts of the blurb that are unique per utility? Or maybe just a generic blurb w/ example that can be used in all utilities?
• Include docs on how to import in both HTML (<link rel="stylesheet" href="[path-to-pf]/utilities/Spacing/spacing.css">, <link rel="stylesheet" href="[path-to-pf]/patternfly-addons.css">) and react (import '@patternfly/react-styles/css/utilities/Spacing/spacing.css', import '@patternfly/react-styles/css/patternfly-addons.css')
  • patternfly-addons.css includes all of the utilities - https://github.com/patternfly/patternfly/blob/main/src/patternfly/patternfly-addons.scss
• Include the docs at the top of each utility. Maybe in a "default" alert, placed so that it works with and without the "beta feature" alert you'll see on beta components/layouts/utilities (here's an example - https://www.patternfly.org/v4/components/tree-view)

This will likely be an iterative process with a WIP PR for the team to review. Would you be interested in continuing this work to contribute that change?

[ianw]

* Add this note globally to all of our utilities, in an automated way if possible, so that the wording and everything is consistent. Maybe via a HBS partial that accepts arguments for the parts of the blurb that are unique per utility? Or maybe just a generic blurb w/ example that can be used in all utilities?

I think each of the "Utilities" listed requires their own css file, which isn't by default included? So it can't be generic i guess

* Include docs on how to import in both HTML (`<link rel="stylesheet" href="[path-to-pf]/utilities/Spacing/spacing.css">`, `<link rel="stylesheet" href="[path-to-pf]/patternfly-addons.css">`) and react (`import '@patternfly/react-styles/css/utilities/Spacing/spacing.css'`, `import '@patternfly/react-styles/css/patternfly-addons.css'`)

Is there an example of this to follow?

  * `patternfly-addons.css` includes all of the utilities - https://github.com/patternfly/patternfly/blob/main/src/patternfly/patternfly-addons.scss

There is a non-zero change we are doing this wrong ... we have

import '@patternfly/react-core/dist/styles/base.css'

is there a reason this can't also bring in these add-on CSS files? it seems sort of logical that everything would "just work" with that -- is it a performance issue?

* Include the docs at the top of each utility. Maybe in a "default" alert, placed so that it works with and without the "beta feature" alert you'll see on beta components/layouts/utilities (here's an example - https://www.patternfly.org/v4/components/tree-view)

Seems like this is defined in https://github.com/patternfly/patternfly-org? it probably seems a bit of overkill, i think just having in the documentation for each utility that it requires a specific css file would have helped

[stale]

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.

[dgdavid]

Although this was closed because of the lack of activity, documentation still missing a clue about this :(