Merge branch 'main' into fix-chrome-mask

Signed-off-by: Miki <miki@amazon.com>

CHANGELOG.md

@@ -14,6 +14,9 @@
 ### 🐛 Bug Fixes
 
 -  Add Temporary fix for Chrome's problem with rendering mask images ([#1414](https://github.com/opensearch-project/oui/pull/1414))
+- Additional borderRadius sizes on Panels ([#1417](https://github.com/opensearch-project/oui/pull/1417))
+- Configuration of borderRadius on Cards ([#1417](https://github.com/opensearch-project/oui/pull/1417))
+- Update components to respect new breakpoints ([#1416])(https://github.com/opensearch-project/oui/pull/1416)
 
 ### 🚞 Infrastructure
 
@@ -29,6 +32,11 @@
 
 ### 🔩 Tests
 
+- Make Side Nav variables themeable ([#1417](https://github.com/opensearch-project/oui/pull/1417))
+- Make Links use font-weight `$ouiFontWeightSemiBold` (no change for existing themes) ([#1417](https://github.com/opensearch-project/oui/pull/1417))
+- Enable themes to define background colors for Buttons ([#1417](https://github.com/opensearch-project/oui/pull/1417))
+
+
 ## [`1.13.0`](https://github.com/opensearch-project/oui/tree/1.13)
 
 ### Deprecations

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",

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>
       ),

src-docs/src/views/guidelines/colors/_color_section.scss

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .guideColorsPage__stickySlider {
     position: sticky;
     top: $ouiHeaderHeightCompensation;

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>
 );

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

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;

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;

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}
 

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

src/components/header/header_links/header_links.test.tsx

@@ -55,7 +55,7 @@ describe('OuiHeaderLinks', () => {
     test('is rendered', () => {
       const component = render(
         <OuiHeaderLinks
-          popoverBreakpoints={['xs', 's', 'm', 'l', 'xl']}
+          popoverBreakpoints={['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']}
           popoverButtonProps={{
             iconType: 'bolt',
             className: 'customButtonClass',

src/components/link/_mixins.scss

@@ -11,7 +11,7 @@
 
 @mixin ouiLink {
   text-align: left;
-  font-weight: 600;
+  font-weight: $ouiFontWeightSemiBold;
 
   &:hover {
     text-decoration: underline;

src/components/page/page_header/_page_header_content.scss

@@ -13,7 +13,7 @@
   width: 100%;
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiPageHeaderContent__rightSideItems {
     flex-direction: row-reverse;
   }

src/components/page/page_side_bar/_page_side_bar.scss

@@ -30,7 +30,7 @@
   }
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiPageSideBar--sticky {
     @include ouiScrollBar;
     overflow-y: auto;

src/components/page/page_template.tsx

@@ -135,7 +135,7 @@ export const OuiPageTemplate: FunctionComponent<OuiPageTemplateProps> = ({
    * Full height ~madness~ logic
    */
   const canFullHeight =
-    useIsWithinBreakpoints(['m', 'l', 'xl']) &&
+    useIsWithinBreakpoints(['m', 'l', 'xl', 'xxl', 'xxxl']) &&
     (template === 'default' || template === 'empty');
   const fullHeightClass = { 'oui-fullHeight': fullHeight && canFullHeight };
   const yScrollClass = { 'oui-yScroll': fullHeight && canFullHeight };

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"

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);

src/components/search_bar/_search_bar.scss

@@ -13,7 +13,7 @@
   min-width: calc($ouiFormMaxWidth / 2);
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiSearchBar__filtersHolder {
     // Helps with flex-wrapping
     max-width: calc(100% - #{$ouiSize});

src/components/side_nav/_index.scss

@@ -9,7 +9,6 @@
  * GitHub history for details.
  */
 
-@import 'variables';
 @import 'mixins';
 
 @import 'side_nav';

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.

src/components/table/_responsive.scss

@@ -21,7 +21,7 @@
   }
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiTableRowCell--hideForDesktop { // must come last to override any special cases
     // sass-lint:disable-block no-important
     display: none !important;

src/components/table/_table.scss

@@ -33,7 +33,7 @@
 }
 
 // Compressed styles not for mobile
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiTable--compressed {
     .ouiTableCellContent {
       @include ouiFontSizeXS;

src/global_styling/mixins/_header.scss

@@ -22,7 +22,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include ouiBreakpoint('m', 'l', 'xl') {
+    @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .ouiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};
@@ -47,7 +47,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include euiBreakpoint('m', 'l', 'xl') {
+    @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .euiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};

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 */

src/global_styling/variables/_index.scss

@@ -35,3 +35,4 @@
 @import 'panel';
 @import 'tool_tip';
 @import 'collapsible_nav';
+@import 'side_nav';

src/global_styling/variables/_panel.scss

@@ -18,6 +18,8 @@ $ouiPanelPaddingModifiers: (
 $ouiPanelBorderRadiusModifiers: (
   'borderRadiusNone': 0,
   'borderRadiusMedium': $ouiBorderRadius,
+  'borderRadiusLarge': $ouiBorderRadius * 2,
+  'borderRadiusXLarge': $ouiBorderRadius * 4,
 ) !default;
 
 $ouiPanelBackgroundColorModifiers: (