@openmrs/esm-styleguide 3.3.2-pre.25 → 3.3.2-pre.31

package/src/_overrides.scss

@@ -1,100 +1,189 @@
-.bx--data-table,
-.bx--data-table-header,
-.bx--table-toolbar,
-.bx--data-table tbody {
+@use "@carbon/styles/scss/spacing";
+
+/* UI Shell Header */
+.cds--header {
+  @include brand-01(background-color);
+  border-bottom: none;
+}
+
+.cds--header__action:hover {
+  @include brand-02(background-color);
+}
+
+.cds--header__action--active {
+  @include brand-02(background-color);
+  @include brand-02(border-color);
+}
+
+.cds--header-panel {
+  @include brand-02(background-color);
+}
+
+.cds--header__menu-trigger > svg,
+.cds--header__menu-trigger:hover > svg,
+.cds--btn.cds--btn--icon-only.cds--header__action svg,
+.cds--btn.cds--btn--icon-only.cds--header__action:hover svg {
+  fill: white;
+}
+
+.cds--header-panel--expanded {
+  border-left: none;
+  border-right: none;
+}
+
+/* Content Switcher */
+.cds--content-switcher-btn {
+  background-color: $ui-02;
+  border-top: 1px solid #a6c8ff;
+  border-bottom: 1px solid #a6c8ff;
+  color: $text-02;
+
+  &:first-child,
+  &:last-child {
+    border-left: 0.0625rem solid #a6c8ff;
+    border-right: 0.0625rem solid #a6c8ff;
+  }
+
+  &::after {
+    background-color: transparent;
+  }
+
+  &.cds--content-switcher--selected {
+    background-color: $color-blue-10;
+    border: 1px solid $interactive-01;
+    color: $interactive-01;
+
+    &:active {
+      background-color: $color-blue-10;
+    }
+
+    &::after {
+      background-color: $color-blue-10;
+    }
+  }
+
+  &:first-of-type[aria-selected="false"] {
+    border-right: 0;
+  }
+
+  &:last-of-type[aria-selected="false"] {
+    border-left: 0;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: $ui-01;
+    color: $interactive-01;
+  }
+}
+
+.cds--content-switcher-btn:before {
+  display: none;
+}
+
+/* Tabs */
+.cds--tabs--scrollable
+  .cds--tabs--scrollable__nav-item--selected
+  .cds--tabs--scrollable__nav-link,
+.cds--tabs--scrollable
+  .cds--tabs--scrollable__nav-item--selected
+  .cds--tabs--scrollable__nav-link:active,
+.cds--tabs--scrollable
+  .cds--tabs--scrollable__nav-item--selected
+  .cds--tabs--scrollable__nav-link:focus {
+  border-bottom: 2px solid var(--brand-03);
+}
+
+.cds--tabs--scrollable.cds--tabs--scrollable--container
+  .cds--tabs--scrollable__nav-item--selected
+  .cds--tabs--scrollable__nav-link {
+  box-shadow: inset 0 2px 0 0 var(--brand-03);
+}
+
+.cds--tabs--scrollable .cds--tabs--scrollable__nav-link:active,
+.cds--tabs--scrollable .cds--tabs--scrollable__nav-link:focus {
+  outline: 2px solid var(--brand-03);
+}
+
+/* DataTables */
+.cds--data-table,
+.cds--data-table-header,
+.cds--table-toolbar,
+.cds--data-table tbody {
   background: transparent;
 }
 
-.bx--data-table-container {
+.cds--data-table-container {
   background: $ui-02;
   position: relative;
 }
 
-.bx--table-toolbar {
+.cds--table-toolbar {
   position: absolute;
   top: 2px;
 }
 
-.bx--data-table-header {
-  padding: $spacing-04;
+.cds--data-table-header {
+  padding: spacing.$spacing-04;
   text-align: start;
 }
 
-.bx--data-table-header__title {
-  font-size: $spacing-05;
+.cds--data-table-header__title {
+  font-size: spacing.$spacing-05;
   font-weight: 600;
   color: $text-02;
 }
 
-.bx--data-table thead,
-.bx--data-table tr,
-.bx--data-table td,
-.bx--data-table--sort th,
-.bx--data-table--sort th .bx--table-sort__flex {
-  height: $spacing-07;
+.cds--data-table thead,
+.cds--data-table tr,
+.cds--data-table td,
+.cds--data-table--sort th,
+.cds--data-table--sort th .cds--table-sort__flex {
+  height: spacing.$spacing-07;
   min-height: unset;
   color: $text-02;
 }
 
-.bx--btn--primary,
-.bx--btn--primary:active,
-.bx--btn--tertiary:hover,
-.bx--btn--tertiary:active,
-.bx--btn--tertiary:focus {
-  @include brand-03(background-color);
+/* Misc */
+.cds--btn--primary,
+.cds--btn--primary:active,
+.cds--btn--tertiary:hover,
+.cds--btn--tertiary:active,
+.cds--btn--tertiary:focus {
+  @include brand-01(background-color);
 }
 
-.bx--btn--primary:hover {
-  @include brand-01(background-color);
+.cds--btn--primary:hover {
+  @include brand-02(background-color);
 }
 
-.bx--btn--tertiary {
+.cds--btn--tertiary {
   @include brand-03(color);
 }
 
-.bx--btn--tertiary,
-.bx--btn--primary:focus,
-.bx--btn--tertiary:focus {
+.cds--btn--tertiary,
+.cds--btn--primary:focus,
+.cds--btn--tertiary:focus {
   @include brand-03(border-color);
 }
 
-.bx--btn--tertiary:hover,
-.bx--btn--tertiary:active,
-.bx--btn--tertiary:focus {
+.cds--btn--tertiary:hover,
+.cds--btn--tertiary:active,
+.cds--btn--tertiary:focus {
   color: $ui-02;
 }
 
-/* UI Shell header */
-
-.bx--header {
-  @include brand-01(background-color);
-  @include brand-02(border-bottom);
-}
-
-.bx--header__action:hover {
-  @include brand-02(background-color);
-}
-
-.bx--header-panel {
-  @include brand-02(background-color);
-}
-
-.bx--header__action--active {
-  @include brand-02(background-color);
-  @include brand-02(border-color);
-}
-
-.bx--overflow-menu--flip {
-  &.bx--overflow-menu-options {
+.cds--overflow-menu--flip {
+  &.cds--overflow-menu-options {
     background-color: $openmrs-background-grey;
     left: -6.025rem;
     min-width: 12.5rem;
-    top: $spacing-09;
+    top: spacing.$spacing-09;
   }
 }
 
-.bx--overflow-menu--flip {
-  &.bx--overflow-menu-options[data-floating-menu-direction="bottom"] {
+.cds--overflow-menu--flip {
+  &.cds--overflow-menu-options[data-floating-menu-direction="bottom"] {
     &::after {
       top: 0;
       height: 0;
@@ -104,70 +193,17 @@
   }
 }
 
-.bx--pagination-nav__page:not(.bx--pagination-nav__page--direction) {
+.cds--pagination-nav__page:not(.cds--pagination-nav__page--direction) {
   &::after {
     @include brand-03(background-color);
   }
 }
 
-.bx--pagination-nav__page .bx--pagination-nav__page--active,
-.bx--pagination-nav__page:focus {
+.cds--pagination-nav__page .cds--pagination-nav__page--active,
+.cds--pagination-nav__page:focus {
   outline: 2px solid var(--brand-03);
 }
 
-/* Content Switcher */
-
-.bx--content-switcher-btn {
-  background-color: $ui-02;
-  border: 1px solid #a6c8ff;
-  color: $text-02;
-
-  &:first-of-type[aria-selected="false"] {
-    border-right: 0;
-  }
-
-  &:last-of-type[aria-selected="false"] {
-    border-left: 0;
-  }
-
-  &:focus,
-  &:hover {
-    background-color: $color-blue-10;
-    color: $interactive-01;
-  }
-
-  &.bx--content-switcher--selected {
-    background-color: $color-blue-10;
-    border: 1px solid $interactive-01;
-    color: $interactive-01;
-  }
-}
-
-.bx--content-switcher-btn:before {
-  display: none;
-}
-
-/* Tabs Overrides */
-
-.bx--tabs--scrollable
-  .bx--tabs--scrollable__nav-item--selected
-  .bx--tabs--scrollable__nav-link,
-.bx--tabs--scrollable
-  .bx--tabs--scrollable__nav-item--selected
-  .bx--tabs--scrollable__nav-link:active,
-.bx--tabs--scrollable
-  .bx--tabs--scrollable__nav-item--selected
-  .bx--tabs--scrollable__nav-link:focus {
-  border-bottom: 2px solid var(--brand-03);
-}
-
-.bx--tabs--scrollable.bx--tabs--scrollable--container
-  .bx--tabs--scrollable__nav-item--selected
-  .bx--tabs--scrollable__nav-link {
-  box-shadow: inset 0 2px 0 0 var(--brand-03);
-}
-
-.bx--tabs--scrollable .bx--tabs--scrollable__nav-link:active,
-.bx--tabs--scrollable .bx--tabs--scrollable__nav-link:focus {
-  outline: 2px solid var(--brand-03);
+.cds--side-nav {
+  background-color: transparent;
 }

package/src/components/_general.scss

@@ -24,7 +24,7 @@ body {
     margin: 1.5em 0;
   }
 
-  .bx--snippet {
+  .cds--snippet {
     margin-top: 1.5em;
   }
 }

package/src/components/_main-content.scss

@@ -14,9 +14,9 @@
   --omrs-offline-banner-height: 1.5rem;
   --omrs-topnav-height: 4.5rem;
 
-  .bx--side-nav,
-  .bx--header-panel--expanded,
-  .bx--side-nav__overlay {
+  .cds--side-nav,
+  .cds--header-panel--expanded,
+  .cds--side-nav__overlay {
     top: var(--omrs-topnav-height);
   }
 }

package/src/left-nav/index.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { ExtensionSlot, useStore } from "@openmrs/esm-react-utils";
 import { createGlobalStore } from "@openmrs/esm-state";
-import { SideNav, SideNavProps } from "carbon-components-react";
+import { SideNav, SideNavProps } from "@carbon/react";
 import styles from "./left-nav.module.scss";
 
 interface LeftNavStore {

package/src/left-nav/left-nav.module.scss

@@ -1,13 +1,12 @@
+@use "@carbon/styles/scss/type";
 @import "../vars";
-@import "carbon-components/scss/globals/scss/typography.scss";
-@import "~carbon-components/scss/globals/scss/_spacing.scss";
 
 .link > div a:nth-child(1) {
   height: 3rem;
   padding: 1.5rem 0 1.5rem 1.2rem;
   color: $ui-04;
   border-left: 0.25rem solid transparent;
-  @include carbon--type-style("productive-heading-01");
+  @include type.type-style("heading-compact-01");
 }
 
 :global(.omrs-breakpoint-gt-tablet) .link > div {

package/src/modals/index.tsx

@@ -33,7 +33,7 @@ function createModalFrame() {
   const closeButton = htmlToElement(
     `
   <button
-    class="bx--modal-close"
+    class="cds--modal-close"
     type="button">
     <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:#000000;}.cls-2{fill:none;}</style></defs><title>close</title><polygon class="cls-1" points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"/><rect class="cls-2" width="32" height="32"/></svg>
   </button>`.trim()
@@ -41,7 +41,7 @@ function createModalFrame() {
 
   closeButton.addEventListener("click", closeHighestInstance);
   const outer = document.createElement("div");
-  outer.className = "bx--modal-container";
+  outer.className = "cds--modal-container";
   const contentContainer = document.createElement("div");
 
   outer.append(closeButton);

package/src/notifications/notification.component.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { InlineNotification } from "carbon-components-react";
+import { InlineNotification } from "@carbon/react";
 /** @module @category UI */
 
 export interface NotificationProps {

package/src/spinner/_spinner.scss

@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
 
-  > .bx--inline-loading {
+  > .cds--inline-loading {
     width: auto;
   }
 }

package/src/toasts/toast.component.tsx

@@ -1,6 +1,6 @@
 /** @module @category UI */
 import React, { useEffect, useState } from "react";
-import { ToastNotification } from "carbon-components-react";
+import { ToastNotification } from "@carbon/react";
 
 const defaultOptions = {
   millis: 5000,