Merge branch 'main' into rm-eui-chart-theme

.github/workflows/community_contribution.yml

@@ -19,7 +19,7 @@ jobs:
         # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#example-of-writing-an-environment-variable-to-github_env
         run: |
           DATA=$(
-            curl -L -i -w "%{http_code}" \
+            curl -L -i -g -w "%{http_code}" \
             -H "Accept: application/vnd.github+json" \
             -H "Authorization: Bearer ${{ secrets.EUI_COMMUNITY_PR }}" \
             -H "X-GitHub-Api-Version: 2022-11-28" \

changelogs/upcoming/7570.md

@@ -0,0 +1,3 @@
+**Deprecations**
+
+- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed`

changelogs/upcoming/7575.md

@@ -0,0 +1 @@
+- Enhanced `EuiResizeObserver` and `useResizeObserver`'s performance to not trigger page reflows on resize event

src-docs/src/views/color_palette/color_palette_quantitative.js

@@ -16,16 +16,16 @@ import {
   euiPaletteForTemperature,
   euiPaletteCool,
   euiPaletteWarm,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteGray,
 } from '../../../../src/services';
 const paletteData = {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplementary,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteCool,
   euiPaletteWarm,
   euiPaletteGray,

src-docs/src/views/color_picker/color_palette_display.js

@@ -4,8 +4,8 @@ import {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplementary,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteCool,
   euiPaletteWarm,
   euiPaletteGray,
@@ -50,8 +50,8 @@ const paletteData = {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplementary,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteCool,
   euiPaletteWarm,
   euiPaletteGray,

src-docs/src/views/elastic_charts/accessibility_bullet.tsx

@@ -3,7 +3,7 @@ import { Chart, Settings, Goal } from '@elastic/charts';
 import { EuiSpacer, EuiTitle } from '../../../../src/components';
 import {
   htmlIdGenerator,
-  euiPalettePositive,
+  euiPaletteGreen,
   colorPalette,
   euiPaletteGray,
   useEuiTheme,
@@ -19,8 +19,8 @@ export default () => {
   const bandLabels = ['freezing', 'cold', 'brisk', 'warm', 'hot'];
   const bands = [0, 100, 125, 150, 250];
 
-  let spectrum = euiPalettePositive(5);
-  // For dark theme, start with the brightest positive color and create a palette that goes to dark gray instead of light
+  let spectrum = euiPaletteGreen(5);
+  // For dark theme, start with the brightest green color and create a palette that goes to dark gray instead of light
   if (isDarkTheme) {
     spectrum = colorPalette([spectrum[4], euiPaletteGray(5)[4]], 5).reverse();
   }

src-docs/src/views/elastic_charts/goal.tsx

@@ -4,7 +4,7 @@ import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import {
   htmlIdGenerator,
   useIsWithinBreakpoints,
-  euiPalettePositive,
+  euiPaletteGreen,
 } from '../../../../src/services';
 import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
 import { useChartBaseTheme } from './utils/use_chart_base_theme';
@@ -17,7 +17,7 @@ export const GoalChart = () => {
   const bandLabels = ['', 'freezing', 'cold', 'warm', 'hot'];
   const bands = [-10, 0, 15, 25, 40];
 
-  const spectrum = euiPalettePositive(5);
+  const spectrum = euiPaletteGreen(5);
   const opacityMapHex: Record<number, string> = {
     '-10': spectrum[0],
     '0': spectrum[1],

src-docs/src/views/elastic_charts/theming.tsx

@@ -23,8 +23,8 @@ import {
   euiPaletteForTemperature,
   euiPaletteCool,
   euiPaletteWarm,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteGray,
 } from '../../../../src/services';
 import { useChartBaseTheme } from './utils/use_chart_base_theme';
@@ -34,8 +34,8 @@ const paletteData = {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplementary,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteCool,
   euiPaletteWarm,
   euiPaletteGray,

src-docs/src/views/elastic_charts/theming_categorical.tsx

@@ -19,7 +19,7 @@ import {
 import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared';
 import {
   euiPaletteColorBlind,
-  euiPalettePositive,
+  euiPaletteGreen,
   euiPaletteForStatus,
   euiPaletteGray,
 } from '../../../../src/services';
@@ -108,7 +108,7 @@ export default () => {
   };
 
   const createQuantityChart = (numCharts: number) => {
-    const vizColors = euiPalettePositive(numCharts);
+    const vizColors = euiPaletteGreen(numCharts);
 
     // convert series labels to percentages
     const dg = new DataGenerator();

src-docs/src/views/elastic_charts/theming_example.js

@@ -89,15 +89,22 @@ const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
 
           <EuiCodeBlock language="javascript" isCopyable fontSize="s">
             {`import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
-import { euiPalettePositive } from '../../../../src/services';
+import { euiPaletteGreen } from '../../../../src/services';
 
-const customColors = {
-  colors: {
-    vizColors: euiPalettePositive(5),
-  },
-};
-
-<Settings baseTheme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME} theme={[customColors]} />`}
+const MyChart = () => {
+  const customColors = {
+    colors: {
+      vizColors: euiPaletteGreen(5),
+    },
+  };
+  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  return (
+    <Chart>
+      <Settings baseTheme={chartBaseTheme} theme={customColors} />
+      //...
+    </Chart>
+  );
+};`}
           </EuiCodeBlock>
           <p>You&apos;ll find an example of these in the demo below.</p>
         </>
