Align v10.48 (#907)

* chore(deps-dev): upgrade carbon-components to v10.48.0

* feat(ui-shell): support HeaderNavMenu with current item

* refactor(tile): remove unnecessary "position: relative" style

* refactor(tile): remove unused ref

* feat(inline-notification): make title/subtitle slottable

Closes #883

* feat(toast-notification): make title/subtitle/caption slottable

* chore(notification): deprecate NotificationTextDetails

COMPONENT_INDEX.md

@@ -1997,9 +1997,11 @@ None.
 ### Slots
 
 | Slot name | Default | Props | Fallback                |
-| :-------- | :------ | :---- | :------- |
+| :-------- | :------ | :---- | :---------------------- |
 | --        | Yes     | --    | --                      |
 | actions   | No      | --    | --                      |
+| subtitle  | No      | --    | <code>{subtitle}</code> |
+| title     | No      | --    | <code>{title}</code>    |
 
 ### Events
 
@@ -4386,8 +4388,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 ### Slots
 
 | Slot name | Default | Props | Fallback                |
-| :-------- | :------ | :---- | :------- |
+| :-------- | :------ | :---- | :---------------------- |
 | --        | Yes     | --    | --                      |
+| caption   | No      | --    | <code>{caption}</code>  |
+| subtitle  | No      | --    | <code>{subtitle}</code> |
+| title     | No      | --    | <code>{title}</code>    |
 
 ### Events
 

docs/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.46.0",
+    "carbon-components": "10.48.0",
     "carbon-components-svelte": "../",
     "carbon-icons-svelte": "^10.38.0",
     "clipboard-copy": "^4.0.1",

docs/src/COMPONENT_API.json

@@ -5218,7 +5218,19 @@
       ],
       "slots": [
         { "name": "__default__", "default": true, "slot_props": "{}" },
-        { "name": "actions", "default": false, "slot_props": "{}" }
+        { "name": "actions", "default": false, "slot_props": "{}" },
+        {
+          "name": "subtitle",
+          "default": false,
+          "fallback": "{subtitle}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "title",
+          "default": false,
+          "fallback": "{title}",
+          "slot_props": "{}"
+        }
       ],
       "events": [
         {
@@ -12267,7 +12279,27 @@
           "reactive": false
         }
       ],
