feat: improved input-group

src/components/Combobox/Combobox.vue

@@ -20,7 +20,7 @@
     </template>
 
     <template #after="{ toggleCompletions }">
-      <FdButton
+      <FdInputGroupButton
         @click="toggleCompletions"
         :compact="compact"
         icon="navigation-down-arrow"
@@ -43,10 +43,10 @@
 <script>
 import { Uid } from "./../../mixins";
 import FdInput from "./../Form/Controls/Input.vue";
-import FdButton from "./../Button/Button.vue";
 import FdComboboxBase from "./../ComboboxBase/ComboboxBase.vue";
 import FdMenu from "./../Menu/Menu.vue";
 import FdMenuList from "./../Menu/MenuList.vue";
+import FdInputGroupButton from "./../InputGroup/InputGroupButton.vue";
 
 export default {
   name: "FdCombobox",
@@ -63,9 +63,9 @@ export default {
   components: {
     FdMenu,
     FdMenuList,
-    FdButton,
     FdComboboxBase,
-    FdInput
+    FdInput,
+    FdInputGroupButton
   },
   props: {
     value: { type: String, default: null },

src/components/ComboboxBase/ComboboxBase.vue

@@ -1,29 +1,35 @@
 <template>
-  <FdPopover ref="popover" adjustsBodyWidth placement="bottom-start">
+  <fd-popover ref="popover" adjustsBodyWidth placement="bottom-start">
     <template #control="{ hide, show, toggle }">
       <div class="fd-combobox-control">
-        <FdInputGroup
-          :compact="compact"
-          afterClass="fd-input-group__addon--button"
-        >
-          <slot name="input" :hideCompletions="hide" :showCompletions="show" />
+        <fd-input-group :compact="compact">
+          <template #input>
+            <slot
+              name="input"
+              :hideCompletions="hide"
+              :showCompletions="show"
+            />
+          </template>
 
           <template #after>
-            <slot name="after" :toggleCompletions="toggle" />
+            <fd-input-group-addon>
+              <slot name="after" :toggleCompletions="toggle" />
+            </fd-input-group-addon>
           </template>
-        </FdInputGroup>
+        </fd-input-group>
       </div>
     </template>
 
     <template #default="{hide}">
       <slot :hideCompletions="hide" />
     </template>
-  </FdPopover>
+  </fd-popover>
 </template>
 
 <script>
 import { Uid } from "./../../mixins";
-import { InputGroup as FdInputGroup } from "./../Form";
+import FdInputGroup from "./../InputGroup/InputGroup.vue";
+import FdInputGroupAddon from "./../InputGroup/InputGroupAddon.vue";
 import FdPopover from "./../Popover/Popover.vue";
 
 export default {
@@ -35,7 +41,8 @@ export default {
   },
   components: {
     FdPopover,
-    FdInputGroup
+    FdInputGroup,
+    FdInputGroupAddon
   },
   computed: {
     popover() {

src/components/Form/Controls/Checkbox.vue

@@ -1,7 +1,6 @@
 <template>
   <input
     type="checkbox"
-    class="fd-form__control"
     :id="inputId"
     :class="inputClasses"
     :disabled="disabled ? '' : null"

src/components/Form/Controls/Input.vue

@@ -14,8 +14,7 @@
   />
   <input
     v-else
-    class="fd-input fd-form__control"
-    :class="inputClasses"
+    :class="inputClasses_"
     :id="inputId"
     :readonly="readonly ? '' : null"
     :disabled="disabled ? '' : null"
@@ -56,6 +55,14 @@ export default {
       focused: false
     };
   },
+  computed: {
+    inputClasses_() {
+      return {
+        ...this.inputClasses,
+        "fd-input": !this.plain
+      };
+    }
+  },
   props: {
     placeholder: $default(""),
     type: $default("text"),

src/components/Form/Controls/InputMixin.js

@@ -1,17 +1,21 @@
 import { $enum, $default } from "./Helper/prop";
+import { Compactable } from "./../../../mixins";
 
 // The InputMixin can be used by input controls in order to gain a useful default set
 // of props, injections and computed properties.
 export default {
   inject: {
     itemId: { default: null }
   },
+  mixins: [Compactable],
   props: {
     state: $enum("valid", "invalid", "warning"),
     required: $default(false),
-    compact: $default(false),
     disabled: $default(false),
-    readonly: $default(false)
+    readonly: $default(false),
+    // If true, certain classes like fd-input and fd-form__control
+    // are not added to the input-element.
+    plain: $default(false)
   },
   computed: {
     inputStateClasses() {
@@ -20,6 +24,7 @@ export default {
     },
     inputClasses() {
       return {
+        "fd-form__control": !this.plain,
         "fd-input--compact": this.compact,
         ...this.inputStateClasses,
         "is-required": this.required

src/components/Form/Controls/Radio.vue

@@ -1,7 +1,6 @@
 <template>
   <input
     type="radio"
-    class="fd-form__control"
     :class="inputClasses"
     :id="inputId"
     :disabled="disabled ? '' : null"

src/components/Form/Controls/Select.vue

@@ -1,6 +1,5 @@
 <template>
   <select
-    class="fd-form__control"
     :class="inputClasses"
     :id="inputId"
     :readonly="readonly ? '' : null"

src/components/Form/Controls/index.js

@@ -1,5 +1,4 @@
 export { default as Input } from "./Input.vue";
-export { default as InputGroup } from "./InputGroup.vue";
 export { default as Select } from "./Select.vue";
 export { default as TextArea } from "./TextArea.vue";
 export { default as Toggle } from "./Toggle.vue";

src/components/Form/index.js

@@ -7,7 +7,6 @@ import Legend from "./Legend.vue";
 import FieldSet from "./FieldSet.vue";
 import Form from "./Form.vue";
 import Input from "./Controls/Input.vue";
-import InputGroup from "./Controls/InputGroup.vue";
 import Select from "./Controls/Select.vue";
 import TextArea from "./Controls/TextArea.vue";
 import Toggle from "./Controls/Toggle.vue";
@@ -19,7 +18,6 @@ import { pluginify } from "./../../util";
 export default pluginify(
   Form,
   Input,
-  InputGroup,
   Select,
   TextArea,
   Toggle,
@@ -36,7 +34,6 @@ export default pluginify(
 export {
   Form,
   Input,
-  InputGroup,
   Select,
   TextArea,
   Toggle,

src/components/FormLabel/FormLabel.vue

@@ -0,0 +1,19 @@
+<template>
+  <label class="fd-form__label" :aria-required="String(required)">
+    <slot /><template v-if="required"
+      ><slot name="required">*</slot></template
+    >
+  </label>
+</template>
+
+<script>
+export default {
+  name: "FdFormLabel",
+  props: {
+    required: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>

src/components/FormLabel/index.js

@@ -0,0 +1,4 @@
+import FormLabel from "./FormLabel.vue";
+import { pluginify } from "./../../util";
+export default pluginify(FormLabel);
+export { FormLabel };

src/components/Icon/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :class="classes" />
+  <span :class="classes" role="presentation" />
 </template>
 
 <script>

src/components/Form/Controls/InputGroup.vue → src/components/InputGroup/InputGroup.vue

@@ -1,21 +1,40 @@
 <template>
   <div class="fd-input-group" :class="classes">
-    <span
-      v-if="hasBefore"
-      class="fd-input-group__addon fd-input-group__addon--before"
-    >
-      <slot name="before">{{ before }}</slot>
-    </span>
-    <slot />
-    <span v-if="hasAfter" :class="afterClasses">
+    <fd-addon-before-provider>
+      <slot name="before">
+        {{ before }}
+      </slot>
+    </fd-addon-before-provider>
+    <slot name="before-input" />
+    <slot name="input" />
+    <slot name="after-input" />
+    <fd-addon-after-provider>
       <slot name="after">{{ after }}</slot>
-    </span>
+    </fd-addon-after-provider>
   </div>
 </template>
 
 <script>
+import { CompactableContainer } from "./../../mixins";
+
+const CreateAddon = context => ({
+  provide() {
+    return {
+      $_fdInputGroupAddonContext: context
+    };
+  },
+  render() {
+    return this.$scopedSlots.default();
+  }
+});
+
+const FdAddonBeforeProvider = CreateAddon("before");
+const FdAddonAfterProvider = CreateAddon("after");
+
 export default {
   name: "FdInputGroup",
+  mixins: [CompactableContainer],
+  components: { FdAddonBeforeProvider, FdAddonAfterProvider },
   props: {
     before: { type: String, default: null },
     after: { type: String, default: null },

src/components/InputGroup/InputGroupAddon.vue

@@ -0,0 +1,34 @@
+<template>
+  <span class="fd-input-group__addon" :class="classes"><slot /></span>
+</template>
+
+<script>
+export default {
+  name: "FdInputGroupAddon",
+  inject: {
+    $_fdInputGroupAddonContext: { default: null }
+  },
+  provide() {
+    return {
+      $_fdInputGroupAddon: this
+    };
+  },
+  data() {
+    return {
+      hasButton: false
+    };
+  },
+  computed: {
+    addonContext() {
+      return this.$_fdInputGroupAddonContext;
+    },
+    classes() {
+      return {
+        "fd-input-group__addon--button": this.hasButton,
+        "fd-input-group__addon--before": this.addonContext === "before",
+        "fd-input-group__addon--after": this.addonContext === "after"
+      };
+    }
+  }
+};
+</script>

src/components/InputGroup/InputGroupButton.vue

@@ -0,0 +1,18 @@
+<template>
+  <fd-button styling="light" v-bind="$attrs" v-on="$listeners"
+    ><slot
+  /></fd-button>
+</template>
+
+<script>
+import FdButton from "./../Button/Button.vue";
+
+export default {
+  name: "FdInputGroupButton",
+  components: { FdButton },
+  inject: ["$_fdInputGroupAddon"],
+  mounted() {
+    this.$_fdInputGroupAddon.hasButton = true;
+  }
+};
+</script>

src/components/InputGroup/InputGroupClearButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <!-- the inline style is a workaround and should be removed -->
+  <!-- once it has been fixed in fund. styles. -->
+  <button
+    class="fd-input-group__button fd-input-group__button--clear"
+    style="z-index: 2;"
+    aria-label="Clear"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: "FdInputGroupClearButton",
+  inject: ["$_fdInputGroupAddon"],
+  mounted() {
+    this.$_fdInputGroupAddon.hasButton = true;
+  }
+};
+</script>

src/components/InputGroup/InputGroupSearch.vue

@@ -0,0 +1,22 @@
+<template>
+  <fd-input-group>
+    <template #input>
+      <fd-input type="search" plain placeholder="Enter Search Term…" />
+    </template>
+    <template #after-input>
+      <fd-input-group-addon>
+        <slot name="clear" />
+      </fd-input-group-addon>
+    </template>
+  </fd-input-group>
+</template>
+
+<script>
+import FdInputGroup from "./InputGroup.vue";
+import FdInputGroupAddon from "./InputGroupAddon.vue";
+
+export default {
+  name: "FdInputGroupSearch",
+  components: { FdInputGroup, FdInputGroupAddon }
+};
+</script>