fix: Add focus state to input group (#540)

* Add focus state to input group

* Add mixin focus to input-group, add html template

* Add reference images

docs/pages/components/input-group.md

@@ -259,6 +259,32 @@ The Input with add-on supports actions. Actions can be shown with a text label o
 {% endcapture %}
 
 {% include display-component.html component=states %}
+
+## Focus
+
+The Input Group supports **focus** state, it can be added by putting `.is-focus` class to component.
+{% capture focus %}
+<div class="fd-form-item">
+    <label class="fd-form-label" for="">Default</label>
+    <div class="fd-input-group is-focus">
+        <span class="fd-input-group__addon">$</span>
+        <input class="fd-input fd-input-group__input" type="text" id="" name="" value="1234568910">
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="">Error State</label>
+    <div class="fd-input-group is-invalid is-focus">
+        <input class="fd-input fd-input-group__input" type="text" id="" name="" value="1000000">
+        <span class="fd-input-group__addon">
+            <span class="sap-icon--hide" role="presentation"></span>
+        </span>
+    </div>
+</div>
+{% endcapture %}
+
+{% include display-component.html component=focus %}
+
 ## Number input
 
 For an integer value input, a spinner can be added allowing the user to increase or decrease the value.

src/input-group.scss

@@ -11,6 +11,15 @@ $block: #{$fd-namespace}-input-group;
 
 $fd-input-border-radius: var(--sapField_BorderCornerRadius);
 
+@mixin fd-input-group-focus() {
+  @include fd-focus() {
+    box-shadow: none;
+    outline-offset: -0.1875rem;
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    @content;
+  }
+}
+
 .#{$block} {
   @include fd-reset();
 
@@ -19,10 +28,12 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
   border-width: var(--sapField_BorderWidth);
   border-color: var(--sapField_BorderColor);
   border-radius: var(--sapField_BorderCornerRadius);
+  background-color: var(--sapField_Background);
   width: 100%;
 
   // states
   @include fd-form-states();
+  @include fd-input-group-focus();
 
   > * {
     &:first-child {
@@ -59,6 +70,7 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
   .#{$block}__input {
     @include fd-reset-child-spacing();
 
+    background-color: transparent;
     border: none;
     flex: 1 1 auto;
     padding-right: 0.25rem;