mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +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

3
COMPONENT_INDEX.md
View file

@ -1663,12 +1663,11 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | 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 | | 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 |
### Slots ### Slots

10
docs/src/COMPONENT_API.json
View file

@ -4057,16 +4057,6 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": true "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": "{}" }], "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 { .bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
max-height: 120rem; max-height: 124rem;
} }
</style> </style>

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

@ -9,15 +9,15 @@ source: Notification/InlineNotification.svelte
### Default (error) ### Default (error)
<InlineNotification title="Error" subtitle="An internal server error occurred." /> <InlineNotification title="Error:" subtitle="An internal server error occurred." />
### Hidden close button ### 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 ### 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"> <div slot="actions">
<NotificationActionButton>Learn more</NotificationActionButton> <NotificationActionButton>Learn more</NotificationActionButton>
</div> </div>
@ -25,18 +25,18 @@ source: Notification/InlineNotification.svelte
### Notification variants ### Notification variants
<InlineNotification kind="error" title="Error" subtitle="An internal server error occurred." /> <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" 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="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="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" title="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="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
### Low contrast ### Low contrast
<InlineNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." /> <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" 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="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="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" title="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="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 ### Item groups
<Select labelText="Carbon theme" selected="g10" > <Select labelText="Carbon theme" selected="0">
<SelectItem value="0" text="Select a theme" disabled hidden /> <SelectItem value="0" text="Select a theme" disabled hidden />
<SelectItemGroup label="Light theme"> <SelectItemGroup label="Light theme">
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />

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

@ -9,26 +9,26 @@ source: Notification/ToastNotification.svelte
### Default (error) ### 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 ### 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 ### Notification variants
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." 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="[MMM D, YYYY h:mm A]" /> <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="[MMM D, YYYY h:mm A]" /> <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="[MMM D, YYYY h:mm A]" /> <ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" /> <ToastNotification kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
<ToastNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" /> <ToastNotification kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
### Low contrast ### Low contrast
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." 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="[MMM D, YYYY h:mm A]" /> <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="[MMM D, YYYY h:mm A]" /> <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="[MMM D, YYYY h:mm A]" /> <ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="{new Date().toLocaleString()}" />
<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" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
<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="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
on:keydown|preventDefault="{(e) => { on:keydown="{(e) => {
if (open) e.preventDefault();
if ($hasPopup) return; if ($hasPopup) return;
if (e.key === 'ArrowDown') { if (e.key === 'ArrowDown') {

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

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

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

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