diff --git a/package.json b/package.json index f3f6b761f97..8e0d30c17d8 100644 --- a/package.json +++ b/package.json @@ -60,8 +60,7 @@ "surge": "^0.23.1", "ts-node": "^10.9.1", "ts-patch": "^2.1.0", - "typescript": "^4.7.4", - "ts-node": "^10.9.1" + "typescript": "^4.7.4" }, "scripts": { "build": "yarn clean && yarn build:generate && yarn build:esm && yarn build:cjs && yarn build:subpaths && yarn build:single:packages", diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap index 63018407954..e31fb5c70a7 100644 --- a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap +++ b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap @@ -19,7 +19,7 @@ exports[`Chart 1`] = ` @@ -63,7 +63,7 @@ exports[`Chart 1`] = ` @@ -94,7 +94,7 @@ exports[`Chart 1`] = ` @@ -125,7 +125,7 @@ exports[`Chart 1`] = ` @@ -156,7 +156,7 @@ exports[`Chart 1`] = ` @@ -188,7 +188,7 @@ exports[`Chart 1`] = ` @@ -232,7 +232,7 @@ exports[`Chart 1`] = ` @@ -263,7 +263,7 @@ exports[`Chart 1`] = ` @@ -294,7 +294,7 @@ exports[`Chart 1`] = ` @@ -325,7 +325,7 @@ exports[`Chart 1`] = ` @@ -385,7 +385,7 @@ exports[`Chart 2`] = ` @@ -429,7 +429,7 @@ exports[`Chart 2`] = ` @@ -460,7 +460,7 @@ exports[`Chart 2`] = ` @@ -491,7 +491,7 @@ exports[`Chart 2`] = ` @@ -522,7 +522,7 @@ exports[`Chart 2`] = ` @@ -554,7 +554,7 @@ exports[`Chart 2`] = ` @@ -598,7 +598,7 @@ exports[`Chart 2`] = ` @@ -629,7 +629,7 @@ exports[`Chart 2`] = ` @@ -660,7 +660,7 @@ exports[`Chart 2`] = ` @@ -691,7 +691,7 @@ exports[`Chart 2`] = ` @@ -791,7 +791,7 @@ exports[`renders axis and component children 1`] = ` d="M50,127.77777777777779L83.33333333333334,138.88888888888886L116.66666666666667,72.22222222222223L150,105.55555555555557" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); pointer-events: stroke; width: 3px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); pointer-events: stroke; width: 3px; opacity: 1; stroke-width: 2;" /> @@ -849,7 +849,7 @@ exports[`renders axis and component children 1`] = ` @@ -893,7 +893,7 @@ exports[`renders axis and component children 1`] = ` @@ -924,7 +924,7 @@ exports[`renders axis and component children 1`] = ` @@ -955,7 +955,7 @@ exports[`renders axis and component children 1`] = ` @@ -986,7 +986,7 @@ exports[`renders axis and component children 1`] = ` @@ -1017,7 +1017,7 @@ exports[`renders axis and component children 1`] = ` @@ -1048,7 +1048,7 @@ exports[`renders axis and component children 1`] = ` @@ -1080,7 +1080,7 @@ exports[`renders axis and component children 1`] = ` @@ -1124,7 +1124,7 @@ exports[`renders axis and component children 1`] = ` @@ -1155,7 +1155,7 @@ exports[`renders axis and component children 1`] = ` @@ -1186,7 +1186,7 @@ exports[`renders axis and component children 1`] = ` diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap index 4837594dff7..09dc3e37557 100644 --- a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap +++ b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap @@ -16,7 +16,7 @@ exports[`ChartAxis 1`] = ` @@ -60,7 +60,7 @@ exports[`ChartAxis 1`] = ` @@ -91,7 +91,7 @@ exports[`ChartAxis 1`] = ` @@ -122,7 +122,7 @@ exports[`ChartAxis 1`] = ` @@ -153,7 +153,7 @@ exports[`ChartAxis 1`] = ` @@ -184,7 +184,7 @@ exports[`ChartAxis 1`] = ` @@ -240,7 +240,7 @@ exports[`ChartAxis 2`] = ` @@ -284,7 +284,7 @@ exports[`ChartAxis 2`] = ` @@ -315,7 +315,7 @@ exports[`ChartAxis 2`] = ` @@ -346,7 +346,7 @@ exports[`ChartAxis 2`] = ` @@ -377,7 +377,7 @@ exports[`ChartAxis 2`] = ` @@ -408,7 +408,7 @@ exports[`ChartAxis 2`] = ` @@ -507,7 +507,7 @@ exports[`renders component data 1`] = ` d="M80,137.5L128.33333333333331,150L176.66666666666666,75L224.99999999999997,112.5" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); pointer-events: stroke; width: 6px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); pointer-events: stroke; width: 6px; opacity: 1; stroke-width: 2;" /> @@ -565,7 +565,7 @@ exports[`renders component data 1`] = ` @@ -609,7 +609,7 @@ exports[`renders component data 1`] = ` @@ -640,7 +640,7 @@ exports[`renders component data 1`] = ` @@ -672,7 +672,7 @@ exports[`renders component data 1`] = ` @@ -716,7 +716,7 @@ exports[`renders component data 1`] = ` @@ -747,7 +747,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap index 5731da64bf5..ea5540f7700 100644 --- a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap @@ -278,7 +278,7 @@ A 0 0 0 0 1, 79.5, 150 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); stroke: var(--pf-v6-chart-bar--data--stroke, none); width: 6px; padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); width: 6px; padding: 8px; stroke-width: 0;" /> @@ -461,7 +461,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -505,7 +505,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -536,7 +536,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -567,7 +567,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -599,7 +599,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -643,7 +643,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -674,7 +674,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -705,7 +705,7 @@ A 0 0 0 0 1, 246.5, 150 diff --git a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap index 4636beaad47..5b618e389a2 100644 --- a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap @@ -60,7 +60,7 @@ exports[`ChartBar 1`] = ` @@ -723,7 +723,7 @@ exports[`renders component data 1`] = ` @@ -754,7 +754,7 @@ exports[`renders component data 1`] = ` @@ -785,7 +785,7 @@ exports[`renders component data 1`] = ` @@ -817,7 +817,7 @@ exports[`renders component data 1`] = ` @@ -861,7 +861,7 @@ exports[`renders component data 1`] = ` @@ -892,7 +892,7 @@ exports[`renders component data 1`] = ` @@ -923,7 +923,7 @@ exports[`renders component data 1`] = ` @@ -954,7 +954,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap index 545373b6bf1..081c5d999c4 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap @@ -19,7 +19,7 @@ exports[`ChartBulletQualitativeRange 1`] = ` @@ -104,7 +104,7 @@ exports[`ChartBulletQualitativeRange 2`] = ` @@ -201,7 +201,7 @@ exports[`renders component data 1`] = ` @@ -245,7 +245,7 @@ exports[`renders component data 1`] = ` @@ -276,7 +276,7 @@ exports[`renders component data 1`] = ` @@ -307,7 +307,7 @@ exports[`renders component data 1`] = ` @@ -338,7 +338,7 @@ exports[`renders component data 1`] = ` @@ -380,7 +380,7 @@ A 0 0 0 0 1, 312.5, 85 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #d2d2d2); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" /> diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap index cb947a253b3..1543f8fd6a7 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap @@ -83,7 +83,7 @@ A 0 0 0 0 1, 225, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-bullet--comparative-measure--error--Fill--Color, #c9190b); stroke: var(--pf-v6-chart-bullet--comparative-measure--error--stroke--Color, #c9190b); padding: 8px; stroke-width: 2;" + style="fill: var(--pf-v6-chart-bullet--comparative-measure--error--Fill--Color, #b1380b); stroke: var(--pf-v6-chart-bullet--comparative-measure--error--stroke--Color, #b1380b); padding: 8px; stroke-width: 1;" /> diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap index d3e34205847..3a6f9e2c072 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap @@ -83,7 +83,7 @@ A 0 0 0 0 1, 225, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-bullet--comparative-measure--Fill--Color, #4f5255); stroke: var(--pf-v6-chart-bullet--comparative-measure--stroke--Color, #4f5255); padding: 8px; stroke-width: 1;" + style="fill: var(--pf-v6-chart-bullet--comparative-measure--Fill--Color, #383838); stroke: var(--pf-v6-chart-bullet--comparative-measure--stroke--Color, #383838); padding: 8px; stroke-width: 1;" /> diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap index a14e2ee611b..e79be486bf0 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap @@ -83,7 +83,7 @@ A 0 0 0 0 1, 225, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-bullet--comparative-measure--warning--Fill--Color, #ec7a08); stroke: var(--pf-v6-chart-bullet--comparative-measure--warning--stroke--Color, #ec7a08); padding: 8px; stroke-width: 2;" + style="fill: var(--pf-v6-chart-bullet--comparative-measure--warning--Fill--Color, #f5921b); stroke: var(--pf-v6-chart-bullet--comparative-measure--warning--stroke--Color, #f5921b); padding: 8px; stroke-width: 2;" /> diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap index f70957f0643..a2847361a27 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap @@ -72,12 +72,12 @@ exports[`renders component data 1`] = ` dx="0" id="test2" x="225" - y="48.675000000000004" + y="49.150000000000006" > @@ -85,8 +85,8 @@ exports[`renders component data 1`] = ` @@ -94,7 +94,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap index e5638ac1738..24031106596 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap @@ -77,7 +77,7 @@ exports[`renders component data 1`] = ` @@ -86,7 +86,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap index 5baf0940bcb..6f64a94cb05 100644 --- a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap @@ -86,7 +86,7 @@ exports[`renders container via ChartLegend 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> @@ -115,7 +115,7 @@ exports[`renders container via ChartLegend 1`] = ` @@ -132,7 +132,7 @@ exports[`renders container via ChartLegend 1`] = ` diff --git a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap index 0c1a3ed63f3..c969a64285f 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap @@ -104,7 +104,7 @@ exports[`renders container via ChartGroup 1`] = ` d="M50,135.71428571428572L75,121.42857142857142L100,92.85714285714286L125,78.57142857142857L150,78.57142857142857L150,150L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap index 24ee93b993e..89225293033 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap @@ -62,7 +62,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,135.71428571428572L75,121.42857142857142L100,92.85714285714286L125,78.57142857142857L150,78.57142857142857L150,150L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap index 3f8e1bc1f52..7ee54c0fc63 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap @@ -62,7 +62,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,135.71428571428572L75,121.42857142857142L100,92.85714285714286L125,78.57142857142857L150,78.57142857142857L150,150L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> diff --git a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap index de7796a581a..891ccc170e5 100644 --- a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap @@ -25,28 +25,28 @@ exports[`ChartDonut 1`] = ` d="M61.91722684939433,-72.05037834238375A95,95,0,0,1,82.82584189723372,46.52827005181304L75.03101670275841,42.027925627496636A86,86,0,0,0,56.13169557884936,-65.15545066564565Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -90,28 +90,28 @@ exports[`ChartDonut 2`] = ` d="M61.91722684939433,-72.05037834238375A95,95,0,0,1,82.82584189723372,46.52827005181304L75.03101670275841,42.027925627496636A86,86,0,0,0,56.13169557884936,-65.15545066564565Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -155,14 +155,14 @@ exports[`renders component data 1`] = ` d="M64.16830759493514,47.77476635632862A80,80,0,1,1,-47.774766356328655,-64.16830759493511L-42.48429331491433,-56.886596149992364A71,71,0,1,0,56.88659614999237,42.48429331491432Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap index 16d612ab232..d99d7b39ada 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap @@ -18,7 +18,7 @@ exports[`ChartDonutThreshold 1`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -55,7 +55,7 @@ exports[`ChartDonutThreshold 2`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -92,28 +92,28 @@ exports[`renders component data 1`] = ` d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,46.26447237139683,-65.26560040477877L40.97399932998254,-57.983888959835994A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap index 29b82b24ed4..a331b46274a 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap @@ -25,7 +25,7 @@ exports[`ChartDonutUtilization 1`] = ` d="M5.8170722959499274e-15,-95A95,95,0,1,1,-5.8170722959499274e-15,95A95,95,0,1,1,5.8170722959499274e-15,-95M6.058540038520991e-14,-86A86,86,0,1,0,-6.058540038520991e-14,86A86,86,0,1,0,6.058540038520991e-14,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -69,7 +69,7 @@ exports[`ChartDonutUtilization 2`] = ` d="M5.8170722959499274e-15,-95A95,95,0,1,1,-5.8170722959499274e-15,95A95,95,0,1,1,5.8170722959499274e-15,-95M6.058540038520991e-14,-86A86,86,0,1,0,-6.058540038520991e-14,86A86,86,0,1,0,6.058540038520991e-14,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -113,7 +113,7 @@ exports[`renders component data 1`] = ` d="M64.16830759493514,47.77476635632862A80,80,0,1,1,-0.9334130156924101,-79.99455444055012L-0.9334130156923751,-70.99386410206263A71,71,0,1,0,56.88659614999237,42.48429331491432Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap index 293356cc86b..71aac5ce887 100644 --- a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap +++ b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap @@ -112,7 +112,7 @@ exports[`renders container children 1`] = ` d="M50,135.71428571428572L75,121.42857142857142L100,92.85714285714286L125,78.57142857142857L150,78.57142857142857L150,150L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> diff --git a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap index 480a04af11d..d3aef7d04a6 100644 --- a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap index 3f8657f0f41..52a5ac932a9 100644 --- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap @@ -41,7 +41,7 @@ exports[`ChartLegend 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> @@ -70,7 +70,7 @@ exports[`ChartLegend 1`] = ` @@ -133,7 +133,7 @@ exports[`ChartLegend 2`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> @@ -162,7 +162,7 @@ exports[`ChartLegend 2`] = ` @@ -225,7 +225,7 @@ exports[`renders component data 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> @@ -254,7 +254,7 @@ exports[`renders component data 1`] = ` @@ -271,7 +271,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap index 9a5798dd08a..61b1c84cb73 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap @@ -29,7 +29,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -73,7 +73,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -104,7 +104,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -135,7 +135,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -167,7 +167,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -221,7 +221,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -262,7 +262,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -320,7 +320,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,185L166.66666666666666,170L283.3333333333333,125L400,155" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-v6-chart-theme--green--ColorScale--100, #4cb140); pointer-events: stroke; width: 11px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-v6-chart-theme--green--ColorScale--100, #63993d); pointer-events: stroke; width: 11px; opacity: 1; stroke-width: 2;" /> @@ -415,7 +415,7 @@ exports[`allows tooltip via container component 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--green--ColorScale--100, #4cb140);" + style="fill: var(--pf-v6-chart-theme--green--ColorScale--100, #63993d);" /> @@ -484,7 +484,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -501,7 +501,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -518,7 +518,7 @@ exports[`allows tooltip via container component 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap index 72b42c1a990..232454e7476 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renders component text 1`] = ` @@ -33,7 +33,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap index d87b575e6b4..842267c41f0 100644 --- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap @@ -163,7 +163,7 @@ exports[`renders component data 1`] = ` d="M50,127.77777777777779L83.33333333333334,138.88888888888886L116.66666666666667,72.22222222222223L150,105.55555555555557" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); pointer-events: stroke; width: 3px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); pointer-events: stroke; width: 3px; opacity: 1; stroke-width: 2;" /> @@ -221,7 +221,7 @@ exports[`renders component data 1`] = ` @@ -265,7 +265,7 @@ exports[`renders component data 1`] = ` @@ -296,7 +296,7 @@ exports[`renders component data 1`] = ` @@ -327,7 +327,7 @@ exports[`renders component data 1`] = ` @@ -358,7 +358,7 @@ exports[`renders component data 1`] = ` @@ -389,7 +389,7 @@ exports[`renders component data 1`] = ` @@ -420,7 +420,7 @@ exports[`renders component data 1`] = ` @@ -452,7 +452,7 @@ exports[`renders component data 1`] = ` @@ -496,7 +496,7 @@ exports[`renders component data 1`] = ` @@ -527,7 +527,7 @@ exports[`renders component data 1`] = ` @@ -558,7 +558,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap index 8e6d5c0ba1d..3fa988c9c5c 100644 --- a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap @@ -25,28 +25,28 @@ exports[`ChartPie 1`] = ` d="M61.06482292022124,-72.7742220963029A95,95,0,0,1,82.27241335952168,47.499999999999986L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -90,28 +90,28 @@ exports[`ChartPie 2`] = ` d="M61.06482292022124,-72.7742220963029A95,95,0,0,1,82.27241335952168,47.499999999999986L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -155,14 +155,14 @@ exports[`renders component data 1`] = ` d="M64.7213595499958,47.022820183397855A80,80,0,1,1,-47.02282018339786,-64.72135954999578L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap index ca35c683574..209d6399bb7 100644 --- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap @@ -41,7 +41,7 @@ exports[`ChartPoint 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> @@ -70,7 +70,7 @@ exports[`ChartPoint 1`] = ` @@ -133,7 +133,7 @@ exports[`ChartPoint 2`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> @@ -162,7 +162,7 @@ exports[`ChartPoint 2`] = ` @@ -235,7 +235,7 @@ exports[`renders component data 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> @@ -264,7 +264,7 @@ exports[`renders component data 1`] = ` @@ -281,7 +281,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap index 9f32eb60038..907ca305831 100644 --- a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap +++ b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap @@ -21,7 +21,7 @@ exports[`ChartScatter 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-scatter--data--Fill, #151515); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-v6-chart-scatter--data--Fill, #1f1f1f); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -510,7 +510,7 @@ exports[`ChartScatter 2`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-scatter--data--Fill, #151515); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-v6-chart-scatter--data--Fill, #1f1f1f); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1038,7 +1038,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1076,7 +1076,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #002f5d); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #036); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1114,7 +1114,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #519de9); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); opacity: 1; stroke: var(--pf-v6-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1151,7 +1151,7 @@ exports[`renders component data 1`] = ` @@ -1195,7 +1195,7 @@ exports[`renders component data 1`] = ` @@ -1226,7 +1226,7 @@ exports[`renders component data 1`] = ` @@ -1257,7 +1257,7 @@ exports[`renders component data 1`] = ` @@ -1288,7 +1288,7 @@ exports[`renders component data 1`] = ` @@ -1319,7 +1319,7 @@ exports[`renders component data 1`] = ` @@ -1350,7 +1350,7 @@ exports[`renders component data 1`] = ` @@ -1382,7 +1382,7 @@ exports[`renders component data 1`] = ` @@ -1426,7 +1426,7 @@ exports[`renders component data 1`] = ` @@ -1457,7 +1457,7 @@ exports[`renders component data 1`] = ` @@ -1488,7 +1488,7 @@ exports[`renders component data 1`] = ` @@ -1519,7 +1519,7 @@ exports[`renders component data 1`] = ` @@ -1550,7 +1550,7 @@ exports[`renders component data 1`] = ` @@ -1581,7 +1581,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap index 575397cd635..f40fca3a53a 100644 --- a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap +++ b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap @@ -84,7 +84,7 @@ A 0 0 0 0 1, 85, 125.86206896551724 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #519de9); stroke: var(--pf-v6-chart-bar--data--stroke, none); stroke-width: 1; padding: 8px;" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); stroke: var(--pf-v6-chart-bar--data--stroke, none); stroke-width: 1; padding: 8px;" /> @@ -375,7 +375,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -406,7 +406,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -437,7 +437,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -469,7 +469,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -513,7 +513,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -544,7 +544,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -575,7 +575,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -606,7 +606,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 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 0bd3ff673b7..fe488256179 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_FontWeight_bold from '@patternfly/react-tokens/dist/esm/global_FontWeight_bold'; +import global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/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_FontWeight_bold.value + fontWeight: 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 f304575681a..02cd605262b 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_FontWeight_bold from '@patternfly/react-tokens/dist/esm/global_FontWeight_bold'; +import global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/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_FontWeight_bold.value + fontWeight: global_font_weight_heading_bold.value } as any }; diff --git a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap index 9fc91af70bf..95c0cb94b8c 100644 --- a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap @@ -149,7 +149,7 @@ exports[`renders component data 1`] = ` @@ -193,7 +193,7 @@ exports[`renders component data 1`] = ` @@ -224,7 +224,7 @@ exports[`renders component data 1`] = ` @@ -255,7 +255,7 @@ exports[`renders component data 1`] = ` @@ -286,7 +286,7 @@ exports[`renders component data 1`] = ` @@ -318,7 +318,7 @@ exports[`renders component data 1`] = ` @@ -362,7 +362,7 @@ exports[`renders component data 1`] = ` @@ -393,7 +393,7 @@ exports[`renders component data 1`] = ` @@ -424,7 +424,7 @@ exports[`renders component data 1`] = ` @@ -455,7 +455,7 @@ exports[`renders component data 1`] = ` @@ -486,7 +486,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap index 6d602619d52..78297539c7b 100644 --- a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap @@ -62,7 +62,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,135.71428571428572L75,121.42857142857142L100,92.85714285714286L125,78.57142857142857L150,78.57142857142857L150,150L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap index 0c1a3ed63f3..c969a64285f 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap @@ -104,7 +104,7 @@ exports[`renders container via ChartGroup 1`] = ` d="M50,135.71428571428572L75,121.42857142857142L100,92.85714285714286L125,78.57142857142857L150,78.57142857142857L150,150L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #8bc1f7);" + style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);" /> diff --git a/packages/react-core/package.json b/packages/react-core/package.json index be17dc3bc26..1b378ec1796 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -55,7 +55,7 @@ "tslib": "^2.5.0" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.117", + "@patternfly/patternfly": "6.0.0-alpha.135", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-replace": "^5.0.2", diff --git a/packages/react-core/src/components/Menu/Menu.tsx b/packages/react-core/src/components/Menu/Menu.tsx index 8c2f3026515..19a1926ca7b 100644 --- a/packages/react-core/src/components/Menu/Menu.tsx +++ b/packages/react-core/src/components/Menu/Menu.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Menu/menu'; import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb'; -import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; import { css } from '@patternfly/react-styles'; import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; import { MenuContext } from './MenuContext'; @@ -193,9 +192,7 @@ class MenuBase extends React.Component { const parentMenu = this.activeMenu; const key = event.key; - const isFromBreadcrumb = - activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) || - activeElement.classList.contains(dropdownStyles.dropdownToggle); + const isFromBreadcrumb = activeElement.classList.contains(breadcrumbStyles.breadcrumbLink); if (key === ' ' || key === 'Enter') { event.preventDefault(); @@ -313,7 +310,6 @@ class MenuBase extends React.Component { noHorizontalArrowHandling={ document.activeElement && (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) || - document.activeElement.classList.contains(dropdownStyles.dropdownToggle) || document.activeElement.tagName === 'INPUT') } noEnterHandling diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx index ffb497e8ea5..38d7c576e9d 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx @@ -3,8 +3,6 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; - -import { Text, TextVariants } from '../Text'; import { Button, ButtonVariant } from '../Button'; export interface NotificationDrawerHeaderProps extends React.HTMLProps { @@ -38,9 +36,7 @@ export const NotificationDrawerHeader: React.FunctionComponent (
- - {title} - +

