diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index e62d30f5ef..a97c2a0267 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -28,9 +28,21 @@ "description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.", "props": { "onClick": "event", - "variant": "string", - "colour": "string", - "size": "string", + "variant": { + "type": "options", + "options": ["text", "raised", "unelevated", "outlined"], + "default": "text" + }, + "colour": { + "type": "options", + "options": ["primary", "secondary"], + "default": "primary" + }, + "size": { + "type": "options", + "options": ["small", "medium", "large"], + "default": "medium" + }, "href": "string", "icon": "string", "trailingIcon": "bool", @@ -158,8 +170,7 @@ "props": { "onClick": "event", "id": "string", - "label": "string", - "names": "string", + "label": "string", "name": "string", "checked": "bool", "disabled": "bool", @@ -189,12 +200,28 @@ "props": { "onChange": "event", "label": "string", - "variant": "string", + "variant": { + "type": "options", + "options": ["standard", "outlined", "filled"], + "default": "standard" + }, "disabled": "bool", "fullwidth": "bool", - "colour":"string", - "size":"string", - "type": "string", + "colour": { + "type": "options", + "options": ["primary", "secondary"], + "default": "primary" + }, + "size":{ + "type": "options", + "options": ["small", "medium", "large"], + "default": "medium" + }, + "type": { + "type": "options", + "options": ["text", "password"], + "default": "text" + }, "required": "bool", "minLength": "number", "maxLength": "number", diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte index e4157ea95b..411b99c394 100644 --- a/packages/materialdesign-components/src/Button/Button.svelte +++ b/packages/materialdesign-components/src/Button/Button.svelte @@ -4,11 +4,11 @@ import ripple from "../Common/Ripple.js" import ClassBuilder from "../ClassBuilder.js" - const cb = new ClassBuilder("button", ["primary", "medium"]) + const cb = new ClassBuilder("button", ["primary", "medium", "text"]) export let onClick = () => {} - export let variant = "raised" + export let variant = "text" export let colour = "primary" export let size = "medium"