@openmrs/esm-styleguide 3.3.2-pre.9 → 4.0.0-pre.0

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/_vars.scss

@@ -24,17 +24,6 @@ $field-01: #f4f4f4;
 $grey-2: #e0e0e0;
 $labeldropdown: #c6c6c6;
 
-$brand-primary-10: #d9fbfb;
-$brand-primary-20: #9ef0f0;
-$brand-primary-30: #3ddbd9;
-$brand-primary-40: #08bdba;
-$brand-primary-50: #009d9a;
-
-/* 60,70 and 80 are already declared as brand-01, 02 and 03 respectively */
-
-$brand-primary-90: #022b30;
-$brand-primary-100: #081a1c;
-
 @mixin brand-01($property) {
   #{$property}: #005d5d;
   #{$property}: var(--brand-01);
@@ -59,9 +48,11 @@ $brand-primary-100: #081a1c;
 $breakpoint-phone-min: 0px;
 $breakpoint-phone-max: 600px;
 $breakpoint-tablet-min: 601px;
-$breakpoint-tablet-max: 1200px;
-$breakpoint-desktop-min: 1201px;
-$breakpoint-desktop-max: 99999999px;
+$breakpoint-tablet-max: 1023px;
+$breakpoint-small-desktop-min: 1024px;
+$breakpoint-small-desktop-max: 1439px;
+$breakpoint-large-desktop-min: 1440px;
+$breakpoint-large-desktop-max: 99999999px;
 
 /* These color variables will be removed in a future release */
 $brand-teal-01: #007d79;

package/src/breakpoints/index.ts

@@ -1,19 +1,42 @@
+export const Breakpoint = {
+  PHONE_MIN: 0,
+  PHONE_MAX: 600,
+  TABLET_MIN: 601,
+  TABLET_MAX: 1023,
+  SMALL_DESKTOP_MIN: 1024,
+  SMALL_DESKTOP_MAX: 1439,
+  LARGE_DESKTOP_MIN: 1440,
+  LARGE_DESKTOP_MAX: Number.MAX_SAFE_INTEGER,
+} as const;
+
 function setBodyCssClasses() {
   document.body.classList.toggle(
     "omrs-breakpoint-lt-tablet",
-    window.innerWidth < 600
+    window.innerWidth < Breakpoint.TABLET_MIN
   );
   document.body.classList.toggle(
     "omrs-breakpoint-gt-phone",
-    window.innerWidth >= 600
+    window.innerWidth > Breakpoint.PHONE_MAX
+  );
+  document.body.classList.toggle(
+    "omrs-breakpoint-gt-tablet",
+    window.innerWidth > Breakpoint.TABLET_MAX
   );
   document.body.classList.toggle(
     "omrs-breakpoint-lt-desktop",
-    window.innerWidth < 1200
+    window.innerWidth < Breakpoint.SMALL_DESKTOP_MIN
   );
   document.body.classList.toggle(
-    "omrs-breakpoint-gt-tablet",
-    window.innerWidth >= 1200
+    "omrs-breakpoint-lt-small-desktop",
+    window.innerWidth < Breakpoint.SMALL_DESKTOP_MIN
+  );
+  document.body.classList.toggle(
+    "omrs-breakpoint-lt-large-desktop",
+    window.innerWidth < Breakpoint.LARGE_DESKTOP_MIN
+  );
+  document.body.classList.toggle(
+    "omrs-breakpoint-gt-small-desktop",
+    window.innerWidth > Breakpoint.SMALL_DESKTOP_MAX
   );
 }
 

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/index.tsx

@@ -8,6 +8,7 @@ import {
 } from "./notification.component";
 import ActiveNotifications from "./active-notifications.component";
 import isEmpty from "lodash-es/isEmpty";
+import { createRoot } from "react-dom/client";
 
 const inlineNotificationsSubject = new Subject<InlineNotificationMeta>();
 let notificationId = 0;
@@ -19,10 +20,8 @@ let notificationId = 0;
  */
 export function renderInlineNotifications(target: HTMLElement | null) {
   if (target) {
-    render(
-      <ActiveNotifications subject={inlineNotificationsSubject} />,
-      target
-    );
+    const root = createRoot(target);
+    root.render(<ActiveNotifications subject={inlineNotificationsSubject} />);
   }
 }
 

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/index.tsx

@@ -1,6 +1,6 @@
 /** @module @category UI */
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Subject } from "rxjs";
 import { ToastDescriptor, ToastNotificationMeta } from "./toast.component";
 import ActiveToasts from "./active-toasts.component";
@@ -16,7 +16,8 @@ let toastId = 0;
  */
 export function renderToasts(target: HTMLElement | null) {
   if (target) {
-    render(<ActiveToasts subject={toastsSubject} />, target);
+    const root = createRoot(target);
+    root.render(<ActiveToasts subject={toastsSubject} />);
   }
 }
 

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,