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

Revert RadioTile tabindex

Browse source
This commit is contained in:
Richard O'flynn 2020-12-01 17:08:23 +00:00
commit ef76f2cb58
4 changed files with 10 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

19
COMPONENT_INDEX.md
View file

@ -2693,16 +2693,15 @@ 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 | | checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input | | tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
### Slots ### Slots

10
docs/src/COMPONENT_API.json
View file

@ -8691,16 +8691,6 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
} }
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

7
src/Tile/RadioTile.svelte
View file

@ -20,9 +20,6 @@
/** Specify a name attribute for the input */ /** Specify a name attribute for the input */
export let name = ""; export let name = "";
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext } from "svelte"; import { getContext } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
@ -34,13 +31,12 @@
</script> </script>
<input <input
bind:this="{ref}"
type="radio" type="radio"
id="{id}" id="{id}"
name="{name}" name="{name}"
value="{value}" value="{value}"
checked="{checked}" checked="{checked}"
tabindex="-1" tabindex="{tabindex}"
class:bx--tile-input="{true}" class:bx--tile-input="{true}"
on:change on:change
on:change="{() => { on:change="{() => {
@ -56,7 +52,6 @@
/> />
<label <label
for="{id}" for="{id}"
tabindex="{tabindex}"
class:bx--tile="{true}" class:bx--tile="{true}"
class:bx--tile--selectable="{true}" class:bx--tile--selectable="{true}"
class:bx--tile--is-selected="{checked}" class:bx--tile--is-selected="{checked}"

6
types/Tile/RadioTile.d.ts vendored
View file

@ -42,12 +42,6 @@ export interface RadioTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTag
* @default "" * @default ""
*/ */
name?: string; name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
} }
export default class RadioTile { export default class RadioTile {