{title}

{(customText !== undefined || count !== undefined) && ( {customText || `${count} ${unreadText}`} diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap index c51b989d641..575385d2540 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap @@ -7,10 +7,6 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = ` >

Notifications

@@ -31,10 +27,6 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied >

Notifications

@@ -55,10 +47,6 @@ exports[`NotificationDrawerHeader drawer header with title applied 1`] = ` >

Some Title

@@ -73,10 +61,6 @@ exports[`NotificationDrawerHeader renders with PatternFly Core styles 1`] = ` >

Notifications

diff --git a/packages/react-core/src/components/Skeleton/examples/Skeleton.md b/packages/react-core/src/components/Skeleton/examples/Skeleton.md index 8aabdfb78c5..d9b2adbad08 100644 --- a/packages/react-core/src/components/Skeleton/examples/Skeleton.md +++ b/packages/react-core/src/components/Skeleton/examples/Skeleton.md @@ -5,37 +5,42 @@ cssPrefix: pf-v5-c-skeleton propComponents: ['Skeleton'] --- -import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl'; -import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl'; -import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl'; -import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl'; -import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg'; -import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md'; -import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm'; +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'; ## Examples ### Default ```ts file="./SkeletonDefault.tsx" + ``` ### Percentage widths ```ts file="./SkeletonPercentageWidth.tsx" + ``` ### Percentage heights ```ts file="./SkeletonPercentageHeight.tsx" + ``` ### Text modifiers ```ts file="./SkeletonText.tsx" + ``` ### Shapes ```ts file="./SkeletonShapes.tsx" + ``` diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx index 5d51166ff8b..e907bac9efb 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_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl'; -import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl'; -import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl'; -import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl'; -import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg'; -import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md'; -import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm'; +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'; export const SkeletonText: React.FunctionComponent = () => ( - {global_FontSize_4xl.name} + {global_font_size_4xl.name}
- {global_FontSize_3xl.name} + {global_font_size_3xl.name}
- {global_FontSize_2xl.name} + {global_font_size_2xl.name}
- {global_FontSize_xl.name} + {global_font_size_xl.name}
- {global_FontSize_lg.name} + {global_font_size_lg.name}
- {global_FontSize_md.name} + {global_font_size_md.name}
- {global_FontSize_sm.name} + {global_font_size_sm.name} ); diff --git a/packages/react-core/src/components/Slider/SliderStep.tsx b/packages/react-core/src/components/Slider/SliderStep.tsx index 81ff4afa54b..e05e5b6b4cf 100644 --- a/packages/react-core/src/components/Slider/SliderStep.tsx +++ b/packages/react-core/src/components/Slider/SliderStep.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Slider/slider'; import { css } from '@patternfly/react-styles'; -import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left'; +import sliderStepInsetInlineStart from '@patternfly/react-tokens/dist/esm/c_slider__step_InsetInlineStart'; export interface SliderStepProps extends Omit, 'label'> { /** Additional classes added to the slider step. */ @@ -27,7 +27,9 @@ export const SliderStep: React.FunctionComponent = ({ isActive = false, ...props }: SliderStepProps) => { - const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties; + const style = { + [sliderStepInsetInlineStart.name]: `${value ? value : sliderStepInsetInlineStart.value}%` + } as React.CSSProperties; return (
{!isTickHidden &&
} diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap index 7ae64ffd607..da0990ace08 100644 --- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap +++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap @@ -22,7 +22,7 @@ exports[`slider renders continuous slider 1`] = ` >
, OUIAProps { ouiaSafe?: boolean; } +const componentStyles = { + h1: styles.contentH1, + h2: styles.contentH2, + h3: styles.contentH3, + h4: styles.contentH4, + h5: styles.contentH5, + h6: styles.contentH6, + p: styles.contentP, + a: styles.contentA, + small: styles.contentSmall, + blockquote: styles.contentBlockquote, + pre: styles.contentPre +}; + export const Text: React.FunctionComponent = ({ children = null, className = '', @@ -49,7 +63,11 @@ export const Text: React.FunctionComponent = ({ {...ouiaProps} {...props} data-pf-content - className={css(isVisitedLink && component === TextVariants.a && styles.modifiers.visited, className)} + className={css( + isVisitedLink && component === TextVariants.a && styles.modifiers.visited, + componentStyles[component], + className + )} > {children} diff --git a/packages/react-core/src/components/Text/TextList.tsx b/packages/react-core/src/components/Text/TextList.tsx index 5a8d337e303..ebceb43dee7 100644 --- a/packages/react-core/src/components/Text/TextList.tsx +++ b/packages/react-core/src/components/Text/TextList.tsx @@ -8,6 +8,12 @@ export enum TextListVariants { dl = 'dl' } +const componentStyles = { + ul: styles.contentUl, + ol: styles.contentOl, + dl: styles.contentDl +}; + export interface TextListProps extends React.HTMLProps { /** Content rendered within the TextList */ children?: React.ReactNode; @@ -29,7 +35,7 @@ export const TextList: React.FunctionComponent = ({ const Component: any = component; return ( - + {children} ); diff --git a/packages/react-core/src/components/Text/TextListItem.tsx b/packages/react-core/src/components/Text/TextListItem.tsx index 81b6eeb7c83..8aedef965fb 100644 --- a/packages/react-core/src/components/Text/TextListItem.tsx +++ b/packages/react-core/src/components/Text/TextListItem.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/Content/content'; import { css } from '@patternfly/react-styles'; export enum TextListItemVariants { @@ -7,6 +8,12 @@ export enum TextListItemVariants { dd = 'dd' } +const componentStyles = { + li: styles.contentLi, + dt: styles.contentDt, + dd: styles.contentDd +}; + export interface TextListItemProps extends React.HTMLProps { /** Content rendered within the TextListItem */ children?: React.ReactNode; @@ -25,7 +32,7 @@ export const TextListItem: React.FunctionComponent = ({ const Component: any = component; return ( - + {children} ); diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap index 8c52190fe42..e55fc4c9f8b 100644 --- a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap +++ b/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap @@ -3,7 +3,7 @@ exports[`TextList should match snapshot (auto-generated) 1`] = `
    ReactNode
diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap index a22cc9cfcb4..6fcd0810bad 100644 --- a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap +++ b/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap @@ -3,7 +3,7 @@ exports[`TextListItem should match snapshot (auto-generated) 1`] = `
  • ReactNode
    • diff --git a/packages/react-core/src/components/Text/__tests__/Text.test.tsx b/packages/react-core/src/components/Text/__tests__/Text.test.tsx index e0f8606f813..979dc857f66 100644 --- a/packages/react-core/src/components/Text/__tests__/Text.test.tsx +++ b/packages/react-core/src/components/Text/__tests__/Text.test.tsx @@ -16,11 +16,6 @@ test('Renders children', () => { expect(screen.getByText('Test')).toBeVisible(); }); -test('Renders without class name by default', () => { - render(Test); - expect(screen.getByText('Test')).not.toHaveClass(); -}); - test('Renders with custom class name when className prop is provided', () => { render(Test); expect(screen.getByText('Test')).toHaveClass('custom-class'); diff --git a/packages/react-core/src/components/Text/__tests__/TextList.test.tsx b/packages/react-core/src/components/Text/__tests__/TextList.test.tsx index a7cb54aa5d3..76745221c5c 100644 --- a/packages/react-core/src/components/Text/__tests__/TextList.test.tsx +++ b/packages/react-core/src/components/Text/__tests__/TextList.test.tsx @@ -16,11 +16,6 @@ test('Renders children', () => { expect(screen.getByText('Test')).toBeVisible(); }); -test('Renders without class name by default', () => { - render(Test); - expect(screen.getByText('Test')).not.toHaveClass(); -}); - test('Renders with custom class name when className prop is provided', () => { render(Test); expect(screen.getByText('Test')).toHaveClass('custom-class'); diff --git a/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx b/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx index 34f7fbb9039..d966b8fda3f 100644 --- a/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx +++ b/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx @@ -16,11 +16,6 @@ test('Renders children', () => { expect(screen.getByText('Test')).toBeVisible(); }); -test('Renders without class name by default', () => { - render(Test); - expect(screen.getByText('Test')).not.toHaveClass(); -}); - test('Renders with custom class name when className prop is provided', () => { render(Test); expect(screen.getByText('Test')).toHaveClass('custom-class'); diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap index e05722b97c9..3eb559d2dd2 100644 --- a/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap +++ b/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Matches the snapshot 1`] = `

      Test
    diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap index 98bbdbd6a00..514daf612d4 100644 --- a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap +++ b/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Matches the snapshot 1`] = `
  • Test
    • diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index 42de50935b2..61566a36d43 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -5,7 +5,7 @@ cssPrefix: pf-v5-c-content propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] --- -The `` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite (``, ``, and ``). +The `` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite ``, and ``. `TextContent` may be used as a container for the text components, but nesting them inside `` is not required. You cannot nest other components within ``, and doing so can cause styling overrides or other conflicts. Instead, you can use the `` component's properties to achieve the same results. @@ -25,8 +25,6 @@ For example, rather than nesting the `` and `` components within `< ``` -Text components such as Text, TextList, TextListItem need to be placed within a TextContent - ### Unordered list ```ts file="./TextUnorderedList.tsx" @@ -51,6 +49,14 @@ Text components such as Text, TextList, TextListItem need to be placed within a ``` +Text components such as Text, TextList, TextListItem can be placed within a TextContent to provide styling for html elements, and additional styling options applied to the children. + +### Wrapped in TextContent + +```ts file="./TextContentWrapped.tsx" + +``` + ### Link and visited link ```ts file="./TextVisited.tsx" diff --git a/packages/react-core/src/components/Text/examples/TextBody.tsx b/packages/react-core/src/components/Text/examples/TextBody.tsx index ea72f431c62..88fa3a9b4da 100644 --- a/packages/react-core/src/components/Text/examples/TextBody.tsx +++ b/packages/react-core/src/components/Text/examples/TextBody.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { TextContent, Text, TextVariants } from '@patternfly/react-core'; +import { Text, TextVariants } from '@patternfly/react-core'; export const TextBody: React.FunctionComponent = () => ( - <TextContent> + <> <Text component={TextVariants.p}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel @@ -20,5 +20,5 @@ export const TextBody: React.FunctionComponent = () => ( turpis. </Text> <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text> - </TextContent> + </> ); diff --git a/packages/react-core/src/components/Text/examples/TextContentWrapped.tsx b/packages/react-core/src/components/Text/examples/TextContentWrapped.tsx new file mode 100644 index 00000000000..6b89c1df7c0 --- /dev/null +++ b/packages/react-core/src/components/Text/examples/TextContentWrapped.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { TextContent, Text, TextVariants } from '@patternfly/react-core'; + +export const TextContentWrapped: React.FunctionComponent = () => ( + <TextContent> + <Text component={TextVariants.p}> + Text with a component of type "p" still renders the same when wrapped with a TextContent. + </Text> + <p>If located within a wrapping TextContent, html elements are styled as well!</p> + </TextContent> +); diff --git a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx index 454d6b7a5a2..3ad396c0169 100644 --- a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx +++ b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx @@ -1,17 +1,15 @@ import React from 'react'; -import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; +import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; export const TextDescriptionList: React.FunctionComponent = () => ( - <TextContent> - <TextList component={TextListVariants.dl}> - <TextListItem component={TextListItemVariants.dt}>Web</TextListItem> - <TextListItem component={TextListItemVariants.dd}> - The part of the Internet that contains websites and web pages - </TextListItem> - <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem> - <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem> - <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem> - <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem> - </TextList> - </TextContent> + <TextList component={TextListVariants.dl}> + <TextListItem component={TextListItemVariants.dt}>Web</TextListItem> + <TextListItem component={TextListItemVariants.dd}> + The part of the Internet that contains websites and web pages + </TextListItem> + <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem> + <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem> + <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem> + <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem> + </TextList> ); diff --git a/packages/react-core/src/components/Text/examples/TextHeadings.tsx b/packages/react-core/src/components/Text/examples/TextHeadings.tsx index bd104a9e9b1..a9842a9caf6 100644 --- a/packages/react-core/src/components/Text/examples/TextHeadings.tsx +++ b/packages/react-core/src/components/Text/examples/TextHeadings.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { TextContent, Text, TextVariants } from '@patternfly/react-core'; +import { Text, TextVariants } from '@patternfly/react-core'; export const TextHeadings: React.FunctionComponent = () => ( - <TextContent> + <> <Text component={TextVariants.h1}>Hello World</Text> <Text component={TextVariants.h2}>Second level</Text> <Text component={TextVariants.h3}>Third level</Text> <Text component={TextVariants.h4}>Fourth level</Text> <Text component={TextVariants.h5}>Fifth level</Text> <Text component={TextVariants.h6}>Sixth level</Text> - </TextContent> + </> ); diff --git a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx index 7c92b5a1c71..59c33f7b0f1 100644 --- a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx +++ b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx @@ -1,16 +1,14 @@ import React from 'react'; -import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; +import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; export const TextOrderedList: React.FunctionComponent = () => ( - <TextContent> - <TextList component={TextListVariants.ol}> - <TextListItem>Donec blandit a lorem id convallis.</TextListItem> - <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem> - <TextListItem>Integer in volutpat libero.</TextListItem> - <TextListItem>Donec a diam tellus.</TextListItem> - <TextListItem>Aenean nec tortor orci.</TextListItem> - <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem> - <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem> - </TextList> - </TextContent> + <TextList component={TextListVariants.ol}> + <TextListItem>Donec blandit a lorem id convallis.</TextListItem> + <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem> + <TextListItem>Integer in volutpat libero.</TextListItem> + <TextListItem>Donec a diam tellus.</TextListItem> + <TextListItem>Aenean nec tortor orci.</TextListItem> + <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem> + <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem> + </TextList> ); diff --git a/packages/react-core/src/components/Text/examples/TextPlainList.tsx b/packages/react-core/src/components/Text/examples/TextPlainList.tsx index 107a94d9721..61672f3c170 100644 --- a/packages/react-core/src/components/Text/examples/TextPlainList.tsx +++ b/packages/react-core/src/components/Text/examples/TextPlainList.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; +import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; export const TextPlainList: React.FunctionComponent = () => ( - <TextContent> + <> <Text component={TextVariants.h3}>Plain unordered list</Text> <TextList isPlain> <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> @@ -20,5 +20,5 @@ export const TextPlainList: React.FunctionComponent = () => ( <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem> <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem> </TextList> - </TextContent> + </> ); diff --git a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx index 4ce3dda71b9..59b6296cbb2 100644 --- a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx +++ b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx @@ -1,19 +1,17 @@ import React from 'react'; -import { TextContent, TextList, TextListItem } from '@patternfly/react-core'; +import { TextList, TextListItem } from '@patternfly/react-core'; export const TextUnorderedList: React.FunctionComponent = () => ( - <TextContent> - <TextList> - <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> - <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> - <TextListItem> - Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. - <TextList> - <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> - <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> - </TextList> - </TextListItem> - <TextListItem>Ut non enim metus.</TextListItem> - </TextList> - </TextContent> + <TextList> + <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> + <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> + <TextListItem> + Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. + <TextList> + <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> + <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> + </TextList> + </TextListItem> + <TextListItem>Ut non enim metus.</TextListItem> + </TextList> ); diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx index db0e2a44a6b..e0134b2b60f 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx @@ -80,7 +80,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({ <div className={css( styles.toolbarItem, - variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'], + variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label'], + variant === ToolbarItemVariant['chip-group'] && styles.modifiers.labelGroup, isAllExpanded && styles.modifiers.expanded, isOverflowContainer && styles.modifiers.overflowContainer, formatBreakpointMods(visibility, styles, '', getBreakpoint(width)), diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap index 512d56268ce..93f7611cac5 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap @@ -100,7 +100,7 @@ exports[`Toolbar should render with custom chip content 1`] = ` hidden="" > <div - class="pf-v6-c-toolbar__item pf-m-chip-group" + class="pf-v6-c-toolbar__item pf-m-label-group" > <div class="pf-v6-c-label-group pf-m-category" diff --git a/packages/react-core/src/components/Wizard/WizardFooter.tsx b/packages/react-core/src/components/Wizard/WizardFooter.tsx index bd4596dc477..58fcc0cd81c 100644 --- a/packages/react-core/src/components/Wizard/WizardFooter.tsx +++ b/packages/react-core/src/components/Wizard/WizardFooter.tsx @@ -5,7 +5,7 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import { Button, ButtonVariant } from '../Button'; import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types'; - +import { ActionList, ActionListGroup, ActionListItem } from '../ActionList'; /** * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step. */ @@ -74,29 +74,37 @@ const InternalWizardFooter = ({ cancelButtonProps }: Omit<WizardFooterProps, 'activeStep'>) => ( <WizardFooterWrapper> - {!isBackHidden && ( - <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}> - {backButtonText} - </Button> - )} - - <Button - variant={ButtonVariant.primary} - type="submit" - onClick={onNext} - isDisabled={isNextDisabled} - {...nextButtonProps} - > - {nextButtonText} - </Button> - - {!isCancelHidden && ( - <div className={styles.wizardFooterCancel}> - <Button variant={ButtonVariant.link} onClick={onClose} {...cancelButtonProps}> - {cancelButtonText} - </Button> - </div> - )} + <ActionList> + <ActionListGroup> + {!isBackHidden && ( + <ActionListItem> + <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}> + {backButtonText} + </Button> + </ActionListItem> + )} + <ActionListItem> + <Button + variant={ButtonVariant.primary} + type="submit" + onClick={onNext} + isDisabled={isNextDisabled} + {...nextButtonProps} + > + {nextButtonText} + </Button> + </ActionListItem> + </ActionListGroup> + {!isCancelHidden && ( + <ActionListGroup> + <ActionListItem> + <Button variant={ButtonVariant.link} onClick={onClose} {...cancelButtonProps}> + {cancelButtonText} + </Button> + </ActionListItem> + </ActionListGroup> + )} + </ActionList> </WizardFooterWrapper> ); diff --git a/packages/react-core/src/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/components/Wizard/WizardNavItem.tsx index 065ab6235e2..c48c2c03cf1 100644 --- a/packages/react-core/src/components/Wizard/WizardNavItem.tsx +++ b/packages/react-core/src/components/Wizard/WizardNavItem.tsx @@ -7,8 +7,6 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam import { OUIAProps, useOUIAProps } from '../../helpers'; import { WizardNavItemStatus } from './types'; -import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm'; -import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100'; export interface WizardNavItemProps extends OUIAProps { /** Can nest a WizardNav component for substeps */ @@ -105,7 +103,8 @@ export const WizardNavItem = ({ className={css( styles.wizardNavLink, isCurrent && styles.modifiers.current, - isDisabled && styles.modifiers.disabled + isDisabled && styles.modifiers.disabled, + status === WizardNavItemStatus.Error && styles.modifiers.danger )} aria-disabled={isDisabled ? true : null} aria-current={isCurrent && !children ? 'step' : false} @@ -113,26 +112,25 @@ export const WizardNavItem = ({ {...(ariaLabel && { 'aria-label': ariaLabel })} {...ouiaProps} > - {isExpandable ? ( - <> - <span className={css(styles.wizardNavLinkText)}>{content}</span> - <span className={css(styles.wizardNavLinkToggle)}> - <span className={css(styles.wizardNavLinkToggleIcon)}> - <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} /> - </span> - </span> - </> - ) : ( - <> - {content} - {/* TODO, patternfly/patternfly#5142 */} - {status === WizardNavItemStatus.Error && ( - <span style={{ marginLeft: globalSpacerSm.var }}> - <ExclamationCircleIcon color={globalDangerColor100.var} /> - </span> - )} - </> + {status === WizardNavItemStatus.Error && ( + <span className={css(styles.wizardNavLinkStatusIcon)}> + <ExclamationCircleIcon /> + </span> )} + <span className={css(styles.wizardNavLinkMain)}> + {isExpandable ? ( + <> + <span className={css(styles.wizardNavLinkText)}>{content}</span> + <span className={css(styles.wizardNavLinkToggle)}> + <span className={css(styles.wizardNavLinkToggleIcon)}> + <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} /> + </span> + </span> + </> + ) : ( + <>{content}</> + )} + </span> </NavItemComponent> {children} </li> diff --git a/packages/react-core/src/components/Wizard/WizardToggle.tsx b/packages/react-core/src/components/Wizard/WizardToggle.tsx index cf815ffbb08..aa7843e67d3 100644 --- a/packages/react-core/src/components/Wizard/WizardToggle.tsx +++ b/packages/react-core/src/components/Wizard/WizardToggle.tsx @@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import { KeyTypes } from '../../helpers/constants'; import { WizardStepType, isWizardSubStep } from './types'; @@ -45,6 +46,7 @@ export const WizardToggle = ({ const parentStep = isActiveSubStep && steps.find((step) => step.id === activeStep.parentId); const nonSubSteps = steps.filter((step) => !isWizardSubStep(step)); const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1; + const isActiveStepStatus = activeStep.status; const handleKeyClicks = React.useCallback( (event: KeyboardEvent): void => { @@ -90,8 +92,14 @@ export const WizardToggle = ({ aria-expanded={isNavExpanded} > <span className={css(styles.wizardToggleList)}> - <span className={css(styles.wizardToggleListItem)}> - <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>{' '} + <span className={css(styles.wizardToggleListItem, isActiveStepStatus === 'error' && styles.modifiers.danger)}> + {isActiveStepStatus === 'error' ? ( + <span className={css(styles.wizardToggleStatusIcon)}> + <ExclamationCircleIcon /> + </span> + ) : ( + <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span> + )}{' '} {parentStep?.name || activeStep?.name} {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />} </span> diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md index a8ca1d96ecb..2bb6100d617 100644 --- a/packages/react-core/src/demos/CardDemos.md +++ b/packages/react-core/src/demos/CardDemos.md @@ -7,7 +7,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon'; -import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons'; +import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, BellIcon } from '@patternfly/react-icons'; import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts'; import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; @@ -15,10 +15,7 @@ import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_ import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100'; import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min'; -import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100'; -import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100'; -import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100'; -import global_Color_200 from '@patternfly/react-tokens/dist/esm/global_Color_200'; +import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/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/CardAggregateStatus.tsx b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx index abf7e40732f..f0f8e270963 100644 --- a/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx +++ b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx @@ -10,15 +10,12 @@ import { Gallery, Grid, GridItem, - Stack + Stack, + Icon } from '@patternfly/react-core'; 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 TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon'; -import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100'; -import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100'; -import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100'; import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min'; interface ContentType { @@ -46,7 +43,11 @@ const cardData: CardData = { title: '5 Clusters', content: [ { - icon: <CheckCircleIcon color={global_success_color_100.var} /> + icon: ( + <Icon status="success"> + <CheckCircleIcon /> + </Icon> + ) } ], layout: 'icon' @@ -55,7 +56,11 @@ const cardData: CardData = { title: '15 Clusters', content: [ { - icon: <ExclamationTriangleIcon color={global_warning_color_100.var} /> + icon: ( + <Icon status="warning"> + <ExclamationTriangleIcon /> + </Icon> + ) } ], layout: 'icon' @@ -64,7 +69,11 @@ const cardData: CardData = { title: '3 Clusters', content: [ { - icon: <TimesCircleIcon color={global_danger_color_100.var} /> + icon: ( + <Icon status="danger"> + <ExclamationCircleIcon /> + </Icon> + ) } ], layout: 'icon' @@ -75,11 +84,19 @@ const cardData: CardData = { title: '10 Hosts', content: [ { - icon: <ExclamationCircleIcon color={global_success_color_100.var} />, + icon: ( + <Icon status="success"> + <CheckCircleIcon /> + </Icon> + ), count: 2 }, { - icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />, + icon: ( + <Icon status="warning"> + <ExclamationTriangleIcon /> + </Icon> + ), count: 1 } ], @@ -89,11 +106,19 @@ const cardData: CardData = { title: '50 Hosts', content: [ { - icon: <CheckCircleIcon color={global_success_color_100.var} />, + icon: ( + <Icon status="success"> + <CheckCircleIcon /> + </Icon> + ), count: 5 }, { - icon: <TimesCircleIcon color={global_danger_color_100.var} />, + icon: ( + <Icon status="danger"> + <ExclamationCircleIcon /> + </Icon> + ), count: 12 } ], @@ -103,11 +128,19 @@ const cardData: CardData = { title: '12 Hosts', content: [ { - icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />, + icon: ( + <Icon status="warning"> + <ExclamationTriangleIcon /> + </Icon> + ), count: 3 }, { - icon: <TimesCircleIcon color={global_danger_color_100.var} />, + icon: ( + <Icon status="danger"> + <ExclamationCircleIcon /> + </Icon> + ), count: 7 } ], @@ -119,12 +152,20 @@ const cardData: CardData = { title: '13 Hosts', content: [ { - icon: <TimesCircleIcon color={global_danger_color_100.var} />, + icon: ( + <Icon status="danger"> + <ExclamationCircleIcon /> + </Icon> + ), status: '2 errors', subtitle: 'subtitle' }, { - icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />, + icon: ( + <Icon status="warning"> + <ExclamationTriangleIcon /> + </Icon> + ), status: '1 warning', subtitle: 'subtitle' } @@ -135,12 +176,20 @@ const cardData: CardData = { title: '3 Hosts', content: [ { - icon: <CheckCircleIcon color={global_success_color_100.var} />, + icon: ( + <Icon status="success"> + <CheckCircleIcon /> + </Icon> + ), status: '2 successes', subtitle: 'subtitle' }, { - icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />, + icon: ( + <Icon status="warning"> + <ExclamationTriangleIcon /> + </Icon> + ), status: '3 warnings', subtitle: 'subtitle' } @@ -151,12 +200,20 @@ const cardData: CardData = { title: '50 Hosts', content: [ { - icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />, + icon: ( + <Icon status="warning"> + <ExclamationTriangleIcon /> + </Icon> + ), status: '7 warnings', subtitle: 'subtitle' }, { - icon: <TimesCircleIcon color={global_danger_color_100.var} />, + icon: ( + <Icon status="danger"> + <ExclamationCircleIcon /> + </Icon> + ), status: '1 error', subtitle: 'subtitle' } diff --git a/packages/react-core/src/demos/examples/Card/CardStatus.tsx b/packages/react-core/src/demos/examples/Card/CardStatus.tsx index 05a6ffa0cf2..867478f7bd0 100644 --- a/packages/react-core/src/demos/examples/Card/CardStatus.tsx +++ b/packages/react-core/src/demos/examples/Card/CardStatus.tsx @@ -19,16 +19,15 @@ import { NotificationDrawerListItemBody, NotificationDrawerListItemHeader, Popover, - Title + Title, + Icon } from '@patternfly/react-core'; import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; 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_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100'; -import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100'; -import global_Color_200 from '@patternfly/react-tokens/dist/esm/global_Color_200'; +import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle'; export const CardStatus: React.FunctionComponent = () => { const [drawerExpanded, setDrawerExpanded] = React.useState(false); @@ -140,7 +139,9 @@ export const CardStatus: React.FunctionComponent = () => { <GridItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> <FlexItem> - <CheckCircleIcon color={global_success_color_100.var} /> + <Icon status="success"> + <CheckCircleIcon /> + </Icon> </FlexItem> <FlexItem> <span>Cluster</span> @@ -150,7 +151,9 @@ export const CardStatus: React.FunctionComponent = () => { <GridItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> <FlexItem> - <ExclamationCircleIcon color={global_danger_color_100.var} /> + <Icon status="danger"> + <ExclamationCircleIcon /> + </Icon> </FlexItem> <FlexItem> <Popover headerContent="Control Panel Status" bodyContent={popoverBodyContent} minWidth="400px"> @@ -164,14 +167,16 @@ export const CardStatus: React.FunctionComponent = () => { <GridItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> <FlexItem> - <ExclamationCircleIcon color={global_danger_color_100.var} /> + <Icon status="danger"> + <ExclamationCircleIcon /> + </Icon> </FlexItem> <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}> <FlexItem> <a href="#">Operators</a> </FlexItem> <FlexItem> - <span style={{ color: global_Color_200.var }}>1 degraded</span> + <span style={{ color: global_text_color_subtle.var }}>1 degraded</span> </FlexItem> </Flex> </Flex> @@ -179,14 +184,16 @@ export const CardStatus: React.FunctionComponent = () => { <GridItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> <FlexItem> - <CheckCircleIcon color={global_success_color_100.var} /> + <Icon status="success"> + <CheckCircleIcon /> + </Icon> </FlexItem> <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}> <FlexItem> <a href="#">Image Vulnerabilities</a> </FlexItem> <FlexItem> - <span style={{ color: global_Color_200.var }}>0 vulnerabilities</span> + <span style={{ color: global_text_color_subtle.var }}>0 vulnerabilities</span> </FlexItem> </Flex> </Flex> diff --git a/packages/react-core/src/deprecated/components/Wizard/WizardFooterInternal.tsx b/packages/react-core/src/deprecated/components/Wizard/WizardFooterInternal.tsx index b7dbcc328e1..cf79c6c92a0 100644 --- a/packages/react-core/src/deprecated/components/Wizard/WizardFooterInternal.tsx +++ b/packages/react-core/src/deprecated/components/Wizard/WizardFooterInternal.tsx @@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import { Button, ButtonVariant } from '../../../components/Button'; import { WizardStep } from './Wizard'; - +import { ActionList, ActionListGroup, ActionListItem } from '../../../components/ActionList'; export interface WizardFooterInternalProps { onNext: any; onBack: any; @@ -28,21 +28,31 @@ export const WizardFooterInternal: React.FunctionComponent<WizardFooterInternalP cancelButtonText }: WizardFooterInternalProps) => ( <footer className={css(styles.wizardFooter)}> - {!activeStep.hideBackButton && ( - <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={firstStep}> - {backButtonText} - </Button> - )} - <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}> - {nextButtonText} - </Button> - {!activeStep.hideCancelButton && ( - <div className={styles.wizardFooterCancel}> - <Button variant={ButtonVariant.link} onClick={onClose}> - {cancelButtonText} - </Button> - </div> - )} + <ActionList> + <ActionListGroup> + {!activeStep.hideBackButton && ( + <ActionListItem> + <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={firstStep}> + {backButtonText} + </Button> + </ActionListItem> + )} + <ActionListItem> + <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}> + {nextButtonText} + </Button> + </ActionListItem> + </ActionListGroup> + {!activeStep.hideCancelButton && ( + <ActionListGroup> + <ActionListItem> + <Button variant={ButtonVariant.link} onClick={onClose}> + {cancelButtonText} + </Button> + </ActionListItem> + </ActionListGroup> + )} + </ActionList> </footer> ); WizardFooterInternal.displayName = 'WizardFooterInternal'; diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap index 30435860a91..40ec492513b 100644 --- a/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap +++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap @@ -5,46 +5,66 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = ` <footer class="pf-v6-c-wizard__footer" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-secondary" - data-ouia-component-id="OUIA-Generated-Button-secondary-1" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - disabled="" - type="button" - > - <div> - ReactNode - </div> - </button> - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-primary" - data-ouia-component-id="OUIA-Generated-Button-primary-1" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="submit" - > - <div> - ReactNode - </div> - </button> <div - class="pf-v6-c-wizard__footer-cancel" + class="pf-v6-c-action-list" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-link" - data-ouia-component-id="OUIA-Generated-Button-link-1" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="button" + <div + class="pf-v6-c-action-list__group" > - <div> - ReactNode + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-secondary" + data-ouia-component-id="OUIA-Generated-Button-secondary-1" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + disabled="" + type="button" + > + <div> + ReactNode + </div> + </button> + </div> + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-primary" + data-ouia-component-id="OUIA-Generated-Button-primary-1" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="submit" + > + <div> + ReactNode + </div> + </button> </div> - </button> + </div> + <div + class="pf-v6-c-action-list__group" + > + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-link" + data-ouia-component-id="OUIA-Generated-Button-link-1" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="button" + > + <div> + ReactNode + </div> + </button> + </div> + </div> </div> </footer> </DocumentFragment> diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap index 951ccf1a7d2..10292a902ab 100644 --- a/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap +++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap @@ -238,40 +238,60 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = ` <footer class="pf-v6-c-wizard__footer" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-secondary" - data-ouia-component-id="OUIA-Generated-Button-secondary-2" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - disabled="" - type="button" - > - Back - </button> - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-primary" - data-ouia-component-id="OUIA-Generated-Button-primary-2" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="submit" - > - Next - </button> <div - class="pf-v6-c-wizard__footer-cancel" + class="pf-v6-c-action-list" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-link" - data-ouia-component-id="OUIA-Generated-Button-link-2" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="button" + <div + class="pf-v6-c-action-list__group" > - Cancel - </button> + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-secondary" + data-ouia-component-id="OUIA-Generated-Button-secondary-2" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + disabled="" + type="button" + > + Back + </button> + </div> + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-primary" + data-ouia-component-id="OUIA-Generated-Button-primary-2" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="submit" + > + Next + </button> + </div> + </div> + <div + class="pf-v6-c-action-list__group" + > + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-link" + data-ouia-component-id="OUIA-Generated-Button-link-2" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="button" + > + Cancel + </button> + </div> + </div> </div> </footer> </div> @@ -497,40 +517,60 @@ exports[`Wizard Wizard should match snapshot 1`] = ` <footer class="pf-v6-c-wizard__footer" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-secondary" - data-ouia-component-id="OUIA-Generated-Button-secondary-1" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - disabled="" - type="button" - > - Back - </button> - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-primary" - data-ouia-component-id="OUIA-Generated-Button-primary-1" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="submit" - > - Next - </button> <div - class="pf-v6-c-wizard__footer-cancel" + class="pf-v6-c-action-list" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-link" - data-ouia-component-id="OUIA-Generated-Button-link-1" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="button" + <div + class="pf-v6-c-action-list__group" > - Cancel - </button> + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-secondary" + data-ouia-component-id="OUIA-Generated-Button-secondary-1" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + disabled="" + type="button" + > + Back + </button> + </div> + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-primary" + data-ouia-component-id="OUIA-Generated-Button-primary-1" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="submit" + > + Next + </button> + </div> + </div> + <div + class="pf-v6-c-action-list__group" + > + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-link" + data-ouia-component-id="OUIA-Generated-Button-link-1" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="button" + > + Cancel + </button> + </div> + </div> </div> </footer> </div> @@ -628,40 +668,60 @@ exports[`Wizard bare wiz 1`] = ` <footer class="pf-v6-c-wizard__footer" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-secondary" - data-ouia-component-id="OUIA-Generated-Button-secondary-3" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - disabled="" - type="button" - > - Back - </button> - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-primary" - data-ouia-component-id="OUIA-Generated-Button-primary-3" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="submit" - > - Next - </button> <div - class="pf-v6-c-wizard__footer-cancel" + class="pf-v6-c-action-list" > - <button - aria-disabled="false" - class="pf-v6-c-button pf-m-link" - data-ouia-component-id="OUIA-Generated-Button-link-3" - data-ouia-component-type="PF6/Button" - data-ouia-safe="true" - type="button" + <div + class="pf-v6-c-action-list__group" + > + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-secondary" + data-ouia-component-id="OUIA-Generated-Button-secondary-3" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + disabled="" + type="button" + > + Back + </button> + </div> + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-primary" + data-ouia-component-id="OUIA-Generated-Button-primary-3" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="submit" + > + Next + </button> + </div> + </div> + <div + class="pf-v6-c-action-list__group" > - Cancel - </button> + <div + class="pf-v6-c-action-list__item" + > + <button + aria-disabled="false" + class="pf-v6-c-button pf-m-link" + data-ouia-component-id="OUIA-Generated-Button-link-3" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" + type="button" + > + Cancel + </button> + </div> + </div> </div> </footer> </div> diff --git a/packages/react-core/src/helpers/constants.ts b/packages/react-core/src/helpers/constants.ts index b12b6f01e88..f6c9538bd31 100644 --- a/packages/react-core/src/helpers/constants.ts +++ b/packages/react-core/src/helpers/constants.ts @@ -4,11 +4,11 @@ import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpo 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_height_breakpoint_sm'; -import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_md'; -import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_lg'; -import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_xl'; -import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_height_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 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-docs/package.json b/packages/react-docs/package.json index a80aa7b0078..24638c996d0 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -23,7 +23,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "6.0.0-alpha.117", + "@patternfly/patternfly": "6.0.0-alpha.135", "@patternfly/react-charts": "^8.0.0-alpha.20", "@patternfly/react-code-editor": "^6.0.0-alpha.57", "@patternfly/react-core": "^6.0.0-alpha.57", @@ -35,7 +35,7 @@ "@patternfly/react-tokens": "^6.0.0-alpha.20" }, "devDependencies": { - "@patternfly/documentation-framework": "^6.0.0-alpha.21", + "@patternfly/documentation-framework": "^6.0.0-alpha.28", "@patternfly/patternfly-a11y": "4.3.1", "rimraf": "^2.6.3", "shx": "^0.3.4" diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js index d5fa2e5bb4e..b3844cadfc9 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, Text, Grid, GridItem, PageSection } from '@patternfly/react-core'; import spacerMd from '@patternfly/react-tokens/dist/esm/global_spacer_md'; -import labelFontSize from '@patternfly/react-tokens/dist/esm/global_FontSize_sm'; +import labelFontSize from '@patternfly/react-tokens/dist/esm/global_font_size_sm'; import * as IconsModule from '@patternfly/react-icons/dist/esm'; const iconsPage = () => { diff --git a/packages/react-docs/patternfly-docs/patternfly-docs.css.js b/packages/react-docs/patternfly-docs/patternfly-docs.css.js index 642562cc07e..350e4f364eb 100644 --- a/packages/react-docs/patternfly-docs/patternfly-docs.css.js +++ b/packages/react-docs/patternfly-docs/patternfly-docs.css.js @@ -19,6 +19,3 @@ import '@patternfly/patternfly/patternfly-addons.css'; // Charts import '@patternfly/patternfly/patternfly-charts.css'; - -// Dark theme -import '@patternfly/patternfly/patternfly-charts-theme-dark.css'; diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 5e4cbd308b5..a352316a480 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -33,7 +33,7 @@ "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0", - "@patternfly/patternfly": "6.0.0-alpha.117", + "@patternfly/patternfly": "6.0.0-alpha.135", "fs-extra": "^11.1.1", "glob": "^7.1.2", "rimraf": "^2.6.2", diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDraggableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDraggableDemo.tsx index 34917cc3d7c..3899e55cba2 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDraggableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDraggableDemo.tsx @@ -6,11 +6,9 @@ import { DataListItemRow, DataListControl, DataListDragButton, - DataListItemCells, - DragDrop, - Draggable, - Droppable + DataListItemCells } from '@patternfly/react-core'; +import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated'; interface ItemType { id: string; @@ -110,3 +108,4 @@ class DataListDraggableDemo extends React.Component { } DataListDraggableDemo.displayName = 'DataListDraggableDemo'; +export { DataListDraggableDemo }; 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 8c1e334283f..c7c0b6c5347 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 @@ -29,7 +29,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_primary_color_100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100'; +import global_color_brand_default from '@patternfly/react-tokens/dist/esm/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_primary_color_100.var}` + borderLeft: `3px solid ${global_color_brand_default.var}` }; return ( <Tr diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx index b55deb36b0d..da99ea50450 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx @@ -5,7 +5,7 @@ import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-tab import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; /* eslint-disable camelcase */ -import global_primary_color_100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100'; +import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default'; interface ITableRowWrapperDemoState { rows: IRow[]; @@ -35,7 +35,7 @@ export class TableRowWrapperDemo extends Component<TableProps, ITableRowWrapperD const isExpanded = rest.row ? rest.row.isExpanded : false; const isOddRow = (rowProps.rowIndex + 1) % 2; const customStyle = { - borderLeft: `3px solid ${global_primary_color_100.var}` + borderLeft: `3px solid ${global_color_brand_default.var}` }; return ( <tr diff --git a/packages/react-integration/demo-app-ts/src/index.tsx b/packages/react-integration/demo-app-ts/src/index.tsx index b7535b63c82..bee50c91e9b 100755 --- a/packages/react-integration/demo-app-ts/src/index.tsx +++ b/packages/react-integration/demo-app-ts/src/index.tsx @@ -3,7 +3,6 @@ import React, { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; import App from './App'; -import '@patternfly/patternfly/patternfly-theme-dark.css'; const container = document.getElementById('root'); const root = createRoot(container); diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index d696fe624e6..a19934256ef 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -19,7 +19,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.117", + "@patternfly/patternfly": "6.0.0-alpha.135", "camel-case": "^3.0.0", "css": "^2.2.3", "fs-extra": "^11.1.1", diff --git a/packages/react-table/src/components/Table/Td.tsx b/packages/react-table/src/components/Table/Td.tsx index cfdbd935dc3..adc5096a750 100644 --- a/packages/react-table/src/components/Table/Td.tsx +++ b/packages/react-table/src/components/Table/Td.tsx @@ -30,8 +30,8 @@ import { TdTreeRowType } from './base/types'; import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth'; -import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left'; -import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right'; +import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart'; +import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd'; export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> { /** @@ -294,8 +294,8 @@ const TdBase: React.FunctionComponent<TdProps> = ({ {...(isStickyColumn && { style: { [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, - [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0, - [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0, + [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0, + [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0, ...props.style } as React.CSSProperties })} diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx index 5729f59c840..2e5dc6e66ce 100644 --- a/packages/react-table/src/components/Table/Th.tsx +++ b/packages/react-table/src/components/Table/Th.tsx @@ -10,8 +10,8 @@ import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/component import { BaseCellProps } from './Table'; import { IFormatterValueType, IColumn } from './TableTypes'; import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth'; -import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left'; -import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right'; +import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart'; +import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd'; export interface ThProps extends BaseCellProps, @@ -224,8 +224,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({ {...(isStickyColumn && { style: { [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, - [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0, - [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0, + [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0, + [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0, ...props.style } as React.CSSProperties })} diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index a960bbc1efa..bdad131ddfa 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -56,7 +56,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; import textStyles from '@patternfly/react-styles/css/utilities/Text/text'; -import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150'; +import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default'; ## Table examples @@ -71,6 +71,7 @@ Some general notes: ### Basic ```ts file="TableBasic.tsx" + ``` ### Custom row wrapper, header tooltips & popovers @@ -82,6 +83,7 @@ Some general notes: To add a header tooltip or popover to `Th`, pass a `ThInfoType` object via the `info` prop. ```ts file="TableMisc.tsx" + ``` ### Sortable & wrapping headers @@ -103,6 +105,7 @@ type OnSort = ( The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the `Sortable - responsive` demo in the `React demos` tab. ```ts file="TableSortable.tsx" + ``` ### Sortable - custom control @@ -110,6 +113,7 @@ The built in display for sorting is not fully responsive, as the column headers Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `Sortable - responsive` demo in the `React demos` tab. ```ts file="TableSortableCustom.tsx" + ``` ### Selectable with checkbox @@ -140,6 +144,7 @@ type OnSelect = ( checking checkboxes will check intermediate rows' checkboxes. ```ts file="TableSelectable.tsx" + ``` ### Selectable radio input @@ -147,6 +152,7 @@ checking checkboxes will check intermediate rows' checkboxes. Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props. ```ts file="TableSelectableRadio.tsx" + ``` ### Row click handler, clickable rows @@ -154,6 +160,7 @@ Similarly to the selectable example above, the radio buttons use the first colum This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view. ```ts file="TableClickable.tsx" + ``` ### Actions @@ -165,6 +172,7 @@ To make a cell an action cell, render an `ActionsColumn` component inside a row' If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended. ```ts file="TableActions.tsx" + ``` ### Actions Overflow @@ -172,6 +180,7 @@ If actions menus are getting clipped by other items on the page, such as sticky Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space. ```ts file="TableActionsOverflow.tsx" + ``` ### Expandable @@ -197,6 +206,7 @@ type OnCollapse = ( Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set. ```ts file="TableExpandable.tsx" + ``` ### Compound expandable @@ -221,16 +231,19 @@ export type OnExpand = ( ``` ```ts file="TableCompoundExpandable.tsx" + ``` ### Cell width, breakpoint modifiers ```ts file="TableCellWidth.tsx" + ``` ### Controlling text ```ts file="TableControllingText.tsx" + ``` ### Modifiers with table text @@ -238,11 +251,13 @@ export type OnExpand = ( If the "wrapModifier" property is set to "truncate", it's needed to ensure that the corresponding tooltip can be opened using both keyboard and screen reader. Since this particular Td element is generic and doesn't have any predefined decorators, the focus management required to trigger the tooltip needs to be handled manually by defining and manipulating the requisite props. ```ts file="TableTextModifiers.tsx" + ``` ### Empty state ```ts file="TableEmptyState.tsx" + ``` ### Favoritable (implemented with sortable) @@ -265,6 +280,7 @@ type OnFavorite = ( To make a favoritable column sortable, pass a `ThSortType` object to the favoritable column's `Th` with `isFavorites` set to true. ```ts file="TableFavoritable.tsx" + ``` ### Tree table @@ -298,6 +314,7 @@ aria-posinset, and aria-setsize as violations. This is an intentional choice at the voice over technologies will recognize the flat table structure as a tree. ```ts file="TableTree.tsx" + ``` ### Flat tree table with no inset @@ -305,6 +322,7 @@ the voice over technologies will recognize the flat table structure as a tree. To remove the inset used to leave space for the expand/collapse toggle in a flat tree table, use the `hasNoInset` prop on the `Table` component. ```ts file="TableTreeNoInset.tsx" + ``` ### Draggable row table @@ -318,6 +336,7 @@ To make a row draggable: 5. The draggable `Td` in each row needs a `TdDraggableType` object passed to its `draggable` prop. ```ts isBeta file="TableDraggable.tsx" + ``` ### Sticky table modifiers @@ -334,7 +353,7 @@ There are a few ways this can be handled: ### Sticky column -To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: +To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: - `isStickyColumn` - `hasRightBorder` for a left-aligned sticky column, or `hasLeftBorder` for a right-aligned sticky column. @@ -342,6 +361,7 @@ To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the fo To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property. For multiple sticky columns, use the `stickyLeftOffset` and `stickyRightOffset` properties for additional left or right sticky columns. ```ts file="TableStickyColumn.tsx" + ``` ### Multiple left-aligned sticky columns @@ -351,11 +371,12 @@ To make multiple left-aligned columns sticky: - wrap `Table` with `InnerScrollContainer` - add `isStickyColumn` to all columns that should be sticky - add `hasRightBorder` to the rightmost sticky column -- add `stickyLeftOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the previous sticky columns. The leftmost sticky column should have a value of `0`, which is the default of this property. +- add `stickyLeftOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the previous sticky columns. The leftmost sticky column should have a value of `0`, which is the default of this property. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. ```ts file="TableMultipleStickyColumns.tsx" + ``` ### Multiple right-aligned sticky columns @@ -365,11 +386,12 @@ To make multiple right-aligned columns sticky: - wrap `Table` with `InnerScrollContainer` - add `isStickyColumn` to all columns that should be sticky - add `hasLeftBorder` to the leftmost sticky column -- add `stickyRightOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the next sticky columns. The rightmost sticky column should have a value of `0`, which is the default of this property. +- add `stickyRightOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the next sticky columns. The rightmost sticky column should have a value of `0`, which is the default of this property. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. ```ts file="TableRightStickyColumn.tsx" + ``` ### Sticky columns and header @@ -377,6 +399,7 @@ To prevent the default text wrapping behavior and allow horizontal scrolling, al To maintain proper sticky behavior across sticky columns and header, `Table` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`. ```ts file="TableStickyColumnsAndHeader.tsx" + ``` ### Nested column headers @@ -393,21 +416,25 @@ The first `Tr` represents the top level of columns, and each must pass either `r The second `Tr` represents the second level of sub columns. The `Th` in this row each should pass `isSubHeader`, and the last sub column of a column should also pass `hasRightBorder`. ```ts file="TableNestedHeaders.tsx" + ``` ### Nested column headers and expandable rows ```ts file="TableNestedExpandable.tsx" + ``` ### Expandable with nested table ```ts file="TableNestedTableExpandable.tsx" + ``` ### Nested sticky header ```ts file="TableNestedStickyHeader.tsx" + ``` ### Striped @@ -415,6 +442,7 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row To apply striping to a basic table, add the `isStriped` property to `Table`. ```ts file="TableStriped.tsx" + ``` ### Striped expandable @@ -422,6 +450,7 @@ To apply striping to a basic table, add the `isStriped` property to `Table`. To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`. ```ts file="TableStripedExpandable.tsx" + ``` ### Striped multiple tobdy @@ -429,6 +458,7 @@ To apply striping to an expandable table, add the `isStriped` and `isExpandable` When there are multiple `Tbody` components within a table, a more granular application of striping may be controlled by adding either the `isEvenStriped` or `isOddStriped` properties to `Tbody`. These properties will stripe even or odd rows within that `Tbody` respectively. ```ts file="TableStripedMultipleTbody.tsx" + ``` ### Striped tr @@ -436,4 +466,5 @@ When there are multiple `Tbody` components within a table, a more granular appli To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `Table`. ```ts file="TableStripedTr.tsx" + ``` diff --git a/packages/react-table/src/components/Table/examples/TableMisc.tsx b/packages/react-table/src/components/Table/examples/TableMisc.tsx index 383d54887df..2ee4b5a8849 100644 --- a/packages/react-table/src/components/Table/examples/TableMisc.tsx +++ b/packages/react-table/src/components/Table/examples/TableMisc.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; /* eslint-disable camelcase */ -import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150'; +import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default'; interface Repository { name: string; @@ -67,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => { {repositories.map((repo, rowIndex) => { const isOddRow = (rowIndex + 1) % 2; const customStyle = { - backgroundColor: global_BackgroundColor_150.var + backgroundColor: 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/components/Table/utils/transformers.test.tsx b/packages/react-table/src/components/Table/utils/transformers.test.tsx index 4161a6f5c80..1b63e92e37b 100644 --- a/packages/react-table/src/components/Table/utils/transformers.test.tsx +++ b/packages/react-table/src/components/Table/utils/transformers.test.tsx @@ -30,7 +30,7 @@ import { } from '../TableTypes'; import { css } from '@patternfly/react-styles'; import tableStyles from '@patternfly/react-styles/css/components/Table/table'; -import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; +import menuStyles from '@patternfly/react-styles/css/components/Menu/menu'; const testCellActions = async ({ actions, @@ -76,9 +76,7 @@ const testCellActions = async ({ await user.click(screen.getAllByRole('button')[0]); await waitFor(() => // eslint-disable-next-line testing-library/no-container - expect(container.querySelectorAll(`.${dropdownStyles.dropdownMenu} li button`)).toHaveLength( - expectDisabled ? 0 : 1 - ) + expect(container.querySelectorAll(`.${menuStyles.menu} li button`)).toHaveLength(expectDisabled ? 0 : 1) ); } }; diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index ed07085536d..65f99470205 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -57,7 +57,6 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; -import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; diff --git a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx index 303e92d9616..82ec0c500d3 100644 --- a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx +++ b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx @@ -11,7 +11,6 @@ import { PageSection } from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200'; import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper'; export const TableEmptyStateError: React.FunctionComponent = () => ( @@ -32,10 +31,10 @@ export const TableEmptyStateError: React.FunctionComponent = () => ( <Tr> <Td colSpan={8}> <Bullseye> - <EmptyState variant={EmptyStateVariant.sm}> + <EmptyState variant={EmptyStateVariant.sm} titleText=""> <EmptyStateHeader titleText="Unable to connect" - icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />} + icon={<EmptyStateIcon icon={ExclamationCircleIcon} />} headingLevel="h2" /> <EmptyStateBody> 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 8adf2f079d1..452e3f11c60 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_primary_color_100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100'; +import global_color_brand_default from '@patternfly/react-tokens/dist/esm/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_primary_color_100.var}` + borderLeft: `3px solid ${global_color_brand_default.var}` }; return ( <tr diff --git a/packages/react-table/src/deprecated/components/Table/examples/Table.md b/packages/react-table/src/deprecated/components/Table/examples/Table.md index 82f6585a033..cae05f62b2f 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/Table.md +++ b/packages/react-table/src/deprecated/components/Table/examples/Table.md @@ -21,19 +21,17 @@ import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; -import { SelectOption as SelectOptionDeprecated } from '@patternfly/react-core/deprecated'; -import { - Select as NewSelect, - SelectGroup as NewSelectGroup, - SelectList as NewSelectList, - SelectOption as NewSelectOption, +import { +Select as NewSelect, +SelectGroup as NewSelectGroup, +SelectList as NewSelectList, +SelectOption as NewSelectOption, } from '@patternfly/react-core/dist/esm/components/Select'; - import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import global_primary_color_100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100'; +import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default'; ## Table Columns @@ -122,6 +120,7 @@ interface IRowCell { ### Basic ```ts file="LegacyTableBasic.tsx" + ``` ### Custom row wrapper @@ -152,6 +151,7 @@ interface RowWrapperProps { ``` ```ts file="LegacyTableMisc.tsx" + ``` ### Sortable & wrapping column headers @@ -169,6 +169,7 @@ Note: If you want to add a tooltip/popover to a sortable header, in the `transfo The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. The example below showcases how sorting may have a custom control display that can be used for small screen sizes. ```ts file="LegacyTableSortable.tsx" + ``` ### Sortable - custom control @@ -176,6 +177,7 @@ The built in display for sorting is not fully responsive, as the column headers Sorting a table may also be controlled with a toolbar. This toolbar item may also be hidden at large screen sizes and only displayed when the screen size is small to support responsive tables. ```ts file="LegacyTableSortableCustom.tsx" + ``` ### Selectable with checkbox @@ -196,6 +198,7 @@ of using `td` elements, the cells in that column use `th` elements. checking checkboxes will check intermediate rows' checkboxes. ```ts file="LegacyTableSelectable.tsx" + ``` ### Selectable radio input @@ -206,6 +209,7 @@ To enable row radio selection, set the `onSelect` callback prop on the Table, an To disable selection for a row, set `disableSelection: true` on the row definition. ```ts file="LegacyTableSelectableRadio.tsx" + ``` ### Clickable rows, selectable rows, and header cell tooltips/popovers @@ -213,6 +217,7 @@ To disable selection for a row, set `disableSelection: true` on the row definiti This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view. ```ts file="LegacyTableClickable.tsx" + ``` ### Actions and first cell in body rows as th @@ -222,6 +227,7 @@ To use actions you can either specify an array of actions and pass that into the If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `Table` can be passed a `actionsMenuAppendTo` prop to adjust where the actions menu is appended. ```ts file="LegacyTableActions.tsx" + ``` ### Expandable @@ -232,6 +238,7 @@ The parent row can have an `isOpen` field for managing the expanded state of the Also, pass an `onCollapse` event handler via the prop on the Table ```ts file="LegacyTableExpandable.tsx" + ``` ### Compound expandable @@ -248,26 +255,31 @@ To build a compound expandable table: 4. An `onExpand` event handler prop should be passed to the Table. ```ts file="LegacyTableCompoundExpandable.tsx" + ``` ### With width and breakpoint visibility modifiers ```ts file="LegacyTableCellWidth.tsx" + ``` ### Controlling text ```ts file="LegacyTableControllingText.tsx" + ``` ### Modifiers with table text ```ts file="LegacyTableTextModifiers.tsx" + ``` ### Empty state ```ts file="LegacyTableEmptyState.tsx" + ``` ### Editable rows @@ -303,7 +315,6 @@ Example: ```js import React from 'react'; -import { SelectOption as SelectOptionDeprecated } from '@patternfly/react-core/deprecated'; import { Table, TableHeader, @@ -313,7 +324,8 @@ import { validateCellEdits, applyCellEdits, EditableTextCell, - EditableSelectInputCell + EditableSelectInputCell, + SelectOption } from '@patternfly/react-table'; class EditableRowsTable extends React.Component { @@ -330,13 +342,13 @@ class EditableRowsTable extends React.Component { ], rows: [ { - rowEditBtnAriaLabel: idx => `Edit row ${idx}`, - rowSaveBtnAriaLabel: idx => `Save edits for row ${idx}`, - rowCancelBtnAriaLabel: idx => `Cancel edits for row ${idx}`, + rowEditBtnAriaLabel: (idx) => `Edit row ${idx}`, + rowSaveBtnAriaLabel: (idx) => `Save edits for row ${idx}`, + rowCancelBtnAriaLabel: (idx) => `Cancel edits for row ${idx}`, rowEditValidationRules: [ { name: 'required', - validator: value => value.trim() !== '', + validator: (value) => value.trim() !== '', errorText: 'This field is required' } ], @@ -400,12 +412,9 @@ class EditableRowsTable extends React.Component { onSelect={this.onSelect} isOpen={props.isSelectOpen} options={props.options.map((option, index) => ( - <SelectOptionDeprecated - key={index} - value={option.value} - id={'uniqueIdRow1Cell4Option' + index} - isPlaceholder={option.isPlaceholder} - /> + <SelectOption key={index} value={option.value} id={'uniqueIdRow1Cell4Option' + index}> + {option.value} + </SelectOption> ))} onToggle={(event, isOpen) => { this.onToggle(isOpen, rowIndex, cellIndex); @@ -419,7 +428,6 @@ class EditableRowsTable extends React.Component { isSelectOpen: props.isSelectOpen || false, selected: props.selected || ['Option 1'], options: [ - { value: 'Placeholder...', isPlaceholder: true }, { value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }, @@ -497,12 +505,9 @@ class EditableRowsTable extends React.Component { isOpen={props.isSelectOpen} options={props.options.map((option, index) => { return ( - <SelectOptionDeprecated - key={index} - value={option.value} - id={'uniqueIdRow2Cell4Option' + index} - isPlaceholder={option.isPlaceholder} - /> + <SelectOption key={index} value={option.value} id={'uniqueIdRow2Cell4Option' + index}> + {option.value} + </SelectOption> ); })} onToggle={(event, isOpen) => { @@ -537,22 +542,22 @@ class EditableRowsTable extends React.Component { rowEditValidationRules: [ { name: 'required', - validator: value => value.trim() !== '', + validator: (value) => value.trim() !== '', errorText: 'This field is required' }, { name: 'notFoo', - validator: value => value.trim().toLowerCase() !== 'foo', + validator: (value) => value.trim().toLowerCase() !== 'foo', errorText: 'Value cannot be "foo"' }, { name: 'minLength', - validator: value => value.trim().length >= 7, + validator: (value) => value.trim().length >= 7, errorText: 'Value must be at least 7 characters' }, { name: 'notXyz', - validator: value => value.trim().toLowerCase() !== 'xyz', + validator: (value) => value.trim().toLowerCase() !== 'xyz', errorText: 'Value cannot be xyz' } ], @@ -617,12 +622,9 @@ class EditableRowsTable extends React.Component { clearSelection={this.clearSelection} isOpen={props.isSelectOpen} options={props.options.map((option, index) => ( - <SelectOptionDeprecated - key={index} - value={option.value} - id={'uniqueIdRow3Cell4Option' + index} - isPlaceholder={option.isPlaceholder} - /> + <SelectOption key={index} value={option.value} id={'uniqueIdRow3Cell4Option' + index}> + {option.value} + </SelectOption> ))} onToggle={(event, isOpen) => { this.onToggle(isOpen, rowIndex, cellIndex); @@ -703,7 +705,7 @@ class EditableRowsTable extends React.Component { if (!newSelected.includes(newValue)) { newSelected.push(newValue); } else { - newSelected = newSelected.filter(el => el !== newValue); + newSelected = newSelected.filter((el) => el !== newValue); } newSelectOpen = true; break; @@ -734,7 +736,7 @@ class EditableRowsTable extends React.Component { }; this.onToggle = (isOpen, rowIndex, cellIndex) => { - console.log("isOpen", isOpen); + console.log('isOpen', isOpen); let newRows = Array.from(this.state.rows); newRows[rowIndex].cells[cellIndex].props.isSelectOpen = isOpen; this.setState({ @@ -774,6 +776,7 @@ When you also pass a sort callback through the `onSort` prop, favorites sorting If you want to exclude favorites from sorting, set `canSortFavorites={false}` on the Table. ```ts file="LegacyTableFavoritable.tsx" + ``` ### Tree table @@ -803,6 +806,7 @@ aria-posinset, and aria-setsize as violations. This is an intentional choice at the voice over technologies will recognize the flat table structure as a tree. ```ts file="LegacyTableTree.tsx" + ``` ### Striped @@ -810,6 +814,7 @@ the voice over technologies will recognize the flat table structure as a tree. To apply striping to a basic table, add the `isStriped` property to `Table`. ```ts file="LegacyTableStriped.tsx" + ``` ### Striped expandable @@ -817,6 +822,7 @@ To apply striping to a basic table, add the `isStriped` property to `Table`. To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`. ```ts file="LegacyTableStripedExpandable.tsx" + ``` ### Striped custom tr @@ -824,4 +830,5 @@ To apply striping to an expandable table, add the `isStriped` and `isExpandable` To manually control striping, use a custom row wrapper that applies the `pf-m-striped` css class for each desired row. ```ts file="LegacyTableStripedCustomTr.tsx" + ``` diff --git a/packages/react-tokens/README.md b/packages/react-tokens/README.md index 9ea27bd12f4..97ed8d86b45 100644 --- a/packages/react-tokens/README.md +++ b/packages/react-tokens/README.md @@ -1,6 +1,6 @@ # @patternfly/react-tokens -## Installation +## Installation ```bash yarn add @patternfly/react-tokens @@ -22,7 +22,7 @@ All Tokens and their corresponding values can be viewed on the ## Examples ```js -import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/esm/global_-background-color_100'; +import global_background_color_primary_default from '@patternfly/react-tokens/dist/esm/global_background_color_primary_default'; ``` #### Each token as three properties @@ -32,11 +32,11 @@ import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/esm/global - `var`: The property name wrapped in `var()`. ```js -import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/esm/global_-background-color_100'; +import global_background_color_primary_default from '@patternfly/react-tokens/dist/esm/global_background_color_primary_default'; -global_BackgroundColor_100.name === '--pf-v5-global--BackgroundColor--100'; // true -global_BackgroundColor_100.value === '#fff'; // true -global_BackgroundColor_100.var === 'var(--pf-v5-global--BackgroundColor--100)'; // true +global_background_color_primary_default.name === '--pf-t--global--background--color--primary--default'; // true +global_background_color_primary_default.value === '#fff'; // true +global_background_color_primary_default.var === 'var(--pf-t--global--background--color--primary--default)'; // true ``` [token-page]: https://react-staging.patternfly.org/developer-resources/global-css-variables diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index f3a431b216b..645c6eb262f 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.117", + "@patternfly/patternfly": "6.0.0-alpha.135", "css": "^2.2.3", "fs-extra": "^11.1.1", "glob": "^7.1.2", diff --git a/packages/react-tokens/scripts/generateTokens.js b/packages/react-tokens/scripts/generateTokens.js index 920b4438aab..2238effe25b 100644 --- a/packages/react-tokens/scripts/generateTokens.js +++ b/packages/react-tokens/scripts/generateTokens.js @@ -95,44 +95,28 @@ function generateTokens() { const cssFiles = glob .sync(['{**/{components,layouts}/**/*.css', '**/patternfly-charts.css', '**/patternfly-variables.css}'].join(','), { cwd: pfStylesDir, - ignore: ['assets/**'], + ignore: ['assets/**', '/**/_index.css'], absolute: true }) // Sort to put variables and charts at END of list so getLocalVarsMap returns correct values .sort((a, b) => (a.split(sep).length < b.split(sep).length ? 1 : -1)); // various lookup tables to resolve variables - let variables = readFileSync(require.resolve('@patternfly/patternfly/base/_variables.scss'), 'utf8'); - variables = variables.replaceAll('#{$pf-global}', `pf-${version}-global`); - const cssGlobalsToScssVarsMap = getRegexMatches(variables, /(--pf-.*):\s*(?:#{)?(\$?pf-[\w- _]+)}?;/g); - - // contains default values and mappings to colors.scss for color values const scssVariables = readFileSync( require.resolve('@patternfly/patternfly/sass-utilities/scss-variables.scss'), 'utf8' ); const scssVarsMap = getRegexMatches(scssVariables, /(\$.*):\s*([^;^!]+)/g); - // contains default values and mappings to colors.scss for color values - const scssColorVariables = readFileSync(require.resolve('@patternfly/patternfly/sass-utilities/colors.scss'), 'utf8'); - const scssColorsMap = getRegexMatches(scssColorVariables, /(\$.*):\s*([^\s]+)\s*(?:!default);/g); - - // contains default values and mappings to colors.scss for color values const cssGlobalVariablesAst = parse( readFileSync(require.resolve('@patternfly/patternfly/base/patternfly-variables.css'), 'utf8') ); - cssGlobalVariablesAst.stylesheet.rules = cssGlobalVariablesAst.stylesheet.rules.filter( (node) => !node.selectors || !node.selectors.some((item) => item.includes(`.pf-${version}-theme-dark`)) ); const cssGlobalVariablesMap = getRegexMatches(stringify(cssGlobalVariablesAst), /(--pf-[\w-]*):\s*([\w -_]+);/g); - const combinedScssVarsColorsMap = { - ...scssVarsMap, - ...scssColorsMap - }; - const getComputedCSSVarValue = (value, selector, varMap) => value.replace(/var\(([\w-]*)(,.*)?\)/g, (full, m1, m2) => { if (m1.startsWith(`--pf-${version}-global`)) { @@ -150,8 +134,8 @@ function generateTokens() { const getComputedScssVarValue = (value) => value.replace(/\$pf[^,)\s*/]*/g, (match) => { - if (combinedScssVarsColorsMap[match]) { - return combinedScssVarsColorsMap[match]; + if (scssVarsMap[match]) { + return scssVarsMap[match]; } else { return match; } @@ -169,7 +153,7 @@ function generateTokens() { finalValue = getComputedCSSVarValue(finalValue, selector, cssGlobalVariablesMap); } if (computedValue.includes('var(--pf')) { - computedValue = getComputedCSSVarValue(computedValue, selector, cssGlobalsToScssVarsMap); + computedValue = getComputedCSSVarValue(computedValue, selector); } else { computedValue = getComputedScssVarValue(computedValue); } diff --git a/packages/react-tokens/tests/react-tokens.test.js b/packages/react-tokens/tests/react-tokens.test.js index d51b81a733c..0b794abf7ff 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 { global_palette_green_500: green } = reactTokens; - expect(green.value).toBeTruthy(); + const { color_black: black } = reactTokens; + expect(black.value).toBeTruthy(); }); diff --git a/yarn.lock b/yarn.lock index dc2ab9c065b..bd7c6b4a1cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2827,10 +2827,10 @@ node-addon-api "^3.2.1" node-gyp-build "^4.3.0" -"@patternfly/ast-helpers@^1.4.0-alpha.10": - version "1.10.1" - resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.10.1.tgz#b1f048ade6471a5faab51c543bc1e33c68070720" - integrity sha512-afWVFF2o8ZWE0+fHX/oxTOG0m9OfECWbz8wHOuvhrReHoTTnqCvpNXEyHSBFa+hsUa1fSj076HYyIDyUhybOdA== +"@patternfly/ast-helpers@^1.4.0-alpha.17": + version "1.15.5" + resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.15.5.tgz#f2a81db1f9b36f014384773024e6ed2447562d87" + integrity sha512-WZGCLfi50JGl/dr0JqRCsVwndf8AQb8py8EhZaC8FX3DfVDZ5KnfshtrlcKcPX/AuHIAQNAW01wL8SNAb5oeuw== dependencies: acorn "^8.4.1" acorn-class-fields "^1.0.0" @@ -2838,16 +2838,16 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^6.0.0-alpha.21": - version "6.0.0-alpha.21" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.21.tgz#8632d12980a450362d11313291b51f4e247b53aa" - integrity sha512-j95ACCMvlv0XkKcHP6OadOeKqWOsRspId3jfNuU2UlGrcOVSPZa/ldaxNKZGaUKtJkmxN7LdcslJHH+hKs7+lg== +"@patternfly/documentation-framework@^6.0.0-alpha.28": + version "6.0.0-alpha.28" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.28.tgz#1f10fd2a164a4fd4d549ca3e3bde83dcb0f6135e" + integrity sha512-YPvUQrWYXTdCIMU7EX4IeuWJh3px2Sm1H4geLyRiZZfdp14bn2FB5kC3d2MJlaC06KGLu5ynU1gh8bMmjxGQaQ== dependencies: "@babel/core" "^7.24.3" "@babel/preset-env" "^7.24.3" "@babel/preset-react" "^7.24.1" "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^1.4.0-alpha.10" + "@patternfly/ast-helpers" "^1.4.0-alpha.17" "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" autoprefixer "9.8.6" babel-loader "^9.1.3" @@ -2894,7 +2894,7 @@ style-to-object "0.3.0" to-vfile "6.1.0" typedoc "0.23.0" - typescript "4.3.5" + typescript "4.7.4" unified "9.1.0" unist-util-remove "2.0.0" unist-util-visit "2.0.3" @@ -2920,10 +2920,10 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@6.0.0-alpha.117": - version "6.0.0-alpha.117" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.117.tgz#ae62a787f99085acfecb4422fd1c08cace2fd23a" - integrity sha512-AqN09ur+jQXqtu7mf1UD7YmFa9fsbeb3tuyMwxut7P9QW4dvdTkHhFC9zv5eaJ5v7M03vvKKtxteVwPLaDn2zA== +"@patternfly/patternfly@6.0.0-alpha.135": + version "6.0.0-alpha.135" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.135.tgz#c085ec494b9afba978b971388b78c6923d82d9e0" + integrity sha512-e3w5Yh8UWWaIjOvaSCHjZeewK94P0AJtAodf/KweXZET9OyEsDXFb4RhWI5f28HYRbzR6cyRkR+YZY2KYQq0Wg== "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -18290,21 +18290,16 @@ typedoc@0.23.0: minimatch "^5.1.0" shiki "^0.10.1" -typescript@4.3.5: - version "4.3.5" - resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz" - integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== +typescript@4.7.4, typescript@^4.7.4: + version "4.7.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" + integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== "typescript@>=3 < 6": version "5.1.6" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274" integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA== -typescript@^4.7.4: - version "4.7.4" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" - integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== - typical@^2.6.0, typical@^2.6.1: version "2.6.1" resolved "https://registry.npmjs.org/typical/-/typical-2.6.1.tgz"