mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixes (#575)

Browse source 
* fix(context-menu): only prevent default keydown behavior if menu is open

* docs(notification): update copy

* docs(select): update item groups example to use hidden default option

* docs: increase max-height to render UIShell, UnorderedList items

* fix(ui-shell): remove iconDescription prop from HeaderNavMenu #566

Fixes #566
This commit is contained in:
Eric Liu 2021-03-20 16:28:29 -07:00 • committed by GitHub
commit 63e7965745
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 41 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

13
COMPONENT_INDEX.md
View file

@ -1662,13 +1662,12 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| href | <code>let</code> | No | <code>string</code> | <code>"/"</code> | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the chevron icon |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| href | <code>let</code> | No | <code>string</code> | <code>"/"</code> | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
### Slots

10
docs/src/COMPONENT_API.json
View file

@ -4057,16 +4057,6 @@
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the chevron icon",
"type": "string",
"value": "\"Expand/Collapse\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

2
docs/src/pages/_layout.svelte
View file

@ -260,6 +260,6 @@
}
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
max-height: 120rem;
max-height: 124rem;
}
</style>

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

@ -9,15 +9,15 @@ source: Notification/InlineNotification.svelte
### Default (error)
<InlineNotification title="Error" subtitle="An internal server error occurred." />
<InlineNotification title="Error:" subtitle="An internal server error occurred." />
### Hidden close button
<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
### With actions
<InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours.">
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
<div slot="actions">
<NotificationActionButton>Learn more</NotificationActionButton>
</div>
@ -25,18 +25,18 @@ source: Notification/InlineNotification.svelte
### Notification variants
<InlineNotification kind="error" title="Error" subtitle="An internal server error occurred." />
<InlineNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification kind="success" title="Success" subtitle="Your settings have been saved." />
<InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
<InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification kind="success" title="Success:" subtitle="Your settings have been saved." />
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
### Low contrast
<InlineNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." />
<InlineNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." />
<InlineNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
<InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="success" title="Success:" subtitle="Your settings have been saved." />
<InlineNotification lowContrast kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification lowContrast kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />

2
docs/src/pages/components/Select.svx
View file

@ -36,7 +36,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
### Item groups
<Select labelText="Carbon theme" selected="g10" >
<Select labelText="Carbon theme" selected="0">
<SelectItem value="0" text="Select a theme" disabled hidden />
<SelectItemGroup label="Light theme">
<SelectItem value="white" text="White" />

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

@ -9,26 +9,26 @@ source: Notification/ToastNotification.svelte
### Default (error)
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
### Hidden close button
<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
### Notification variants
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
### Low contrast
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
<ToastNotification lowContrast kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

3
src/ContextMenu/ContextMenu.svelte
View file

@ -112,7 +112,8 @@
}
}}"
on:keydown
on:keydown|preventDefault="{(e) => {
on:keydown="{(e) => {
if (open) e.preventDefault();
if ($hasPopup) return;
if (e.key === 'ArrowDown') {

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

@ -14,9 +14,6 @@
/** Obtain a reference to the HTML anchor element */
export let ref = null;
/** Specify the ARIA label for the chevron icon */
export let iconDescription = "Expand/Collapse";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
</script>
@ -32,7 +29,7 @@
}}"
/>
<li class:bx--header__submenu="{true}" title="{iconDescription}">
<li class:bx--header__submenu="{true}">
<a
bind:this="{ref}"
role="menuitem"
@ -59,10 +56,7 @@
on:blur
>
{text}
<ChevronDown16
aria-label="{iconDescription}"
class="bx--header__menu-arrow"
/>
<ChevronDown16 class="bx--header__menu-arrow" />
</a>
<ul role="menu" aria-label="{text}" class:bx--header__menu="{true}">
<slot />

6
types/UIShell/GlobalHeader/HeaderNavMenu.d.ts vendored
View file

@ -25,12 +25,6 @@ export interface HeaderNavMenuProps
* @default null
*/
ref?: null | HTMLAnchorElement;
/**
* Specify the ARIA label for the chevron icon
* @default "Expand/Collapse"
*/
iconDescription?: string;
}
export default class HeaderNavMenu extends SvelteComponentTyped<