mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Align v10.48 (#907)

Browse source 
* 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
This commit is contained in:
Eric Liu 2021-11-12 16:25:02 -08:00 • committed by GitHub
commit 27ba4350cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 128 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

19
COMPONENT_INDEX.md
View file

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

2
docs/package.json
View file

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

36
docs/src/COMPONENT_API.json
View file

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

7
docs/src/pages/components/InlineNotification.svx
View file

@ -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." />

8
docs/src/pages/components/ToastNotification.svx
View file

@ -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()}" />

10
docs/yarn.lock
View file

@ -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:
version "10.46.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.46.0.tgz#f167baa23bbc08a0e53a312eca835a2414b67d21"
integrity sha512-BWO1d/CBGZgyMjGN+nOkjqlfRek56/uFpyKMs443IeaJGvhZ0r7SFC5aeipxlg/BCwhxl5dcruzQ9d0MykNxSw==
carbon-components@10.48.0:
version "10.48.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.48.0.tgz#e1c31b7b5d27cf12299fd86f6c9b8f0546bb6b43"
integrity sha512-kz6WlB4sVyOW/fUZLQ+f83cS2AAvcNRXkMi6au1guUHMdoTtIBz62AGKGxq54Xy2hQZK0Ca6aH01NopxOV4wUw==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"

2
package.json
View file

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

15
src/Notification/InlineNotification.svelte
View file

@ -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
title="{title}"
subtitle="{subtitle}"
notificationType="inline"
>
<div class:bx--inline-notification__text-wrapper="{true}">
<p class:bx--inline-notification__title="{true}">
<slot name="title">{title}</slot>
</p>
<div class:bx--inline-notification__subtitle="{true}">
<slot name="subtitle">{subtitle}</slot>
</div>
<slot />
</NotificationTextDetails>
</div>
</div>
<slot name="actions" />
{#if !hideCloseButton}

5
src/Notification/NotificationTextDetails.svelte
View file

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

18
src/Notification/ToastNotification.svelte
View file

@ -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
title="{title}"
subtitle="{subtitle}"
caption="{caption}"
>
<div class:bx--toast-notification__details="{true}">
<h3 class:bx--toast-notification__title="{true}">
<slot name="title">{title}</slot>
</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}"

5
src/Tile/ExpandableTile.svelte
View file

@ -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" />

7
src/UIShell/GlobalHeader/HeaderNavItem.svelte
View file

@ -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>

22
src/UIShell/GlobalHeader/HeaderNavMenu.svelte
View file

@ -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') {

2
types/Notification/InlineNotification.svelte.d.ts vendored
View file

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

2
types/Notification/ToastNotification.svelte.d.ts vendored
View file

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

8
yarn.lock
View file

@ -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:
version "10.46.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.46.0.tgz#f167baa23bbc08a0e53a312eca835a2414b67d21"
integrity sha512-BWO1d/CBGZgyMjGN+nOkjqlfRek56/uFpyKMs443IeaJGvhZ0r7SFC5aeipxlg/BCwhxl5dcruzQ9d0MykNxSw==
carbon-components@10.48.0:
version "10.48.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.48.0.tgz#e1c31b7b5d27cf12299fd86f6c9b8f0546bb6b43"
integrity sha512-kz6WlB4sVyOW/fUZLQ+f83cS2AAvcNRXkMi6au1guUHMdoTtIBz62AGKGxq54Xy2hQZK0Ca6aH01NopxOV4wUw==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"