carbon-react 102.20.0 → 102.22.1

package/lib/components/navigation-bar/navigation-bar.style.d.ts

@@ -1,2 +1,11 @@
+import { PaddingProps, FlexboxProps } from "styled-system";
+import { StickyPosition, NavigationType } from "./navigation-bar.component";
+declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    /** Color scheme of navigation component */
+    navigationType?: NavigationType | undefined;
+    /** Defines the position of sticky navigation bar */
+    stickyPosition?: StickyPosition | undefined;
+    /** Defines the offset of sticky navigation bar */
+    stickyOffset?: string | undefined;
+}, never>;
 export default StyledNavigationBar;
-declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, {}, never>;

package/lib/components/split-button/split-button-children.style.js

@@ -22,28 +22,28 @@ const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
   theme,
   align
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.secondary};
+    background-color: var(--colorsActionMajorYang100);
     min-width: ${({
   minWidth
 }) => minWidth}px;
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
+    box-shadow: var(--boxShadow100);
 
     ${_button.default} {
-      background-color: ${theme.colors.secondary};
-      border: 1px solid ${theme.colors.secondary};
-      color: ${theme.colors.white};
+      background-color: var(--colorsActionMajorYang100);
+      border: 1px solid var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor500);
       display: block;
       margin-left: 0;
-      margin-top: 3px;
-      margin-bottom: 3px;
       min-width: 100%;
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};
 
       &:focus,
       &:hover {
-        background-color: ${theme.colors.tertiary};
+        color: var(--colorsActionMajorYang100);
+        background-color: var(--colorsActionMajor600);
       }
 
       & + & {

package/lib/components/split-button/split-button-toggle.style.js

@@ -27,23 +27,32 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   buttonType,
   disabled,
   displayed,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     ${!disabled && displayed ? (0, _styledComponents.css)`
-          background-color: ${theme.colors.secondary};
-          border-color: ${theme.colors.secondary};
+          background-color: var(--colorsActionMajor500);
+          border-color: var(--colorsActionMajor500);
 
           &,
           ${_icon.default} {
-            color: ${theme.colors.white};
+            color: var(--colorsActionMajorYang100);
           }
 
           &:focus {
-            border-left-color: ${theme.colors.secondary};
+            border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
-    ${!disabled && buttonType === "primary" && `border-left-color: ${theme.colors.secondary};`}
+    ${!disabled && buttonType === "primary" && `position: relative;
+      &::before {
+        content: '';
+        width: 2px;
+        height: 100%;
+        background: var(--colorsActionMajorYang100);
+        position: absolute;
+        left: -2px;
+        z-index: 2;
+      }  
+    `}
     ${buttonType === "secondary" && "border-left-width: 0;"}
     padding: 0 ${horizontalPaddingSizes[size]}px;
 

package/lib/components/split-button/split-button.style.js

@@ -25,9 +25,7 @@ const StyledSplitButton = _styledComponents.default.div`
     margin: 0;
 
     &:focus {
-      border: 3px solid ${({
-  theme
-}) => theme.colors.focus};
+      border: 3px solid var(--colorsSemanticFocus500);
       outline: none;
       margin: -1px;
     }

package/lib/hooks/__internal__/useIsAboveBreakpoint/index.d.ts

@@ -1 +1 @@
-export default function useIsAboveBreakpoint(breakpoint: number): boolean;
+export default function useIsAboveBreakpoint(breakpoint?: number): boolean;

package/lib/style/themes/base/index.d.ts

@@ -263,11 +263,16 @@ export interface ThemeObject {
       background: string;
       borderBottom: string;
     };
-
     dark: {
       background: string;
       borderBottom: string;
     };
+    black: {
+      background: string;
+    };
+    white: {
+      borderBottom: string;
+    };
   };
 
   numeralDate: {

package/lib/style/themes/sage/index.d.ts

@@ -483,6 +483,12 @@ declare var _default: {
             background: string;
             borderBottom: string;
         };
+        black: {
+            background: string;
+        };
+        white: {
+            borderBottom: string;
+        };
     };
     numeralDate: {
         passive: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.20.0",
+  "version": "102.22.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -90,7 +90,6 @@
     "@types/react": "16.9.31",
     "@types/react-dom": "16.0.11",
     "@types/styled-components": "^5.1.9",
-    "@types/styled-system": "^5.1.11",
     "@types/uuid": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
@@ -159,6 +158,7 @@
     "@sage/design-tokens": "^1.87.1",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
+    "@types/styled-system": "^5.1.11",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
     "dotenv": "^10.0.0",

package/lib/components/hr/hr.d.ts

@@ -1,12 +0,0 @@
-import { SpaceProps } from "styled-system";
-
-export interface HrProps extends SpaceProps {
-  /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).
-   * Enables the adaptive behaviour when set
-   */
-  adaptiveMxBreakpoint?: number;
-}
-
-declare function Hr(props: HrProps): JSX.Element;
-
-export default Hr;

package/lib/components/navigation-bar/navigation-bar.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { SpaceProps } from "styled-system";
-
-export interface NavigationBarProps extends SpaceProps {
-  children?: React.ReactNode;
-  ariaLabel?: string;
-  navigationType?: "light" | "dark" | "white" | "black";
-  isLoading?: boolean;
-  stickyPosition?: "top" | "bottom";
-  stickyOffset?: string;
-}
-
-declare function NavigationBar(props: NavigationBarProps): JSX.Element;
-
-export default NavigationBar;