Merge branch 'main' into chore/bump-jest-26

CHANGELOG.md

@@ -20,6 +20,7 @@
 
 - Add exit code to compile-scss script on failure ([#1024](https://github.com/opensearch-project/oui/pull/1024))
 - Correct file path for import of Query component ([#1069](https://github.com/opensearch-project/oui/pull/1069))
+- Fix "Guidelines" documentation links rendering blank pages ([#1111](https://github.com/opensearch-project/oui/pull/1111))
 
 ### 🚞 Infrastructure
 
@@ -34,10 +35,10 @@
 
 ### 🛠 Maintenance
 - Remove Internet Explorer specific code ([#890](https://github.com/opensearch-project/oui/pull/890))
-
 - Update caniuse database ([#1046](https://github.com/opensearch-project/oui/pull/1046))
 - Bump TypeScript to v4.6.4 ([#879](https://github.com/opensearch-project/oui/pull/879))
-- Clean up `react-datepicker` package to remove unnecessary directories and files([#1067](https://github.com/opensearch-project/oui/pull/1067))
+- Clean up `react-datepicker` package to remove unnecessary directories and files ([#1067](https://github.com/opensearch-project/oui/pull/1067))
+- Bump `@types/react` and `csstype` ([#1105](https://github.com/opensearch-project/oui/pull/1105))
 
 ### 🪛 Refactoring
 
@@ -59,6 +60,7 @@
 - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004))
 - Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856))
 - Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014))
+- Add `onFullScreenChange` to `OuiDataGrid` ([#1053](https://github.com/opensearch-project/oui/pull/1053))
 
 ### 🐛 Bug Fixes
 

i18ntokens.json

@@ -2653,12 +2653,12 @@
       "start": {
         "line": 143,
         "column": 4,
-        "index": 4700
+        "index": 4717
       },
       "end": {
         "line": 148,
         "column": 44,
-        "index": 4885
+        "index": 4902
       }
     },
     "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx"
@@ -2671,12 +2671,12 @@
       "start": {
         "line": 143,
         "column": 4,
-        "index": 4700
+        "index": 4717
       },
       "end": {
         "line": 148,
         "column": 44,
-        "index": 4885
+        "index": 4902
       }
     },
     "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx"

package.json

@@ -236,7 +236,7 @@
     "sass-embedded": "^1.66.1",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "npm:@bsfishy/[email protected]support-sass-embedded.3",
+    "sass-loader": "npm:@amoo-miki/[email protected]node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1",
     "shelljs": "^0.8.5",
     "start-server-and-test": "^2.0.0",
     "style-loader": "^1.2.1",

src-docs/src/views/datagrid/datagrid.js

@@ -312,6 +312,10 @@ export default () => {
     console.log(eventData);
   });
 
+  const onFullScreenChange = useRef((eventData) => {
+    console.log('isFullScreen:', eventData);
+  });
+
   return (
     <DataContext.Provider value={raw_data}>
       <OuiDataGrid
@@ -330,6 +334,7 @@ export default () => {
           onChangePage: onChangePage,
         }}
         onColumnResize={onColumnResize.current}
+        onFullScreenChange={onFullScreenChange.current}
       />
     </DataContext.Provider>
   );

src-docs/src/views/guidelines/colors/_utilities.js

@@ -11,8 +11,9 @@
 
 import React, { useContext } from 'react';
 import { ThemeContext } from '../../../components';
-import { calculateContrast, rgbToHex } from '../../../../../src/services';
+import { calculateContrast } from '../../../../../src/services';
 import { getSassVars } from '../_get_sass_vars';
+import { hexToRgb } from '../../../../../src/services/color/hex_to_rgb';
 
 import { OuiBadge, OuiCopy, OuiFlexItem } from '../../../../../src/components';
 import { OuiIcon } from '../../../../../src/components/icon';
@@ -74,8 +75,8 @@ export const ratingAll = <OuiBadge color="#eee">ALL</OuiBadge>;
 
 function getContrastRatings(background, foreground, palette) {
   const contrast = calculateContrast(
-    [palette[background].r, palette[background].g, palette[background].b],
-    [palette[foreground].r, palette[foreground].g, palette[foreground].b]
+    hexToRgb(palette[background]),
+    hexToRgb(palette[foreground])
   );
 
   let contrastRating;
@@ -151,8 +152,8 @@ color: $${foreground};`;
             onClickAriaLabel="Click to copy SASS configurations"
             disabled={!contastIsAcceptableToCopy}
             style={{
-              backgroundColor: palette[background].rgba,
-              color: palette[foreground].rgba,
+              backgroundColor: palette[background],
+              color: palette[foreground],
             }}>
             {foreground}
           </OuiBadge>
@@ -161,8 +162,3 @@ color: $${foreground};`;
     </OuiFlexItem>
   );
 };
-
-export function getHexValueFromColorName(palette, colorName, key) {
-  const hex = key ? palette[colorName][key] : palette[colorName];
-  return rgbToHex(hex.rgba).toUpperCase();
-}

src-docs/src/views/guidelines/colors/color_section.js

@@ -23,7 +23,6 @@ import {
   OuiPanel,
 } from '../../../../../src/components';
 import {
-  getHexValueFromColorName,
   ColorsContrastItem,
   allowedColors,
   textVariants,
@@ -40,7 +39,7 @@ export const ColorSection = ({
   const theme = useContext(ThemeContext).theme;
   const palette = getSassVars(theme);
   const colorsForContrast = showTextVariants ? textVariants : allowedColors;
-  const hex = getHexValueFromColorName(palette, color);
+  const hex = palette[color];
   const iconClass =
     color.includes('Lightest') ||
     color.includes('Empty') ||

src-docs/src/views/guidelines/colors/core_palette.js

@@ -20,7 +20,6 @@ import {
   OuiScreenReaderOnly,
   OuiPanel,
 } from '../../../../../src/components';
-import { rgbToHex } from '../../../../../src/services';
 
 export function scrollToSelector(selector, attempts = 5) {
   const element = document.querySelector(selector);
@@ -46,7 +45,7 @@ export const CorePalette = ({ theme, colors }) => {
       <OuiFlexItem key={index} grow={false}>
         <OuiCopy
           title={`$${color}:
-          ${rgbToHex(hex.rgba).toUpperCase()}`}
+          ${hex}`}
           beforeMessage={
             <small>
               <kbd>Click</kbd> to copy color name
@@ -66,7 +65,7 @@ export const CorePalette = ({ theme, colors }) => {
                 className={iconClass}
                 size="xxl"
                 type="stopFilled"
-                color={rgbToHex(hex.rgba)}
+                color={hex}
               />
               <OuiScreenReaderOnly>
                 <span>{color}</span>

src-docs/src/views/guidelines/colors/vis_palette.js

@@ -21,9 +21,9 @@ import {
   OuiText,
   OuiPanel,
 } from '../../../../../src/components';
-import { rgbToHex } from '../../../../../src/services';
 
 export const VisPalette = ({ variant }) => {
+  // ouiPaletteColorBlind() is currently shared across themes and dark/light modes. This will need to be  made dynamic once we have different visualization palettes as in https://github.com/opensearch-project/oui/issues/818
   const visColors = getSassVars('light').ouiPaletteColorBlind;
   const visColorKeys = Object.keys(getSassVars('light').ouiPaletteColorBlind);
 
@@ -41,7 +41,7 @@ export const VisPalette = ({ variant }) => {
                   onClick={copy}
                   size="xl"
                   type="stopFilled"
-                  color={rgbToHex(hex.rgba)}
+                  color={hex}
                 />
               )}
             </OuiCopy>
@@ -54,7 +54,7 @@ export const VisPalette = ({ variant }) => {
           <OuiFlexItem>
             <OuiText size="s" color="subdued">
               <p>
-                <code>{rgbToHex(hex.rgba).toUpperCase()}</code>
+                <code>{hex}</code>
               </p>
             </OuiText>
           </OuiFlexItem>

src-docs/src/views/guidelines/sass.js

@@ -14,7 +14,6 @@ import sizes from '!!variables-from-scss!!../../../../src/global_styling/variabl
 import zindexs from '!!variables-from-scss!!../../../../src/global_styling/variables/_z_index.scss';
 import animations from '!!variables-from-scss!!../../../../src/global_styling/variables/_animations.scss';
 import breakpoints from '!!variables-from-scss!!../../../../src/global_styling/variables/_responsive.scss';
-import { rgbToHex } from '../../../../src/services';
 
 import { Link } from 'react-router-dom';
 
@@ -113,7 +112,7 @@ function renderPaletteColor(palette, color) {
       <OuiFlexItem grow={false}>
         <div
           className="guideSass__swatch"
-          style={{ background: rgbToHex(palette[color].rgba).toUpperCase() }}
+          style={{ background: palette[color] }}
         />
       </OuiFlexItem>
       <OuiFlexItem grow={false}>

src/components/datagrid/data_grid.tsx

@@ -164,6 +164,10 @@ type CommonGridProps = CommonProps &
      * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`.
      */
     onColumnResize?: OuiDataGridOnColumnResizeHandler;
+    /**
+     * A callback fired when the internal full screen state changes.
+     */
+    onFullScreenChange?: (isFullScreen: boolean) => void;
     /**
      * Defines a minimum width for the grid to show all controls in its header.
      */
@@ -690,6 +694,7 @@ function notifyCellOfFocusState(
 }
 
 const emptyArrayDefault: OuiDataGridControlColumn[] = [];
+
 export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
   const {
     leadingControlColumns = emptyArrayDefault,
@@ -708,14 +713,15 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
     inMemory,
     popoverContents,
     onColumnResize,
+    onFullScreenChange,
     minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
     height,
     width,
     rowHeightsOptions,
     ...rest
   } = props;
 
-  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isFullScreen, setFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(0);
 
   const [interactiveCellId] = useState(htmlIdGenerator()());
@@ -756,6 +762,14 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
     [headerIsInteractive, setHeaderIsInteractive, setFocusedCell]
   );
 
+  const handleFullScreenChange = useCallback(
+    (isFullScreen: boolean) => {
+      setFullScreen(isFullScreen);
+      onFullScreenChange?.(isFullScreen);
+    },
+    [onFullScreenChange]
+  );
+
   const handleHeaderMutation = useCallback<MutationCallback>(
     (records) => {
       const [{ target }] = records;
@@ -781,7 +795,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
       case keys.ESCAPE:
         if (isFullScreen) {
           event.preventDefault();
-          setIsFullScreen(false);
+          handleFullScreenChange(false);
         }
         break;
     }
@@ -1000,7 +1014,7 @@ export const OuiDataGrid: FunctionComponent<OuiDataGridProps> = (props) => {
           color="text"
           className={controlBtnClasses}
           data-test-subj="dataGridFullScrenButton"
-          onClick={() => setIsFullScreen(!isFullScreen)}>
+          onClick={() => handleFullScreenChange(!isFullScreen)}>
           {isFullScreen ? fullScreenButtonActive : fullScreenButton}
         </OuiButtonEmpty>
       )}

src/components/tabs/tabbed_content/tabbed_content.tsx

@@ -53,7 +53,7 @@ interface OuiTabbedContentState {
 }
 
 export type OuiTabbedContentProps = CommonProps &
-  HTMLAttributes<HTMLDivElement> & {
+  Omit<HTMLAttributes<HTMLDivElement>, 'autoFocus'> & {
     /**
      * When tabbing into the tabs, set the focus on `initial` for the first tab,
      * or `selected` for the currently selected tab. Best use case is for inside of

wiki/consuming.md

@@ -91,7 +91,7 @@ If you want to use the new, but in progress Next theme, you can import it simila
 
 ### Using Sass to customize OUI
 
-OUI's Sass themes are token based, which can be altered to suite your theming needs like changing the primary color. Simply declare your token overrides before importing the whole OUI theme. This will re-compile **all of the OUI components** with your colors.
+OUI's Sass themes are token based, which can be altered to suit your theming needs like changing the primary color. Simply declare your token overrides before importing the whole OUI theme. This will re-compile **all of the OUI components** with your colors.
 
 *Do not use in conjunction with the compiled CSS.*
 

yarn.lock

@@ -2958,12 +2958,13 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^16.9.34":
-  version "16.9.35"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368"
-  integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==
+  version "16.14.50"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.50.tgz#ec9c30f2f0c7d9aa748949536d88e3439526a25d"
+  integrity sha512-7TWZ/HjhXsRK3BbhSFxTinbSft3sUXJAU3ONngT0rpcKJaIOlxkRke4bidqQTopUbEv1ApC5nlSEkIpX43MkTg==
   dependencies:
     "@types/prop-types" "*"
-    csstype "^2.2.0"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
 
 "@types/refractor@^3.0.0":
   version "3.0.0"
@@ -2984,6 +2985,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.5.tgz#4751153abbf8d6199babb345a52e1eb4167d64af"
+  integrity sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==
+
 "@types/semver@^7.3.12":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
@@ -6038,10 +6044,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
-  integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
+csstype@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
 cwd@^0.9.1:
   version "0.9.1"
@@ -15325,16 +15331,16 @@ sass-lint@^1.13.1:
     path-is-absolute "^1.0.0"
     util "^0.10.3"
 
-"sass-loader@npm:@bsfishy/[email protected]support-sass-embedded.3":
-  version "10.4.1-support-sass-embedded.3"
-  resolved "https://registry.yarnpkg.com/@bsfishy/sass-loader/-/sass-loader-10.4.1-support-sass-embedded.3.tgz#5be3f0a6bc1eb20e081a336fb1d3474b5c8d7259"
-  integrity sha512-IcMG8iVIzAjLI9t3S4ucZAwDo6uAiQ+F+1G+TxSv5dt3isHYvDM3T7RgagILdP8i8JcJicfX3GiG8N8/2B/xVQ==
+"sass-loader@npm:@amoo-miki/[email protected]node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1":
+  version "10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/sass-loader/-/sass-loader-10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1.tgz#53d6f5ecb9785f957ee5a96780f98a97cb19e9c5"
+  integrity sha512-ymdhgRVtB4PFnoOEgk/TMr75+STk3rKGFCm8Ju1uTuPNGkA/forR6Xv5GvBjNnMD3xdZyDpBszCeYfuP9Mfdzw==
   dependencies:
     klona "^2.0.4"
     loader-utils "^2.0.0"
     neo-async "^2.6.2"
     schema-utils "^3.0.0"
-    semver "^7.3.2"
+    semver "^7.5.4"
 
 sax@~1.2.1, sax@~1.2.4:
   version "1.2.4"
@@ -15448,10 +15454,10 @@ semver-truncate@^1.1.2:
   dependencies:
     semver "^5.3.0"
 
-"semver@2 || 3 || 4 || 5", [email protected], [email protected], [email protected], semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1, semver@^6.0.0, semver@^6.2.0, semver@^6.3.0, semver@^6.3.1, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3:
-  version "7.5.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
-  integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
+"semver@2 || 3 || 4 || 5", [email protected], [email protected], [email protected], semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1, semver@^6.0.0, semver@^6.2.0, semver@^6.3.0, semver@^6.3.1, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"