Fix combobox disabled state and remove unnecessary props

packages/bbui/src/Form/Checkbox.svelte

@@ -17,6 +17,6 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <Checkbox {error} {disabled} {text} {value} on:change={onChange} />
 </Field>

packages/bbui/src/Form/Combobox.svelte

@@ -8,7 +8,7 @@
   export let disabled = false
   export let labelPosition = "above"
   export let error = null
-  export let placeholder = "Choose an option"
+  export let placeholder = "Choose an option or type"
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
@@ -26,7 +26,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <Combobox
     {error}
     {disabled}

packages/bbui/src/Form/Core/Combobox.svelte

@@ -7,7 +7,7 @@
 
   export let value = null
   export let id = null
-  export let placeholder = "Choose an option"
+  export let placeholder = "Choose an option or type"
   export let disabled = false
   export let error = null
   export let options = []
@@ -22,7 +22,7 @@
   const getFieldText = (value, options, placeholder) => {
     // Always use placeholder if no value
     if (value == null || value === "") {
-      return placeholder || "Choose an option"
+      return placeholder || "Choose an option or type"
     }
 
     // Wait for options to load if there is a value but no options
@@ -43,12 +43,19 @@
   const onChange = e => {
     selectOption(e.target.value)
   }
+
+  $: console.log(disabled)
 </script>
 
-<div class="spectrum-InputGroup" class:is-focused={open || focus}>
+<div
+  class="spectrum-InputGroup"
+  class:is-focused={open || focus}
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}>
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-disabled={!!error}
+    class:is-invalid={!!error}
+    class:is-disabled={disabled}
     class:is-focused={open || focus}>
     <input
       type="text"
@@ -56,6 +63,7 @@
       on:blur={() => (focus = false)}
       on:change={onChange}
       {value}
+      {disabled}
       {placeholder}
       class="spectrum-Textfield-input spectrum-InputGroup-input" />
   </div>
@@ -63,7 +71,7 @@
     class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
     tabindex="-1"
     aria-haspopup="true"
-    disabled={!!error}
+    {disabled}
     on:click={() => (open = true)}>
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon"
@@ -108,6 +116,9 @@
     min-width: 0;
     width: 100%;
   }
+  .spectrum-Textfield {
+    width: 100%;
+  }
   .spectrum-Textfield-input {
     width: 0;
   }

packages/bbui/src/Form/DatePicker.svelte

@@ -18,7 +18,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <DatePicker
     {error}
     {disabled}

packages/bbui/src/Form/Dropzone.svelte

@@ -19,7 +19,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <CoreDropzone
     {error}
     {disabled}

packages/bbui/src/Form/Field.svelte

@@ -5,7 +5,6 @@
   export let id = null
   export let label = null
   export let labelPosition = "above"
-  export let disabled = false
   export let error = null
 </script>
 

packages/bbui/src/Form/Input.svelte

@@ -19,7 +19,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <TextField
     {error}
     {disabled}

packages/bbui/src/Form/Multiselect.svelte

@@ -21,7 +21,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <Multiselect
     {error}
     {disabled}

packages/bbui/src/Form/RadioGroup.svelte

@@ -25,7 +25,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <RadioGroup
     {error}
     {disabled}

packages/bbui/src/Form/Search.svelte

@@ -16,7 +16,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled}>
+<Field {label} {labelPosition}>
   <Search
     {disabled}
     {value}

packages/bbui/src/Form/Select.svelte

@@ -27,7 +27,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <Select
     {error}
     {disabled}

packages/bbui/src/Form/TextArea.svelte

@@ -18,7 +18,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <TextArea
     bind:getCaretPosition
     {error}

packages/bbui/src/Form/Toggle.svelte

@@ -17,6 +17,6 @@
   }
 </script>
 
-<Field {label} {labelPosition} {disabled} {error}>
+<Field {label} {labelPosition} {error}>
   <Switch {error} {disabled} {text} {value} on:change={onChange} />
 </Field>