Additional updates to v9 theme (#1417) (#1418)

- Additional borderRadius sizes on Panels - Configuration of borderRadius on Cards - Make Side Nav variables themeable - Make Links use font-weight `$ouiFontWeightSemiBold` - Enable themes to define background colors for Buttons Signed-off-by: Viraj Sanghvi <virajs@amazon.com> (cherry picked from commit 18ed6db) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 26, 2024 · dbaa9c8 · dbaa9c8
1 parent 3284bfe
commit dbaa9c8
Show file tree

Hide file tree

Showing 28 changed files with 205 additions and 62 deletions.
diff --git a/i18ntokens.json b/i18ntokens.json
@@ -234,40 +234,40 @@
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
   },
   {
-    "token": "ouiBreadcrumbsSimplified.collapsedBadge.ariaLabel",
+    "token": "ouiBreadcrumbs.collapsedBadge.ariaLabel",
     "defString": "Show collapsed breadcrumbs",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 79,
+        "line": 157,
         "column": 6,
-        "index": 2234
+        "index": 4951
       },
       "end": {
-        "line": 81,
+        "line": 159,
         "column": 45,
-        "index": 2354
+        "index": 5061
       }
     },
-    "filepath": "src/components/breadcrumbs/breadcrumbs_simplified.tsx"
+    "filepath": "src/components/breadcrumbs/breadcrumbs.tsx"
   },
   {
-    "token": "ouiBreadcrumbs.collapsedBadge.ariaLabel",
+    "token": "ouiSimplifiedBreadcrumbs.collapsedBadge.ariaLabel",
     "defString": "Show collapsed breadcrumbs",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 147,
+        "line": 128,
         "column": 6,
-        "index": 4396
+        "index": 4196
       },
       "end": {
-        "line": 149,
+        "line": 130,
         "column": 45,
-        "index": 4506
+        "index": 4316
       }
     },
-    "filepath": "src/components/breadcrumbs/breadcrumbs.tsx"
+    "filepath": "src/components/breadcrumbs/simplified_breadcrumbs/simplified_breadcrumbs.tsx"
   },
   {
     "token": "ouiCardSelect.selected",

diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js
@@ -421,7 +421,8 @@ onClick={handleClick}
           </p>
           <p>
             For non-interactive cards, reduce or eliminate the padding as needed
-            to suit your layout with the prop <OuiCode>paddingSize</OuiCode>.
+            to suit your layout with the prop <OuiCode>paddingSize</OuiCode>, or
+            adjust border radius with <OuiCode>borderRadius</OuiCode>.
           </p>
         </Fragment>
       ),

diff --git a/src-docs/src/views/panel/panel_color.js b/src-docs/src/views/panel/panel_color.js
@@ -24,5 +24,19 @@ export default () => (
     <OuiPanel color="transparent" hasBorder={false}>
       <p>I am a transparent box simply for padding</p>
     </OuiPanel>
+
+    <OuiSpacer />
+
+    {['m', 'l', 'xl'].map((borderRadius) => (
+      <>
+        <OuiPanel color="subdued" borderRadius={borderRadius}>
+          <p>
+            I am shaded box with{' '}
+            <code>borderRadius=&quot;{borderRadius}&quot;</code>
+          </p>
+        </OuiPanel>
+        <OuiSpacer />
+      </>
+    ))}
   </div>
 );
diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
@@ -71,6 +71,12 @@ const panelColorSnippet = [
   `<OuiPanel color="transparent" hasBorder={false}>
   <!-- Transparent panel -->
 </OuiPanel>`,
+  ...['m', 'l', 'xl'].map(
+    (borderRadius) =>
+      `<OuiPanel color="subdued" borderRadius="${borderRadius}">
+  <!-- Panel with gray background and ${borderRadius} corners -->
+</OuiPanel>`
+  ),
 ];
 
 const panelGrowSnippet = `<OuiPanel grow={false}>
@@ -198,7 +204,8 @@ export const PanelExample = {
             and provide an additional helpful aesthetic to your container in
             context. Be mindful to use color sparingly. You can also remove the
             rounded corners depending on the placement of your panel with{' '}
-            <OuiCode language="tsx">{'borderRadius="none"'}</OuiCode>
+            <OuiCode language="tsx">{'borderRadius="none"'}</OuiCode> or the
+            border radius size.
           </p>
           <p>
             Passing <OuiCode language="ts">{'color="transparent"'}</OuiCode> can

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -20,6 +20,7 @@
   }
 
   border-radius: $ouiButtonBorderRadius;
+  background-color: $ouiButtonBackgroundColor;
   min-width: $ouiButtonMinWidth;
 
   .ouiButton__content {
@@ -83,6 +84,7 @@
     @if ($name == 'ghost') {
       // Ghost is unique and ALWAYS sits against a dark background.
       color: $color;
+      background-color: transparent;
     } @else if ($name == 'text') {
       // The default color is lighter than the normal text color, make the it the text color
       color: $ouiTextColor;

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
@@ -32,6 +32,7 @@
     @include ouiSlightShadow;
   }
   border-radius: $ouiButtonBorderRadius + 1px; // Simply for the box-shadow
+  background-color: $ouiButtonBackgroundColor;
   max-width: 100%;
   display: flex;
   overflow: hidden;

diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
@@ -180,6 +180,10 @@ export type OuiCardProps = Omit<CommonProps, 'aria-label'> &
      * Use a border style of card instead of shadow
      */
     hasBorder?: OuiPanelProps['hasBorder'];
+    /**
+     * Customize card border radius
+     */
+    borderRadius?: OuiPanelProps['borderRadius'];
   } & (
     | {
         // description becomes optional when children is present
@@ -216,6 +220,7 @@ export const OuiCard: FunctionComponent<OuiCardProps> = ({
   selectable,
   display,
   paddingSize,
+  borderRadius,
   ...rest
 }) => {
   const isHrefValid = !href || validateHref(href);
@@ -405,6 +410,7 @@ export const OuiCard: FunctionComponent<OuiCardProps> = ({
       hasShadow={isDisabled || display ? false : true}
       hasBorder={display ? false : undefined}
       paddingSize={paddingSize}
+      borderRadius={borderRadius}
       {...rest}>
       {optionalCardTop}
 

diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -178,7 +178,7 @@
 
   &.ouiFormControlLayout--compressed {
     @include ouiFormControlDefaultShadow($borderOnly: true);
-    border-radius: calc($ouiBorderRadius / 2);
+    border-radius: $ouiFormControlCompressedBorderRadius;
     overflow: hidden; // Keeps backgrounds inside border radius
 
     // Padding

diff --git a/src/components/link/_mixins.scss b/src/components/link/_mixins.scss
@@ -11,7 +11,7 @@
 
 @mixin ouiLink {
   text-align: left;
-  font-weight: 600;
+  font-weight: $ouiFontWeightSemiBold;
 
   &:hover {
     text-decoration: underline;

diff --git a/src/components/panel/__snapshots__/panel.test.tsx.snap b/src/components/panel/__snapshots__/panel.test.tsx.snap
@@ -8,6 +8,12 @@ exports[`OuiPanel is rendered 1`] = `
 />
 `;
 
+exports[`OuiPanel props borderRadius l is rendered 1`] = `
+<div
+  class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusLarge ouiPanel--plain ouiPanel--hasShadow"
+/>
+`;
+
 exports[`OuiPanel props borderRadius m is rendered 1`] = `
 <div
   class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--hasShadow"
@@ -20,6 +26,12 @@ exports[`OuiPanel props borderRadius none is rendered 1`] = `
 />
 `;
 
