Add pill

src/components.d.ts

@@ -379,7 +379,7 @@ export namespace Components {
          */
         "pattern": string;
         /**
-          * Set to true to draw a pill-style button with rounded edges.
+          * Set to true to draw a pill-style input with rounded edges.
          */
         "pill": boolean;
         /**
@@ -468,10 +468,6 @@ export namespace Components {
     interface SlMenuLabel {
     }
     interface SlProgressBar {
-        /**
-          * The height of the progress bar in pixels.
-         */
-        "height": number;
         /**
           * The progress bar's percentage, 0 to 100.
          */
@@ -580,6 +576,10 @@ export namespace Components {
           * The select's name.
          */
         "name": string;
+        /**
+          * Set to true to draw a pill-style select with rounded edges.
+         */
+        "pill": boolean;
         /**
           * The select's placeholder text.
          */
@@ -665,7 +665,7 @@ export namespace Components {
     }
     interface SlTag {
         /**
-          * Set to true to draw a pill-style button with rounded edges.
+          * Set to true to draw a pill-style tag with rounded edges.
          */
         "pill": boolean;
         /**
@@ -1493,7 +1493,7 @@ declare namespace LocalJSX {
          */
         "pattern"?: string;
         /**
-          * Set to true to draw a pill-style button with rounded edges.
+          * Set to true to draw a pill-style input with rounded edges.
          */
         "pill"?: boolean;
         /**
@@ -1566,10 +1566,6 @@ declare namespace LocalJSX {
     interface SlMenuLabel {
     }
     interface SlProgressBar {
-        /**
-          * The height of the progress bar in pixels.
-         */
-        "height"?: number;
         /**
           * The progress bar's percentage, 0 to 100.
          */
@@ -1698,6 +1694,10 @@ declare namespace LocalJSX {
           * Emitted when the control gains focus
          */
         "onSlFocus"?: (event: CustomEvent<any>) => void;
+        /**
+          * Set to true to draw a pill-style select with rounded edges.
+         */
+        "pill"?: boolean;
         /**
           * The select's placeholder text.
          */
@@ -1787,7 +1787,7 @@ declare namespace LocalJSX {
          */
         "onSlRemove"?: (event: CustomEvent<any>) => void;
         /**
-          * Set to true to draw a pill-style button with rounded edges.
+          * Set to true to draw a pill-style tag with rounded edges.
          */
         "pill"?: boolean;
         /**

src/components/select/select.tsx

@@ -66,6 +66,9 @@ export class Select {
   /** The value of the control. This will be a string or an array depending on `multiple`. */
   @Prop({ mutable: true }) value: string | Array<string> = '';
 
+  /** Set to true to draw a pill-style select with rounded edges. */
+  @Prop() pill = false;
+
   /** The select's label. */
   @Prop() label = '';
 
@@ -220,6 +223,7 @@ export class Select {
           <sl-tag
             type="info"
             size={this.size}
+            pill={this.pill}
             removable
             onClick={event => event.stopPropagation()}
             onSlRemove={() => {
@@ -294,7 +298,8 @@ export class Select {
             'select--multiple': this.multiple,
             'select--small': this.size === 'small',
             'select--medium': this.size === 'medium',
-            'select--large': this.size === 'large'
+            'select--large': this.size === 'large',
+            'select--pill': this.pill
           }}
           onSlShow={this.handleMenuShow}
           onSlHide={this.handleMenuHide}
@@ -307,6 +312,7 @@ export class Select {
             name={this.name}
             value={this.displayLabel}
             disabled={this.disabled}
+            pill={this.pill}
             placeholder={this.displayLabel === '' && this.displayTags.length === 0 ? this.placeholder : null}
             readonly={true}
             size={this.size}