Charts: Simplify pattern visibility

[dlabrecq]

Refactored the pattern feature to eliminate the pattern IDs required to hide / show individual patterns. This helps to simplify a few chart examples.

Previously, individual patterns were hidden using null values. However, that required some knowledge of our generated pattern IDs. For example:

patternId="pattern_b"
patternScale={['url("#pattern_b:0")', 'url("#pattern_b:1")', null]} // hide the last pattern

I want to simplify this using boolean flags, like so:

hasPatterns={[ true, true, false ]} // hide the last pattern

And to show patterns for all chart segments, this reduces to:

hasPatterns

That said, if devs choose to create custom patterns, they can still provide their own IDs.

patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} // hide the last pattern

Design issue: patternfly/patternfly-org#4369
Closes #7541

[patternfly-build]

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

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

[nicolethoen]

The prop description for patternScale reads, This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Do you have an example of using an array of CSS colors?

And is patternScale still the most logical name for this prop? I wonder if something like patternDefs or patternOptions or something like that feels a little closer to its intended usage, possibly?

[nicolethoen]

one other idea

[nicolethoen]

It may be possible to include this interface in the prop description tables at the bottom of the Patterns page. We do that a lot with the more complex types for the Composable Table components like this one.

As long as the type is exported so it can be imported in the examples, the PatternScaleInterface can be added to the list of propComponents in patterns.md. And then you can give yourself more space to write prop descriptions in this interface rather than using the same long prop description on each chart example.

by default, adding the PatternScaleInterface should create a link in each Chart prop table to link to it on the docs page, as you can see done in the Tables docs

[dlabrecq]

Thanks, I've fixed the patternScale description.

I'd like to stick with the patternScale name because it mimics behavior of the existing colorScale prop. Both define the order in which items are applied, while colors / patterns repeat when there are more children than items.

[dlabrecq]

@nicolethoen I removed PatternScaleInterface and created hasPatterns. That should help make things more clear.

hasPatterns={[ true, true, false ]} // hide the last pattern

Devs only need to use patternScale when creating custom patterns.

[tlabaj]

LGTM

[patternfly-build]

Your changes have been released in:

• [email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• [email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• [email protected]

Thanks for your contribution! 🎉