Merge branch 'main' into patch-dropdown

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Next
 
 - Add right padding and ellipsis on text overflow to BasicDropdown
+- Add functionality to remove `placeholder` <option> in BasicDropdown component
 
 ## v0.6.0
 

src/lib/BasicDropdown/BasicDropdown.stories.svelte

@@ -7,7 +7,7 @@
     component: BasicDropdown,
     tags: ["autodocs"],
     argTypes: {
-      arrow_fill_color: { control: "color" },
+      arrowFillColor: { control: "color" },
       data: { control: "object" }
     },
     parameters: {
@@ -40,9 +40,9 @@
   name="Default"
   args={{
     id: "dropdown-story",
-    dropdown_width: 260,
-    inline_label: "Dropdown label",
-    arrow_fill_color: "#1696D1",
+    dropdownWidth: 260,
+    inlineLabel: "Dropdown label",
+    arrowFillColor: "#1696D1",
     placeholder: "Select a state",
     data: sampleData
   }}
@@ -52,7 +52,7 @@
   name="With value specified"
   args={{
     id: "dropdown-story-2",
-    inline_label: "Dropdown with value",
+    inlineLabel: "Dropdown with value",
     placeholder: "Select a state",
     value: "Ohio",
     data: sampleData
@@ -62,8 +62,8 @@
 <Story
   name="With value selected"
   args={{
-    id: "dropdown-story-2",
-    inline_label: "Dropdown with selected value",
+    id: "dropdown-story-3",
+    inlineLabel: "Dropdown with selected value",
     placeholder: "Select a state",
     data: sampleData
   }}
@@ -78,3 +78,13 @@
     expect(selectEl.value).toBe(sampleData[3].value);
   }}
 />
+
+<Story
+  name="With placeholder set to null and no value set"
+  args={{
+    id: "dropdown-story-4",
+    inlineLabel: "Dropdown without a value",
+    placeholder: null,
+    data: sampleData
+  }}
+/>

src/lib/BasicDropdown/BasicDropdown.svelte

@@ -25,45 +25,47 @@
    * Label for the dropdown (currently hidden)
    * @type {string}
    */
-  export let inline_label;
+  export let inlineLabel;
 
   /**
-   * placeholder for when no option is selected
-   * @type {string} [placeholder="Select..."]
+   * placeholder for when no option is selected (accepts a null value)
+   * @type {string | null} [placeholder="Select..."]
    */
   export let placeholder = "Select...";
 
   /**
    * Width (px) of the dropdown
    * @type {number}
    */
-  export let dropdown_width = 260;
+  export let dropdownWidth = 260;
 
   /**
    * Hex color for arrow fill
    * @type {string}
    */
-  export let arrow_fill_color = urbanColors.blue;
+  export let arrowFillColor = urbanColors.blue;
 
   // define the svg arrow
   let arrow = `data:image/svg+xml;utf8,<svg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15.1313 0.666626C15.5179 0.666626 15.7794 0.846014 15.9272 1.20479C16.0749 1.56356 15.9954 1.85507 15.7111 2.09052L8.65117 9.12027C8.45791 9.26602 8.2419 9.33329 8.00316 9.33329C7.76442 9.33329 7.57115 9.26602 7.42335 9.12027L0.283802 2.09052C-0.000415318 1.85507 -0.0686276 1.55235 0.0677969 1.20479C0.21559 0.846014 0.477071 0.666626 0.863607 0.666626H15.1313Z' fill='${encodeURIComponent(
-    arrow_fill_color
+    arrowFillColor
   )}'/></svg>`;
 </script>
 
 <div class="dropdown-container">
-  <label aria-hidden="true" hidden for={id}>{inline_label}</label>
+  <label aria-hidden="true" hidden for={id}>{inlineLabel}</label>
   <select
     bind:value
     name={id}
     {id}
     class="dropdown-select"
-    style={`--bg-img: url("${arrow}"); width: ${dropdown_width}px;`}
-    aria-label={inline_label}
+    style={`--bg-img: url("${arrow}"); width: ${dropdownWidth}px;`}
+    aria-label={inlineLabel}
     on:change
   >
     <!-- options -->
-    <option value={null}>{placeholder}</option>
+    {#if placeholder}
+      <option value={null}>{placeholder}</option>
+    {/if}
     {#each data as d (d.value)}
       {#if d.value !== ""}
         <option value={d.value}>{d.label}</option>