[Fix] "Guidelines" Documentation Render Blank Page (opensearch-projec…

…t#1111) * Update error color type Signed-off-by: Willie Hung <willie880201044@gmail.com> * Add CHANGELOG.md Signed-off-by: Willie Hung <willie880201044@gmail.com> * Update src-docs/src/views/guidelines/colors/vis_palette.js Co-authored-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Willie Hung <willie880201044@gmail.com> * Update CHANGELOG.md Co-authored-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Willie Hung <willie880201044@gmail.com> --------- Signed-off-by: Willie Hung <willie880201044@gmail.com> Co-authored-by: Josh Romero <rmerqg@amazon.com>
BigSamu · Oct 30, 2023 · 9ba6199 · 9ba6199
1 parent 2600efc
commit 9ba6199
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,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
 

diff --git a/src-docs/src/views/guidelines/colors/_utilities.js b/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();
-}
diff --git a/src-docs/src/views/guidelines/colors/color_section.js b/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') ||

diff --git a/src-docs/src/views/guidelines/colors/core_palette.js b/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>

diff --git a/src-docs/src/views/guidelines/colors/vis_palette.js b/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>

diff --git a/src-docs/src/views/guidelines/sass.js b/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}>