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

Refactor prop types to omit redundant null for null | HTMLElement types (#998)

Browse source 
* refactor: omit redundant `null` prop type for HTMLElements

* yarn build:lib

* test: assert updated element prop types
This commit is contained in:
Eric Liu 2022-01-12 13:36:47 -10:00 • committed by GitHub
commit 6de73f86fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 40 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

14
COMPONENT_INDEX.md
View file

@ -658,7 +658,7 @@ export interface ComboBoxItem {
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | | :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| listRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element | | listRef | <code>let</code> | Yes | <code>HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value | | value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
@ -782,12 +782,12 @@ 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; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element |
| y | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position | | y | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position |
| x | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position | | x | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
| target | <code>let</code> | No | <code>null &#124; HTMLElement &#124; HTMLElement[]</code> | <code>null</code> | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window | | target | <code>let</code> | No | <code>HTMLElement &#124; HTMLElement[]</code> | <code>null</code> | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |
### Slots ### Slots
@ -2413,8 +2413,8 @@ export interface MultiSelectItem {
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | | :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element | | selectionRef | <code>let</code> | Yes | <code>HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element | | fieldRef | <code>let</code> | Yes | <code>HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
| multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element | | multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
| inputRef | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | inputRef | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
@ -4613,8 +4613,8 @@ 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; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the search bar | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the search bar |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the value of the search input | | value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the value of the search input |
| persistent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to keep the search bar expanded | | persistent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to keep the search bar expanded |

10
docs/src/COMPONENT_API.json
View file

@ -1604,7 +1604,7 @@
"name": "listRef", "name": "listRef",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the list HTML element", "description": "Obtain a reference to the list HTML element",
"type": "null | HTMLDivElement", "type": "HTMLDivElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -1824,7 +1824,7 @@
"name": "target", "name": "target",
"kind": "let", "kind": "let",
"description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window", "description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window",
"type": "null | HTMLElement | HTMLElement[]", "type": "HTMLElement | HTMLElement[]",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -6700,7 +6700,7 @@
"name": "fieldRef", "name": "fieldRef",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the field box element", "description": "Obtain a reference to the field box element",
"type": "null | HTMLDivElement", "type": "HTMLDivElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -6711,7 +6711,7 @@
"name": "selectionRef", "name": "selectionRef",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the selection element", "description": "Obtain a reference to the selection element",
"type": "null | HTMLDivElement", "type": "HTMLDivElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -12806,7 +12806,7 @@
"name": "ref", "name": "ref",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the input HTML element", "description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement", "type": "HTMLInputElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,

2
src/ComboBox/ComboBox.svelte
View file

@ -90,7 +90,7 @@
/** /**
* Obtain a reference to the list HTML element * Obtain a reference to the list HTML element
* @type {null | HTMLDivElement} * @type {HTMLDivElement}
*/ */
export let listRef = null; export let listRef = null;

2
src/ContextMenu/ContextMenu.svelte
View file

@ -6,7 +6,7 @@
/** /**
* Specify an element or list of elements to trigger the context menu. * Specify an element or list of elements to trigger the context menu.
* If no element is specified, the context menu applies to the entire window * If no element is specified, the context menu applies to the entire window
* @type {null | HTMLElement | HTMLElement[]} * @type {HTMLElement | HTMLElement[]}
*/ */
export let target = null; export let target = null;

2
src/DataTable/ToolbarSearch.svelte
View file

@ -21,7 +21,7 @@
/** /**
* Obtain a reference to the input HTML element * Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} * @type {HTMLInputElement}
*/ */
export let ref = null; export let ref = null;

4
src/MultiSelect/MultiSelect.svelte
View file

@ -136,13 +136,13 @@
/** /**
* Obtain a reference to the field box element * Obtain a reference to the field box element
* @type {null | HTMLDivElement} * @type {HTMLDivElement}
*/ */
export let fieldRef = null; export let fieldRef = null;
/** /**
* Obtain a reference to the selection element * Obtain a reference to the selection element
* @type {null | HTMLDivElement} * @type {HTMLDivElement}
*/ */
export let selectionRef = null; export let selectionRef = null;

2
src/TreeView/TreeViewNode.svelte
View file

@ -22,7 +22,7 @@
/** /**
* Finds the nearest parent tree node * Finds the nearest parent tree node
* @param {HTMLElement} node * @param {HTMLElement} node
* @returns {null | HTMLElement} * @returns {HTMLElement}
*/ */
function findParentTreeNode(node) { function findParentTreeNode(node) {
if (node.classList.contains("bx--tree-parent-node")) return node; if (node.classList.contains("bx--tree-parent-node")) return node;

2
tests/ComboBox.test.svelte
View file

@ -9,6 +9,7 @@
]; ];
let ref: ComboBox; let ref: ComboBox;
let listRef: HTMLDivElement = null;
$: ref?.clear(); $: ref?.clear();
</script> </script>
@ -19,6 +20,7 @@
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
items="{items}" items="{items}"
bind:listRef
/> />
<ComboBox <ComboBox

5
tests/ContextMenu.test.svelte
View file

@ -9,13 +9,16 @@
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16"; import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16"; import Cut16 from "carbon-icons-svelte/lib/Cut16";
let target: HTMLElement = null;
let selectedId = "0"; let selectedId = "0";
let selectedIds = []; let selectedIds = [];
$: console.log("selectedId", selectedId); $: console.log("selectedId", selectedId);
</script> </script>
<ContextMenu open on:open="{(e) => console.log(e.detail)}"> <div bind:this="{target}"></div>
<ContextMenu open on:open="{(e) => console.log(e.detail)}" bind:target>
<ContextMenuOption <ContextMenuOption
kind="danger" kind="danger"
indented indented

2
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -135,7 +135,7 @@ export interface ComboBoxProps
* Obtain a reference to the list HTML element * Obtain a reference to the list HTML element
* @default null * @default null
*/ */
listRef?: null | HTMLDivElement; listRef?: HTMLDivElement;
} }
export default class ComboBox extends SvelteComponentTyped< export default class ComboBox extends SvelteComponentTyped<

2
types/ContextMenu/ContextMenu.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface ContextMenuProps
* If no element is specified, the context menu applies to the entire window * If no element is specified, the context menu applies to the entire window
* @default null * @default null
*/ */
target?: null | HTMLElement | HTMLElement[]; target?: HTMLElement | HTMLElement[];
/** /**
* Set to `true` to open the menu * Set to `true` to open the menu

2
types/DataTable/ToolbarSearch.svelte.d.ts vendored
View file

@ -37,7 +37,7 @@ export interface ToolbarSearchProps
* Obtain a reference to the input HTML element * Obtain a reference to the input HTML element
* @default null * @default null
*/ */
ref?: null | HTMLInputElement; ref?: HTMLInputElement;
} }
export default class ToolbarSearch extends SvelteComponentTyped< export default class ToolbarSearch extends SvelteComponentTyped<

4
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -197,13 +197,13 @@ export interface MultiSelectProps
* Obtain a reference to the field box element * Obtain a reference to the field box element
* @default null * @default null
*/ */
fieldRef?: null | HTMLDivElement; fieldRef?: HTMLDivElement;
/** /**
* Obtain a reference to the selection element * Obtain a reference to the selection element
* @default null * @default null
*/ */
selectionRef?: null | HTMLDivElement; selectionRef?: HTMLDivElement;
} }
export default class MultiSelect extends SvelteComponentTyped< export default class MultiSelect extends SvelteComponentTyped<