add name to form components

.gitignore

@@ -6,4 +6,5 @@
 yarn-debug.log*
 yarn-error.log*
 *.tgz
-.vscode
+.vscode
+.idea/*

src/components/ComboBox/ComboBox.stories.js

@@ -19,6 +19,7 @@ export const Default = () => ({
     light: boolean('Light (light)', false),
     disabled: boolean('Disabled (disabled)', false),
     invalid: boolean('Invalid (invalid)', false),
-    invalidText: text('Invalid text (invalidText)', 'A valid value is required')
+    invalidText: text('Invalid text (invalidText)', 'A valid value is required'),
+    name: 'combo-box-name'
   }
 });

src/components/ComboBox/ComboBox.svelte

@@ -18,6 +18,7 @@
   export let titleText = '';
   export let translateWithId = undefined;
   export let value = '';
+  export let name = Math.random();
 
   import { afterUpdate } from 'svelte';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
@@ -100,6 +101,7 @@
         open = true;
       }}
       {id}
+      {name}
       {disabled}
       {translateWithId}>
       <input

src/components/DatePicker/DatePicker.stories.js

@@ -18,6 +18,7 @@ export const Default = () => ({
     },
     datePickerInput: {
       id: 'date-picker-input-id',
+      name: 'date-picker-input-name',
       labelText: text('Label text (labelText in <DatePickerInput>)', 'Date Picker label'),
       hideLabel: boolean('Hide label (hideLabel)', false),
       pattern: select('The date format (pattern in <DatePickerInput>)', patterns, 'd{1,2}/d{4}'),

src/components/DatePicker/DatePickerInput.svelte

@@ -12,6 +12,7 @@
   export let placeholder = '';
   export let style = undefined;
   export let type = 'text';
+  export let name = Math.random();
 
   import { getContext, onMount } from 'svelte';
   import Calendar16 from 'carbon-icons-svelte/lib/Calendar16';
@@ -71,6 +72,7 @@
         blurInput(relatedTarget);
       }}
       {id}
+      {name}
       {placeholder}
       {type}
       {pattern}

src/components/Dropdown/Dropdown.stories.js

@@ -17,7 +17,8 @@ const sizes = {
 export const Default = () => ({
   Component,
   props: {
-    id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
+    id: text('Dropdown id', 'carbon-dropdown-id'),
+    name: text('Dropdown name', 'carbon-dropdown-name'),
     type: select('Dropdown type (type)', types, 'default'),
     size: select('Field size (size)', sizes, '') || undefined,
     label: text('Label (label)', 'Dropdown menu options'),

src/components/Dropdown/Dropdown.svelte

@@ -4,6 +4,7 @@
   export let disabled = false;
   export let helperText = '';
   export let id = Math.random();
+  export let name = Math.random();
   export let inline = false;
   export let invalid = false;
   export let invalidText = '';
@@ -75,6 +76,7 @@
     {type}
     {size}
     {id}
+    {name}
     aria-label={$$props['aria-label']}
     class={cx('--dropdown', invalid && '--dropdown--invalid', open && '--dropdown--open', inline && '--dropdown--inline', disabled && '--dropdown--disabled', light && '--dropdown--light')}
     on:click={({ target }) => {

src/components/MultiSelect/MultiSelect.Story.svelte

@@ -32,7 +32,8 @@
   <div style="width: 300px; margin-top: 2rem;">
     <MultiSelect
       {...$$props}
-      id="multiselect"
+      id="multi-select-id"
+      name="multi-select-name"
       placeholder="Filter..."
       bind:selectedIds
       bind:items

src/components/MultiSelect/MultiSelect.stories.js

@@ -17,7 +17,8 @@ const sizes = {
 export const Default = () => ({
   Component,
   props: {
-    id: 'multiselect',
+    id: text('MultiSelect id', 'multi-select-id'),
+    name: text('MultiSelect name', 'multi-select-name'),
     titleText: text('Title (titleText)', 'Multiselect Title'),
     helperText: text('Helper text (helperText)', 'This is not helper text'),
     filterable: boolean('Filterable (filterable)', false),

src/components/MultiSelect/MultiSelect.svelte

@@ -6,6 +6,7 @@
   export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
   export let helperText = '';
   export let id = Math.random();
+  export let name = Math.random();
   export let invalid = false;
   export let invalidText = '';
   export let items = [];
@@ -236,6 +237,7 @@
           {disabled}
           {placeholder}
           {id}
+          {name}
           value={inputValue} />
         {#if invalid}
           <WarningFilled16 class={cx('--list-box__invalid-icon')} />

src/components/NumberInput/NumberInput.Story.svelte

@@ -14,7 +14,8 @@
   {:else}
     <NumberInput
       {...$$props}
-      id="slider"
+      id="number-input-id"
+      name="number-input-id"
       bind:value
       on:change={({ detail }) => {
         console.log('on:change', detail);

src/components/NumberInput/NumberInput.stories.js

@@ -6,7 +6,8 @@ export default { title: 'NumberInput', decorators: [withKnobs] };
 export const Default = () => ({
   Component,
   props: {
-    id: 'number-input',
+    id: text('NumberInput id', 'number-input-id'),
+    name: text('NumberInput name', 'number-input-name'),
     label: text('Label (label)', 'Number Input label'),
     hideLabel: boolean('Hide label (hideLabel)', false),
     min: number('Minimum value (min)', 0),

src/components/NumberInput/NumberInput.svelte

@@ -8,6 +8,7 @@
   export let hideLabel = false;
   export let iconDescription = '';
   export let id = Math.random();
+  export let name = Math.random();
   export let invalid = false;
   export let invalidText = 'Provide invalidText';
   export let mobile = false;
@@ -96,6 +97,7 @@
           }}
           {disabled}
           {id}
+          {name}
           {max}
           {min}
           {step}

src/components/Select/Select.Story.svelte

@@ -16,7 +16,7 @@
     {#if story === 'skeleton'}
       <SelectSkeleton {...$$props} />
     {:else}
-      <Select {...$$props.select} id="select-1" bind:selected>
+      <Select {...$$props.select} id="select-id" name="select-name" bind:selected>
         <SelectItem value="placeholder-item" text="Choose an option" disabled hidden />
         <SelectItemGroup {...$$props.group} label="Category 1">
           <SelectItem value="option-1" text="Option 1" />

src/components/Select/Select.stories.js

@@ -17,7 +17,9 @@ export const Default = () => ({
         'A valid value is required'
       ),
       labelText: text('Label text (helperText)', 'Select'),
-      helperText: text('Helper text (helperText)', 'Optional helper text.')
+      helperText: text('Helper text (helperText)', 'Optional helper text.'),
+      id: text('Select id', 'select-id'),
+      name: text('Select name', 'select-name')
     },
     group: {
       disabled: boolean('Disabled (disabled in <SelectItemGroup>)', false)

src/components/Select/Select.svelte

@@ -5,6 +5,7 @@
   export let helperText = '';
   export let hideLabel = false;
   export let id = Math.random();
+  export let name = Math.random();
   export let inline = false;
   export let invalid = false;
   export let invalidText = '';
@@ -62,7 +63,9 @@
               selectedValue.set(target.value);
             }}
             on:blur
-            {id}>
+            {id}
+            {name}
+          >
             <slot />
           </select>
           <ChevronDown16 class={cx('--select__arrow')} />

src/components/Slider/Slider.Story.svelte

@@ -14,7 +14,7 @@
   {:else}
     <Slider
       {...$$props}
-      id="slider"
+      id="slider-id"
       bind:value
       on:change={({ detail }) => {
         console.log('on:change', detail);

src/components/Slider/Slider.stories.js

@@ -6,6 +6,7 @@ export default { title: 'Slider', decorators: [withKnobs] };
 export const Default = () => ({
   Component,
   props: {
+    id: text('Slider id', 'slider-id'),
     name: text('Form item name (name)', ''),
     inputType: text('The form element type (inputType)', 'number'),
     ariaLabelInput: text(

src/components/TextArea/TextArea.stories.js

@@ -6,7 +6,8 @@ export default { title: 'TextArea', decorators: [withKnobs] };
 export const Default = () => ({
   Component,
   props: {
-    id: 'text-area',
+    id: text('TextArea id', 'text-area-id'),
+    name: text('TextArea name', 'text-area-name'),
     disabled: boolean('Disabled (disabled)', false),
     light: boolean('Light variant (light)', false),
     hideLabel: boolean('No label (hideLabel)', false),

src/components/TextArea/TextArea.svelte

@@ -6,6 +6,7 @@
   export let helperText = '';
   export let hideLabel = false;
   export let id = Math.random();
+  export let name = Math.random();
   export let invalid = false;
   export let invalidText = '';
   export let labelText = '';
@@ -51,6 +52,7 @@
       on:blur
       {disabled}
       {id}
+      {name}
       {cols}
       {rows}
       {value}

src/components/TextInput/PasswordInput.svelte

@@ -6,6 +6,7 @@
   export let hideLabel = false;
   export let hidePasswordLabel = 'Hide password';
   export let id = Math.random();
+  export let name = Math.random();
   export let invalid = false;
   export let invalidText = '';
   export let labelText = '';
@@ -62,6 +63,7 @@
       on:focus
       on:blur
       {id}
+      {name}
       {placeholder}
       {type}
       {value}

src/components/TextInput/TextInput.stories.js

@@ -14,7 +14,8 @@ export const Default = () => ({
     invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
     helperText: text('Helper text (helperText)', 'Optional helper text.'),
     placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
-    id: 'text-input'
+    id: text('TextInput id', 'text-input-id'),
+    name: text('TextInput name', 'text-input-name')
   }
 });
 
@@ -30,7 +31,8 @@ export const TogglePasswordVisibility = () => ({
     invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
     helperText: text('Helper text (helperText)', 'Optional helper text.'),
     placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
-    id: 'text-input',
+    id: text('TextInput id', 'text-input-id'),
+    name: text('TextInput name', 'text-input-name'),
     tooltipPosition: select(
       'Tooltip position (tooltipPosition)',
       ['top', 'right', 'bottom', 'left'],
@@ -64,7 +66,8 @@ export const ControlledTogglePasswordVisibility = () => ({
     invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
     helperText: text('Helper text (helperText)', 'Optional helper text.'),
     placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
-    id: 'text-input',
+    id: text('TextInput id', 'text-input-id'),
+    name: text('TextInput name', 'text-input-name'),
     tooltipPosition: select(
       'Tooltip position (tooltipPosition)',
       ['top', 'right', 'bottom', 'left'],

src/components/TextInput/TextInput.svelte

@@ -5,6 +5,7 @@
   export let helperText = '';
   export let hideLabel = false;
   export let id = Math.random();
+  export let name = Math.random();
   export let invalid = false;
   export let invalidText = '';
   export let labelText = '';
@@ -56,6 +57,7 @@
       on:focus
       on:blur
       {id}
+      {name}
       {placeholder}
       {type}
       {value}

src/components/TimePicker/TimePicker.stories.js

@@ -21,7 +21,9 @@ export const Default = () => ({
         'Form validation UI content (invalidText in <TimePicker>)',
         'A valid value is required'
       ),
-      maxlength: number('Maximum length (maxlength in <TimePicker>)', 5)
+      maxlength: number('Maximum length (maxlength in <TimePicker>)', 5),
+      id: text('TimePicker id', 'time-picker-id'),
+      name: text('TimePicker name', 'time-picker-name'),
     },
     select: {
       disabled: boolean('Disabled (disabled in <TimePickerSelect>)', false),
@@ -30,7 +32,9 @@ export const Default = () => ({
       iconDescription: text(
         'Trigger icon description (iconDescription in <TimePickerSelect>)',
         'open list of options'
-      )
+      ),
+      id: text('TimePickerSelect id', 'time-picker-select-id'),
+      name: text('TimePickerSelect name', 'time-picker-select-name'),
     }
   }
 });

src/components/TimePicker/TimePicker.svelte

@@ -4,6 +4,7 @@
   export let disabled = false;
   export let hideLabel = false;
   export let id = Math.random();
+  export let name = Math.random();
   export let invalid = false;
   export let invalidText = 'Invalid time format.';
   export let labelText = '';
@@ -42,6 +43,7 @@
         {placeholder}
         {maxlength}
         {id}
+        {name}
         {type}
         {value}
         {disabled} />

src/components/TimePicker/TimePickerSelect.svelte

@@ -5,6 +5,7 @@
   export let hideLabel = true;
   export let iconDescription = 'Open list of options';
   export let id = Math.random();
+  export let name = Math.random();
   export let labelText = '';
   export let style = undefined;
   export let value = '';
@@ -39,6 +40,7 @@
       selectedValue.set(target.value);
     }}
     {id}
+    {name}
     {disabled}
     {value}>
     <slot />

src/components/Toggle/Toggle.Story.svelte

@@ -14,7 +14,7 @@
 
 <Layout>
   {#if story === 'toggled'}
-    <Toggle {...$$props} id="toggle-1" bind:toggled />
+    <Toggle {...$$props} id="toggle-id" name="toggle-name" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSkeleton />
   {:else}

src/components/Toggle/Toggle.stories.js

@@ -10,7 +10,9 @@ export const Default = () => ({
     'aria-label': text('ARIA label of the toggle (aria-label)', ''),
     labelA: text('Label for untoggled state (labelA)', 'Off'),
     labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false)
+    disabled: boolean('Disabled (disabled)', false),
+    id: text('Toggle id', 'toggle-id'),
+    name: text('Toggle name', 'toggle-name')
   }
 });
 
@@ -24,7 +26,9 @@ export const Toggled = () => ({
     'aria-label': text('ARIA label of the toggle (aria-label)', ''),
     labelA: text('Label for untoggled state (labelA)', 'Off'),
     labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false)
+    disabled: boolean('Disabled (disabled)', false),
+    id: text('Toggle id', 'toggle-id'),
+    name: text('Toggle name', 'toggle-name')
   }
 });
 

src/components/Toggle/Toggle.svelte

@@ -3,6 +3,7 @@
   export { className as class };
   export let disabled = false;
   export let id = Math.random();
+  export let name = Math.random();
   export let labelA = 'Off';
   export let labelB = 'On';
   export let labelText = '';
@@ -31,7 +32,9 @@
     on:focus
     on:blur
     {disabled}
-    {id} />
+    {id}
+    {name}
+  />
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
     class={cx('--toggle-input__label')}

src/components/ToggleSmall/ToggleSmall.Story.svelte

@@ -14,10 +14,10 @@
 
 <Layout>
   {#if story === 'toggled'}
-    <ToggleSmall {...$$props} id="toggle-1" bind:toggled />
+    <ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSmallSkeleton />
   {:else}
-    <ToggleSmall {...$$props} id="toggle-1" />
+    <ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" />
   {/if}
 </Layout>

src/components/ToggleSmall/ToggleSmall.stories.js

@@ -10,7 +10,9 @@ export const Default = () => ({
     'aria-label': text('ARIA label of the toggle (aria-label)', ''),
     labelA: text('Label for untoggled state (labelA)', 'Off'),
     labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false)
+    disabled: boolean('Disabled (disabled)', false),
+    id: text('ToggleSmall id', 'toggle-small-id'),
+    name: text('ToggleSmall name', 'toggle-small-name')
   }
 });
 
@@ -24,7 +26,9 @@ export const Toggled = () => ({
     'aria-label': text('ARIA label of the toggle (aria-label)', ''),
     labelA: text('Label for untoggled state (labelA)', 'Off'),
     labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false)
+    disabled: boolean('Disabled (disabled)', false),
+    id: text('ToggleSmall id', 'toggle-small-id'),
+    name: text('ToggleSmall name', 'toggle-small-name')
   }
 });
 

src/components/ToggleSmall/ToggleSmall.svelte

@@ -3,6 +3,7 @@
   export { className as class };
   export let disabled = false;
   export let id = Math.random();
+  export let name = Math.random();
   export let labelA = 'Off';
   export let labelB = 'On';
   export let labelText = '';
@@ -31,7 +32,9 @@
     on:focus
     on:blur
     {disabled}
-    {id} />
+    {id}
+    {name}
+  />
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
     class={cx('--toggle-input__label')}