@@ -135,8 +142,7 @@ const customColors = {
             a single color that spans from light colors for low amounts to dark
             colors for high amounts. If the data signifies{' '}
             <strong>trends</strong>, use a two-color divergent scheme, with the
-            darkest colors at the extremes. Remember that red means bad/negative
-            and green is good/positive.
+            darkest colors at the extremes.
           </p>
           <p>
             Whan signifying quantities, group values into intervals instead of a

src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js

@@ -39,8 +39,8 @@ import {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteGray,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteWarm,
 } from '../../../../src/services';
 import { getDefaultEuiMarkdownUiPlugins } from '../../../../src/components/markdown_editor';
@@ -49,8 +49,8 @@ const paletteData = {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplementary,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteCool,
   euiPaletteWarm,
   euiPaletteGray,

src-docs/src/views/tables/actions/actions.tsx

@@ -262,8 +262,10 @@ export default () => {
 
   const selection: EuiTableSelectionType<User> = {
     selectable: (user: User) => user.online,
-    selectableMessage: (selectable: boolean) =>
-      !selectable ? 'User is currently offline' : '',
+    selectableMessage: (selectable: boolean, user: User) =>
+      !selectable
+        ? `${user.firstName} ${user.lastName} is currently offline`
+        : `Select ${user.firstName} ${user.lastName}`,
     onSelectionChange,
   };
 

src-docs/src/views/tables/expanding_rows/expanding_rows.tsx

@@ -187,8 +187,10 @@ export default () => {
 
   const selection: EuiTableSelectionType<User> = {
     selectable: (user: User) => user.online,
-    selectableMessage: (selectable: boolean) =>
-      !selectable ? 'User is currently offline' : '',
+    selectableMessage: (selectable: boolean, user: User) =>
+      !selectable
+        ? `${user.firstName} ${user.lastName} is currently offline`
+        : `Select ${user.firstName} ${user.lastName}`,
     onSelectionChange,
   };
 

src-docs/src/views/tables/footer/footer.tsx

@@ -206,8 +206,10 @@ export default () => {
 
   const selection: EuiTableSelectionType<User> = {
     selectable: (user: User) => user.online,
-    selectableMessage: (selectable: boolean) =>
-      !selectable ? 'User is currently offline' : '',
+    selectableMessage: (selectable: boolean, user: User) =>
+      !selectable
+        ? `${user.firstName} ${user.lastName} is currently offline`
+        : `Select ${user.firstName} ${user.lastName}`,
     onSelectionChange,
   };
 

src-docs/src/views/tables/mobile/mobile.tsx

@@ -182,8 +182,10 @@ export default () => {
 
   const selection: EuiTableSelectionType<User> = {
     selectable: (user: User) => user.online,
-    selectableMessage: (selectable: boolean) =>
-      !selectable ? 'User is currently offline' : '',
+    selectableMessage: (selectable: boolean, user: User) =>
+      !selectable
+        ? `${user.firstName} ${user.lastName} is currently offline`
+        : `Select ${user.firstName} ${user.lastName}`,
     onSelectionChange,
   };
 

src-docs/src/views/tables/selection/selection_controlled.tsx

@@ -117,8 +117,10 @@ export default () => {
 
   const selection: EuiTableSelectionType<User> = {
     selectable: (user: User) => user.online,
-    selectableMessage: (selectable: boolean) =>
-      !selectable ? 'User is currently offline' : '',
+    selectableMessage: (selectable: boolean, user: User) =>
+      !selectable
+        ? `${user.firstName} ${user.lastName} is currently offline`
+        : `Select ${user.firstName} ${user.lastName}`,
     onSelectionChange,
     selected: selectedItems,
   };

src-docs/src/views/tables/selection/selection_uncontrolled.tsx

@@ -112,8 +112,10 @@ export default () => {
 
   const selection: EuiTableSelectionType<User> = {
     selectable: (user: User) => user.online,
-    selectableMessage: (selectable: boolean) =>
-      !selectable ? 'User is currently offline' : '',
+    selectableMessage: (selectable: boolean, user: User) =>
+      !selectable
+        ? `${user.firstName} ${user.lastName} is currently offline`
+        : `Select ${user.firstName} ${user.lastName}`,
     onSelectionChange,
     initialSelected: onlineUsers,
   };

src/components/observer/resize_observer/resize_observer.tsx

@@ -28,12 +28,9 @@ export class EuiResizeObserver extends EuiObserver<EuiResizeObserverProps> {
     width: 0,
   };
 
-  onResize: ResizeObserverCallback = () => {
-    // `entry.contentRect` provides incomplete `height` and `width` data.
-    // Use `getBoundingClientRect` to account for padding and border.
-    // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly
-    if (!this.childNode) return;
-    const { height, width } = this.childNode.getBoundingClientRect();
+  onResize: ResizeObserverCallback = ([entry]) => {
+    const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
+
     // Check for actual resize event
     if (this.state.height === height && this.state.width === width) {
       return;
@@ -94,22 +91,11 @@ export const useResizeObserver = (
 
   useEffect(() => {
     if (container != null) {
-      // ResizeObserver's first call to the observation callback is scheduled in the future
-      // so find the container's initial dimensions now
-      const boundingRect = container.getBoundingClientRect();
-      setSize({
-        width: boundingRect.width,
-        height: boundingRect.height,
-      });
-
-      const observer = makeResizeObserver(container, () => {
-        // `entry.contentRect` provides incomplete `height` and `width` data.
-        // Use `getBoundingClientRect` to account for padding and border.
-        // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly
-        const { height, width } = container.getBoundingClientRect();
+      const observer = makeResizeObserver(container, ([entry]) => {
+        const { inlineSize, blockSize } = entry.borderBoxSize[0];
         setSize({
-          width,
-          height,
+          width: inlineSize,
+          height: blockSize,
         });
       });