fix: Release alphas from v6 and rebase from main

.github/release.sh

@@ -17,10 +17,10 @@ echo "Doing a release..."
 LOG=$(git log --format="%s" -1 | grep -Poe "#\d+")
 PR_NUM=${LOG:1}
 
-yarn run lerna publish prerelease --preid=prerelease --dist-tag=prerelease --yes 2>&1 | tee lerna-output.txt
+# yarn run lerna publish prerelease --preid=alpha --dist-tag=alpha --no-private --yes 2>&1 | tee lerna-output.txt
 
 # use lerna command below for dry run
-# yarn run lerna version prerelease --preid=prerelease --yes --no-git-tag-version --no-push | tee lerna-output.txt
+yarn run lerna version prerelease --preid=alpha --dist-tag=alpha --no-private --yes --no-git-tag-version --no-push | tee lerna-output.txt
 
 if grep -i "Successfully published" lerna-output.txt; # Leave a Github comment
 then

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: release
 on:
   push:
     branches:
-      - main
+      - v6
 jobs:
   build:
     runs-on: ubuntu-latest

lerna.json

@@ -24,7 +24,7 @@
     }
   },
   "version": "independent",
-  "allowBranch": ["main", "v4", "5.0.x"],
+  "allowBranch": ["main", "v4", "5.0.x", "v6"],
   "packages": ["packages/*", "packages/react-integration/demo-app-ts"],
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

packages/eslint-plugin-patternfly-react/package.json