-      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "slots": [
+        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "caption",
+          "default": false,
+          "fallback": "{caption}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "subtitle",
+          "default": false,
+          "fallback": "{subtitle}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "title",
+          "default": false,
+          "fallback": "{title}",
+          "slot_props": "{}"
+        }
+      ],
       "events": [
         {
           "type": "dispatched",

docs/src/pages/components/InlineNotification.svx

@@ -11,6 +11,13 @@ source: Notification/InlineNotification.svelte
 
 <InlineNotification title="Error:" subtitle="An internal server error occurred." />
 
+### Slottable title, subtitle
+
+<InlineNotification>
+  <strong slot="title">Error: </strong>
+  <strong slot="subtitle">An internal server error occurred.</strong>
+</InlineNotification>
+
 ### Hidden close button
 
 <InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />

docs/src/pages/components/ToastNotification.svx

@@ -11,6 +11,14 @@ source: Notification/ToastNotification.svelte
 
 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 
+### Slottable title, subtitle, caption
+
+<ToastNotification>
+  <strong slot="title">Error: </strong>
+  <strong slot="subtitle">An internal server error occurred.</strong>
+  <strong slot="caption">{new Date().toLocaleString()}</strong>
+</ToastNotification>
+
 ### Hidden close button
 
 <ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

docs/yarn.lock

@@ -845,14 +845,14 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.47.6"
+  version "0.48.1"
   dependencies:
     flatpickr "4.6.9"
 
-carbon-components@10.46.0:
+carbon-components@10.48.0:
-  version "10.46.0"
+  version "10.48.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.46.0.tgz#f167baa23bbc08a0e53a312eca835a2414b67d21"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.48.0.tgz#e1c31b7b5d27cf12299fd86f6c9b8f0546bb6b43"
-  integrity sha512-BWO1d/CBGZgyMjGN+nOkjqlfRek56/uFpyKMs443IeaJGvhZ0r7SFC5aeipxlg/BCwhxl5dcruzQ9d0MykNxSw==
+  integrity sha512-kz6WlB4sVyOW/fUZLQ+f83cS2AAvcNRXkMi6au1guUHMdoTtIBz62AGKGxq54Xy2hQZK0Ca6aH01NopxOV4wUw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

package.json

@@ -28,7 +28,7 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
-    "carbon-components": "10.46.0",
+    "carbon-components": "10.48.0",
     "carbon-icons-svelte": "^10.38.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",

src/Notification/InlineNotification.svelte

@@ -32,7 +32,6 @@
 
   import { createEventDispatcher, onMount } from "svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
-  import NotificationTextDetails from "./NotificationTextDetails.svelte";
   import NotificationButton from "./NotificationButton.svelte";
 
   const dispatch = createEventDispatcher();
@@ -78,13 +77,15 @@
   >
     <div class:bx--inline-notification__details="{true}">
       <NotificationIcon notificationType="inline" kind="{kind}" />
-      <NotificationTextDetails
+      <div class:bx--inline-notification__text-wrapper="{true}">
-        title="{title}"
+        <p class:bx--inline-notification__title="{true}">
-        subtitle="{subtitle}"
+          <slot name="title">{title}</slot>
-        notificationType="inline"
+        </p>
-      >
+        <div class:bx--inline-notification__subtitle="{true}">
+          <slot name="subtitle">{subtitle}</slot>
+        </div>
         <slot />
-      </NotificationTextDetails>
+      </div>
     </div>
     <slot name="actions" />
     {#if !hideCloseButton}

src/Notification/NotificationTextDetails.svelte

@@ -1,4 +1,9 @@
 <script>
+  /**
+   * @deprecated
+   * This component will be removed in version 1.0.0.
+   */
+
   /**
    * Set the type of notification
    * @type {"toast" | "inline"}

src/Notification/ToastNotification.svelte

@@ -36,7 +36,6 @@
   import { createEventDispatcher, onMount } from "svelte";
   import NotificationButton from "./NotificationButton.svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
-  import NotificationTextDetails from "./NotificationTextDetails.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -79,13 +78,18 @@
     on:mouseleave
   >
     <NotificationIcon kind="{kind}" />
-    <NotificationTextDetails
+    <div class:bx--toast-notification__details="{true}">
-      title="{title}"
+      <h3 class:bx--toast-notification__title="{true}">
-      subtitle="{subtitle}"
+        <slot name="title">{title}</slot>
-      caption="{caption}"
+      </h3>
-    >
+      <div class:bx--toast-notification__subtitle="{true}">
+        <slot name="subtitle">{subtitle}</slot>
+      </div>
+      <div class:bx--toast-notification__caption="{true}">
+        <slot name="caption">{caption}</slot>
+      </div>
       <slot />
-    </NotificationTextDetails>
+    </div>
     {#if !hideCloseButton}
       <NotificationButton
         iconDescription="{iconDescription}"

src/Tile/ExpandableTile.svelte

@@ -35,7 +35,6 @@
   import { afterUpdate } from "svelte";
   import ChevronDown16 from "../icons/ChevronDown16.svelte";
 
-  let refContent = null;
   let refAbove = null;
 
   afterUpdate(() => {
@@ -64,7 +63,7 @@
   class:bx--tile--is-expanded="{expanded}"
   class:bx--tile--light="{light}"
   {...$$restProps}
-  style="position: relative; {expanded
+  style="{expanded
     ? $$restProps.style
     : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
   on:click
@@ -76,7 +75,7 @@
   on:mouseenter
   on:mouseleave
 >
-  <div bind:this="{refContent}">
+  <div>
     <div bind:this="{refAbove}" class:bx--tile-content="{true}">
       <span class:bx--tile-content__above-the-fold="{true}">
         <slot name="above" />

src/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -16,6 +16,13 @@
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
+
+  import { getContext } from "svelte";
+
+  const id = "ccs-" + Math.random().toString(36);
+  const ctx = getContext("HeaderNavMenu");
+
+  $: if (ctx) ctx.updateSelectedItems({ id, isSelected });
 </script>
 
 <li>

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -14,7 +14,23 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
   import ChevronDown16 from "../../icons/ChevronDown16.svelte";
+
+  const selectedItems = writable({});
+
+  setContext("HeaderNavMenu", {
+    updateSelectedItems(item) {
+      selectedItems.update((_items) => ({
+        ..._items,
+        [item.id]: item.isSelected,
+      }));
+    },
+  });
+
+  $: isCurrentSubmenu =
+    Object.values($selectedItems).filter(Boolean).length > 0;
 </script>
 
 <svelte:window
@@ -29,7 +45,10 @@
   }}"
 />
 
-<li class:bx--header__submenu="{true}">
+<li
+  class:bx--header__submenu="{true}"
+  class:bx--header__submenu--current="{isCurrentSubmenu}"
+>
   <a
     bind:this="{ref}"
     role="menuitem"
@@ -41,6 +60,7 @@
     class:bx--header__menu-item="{true}"
     class:bx--header__menu-title="{true}"
     {...$$restProps}
+    style="{$$restProps.style}; z-index: 1"
     on:keydown
     on:keydown="{({ key }) => {
       if (key === 'Enter') {

types/Notification/InlineNotification.svelte.d.ts

@@ -67,5 +67,5 @@ export default class InlineNotification extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
   },
-  { default: {}; actions: {} }
+  { default: {}; actions: {}; subtitle: {}; title: {} }
 > {}

types/Notification/ToastNotification.svelte.d.ts

@@ -73,5 +73,5 @@ export default class ToastNotification extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
   },
-  { default: {} }
+  { default: {}; caption: {}; subtitle: {}; title: {} }
 > {}

yarn.lock

@@ -447,10 +447,10 @@ caniuse-lite@^1.0.30001181:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
   integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
 
-carbon-components@10.46.0:
+carbon-components@10.48.0:
-  version "10.46.0"
+  version "10.48.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.46.0.tgz#f167baa23bbc08a0e53a312eca835a2414b67d21"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.48.0.tgz#e1c31b7b5d27cf12299fd86f6c9b8f0546bb6b43"
-  integrity sha512-BWO1d/CBGZgyMjGN+nOkjqlfRek56/uFpyKMs443IeaJGvhZ0r7SFC5aeipxlg/BCwhxl5dcruzQ9d0MykNxSw==
+  integrity sha512-kz6WlB4sVyOW/fUZLQ+f83cS2AAvcNRXkMi6au1guUHMdoTtIBz62AGKGxq54Xy2hQZK0Ca6aH01NopxOV4wUw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"