From 97acf595868b9be81a4ba7b7a08671e41cee9d77 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 13 Sep 2024 13:49:48 -0400 Subject: [PATCH 1/5] fix(generate tokens): prefix tokens with a t_ --- packages/react-tokens/scripts/generateTokens.mjs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-tokens/scripts/generateTokens.mjs b/packages/react-tokens/scripts/generateTokens.mjs index 2e0dad8751a..b654023813e 100644 --- a/packages/react-tokens/scripts/generateTokens.mjs +++ b/packages/react-tokens/scripts/generateTokens.mjs @@ -10,7 +10,7 @@ const version = 'v6'; // Helpers const formatCustomPropertyName = (key) => - key.replace(`--pf-${version}-`, '').replace('--pf-t--', '').replace(/-+/g, '_'); + key.replace(`--pf-${version}-`, '').replace('--pf-t--', 't_').replace(/-+/g, '_'); const getRegexMatches = (string, regex) => { const res = {}; @@ -35,11 +35,13 @@ const getDeclarations = (cssAst) => const formatFilePathToName = (filePath) => { // const filePathArr = filePath.split('/'); let prefix = ''; + if (filePath.includes('components/')) { prefix = 'c_'; } else if (filePath.includes('layouts/')) { prefix = 'l_'; } + return `${prefix}${basename(filePath, '.css').replace(/-+/g, '_')}`; }; From 711cbf978f25a26df1fa4e8630b62cd3e8208f51 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 13 Sep 2024 15:10:15 -0400 Subject: [PATCH 2/5] fix lint issues --- packages/react-tokens/scripts/generateTokens.mjs | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-tokens/scripts/generateTokens.mjs b/packages/react-tokens/scripts/generateTokens.mjs index b654023813e..0e05c4ca10a 100644 --- a/packages/react-tokens/scripts/generateTokens.mjs +++ b/packages/react-tokens/scripts/generateTokens.mjs @@ -35,13 +35,11 @@ const getDeclarations = (cssAst) => const formatFilePathToName = (filePath) => { // const filePathArr = filePath.split('/'); let prefix = ''; - if (filePath.includes('components/')) { prefix = 'c_'; } else if (filePath.includes('layouts/')) { prefix = 'l_'; } - return `${prefix}${basename(filePath, '.css').replace(/-+/g, '_')}`; }; From 64778d8e6716d100bc49b394a78a5fcfbbdb68db Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 13 Sep 2024 17:34:31 -0400 Subject: [PATCH 3/5] update tokens in codebase --- .../components/ChartBar/examples/ChartBar.md | 262 ++++++++++++------ .../styles/box-plot-tooltip-styles.ts | 4 +- .../styles/legend-tooltip-styles.ts | 4 +- .../react-core/src/components/Page/Page.tsx | 2 +- .../components/Skeleton/examples/Skeleton.md | 14 +- .../Skeleton/examples/SkeletonText.tsx | 28 +- .../components/Toolbar/ToolbarToggleGroup.tsx | 2 +- .../src/components/Toolbar/ToolbarUtils.tsx | 8 +- packages/react-core/src/demos/CardDemos.md | 2 +- .../src/demos/examples/Card/CardStatus.tsx | 6 +- packages/react-core/src/helpers/constants.ts | 22 +- .../demos/TableDemo/TableComposableDemo.tsx | 4 +- .../demos/TableDemo/TableRowWrapperDemo.tsx | 4 +- .../src/components/Table/examples/Table.md | 3 +- .../components/Table/examples/TableMisc.tsx | 4 +- .../Table/examples/LegacyTableMisc.tsx | 4 +- .../components/Table/examples/Table.md | 2 +- packages/react-tokens/README.md | 10 +- 18 files changed, 232 insertions(+), 153 deletions(-) diff --git a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md index d4ded665448..5b09528bd97 100644 --- a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md +++ b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md @@ -1,30 +1,26 @@ --- id: Bar chart section: charts -propComponents: [ - 'Chart', - 'ChartAxis', - 'ChartBar', - 'ChartGroup', - 'ChartLabel', - 'ChartVoronoiContainer' -] +propComponents: ['Chart', 'ChartAxis', 'ChartBar', 'ChartGroup', 'ChartLabel', 'ChartVoronoiContainer'] hideDarkMode: true --- import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; -import global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/global_color_status_danger_100'; -import global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/global_color_status_info_100'; -import global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/global_color_status_warning_100'; +import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100'; +import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100'; +import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100'; ## Introduction + Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples + ### Basic with right aligned legend + ```js import React from 'react'; import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts'; @@ -33,8 +29,10 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} - domain={{y: [0,9]}} + containerComponent={ + `${datum.name}: ${datum.y}`} constrainToVisibleArea /> + } + domain={{ y: [0, 9] }} domainPadding={{ x: [30, 25] }} legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} legendOrientation="vertical" @@ -52,13 +50,41 @@ import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@ - - - - + + + + - +; ``` ### Purple with bottom aligned legend @@ -170,16 +196,45 @@ import { VictoryZoomContainer } from 'victory-zoom-container'; - - - - + + + + - +; ``` ### Single with right aligned legend + ```js import React from 'react'; import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts'; @@ -188,8 +243,10 @@ import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts `${datum.name}: ${datum.y}`} constrainToVisibleArea />} - domain={{y: [0,9]}} + containerComponent={ + `${datum.name}: ${datum.y}`} constrainToVisibleArea /> + } + domain={{ y: [0, 9] }} domainPadding={{ x: [30, 25] }} legendData={[{ name: 'Cats' }]} legendOrientation="vertical" @@ -204,9 +261,16 @@ import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts }} width={600} > - + - +; ``` ### Alerts timeline @@ -215,85 +279,93 @@ A gnatt-like chart using `y` and `y0` data properties for alert start/end dates ```js import React from 'react'; -import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; -import global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/global_color_status_danger_100'; -import global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/global_color_status_info_100'; -import global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/global_color_status_warning_100'; - +import { + Chart, + ChartAxis, + ChartBar, + ChartGroup, + ChartLabel, + ChartTooltip, + ChartVoronoiContainer +} from '@patternfly/react-charts'; +import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100'; +import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100'; +import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100'; class Timeline extends React.Component { render() { // Start = y0, end = y const alerts = [ [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-09T02:30:00"), severity: 'danger' }, - { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'danger' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'danger' } + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-09T02:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'danger' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' } ], [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'danger' }, - { y0: new Date("2024-08-07T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'danger' }, - { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'danger' } + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-07T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' } ], [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'danger' }, - { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'danger' }, - { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'info' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'info' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } ], [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'info' }, - { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'info' }, - { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'info' } + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'info' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'info' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'info' } ], [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-09T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-09T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } ], [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } ], [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-07T04:30:00"), y: new Date("2024-08-08T05:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' }, - { y0: new Date("2024-08-11T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-07T04:30:00'), y: new Date('2024-08-08T05:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-11T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } ], [ - { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, - { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, - { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } - ], + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } + ] ]; const formatDate = (date, isTime) => { - const dateString = date?.toLocaleDateString("en-US", { month: 'short', day: 'numeric' }); - const timeString = date?.toLocaleTimeString("en-US", { hour12: false }); + const dateString = date?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); + const timeString = date?.toLocaleTimeString('en-US', { hour12: false }); return isTime ? `${dateString} ${timeString}` : dateString; }; const getChart = (alert, index) => { const data = []; - alert?.map(datum => { + alert?.map((datum) => { data.push({ ...datum, x: alerts.length - index, - fill: datum.severity === "danger" - ? global_color_status_danger_100.var - : datum.severity === "warn" - ? global_color_status_warning_100.var - : global_color_status_info_100.var, + fill: + datum.severity === 'danger' + ? t_global_color_status_danger_100.var + : datum.severity === 'warn' + ? t_global_color_status_warning_100.var + : t_global_color_status_info_100.var }); }); @@ -307,7 +379,7 @@ class Timeline extends React.Component { style={{ data: { fill: ({ datum }) => datum.fill, - stroke: ({ datum }) => datum.fill, + stroke: ({ datum }) => datum.fill } }} /> @@ -315,7 +387,7 @@ class Timeline extends React.Component { }; return ( -
+
} /> } - labels={({ datum }) => `Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}`} + labels={({ datum }) => + `Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}` + } /> } domainPadding={{ x: [20, 20], y: [20, 20] }} legendData={[ - { name: "Danger", symbol: { fill: global_color_status_danger_100.var } }, - { name: "Info", symbol: { fill: global_color_status_info_100.var } }, - { name: "Warning", symbol: { fill: global_color_status_warning_100.var } } + { name: 'Danger', symbol: { fill: t_global_color_status_danger_100.var } }, + { name: 'Info', symbol: { fill: t_global_color_status_info_100.var } }, + { name: 'Warning', symbol: { fill: t_global_color_status_warning_100.var } } ]} legendPosition="bottom-left" height={400} @@ -347,30 +421,31 @@ class Timeline extends React.Component { new Date(t).toLocaleDateString("en-US", { month: 'short', day: 'numeric' })} - tickValues={[new Date("2024-08-06T00:00:00"), new Date("2024-08-08T00:00:00"), new Date("2024-08-10T00:00:00"), new Date("2024-08-12T00:00:00")]} + tickFormat={(t) => new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} + tickValues={[ + new Date('2024-08-06T00:00:00'), + new Date('2024-08-08T00:00:00'), + new Date('2024-08-10T00:00:00'), + new Date('2024-08-12T00:00:00') + ]} /> - } + axisLabelComponent={} label="Incidents" padding={{ top: 20, bottom: 60 }} style={{ axis: { - stroke: "transparent", + stroke: 'transparent' }, ticks: { - stroke: "transparent" + stroke: 'transparent' }, tickLabels: { - fill: "transparent" + fill: 'transparent' } }} /> - - {alerts.map((alert, index) => getChart(alert, index))} - + {alerts.map((alert, index) => getChart(alert, index))}
); @@ -379,7 +454,9 @@ class Timeline extends React.Component { ``` ## Documentation + ### Tips + - See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) - For single data points or zero values, you may want to set the `domain` prop - `ChartLegend` may be used as a standalone component, instead of using `legendData` @@ -387,7 +464,8 @@ class Timeline extends React.Component { - Use `ChartGroup` to apply theme color scales and other properties to multiple components ### Note -Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the + +Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here: - For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart) diff --git a/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts index fe488256179..180b58c1096 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts @@ -1,5 +1,5 @@ /* eslint-disable camelcase */ -import global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/global_font_weight_heading_bold'; +import t_global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/t_global_font_weight_heading_bold'; import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; /** @@ -12,6 +12,6 @@ export const BoxPlotTooltipStyles = { }, label: { fill: chart_voronoi_labels_Fill.var, - fontWeight: global_font_weight_heading_bold.value + fontWeight: t_global_font_weight_heading_bold.value } as any }; diff --git a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts index 02cd605262b..2b9037a8b2b 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts @@ -1,5 +1,5 @@ /* eslint-disable camelcase */ -import global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/global_font_weight_heading_bold'; +import t_global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/t_global_font_weight_heading_bold'; import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; /** @@ -12,6 +12,6 @@ export const LegendTooltipStyles = { }, label: { fill: chart_voronoi_labels_Fill.var, - fontWeight: global_font_weight_heading_bold.value + fontWeight: t_global_font_weight_heading_bold.value } as any }; diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index 8d040bc360f..8ed2e596808 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Page/page'; import { css } from '@patternfly/react-styles'; -import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl'; +import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl'; import { debounce, canUseDOM } from '../../helpers/util'; import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer'; import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb'; diff --git a/packages/react-core/src/components/Skeleton/examples/Skeleton.md b/packages/react-core/src/components/Skeleton/examples/Skeleton.md index d9b2adbad08..678244bb762 100644 --- a/packages/react-core/src/components/Skeleton/examples/Skeleton.md +++ b/packages/react-core/src/components/Skeleton/examples/Skeleton.md @@ -5,13 +5,13 @@ cssPrefix: pf-v5-c-skeleton propComponents: ['Skeleton'] --- -import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl'; -import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl'; -import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl'; -import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl'; -import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg'; -import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md'; -import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm'; +import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl'; +import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl'; +import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl'; +import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl'; +import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg'; +import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md'; +import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm'; ## Examples diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx index e907bac9efb..ef98fd561dc 100644 --- a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx +++ b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx @@ -1,35 +1,35 @@ import React from 'react'; import { Skeleton } from '@patternfly/react-core'; /* eslint-disable camelcase */ -import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl'; -import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl'; -import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl'; -import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl'; -import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg'; -import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md'; -import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm'; +import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl'; +import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl'; +import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl'; +import t_global_font_size_xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_xl'; +import t_global_font_size_lg from '@patternfly/react-tokens/dist/esm/t_global_font_size_lg'; +import t_global_font_size_md from '@patternfly/react-tokens/dist/esm/t_global_font_size_md'; +import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm'; export const SkeletonText: React.FunctionComponent = () => ( - {global_font_size_4xl.name} + {t_global_font_size_4xl.name}
- {global_font_size_3xl.name} + {t_global_font_size_3xl.name}
- {global_font_size_2xl.name} + {t_global_font_size_2xl.name}
- {global_font_size_xl.name} + {t_global_font_size_xl.name}
- {global_font_size_lg.name} + {t_global_font_size_lg.name}
- {global_font_size_md.name} + {t_global_font_size_md.name}
- {global_font_size_sm.name} + {t_global_font_size_sm.name} ); diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx index 298b6b7e6e3..7f508ac4d44 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx @@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles'; import { ToolbarGroupProps } from './ToolbarGroup'; import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils'; import { Button } from '../Button'; -import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg'; +import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg'; import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util'; import { PageContext } from '../Page/PageContext'; import { ToolbarExpandableContent } from './ToolbarExpandableContent'; diff --git a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx index dc68a0ae67f..c994bbb2489 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { RefObject } from 'react'; -import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_md'; -import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg'; -import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl'; -import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl'; +import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md'; +import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg'; +import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl'; +import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_2xl'; export interface ToolbarContextProps { isExpanded: boolean; diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md index 1574266d7c6..a921d351e33 100644 --- a/packages/react-core/src/demos/CardDemos.md +++ b/packages/react-core/src/demos/CardDemos.md @@ -15,7 +15,7 @@ import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_colo import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400'; import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min'; -import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle'; +import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle'; import flex from '@patternfly/react-styles/css/utilities/Flex/flex'; import text from '@patternfly/react-styles/css/utilities/Text/text'; import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; diff --git a/packages/react-core/src/demos/examples/Card/CardStatus.tsx b/packages/react-core/src/demos/examples/Card/CardStatus.tsx index 867478f7bd0..4b6d59d73d8 100644 --- a/packages/react-core/src/demos/examples/Card/CardStatus.tsx +++ b/packages/react-core/src/demos/examples/Card/CardStatus.tsx @@ -27,7 +27,7 @@ import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon'; -import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle'; +import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle'; export const CardStatus: React.FunctionComponent = () => { const [drawerExpanded, setDrawerExpanded] = React.useState(false); @@ -176,7 +176,7 @@ export const CardStatus: React.FunctionComponent = () => { Operators - 1 degraded + 1 degraded @@ -193,7 +193,7 @@ export const CardStatus: React.FunctionComponent = () => { Image Vulnerabilities - 0 vulnerabilities + 0 vulnerabilities diff --git a/packages/react-core/src/helpers/constants.ts b/packages/react-core/src/helpers/constants.ts index a541673b187..7115fb7aa1d 100644 --- a/packages/react-core/src/helpers/constants.ts +++ b/packages/react-core/src/helpers/constants.ts @@ -1,14 +1,14 @@ -import globalBreakpointSm from '@patternfly/react-tokens/dist/esm/global_breakpoint_sm'; -import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_md'; -import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg'; -import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl'; -import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl'; - -import globalHeightBreakpointSm from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_sm'; -import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_md'; -import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_lg'; -import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_xl'; -import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_2xl'; +import globalBreakpointSm from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_sm'; +import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md'; +import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg'; +import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl'; +import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_2xl'; + +import globalHeightBreakpointSm from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_sm'; +import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_md'; +import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_lg'; +import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_xl'; +import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_2xl'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx index 07f520ab353..f02f4cc6531 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx @@ -30,7 +30,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; /* eslint-disable camelcase */ -import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default'; +import t_global_color_brand_default from '@patternfly/react-tokens/dist/esm/t_global_color_brand_default'; export const TableComposableDemo = () => { const ComposableTableBasic = () => { @@ -143,7 +143,7 @@ export const TableComposableDemo = () => { {rows.map((row, rowIndex) => { const isOddRow = (rowIndex + 1) % 2; const customStyle = { - borderLeft: `3px solid ${global_color_brand_default.var}` + borderLeft: `3px solid ${t_global_color_brand_default.var}` }; return ( { {repositories.map((repo, rowIndex) => { const isOddRow = (rowIndex + 1) % 2; const customStyle = { - backgroundColor: global_background_color_secondary_default.var + backgroundColor: t_global_background_color_secondary_default.var }; // Some arbitrary logic to demonstrate that cell styles can be based on anything const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1; diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx index 452e3f11c60..fea91f910e6 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated'; import { css } from '@patternfly/react-styles'; /* eslint-disable camelcase */ -import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default'; +import t_global_color_brand_default from '@patternfly/react-tokens/dist/esm/t_global_color_brand_default'; interface Repository { name: string; @@ -32,7 +32,7 @@ export const LegacyTableMisc: React.FunctionComponent = () => { const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row }) => { const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true; const customStyle = { - borderLeft: `3px solid ${global_color_brand_default.var}` + borderLeft: `3px solid ${t_global_color_brand_default.var}` }; return ( Date: Mon, 16 Sep 2024 09:05:30 -0400 Subject: [PATCH 4/5] fix unit test --- packages/react-tokens/tests/react-tokens.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-tokens/tests/react-tokens.test.js b/packages/react-tokens/tests/react-tokens.test.js index 0b794abf7ff..63c68a1eb3b 100644 --- a/packages/react-tokens/tests/react-tokens.test.js +++ b/packages/react-tokens/tests/react-tokens.test.js @@ -2,6 +2,6 @@ const reactTokens = require('@patternfly/react-tokens'); // Test importing CJS tokens test('CJS token', () => { - const { color_black: black } = reactTokens; + const { t_color_black: black } = reactTokens; expect(black.value).toBeTruthy(); }); From dcfcb7a6dd67bfe19ad4170f6697d3f919fcadeb Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 16 Sep 2024 10:18:23 -0400 Subject: [PATCH 5/5] fix demos --- packages/react-docs/patternfly-docs/pages/icons.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js index 6c2b50c5a0b..1a03ff9df71 100644 --- a/packages/react-docs/patternfly-docs/pages/icons.js +++ b/packages/react-docs/patternfly-docs/pages/icons.js @@ -1,7 +1,7 @@ import React from 'react'; import { Tooltip, Grid, GridItem, PageSection, Content } from '@patternfly/react-core'; -import spacerMd from '@patternfly/react-tokens/dist/esm/global_spacer_md'; -import labelFontSize from '@patternfly/react-tokens/dist/esm/global_font_size_sm'; +import spacerMd from '@patternfly/react-tokens/dist/esm/t_global_spacer_md'; +import labelFontSize from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm'; import * as IconsModule from '@patternfly/react-icons/dist/esm'; const iconsPage = () => {