@@ -1,11 +1,12 @@
 {
   "name": "eslint-plugin-patternfly-react",
-  "version": "5.1.1-prerelease.1",
+  "version": "6.0.0-alpha.0",
   "private": false,
   "main": "./lib/index.js",
   "license": "MIT",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   },
   "repository": {
     "type": "git",

packages/react-charts/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.1-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.8...@patternfly/react-charts@7.1.1-prerelease.9) (2023-09-22)
+
+### Features
+
+- **charts:** add RTL legend support ([#9570](https://github.com/patternfly/patternfly-react/issues/9570)) ([99d8d97](https://github.com/patternfly/patternfly-react/commit/99d8d975eeb2d562357cdcaa37502748d5794564))
+
+## 7.1.1-prerelease.8 (2023-09-21)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
 ## [7.1.1-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.6...@patternfly/react-charts@7.1.1-prerelease.7) (2023-09-18)
 
 **Note:** Version bump only for package @patternfly/react-charts

packages/react-charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-charts",
-  "version": "7.1.1-prerelease.7",
+  "version": "8.0.0-alpha.0",
   "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -11,7 +11,8 @@
     "*.scss"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   },
   "repository": {
     "type": "git",
@@ -28,8 +29,8 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/react-styles": "^5.1.1-prerelease.6",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.6",
+    "@patternfly/react-styles": "^6.0.0-alpha.0",
+    "@patternfly/react-tokens": "^6.0.0-alpha.0",
     "hoist-non-react-statics": "^3.3.0",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0",

packages/react-charts/src/components/Chart/Chart.tsx

@@ -26,11 +26,13 @@ import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { getClassName } from '../ChartUtils/chart-helpers';
 import { getLabelTextSize } from '../ChartUtils/chart-label';
-import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend';
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { getPatternDefs, mergePatternData, useDefaultPatternProps } from '../ChartUtils/chart-patterns';
 import { getChartTheme } from '../ChartUtils/chart-theme-types';
 import { useEffect } from 'react';
+import { ChartLabel } from '../ChartLabel/ChartLabel';
+import { ChartPoint } from '../ChartPoint/ChartPoint';
 
 /**
  * Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart,
@@ -284,6 +286,10 @@ export interface ChartProps extends VictoryChartProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'bottom-left' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum
    * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain
@@ -471,6 +477,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   name,
   padding,
   patternScale,
@@ -522,11 +529,30 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     ...(labelComponent && { labelComponent }) // Override label component props
   });
 
+  let legendXOffset = 0;
+  if (legendDirection === 'rtl') {
+    legendXOffset = getLegendMaxTextWidth(legendData, theme);
+  }
+
   const legend = React.cloneElement(legendComponent, {
     data: legendData,
     ...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }),
     orientation: legendOrientation,
     theme,
+    ...(legendDirection === 'rtl' && {
+      dataComponent: legendComponent.props.dataComponent ? (
+        React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
+      ) : (
+        <ChartPoint transform={`translate(${legendXOffset})`} />
+      )
+    }),
+    ...(legendDirection === 'rtl' && {
+      labelComponent: legendComponent.props.labelComponent ? (
+        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+      ) : (
+        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+      )
+    }),
     ...legendComponent.props
   });
 

packages/react-charts/src/components/ChartBullet/ChartBullet.tsx

@@ -17,7 +17,7 @@ import { ChartLegend } from '../ChartLegend/ChartLegend';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
 import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
-import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend';
 import { ChartBulletComparativeErrorMeasure } from './ChartBulletComparativeErrorMeasure';
 import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure';
 import { ChartBulletComparativeWarningMeasure } from './ChartBulletComparativeWarningMeasure';
@@ -29,6 +29,8 @@ import { getBulletDomain } from './utils/chart-bullet-domain';
 import { getBulletThemeWithLegendColorScale } from './utils/chart-bullet-theme';
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { useEffect } from 'react';
+import { ChartPoint } from '../ChartPoint/ChartPoint';
+import { ChartLabel } from '../ChartLabel/ChartLabel';
 
 /**
  * ChartBullet renders a dataset as a bullet chart.
@@ -252,6 +254,10 @@ export interface ChartBulletProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'bottom-left' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum
    * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain
@@ -509,6 +515,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   legendComponent = <ChartLegend />,
   legendItemsPerRow,
   legendPosition = 'bottom',
+  legendDirection = 'ltr',
   maxDomain,
   minDomain,
   name,
@@ -656,6 +663,20 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     ...comparativeZeroMeasureComponent.props
   });
 
+  let legendXOffset = 0;
+  if (legendDirection === 'rtl') {
+    legendXOffset = getLegendMaxTextWidth(
+      [
+        ...(primaryDotMeasureLegendData ? primaryDotMeasureLegendData : []),
+        ...(primarySegmentedMeasureLegendData ? primarySegmentedMeasureLegendData : []),
+        ...(comparativeWarningMeasureLegendData ? comparativeWarningMeasureLegendData : []),
+        ...(comparativeErrorMeasureLegendData ? comparativeErrorMeasureLegendData : []),
+        ...(qualitativeRangeLegendData ? qualitativeRangeLegendData : [])
+      ],
+      theme
+    );
+  }
+
   // Legend
   const legend = React.cloneElement(legendComponent, {
     data: [
@@ -670,6 +691,20 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     orientation: legendOrientation,
     position: legendPosition,
     theme,
+    ...(legendDirection === 'rtl' && {
+      dataComponent: legendComponent.props.dataComponent ? (
+        React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
+      ) : (
+        <ChartPoint transform={`translate(${legendXOffset})`} />
+      )
+    }),
+    ...(legendDirection === 'rtl' && {
+      labelComponent: legendComponent.props.labelComponent ? (
+        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+      ) : (
+        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+      )
+    }),
     ...legendComponent.props
   });
 

packages/react-charts/src/components/ChartDonut/ChartDonut.tsx

@@ -345,6 +345,10 @@ export interface ChartDonutProps extends ChartPieProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The name prop is typically used to reference a component instance when defining shared events. However, this
    * optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory
@@ -573,6 +577,7 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
   containerComponent = <ChartContainer />,
   innerRadius,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   name,
   padAngle,
   padding,
@@ -698,6 +703,7 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
       innerRadius={chartInnerRadius > 0 ? chartInnerRadius : 0}
       key="pf-chart-donut-pie"
       legendPosition={legendPosition}
+      legendDirection={legendDirection}
       name={name}
       padAngle={padAngle !== undefined ? padAngle : getPadAngle}
       padding={padding}

packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx

@@ -337,6 +337,10 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.
    * If this prop is not set, the label radius will default to the radius of the pie + label padding.
@@ -589,6 +593,7 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
   invert = false,
   isStatic = true,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   padding,
   standalone = true,
   themeColor,
@@ -679,6 +684,7 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
       height={height}
       key="pf-chart-donut-utilization"
       legendPosition={legendPosition}
+      legendDirection={legendDirection}
       padding={padding}
       standalone={false}
       theme={getThresholdTheme()}

packages/react-charts/src/components/ChartPie/ChartPie.tsx

@@ -28,11 +28,13 @@ import { ChartLegend } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
-import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend';
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { getPatternDefs, useDefaultPatternProps } from '../ChartUtils/chart-patterns';
 import { getTheme } from '../ChartUtils/chart-theme';
 import { useEffect } from 'react';
+import { ChartPoint } from '../ChartPoint/ChartPoint';
+import { ChartLabel } from '../ChartLabel/ChartLabel';
 
 /**
  * ChartPie renders a dataset as a pie chart.
@@ -333,6 +335,10 @@ export interface ChartPieProps extends VictoryPieProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The name prop is typically used to reference a component instance when defining shared events. However, this
    * optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory
@@ -498,16 +504,15 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   name,
   patternScale,
   patternUnshiftIndex,
-
   padding,
   radius,
   standalone = true,
   style,
   themeColor,
-
   // destructure last
   theme = getTheme(themeColor),
   labelComponent = allowTooltip ? (
@@ -576,13 +581,32 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
     />
   );
 
+  let legendXOffset = 0;
+  if (legendDirection === 'rtl') {
+    legendXOffset = getLegendMaxTextWidth(legendData, theme);
+  }
+
   const legend = React.cloneElement(legendComponent, {
     colorScale,
     data: legendData,
     ...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }),
     key: 'pf-chart-pie-legend',
     orientation: legendOrientation,
     theme,
+    ...(legendDirection === 'rtl' && {
+      dataComponent: legendComponent.props.dataComponent ? (
+        React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
+      ) : (
+        <ChartPoint transform={`translate(${legendXOffset})`} />
+      )
+    }),
+    ...(legendDirection === 'rtl' && {
+      labelComponent: legendComponent.props.labelComponent ? (
+        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+      ) : (
+        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+      )
+    }),
     ...legendComponent.props
   });
 

packages/react-charts/src/components/ChartUtils/chart-legend.ts

@@ -4,6 +4,7 @@ import { VictoryLegend } from 'victory-legend';
 import { ChartLegendProps } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
+import { getLabelTextSize } from '../ChartUtils/chart-label';
 import { getPieOrigin } from './chart-origin';
 import * as React from 'react';
 
@@ -49,6 +50,22 @@ interface ChartLegendTextMaxSizeInterface {
   theme: ChartThemeDefinition; // The theme that will be applied to the chart
 }
 
+/**
+ * Returns the max text length in a legend data set to calculate the x offset for right aligned legends.
+ * @private
+ */
+
+export const getLegendMaxTextWidth = (legendData: any[], theme: ChartThemeDefinition) => {
+  let legendXOffset = 0;
+  legendData.map((data: any) => {
+    const labelWidth = getLabelTextSize({ text: data.name, theme }).width;
+    if (labelWidth > legendXOffset) {
+      legendXOffset = labelWidth;
+    }
+  });
+  return legendXOffset;
+};
+
 /**
  * Returns a legend which has been positioned per the given chart properties
  * @private