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

feat: support size prop for input components

Browse source 
- DatePickerInput, NumberInput, Select, PasswordInput, TextInput
This commit is contained in:
Eric Liu 2020-07-20 20:29:50 -07:00
commit 331dc4a656
9 changed files with 60 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/TextInput/PasswordInput.svelte
View file

@ -1,4 +1,5 @@
<script>
export let size = undefined; // "sm" | "xl"
export let type = "password";
export let value = "";
export let hidePasswordLabel = "Hide password";
@ -70,6 +71,7 @@
class:bx--password-input={true}
class:bx--text-input--light={light}
class:bx--text-input--invalid={invalid}
class={size && `bx--text-input--${size}`}
on:change
on:input
on:input={({ target }) => {

9
src/TextInput/TextInput.stories.js
View file

@ -3,9 +3,16 @@ import Component from "./TextInput.Story.svelte";
export default { title: "TextInput", decorators: [withKnobs] };
const sizes = {
"Extra large size (xl)": "xl",
"Default size": undefined,
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),
@ -25,6 +32,7 @@ export const TogglePasswordVisibility = () => ({
Component,
props: {
story: "password-visibility",
size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),
@ -62,6 +70,7 @@ export const ControlledTogglePasswordVisibility = () => ({
Component,
props: {
story: "controlled",
size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),

2
src/TextInput/TextInput.svelte
View file

@ -1,4 +1,5 @@
<script>
export let size = undefined; // "sm" | "xl"
export let type = "";
export let value = "";
export let placeholder = "";
@ -62,6 +63,7 @@
class:bx--text-input={true}
class:bx--text-input--light={light}
class:bx--text-input--invalid={invalid}
class={size && `bx--text-input--${size}`}
on:change
on:input
on:input={({ target }) => {