+exports[`OuiPanel props borderRadius xl is rendered 1`] = `
+<div
+  class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusXLarge ouiPanel--plain ouiPanel--hasShadow"
+/>
+`;
+
 exports[`OuiPanel props color accent is rendered 1`] = `
 <div
   class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusMedium ouiPanel--accent ouiPanel--noShadow ouiPanel--noBorder"

diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
@@ -57,6 +57,8 @@ export const SIZES = keysOf(paddingSizeToClassNameMap);
 const borderRadiusToClassNameMap = {
   none: 'ouiPanel--borderRadiusNone',
   m: 'ouiPanel--borderRadiusMedium',
+  l: 'ouiPanel--borderRadiusLarge',
+  xl: 'ouiPanel--borderRadiusXLarge',
 };
 
 export const BORDER_RADII = keysOf(borderRadiusToClassNameMap);

diff --git a/src/components/side_nav/_index.scss b/src/components/side_nav/_index.scss
@@ -9,7 +9,6 @@
  * GitHub history for details.
  */
 
-@import 'variables';
 @import 'mixins';
 
 @import 'side_nav';

diff --git a/src/components/split_button/_split_button_control.scss b/src/components/split_button/_split_button_control.scss
@@ -24,6 +24,10 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
 
+    &:not(.ouiButton--fill) {
+      background: transparent;
+    }
+
     &:hover,
     &:active,
     &:focus {
@@ -36,6 +40,10 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
     border-width: 0px;
     border-radius: 0px;
 
+    &:not(.ouiButtonIcon--fill) {
+      background: transparent;
+    }
+
     &:hover,
     &:active,
     &:focus {
@@ -47,6 +55,10 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
   .ouiSplitButtonControl {
     border: $ouiBorderWidthThick solid $ouiBorderColor;
     border-radius: $ouiButtonBorderRadius;
+
+    &:not(.ouiButton) {
+      background: $ouiButtonBackgroundColor;
+    }
   }
 
   // Create button modifiers based upon the map.

diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
@@ -19,6 +19,7 @@ $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled)
 $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
 
 $ouiButtonBorderRadius: $ouiBorderRadius !default;
+$ouiButtonBackgroundColor: transparent;
 
 // Modifier naming and colors.
 $ouiButtonTypes: (
@@ -42,5 +43,6 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonBorderRadius: $ouiButtonBorderRadius;
+$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
 $euiButtonTypes: $ouiButtonTypes;
 /* End of Aliases */
diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss
@@ -35,3 +35,4 @@
 @import 'panel';
 @import 'tool_tip';
 @import 'collapsible_nav';
+@import 'side_nav';
diff --git a/src/global_styling/variables/_panel.scss b/src/global_styling/variables/_panel.scss
@@ -18,6 +18,8 @@ $ouiPanelPaddingModifiers: (
 $ouiPanelBorderRadiusModifiers: (
   'borderRadiusNone': 0,
   'borderRadiusMedium': $ouiBorderRadius,
+  'borderRadiusLarge': $ouiBorderRadius * 2,
+  'borderRadiusXLarge': $ouiBorderRadius * 4,
 ) !default;
 
 $ouiPanelBackgroundColorModifiers: (

diff --git a/src/components/side_nav/_variables.scss → src/global_styling/variables/_side_nav.scss b/src/components/side_nav/_variables.scss → src/global_styling/variables/_side_nav.scss
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-$ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7);
+$ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7) !default;
 
 // Simulates the transparent backround on top of the page background to get an opaque color
 // in order to get the right contrast for text
@@ -20,10 +20,10 @@ $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7);
 }
 
 // Ensure all the possible text color have proper contrast when "emphasized"
-$ouiSideNavRootTextcolor: ouiSideNavEmphasizedContrast($ouiTitleColor);
-$ouiSideNavBranchTextcolor: ouiSideNavEmphasizedContrast($ouiTextSubduedColor);
-$ouiSideNavSelectedTextcolor: ouiSideNavEmphasizedContrast($ouiColorPrimary);
-$ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabledText, $ouiContrastRatioDisabled);
+$ouiSideNavRootTextcolor: ouiSideNavEmphasizedContrast($ouiTitleColor) !default;
+$ouiSideNavBranchTextcolor: ouiSideNavEmphasizedContrast($ouiTextSubduedColor) !default;
+$ouiSideNavSelectedTextcolor: ouiSideNavEmphasizedContrast($ouiColorPrimary) !default;
+$ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabledText, $ouiContrastRatioDisabled) !default;
 
 
 /* OUI -> EUI Aliases */

diff --git a/src/themes/oui-next/global_styling/variables/_buttons.scss b/src/themes/oui-next/global_styling/variables/_buttons.scss
@@ -19,6 +19,7 @@ $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled)
 $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
 
 $ouiButtonBorderRadius: $ouiBorderRadius !default;
+$ouiButtonBackgroundColor: transparent;
 
 // Modifier naming and colors.
 $ouiButtonTypes: (
@@ -42,5 +43,6 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonBorderRadius: $ouiButtonBorderRadius;
+$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
 $euiButtonTypes: $ouiButtonTypes;
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_index.scss b/src/themes/oui-next/global_styling/variables/_index.scss
@@ -35,3 +35,4 @@
 @import 'panel';
 @import 'tool_tip';
 @import 'collapsible_nav';
+@import 'side_nav';
diff --git a/src/themes/oui-next/global_styling/variables/_panel.scss b/src/themes/oui-next/global_styling/variables/_panel.scss
@@ -18,6 +18,8 @@ $ouiPanelPaddingModifiers: (
 $ouiPanelBorderRadiusModifiers: (
   'borderRadiusNone': 0,
   'borderRadiusMedium': $ouiBorderRadius,
+  'borderRadiusLarge': $ouiBorderRadius * 2,
+  'borderRadiusXLarge': $ouiBorderRadius * 4,
 ) !default;
 
 $ouiPanelBackgroundColorModifiers: (

diff --git a/src/themes/oui-next/global_styling/variables/_side_nav.scss b/src/themes/oui-next/global_styling/variables/_side_nav.scss
@@ -0,0 +1,36 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+$ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7) !default;
+
+// Simulates the transparent backround on top of the page background to get an opaque color
+// in order to get the right contrast for text
+@function ouiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) {
+  $backgroundColorSimulated: mix($ouiPageBackgroundColor, $ouiColorLightShade, 70%);
+  $color: makeHighContrastColor($textColor, $backgroundColorSimulated, $ratio);
+  @return $color;
+}
+
+// Ensure all the possible text color have proper contrast when "emphasized"
+$ouiSideNavRootTextcolor: ouiSideNavEmphasizedContrast($ouiTitleColor) !default;
+$ouiSideNavBranchTextcolor: ouiSideNavEmphasizedContrast($ouiTextSubduedColor) !default;
+$ouiSideNavSelectedTextcolor: ouiSideNavEmphasizedContrast($ouiColorPrimary) !default;
+$ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabledText, $ouiContrastRatioDisabled) !default;
+
+
+/* OUI -> EUI Aliases */
+$euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor;
+$euiSideNavRootTextcolor: $ouiSideNavRootTextcolor;
+$euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor;
+$euiSideNavSelectedTextcolor: $ouiSideNavSelectedTextcolor;
+$euiSideNavDisabledTextcolor: $ouiSideNavDisabledTextcolor;
+@function euiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) { @return ouiSideNavEmphasizedContrast($textColor, $ratio); }
+/* End of Aliases */
diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -14,13 +14,14 @@ $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
 
 // sass-lint:disable no-color-literals
-$ouiButtonColorDisabled: lightOrDarkTheme($ouiColorMediumShade, $ouiColorLightShade) !default;
+$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, $ouiColorLightShade) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
 $ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default;
 // sass-lint:disable no-color-literals
 $ouiButtonColorGhostDisabled: lightOrDarkTheme(#585858, #353535) !default;
 
-$ouiButtonBorderRadius: 0 !default;
+$ouiButtonBorderRadius: $ouiBorderRadius !default;
+$ouiButtonBackgroundColor: $ouiColorEmptyShade;
 
 // Modifier naming and colors.
 $ouiButtonTypes: (
@@ -44,5 +45,6 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonBorderRadius: $ouiButtonBorderRadius;
+$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
 $euiButtonTypes: $ouiButtonTypes;
 /* End of Aliases */