From 503fa89461997f742f6376f8fadc568067aff935 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Thu, 27 Feb 2025 16:34:05 -0500 Subject: [PATCH 1/2] docs(charts): Adds developer notes to about-charts page --- .../design-guidelines/charts/about/about.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md index 62b3527ff2..7ba50d5f9b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md @@ -8,7 +8,7 @@ _Charts are only available in React_ A **chart** visualizes data in an application. The type of chart you use will depend on your use case and the type of data you need to display. ## Elements -Chart with axis labels  +Chart with axis labels 1. **Title:** Titles should be left-aligned and appear above your chart. 2. **Axis labels and scale values:** We recommend using tick marks to clearly mark scale values on the y-axis. The text for axis labels and scale values should be 12px font in standard text color. All scale values should be equally distributed across the axis and the axis label should fall outside the scale values, centered with the axis line. @@ -16,7 +16,7 @@ A **chart** visualizes data in an application. The type of chart you use will de 4. **Chart tooltip:** A tooltip will appear on hover over certain elements of a chart, like bars in a bar chart or segments in a donut chart. [Chart tooltips](/charts/tooltips) should display the specific values related to the element the user is hovering over. ## Chart types -Image displaying what chart types to use when  +Image displaying what chart types to use when - [Area chart](/charts/area-chart/design-guidelines): Use to show (potentially multiple) trends over a continuous scale (usually time). - [Bar chart](/charts/bar-chart/design-guidelines): Use to show and compare categories and their respective data point/value. Bar charts can be plotted vertically or horizontally. The axis that labels the bar is the category, the axis that marks the end point of the bar displays the data points/values. @@ -65,3 +65,15 @@ On click 1. **Legend:** When a user clicks on a legend label, it becomes disabled and the color swatch is replaced with an eye-slashed icon. 2. **Chart:** Data corresponding to the clicked legend label is hidden from view. + +## Develop with charts + +Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. To use chart styles, you must also have the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly) installed. + +To utilize default chart styles, you don't need to import anything else. But, to support dark-themed charts, you must also import the stylesheet that contains dark theme styles. To do so, add this line before importing your main application component: + +`import '@patternfly/patternfly/patternfly-charts.css';` + +Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. + +You can filter [the PatternFly design tokens table](/tokens/all-patternfly-tokens) to display the list of available chart tokens. \ No newline at end of file From 3897d29daca17dc2ed04edd823fe60b4347c95a5 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Wed, 12 Mar 2025 13:19:28 -0400 Subject: [PATCH 2/2] Makes a few edits. --- .../content/design-guidelines/charts/about/about.md | 13 ++++++------- .../developer-resources/dark-theme-handbook.md | 11 +++-------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md index 7ba50d5f9b..4079fd44da 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md @@ -68,12 +68,11 @@ On click ## Develop with charts -Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. To use chart styles, you must also have the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly) installed. +Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. Charts work with PatternFly's light theme by default—you don't need to import anything else. -To utilize default chart styles, you don't need to import anything else. But, to support dark-themed charts, you must also import the stylesheet that contains dark theme styles. To do so, add this line before importing your main application component: +To support dark-themed charts, you must: +1. Import the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly), so that you can use our global tokens. +1. Import the stylesheet that contains dark theme styles by adding this line before importing your main application component: `import '@patternfly/patternfly/patternfly-charts.css';` + - Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. -`import '@patternfly/patternfly/patternfly-charts.css';` - -Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. - -You can filter [the PatternFly design tokens table](/tokens/all-patternfly-tokens) to display the list of available chart tokens. \ No newline at end of file +To display the list of all available chart tokens, filter for "charts" in [the PatternFly design tokens table](/tokens/all-patternfly-tokens). \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/dark-theme-handbook.md b/packages/documentation-site/patternfly-docs/content/developer-resources/dark-theme-handbook.md index d7884625c9..0badffb58e 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/dark-theme-handbook.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/dark-theme-handbook.md @@ -12,15 +12,11 @@ Dark theme can also be applied based on the browser’s `prefers-color-scheme` m [Our token resources](https://github.com/patternfly/patternfly/tree/v6/src/patternfly/base/tokens) include styles for both light and dark themes. When dark theme is enabled, your product will automatically pull dark theme tokens in order to adapt visual styles appropriately. -The only features which will require additional work in order to support dark theme are charts and images. Instructions for enabling support in these areas are included in the following sections. +The only features which will require additional work in order to support dark theme are charts and images. ### Charts -The [PatternFly React charts package](https://www.npmjs.com/package/@patternfly/react-charts) uses default style values that align with our light theme. In order to support dark-themed charts, you must import the stylesheet that contains dark theme styles by adding the following import statement before your main application component is imported: - -`import '@patternfly/patternfly/patternfly-charts.css';` - -**Note:** You must also have the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly) installed. +To use charts with dark themes, refer to our guidance for [developing with charts](/charts/about-charts#develop-with-charts). ### Images @@ -62,5 +58,4 @@ To make it easier to support light and dark theming in your application, we reco * **Always use the most relevant semantic token for your use case.** If there isn't a semantic token for your scenario, then you can use a base token. Never use a palette token directly in your code. * For example, `--pf-t--[version]--global--text--color--link--default`, `--pf-t--[version]--color--blue--20`, and `#b9dafc` are all the same in PatternFly's default light theme. When you create something custom, where the color should match the application’s link text color, any of these values will work. However, in a different theme, these token values may not always be the same color. -* **Use SVG files or icon fonts for icons, and use tokens for icon colors.** To easily manipulate icon colors between light and dark theme, SVG files and icon fonts can be changed via CSS by using the `fill` and `color` properties. When using semantic tokens, like `--pf-t--[version]--global--color--status--info--default`, colors will automatically adjust between light and dark theme. If images must be used, we advise you to use colors that work well in both light and dark themes and/or hide and show the appropriate images based on the presence of the dark theme body class. - +* **Use SVG files or icon fonts for icons, and use tokens for icon colors.** To easily manipulate icon colors between light and dark theme, SVG files and icon fonts can be changed via CSS by using the `fill` and `color` properties. When using semantic tokens, like `--pf-t--[version]--global--color--status--info--default`, colors will automatically adjust between light and dark theme. If images must be used, we advise you to use colors that work well in both light and dark themes and/or hide and show the appropriate images based on the presence of the dark theme body class. \ No newline at end of file