style(input): Fixes extra outlines when places inside form-field

Fixes #999

- added new example in dev app

Signed-off-by: Bartosz Bobin <bartosz.bobin@dynatrace.com>

apps/dev/src/form-field/form-field-demo.component.html

@@ -27,3 +27,18 @@
     </dt-select>
   </dt-form-field>
 </div>
+
+<dt-form-field>
+  <dt-label>No nested focus outlines</dt-label>
+  <input
+    type="text"
+    dtInput
+    placeholder="Please insert amount"
+    aria-label="Please insert amount"
+  />
+  <dt-icon dtPrefix name="filter">$</dt-icon>
+  <dt-loading-spinner dtPrefix></dt-loading-spinner>
+  <button dt-icon-button dtSuffix variant="nested" aria-label="Submit changes">
+    <dt-icon name="checkmark"></dt-icon>
+  </button>
+</dt-form-field>

apps/dev/src/form-field/form-field-demo.component.scss

@@ -1,3 +1,7 @@
 :host {
   display: block;
 }
+
+.dt-form-field {
+  margin-bottom: 8px;
+}

apps/dev/src/input/input-demo.component.html

@@ -1 +1,35 @@
-<input type="text" dtInput placeholder="Please insert text" />
+<p><input type="text" dtInput value="Enabled input with text Gray700" /></p>
+<p>
+  <input
+    type="text"
+    dtInput
+    disabled
+    value="Disabled input with text Gray300"
+  />
+</p>
+<p>
+  <input
+    type="text"
+    dtInput
+    placeholder="Enabled input with placeholder Gray500"
+  />
+</p>
+<p>
+  <input
+    type="text"
+    dtInput
+    disabled
+    placeholder="Disabled input with placeholder Gray300"
+  />
+</p>
+
+<p>Alternative</p>
+<p>
+  <input
+    type="text"
+    dtInput
+    disabled
+    placeholder="Disabled input with placeholder Gray500"
+    class="aaaa"
+  />
+</p>

apps/dev/src/select/select-demo.component.html

@@ -1,52 +1,52 @@
-<dt-select placeholder="Choose your coffee" dt-ui-test-id="select">
-  <dt-option value="ThePerfectPour">
-    ThePerfectPour with some very long text even longer longlonglong
-  </dt-option>
-  <dt-option value="Affogato">Affogato</dt-option>
-  <dt-option value="Americano">Americano</dt-option>
-  <dt-option value="Bicerin">Bicerin</dt-option>
-  <dt-option value="Breve">Breve</dt-option>
-  <dt-option value="Café Bombón">Café Bombón</dt-option>
-  <dt-option value="Café au lait">Café au lait</dt-option>
-  <dt-option value="Caffé Corretto">Caffé Corretto</dt-option>
-  <dt-option value="Café Crema">Café Crema</dt-option>
-  <dt-option value="Caffé Latte">Caffé Latte</dt-option>
-  <dt-option value="Caffé macchiato">Caffé macchiato</dt-option>
-  <dt-option value="Café mélange">Café mélange</dt-option>
-  <dt-option value="Coffee milk">Coffee milk</dt-option>
-  <dt-option value="Cafe mocha">Cafe mocha</dt-option>
-  <dt-option value="Ca phe sua da">Ca phe sua da</dt-option>
-  <dt-option value="Kopi susu">Kopi susu</dt-option>
-  <dt-option value="Cappuccino">Cappuccino</dt-option>
-  <dt-option value="Cappuccino-cups">Cappuccino-cups</dt-option>
-  <dt-option value="Cappuccino">Cappuccino</dt-option>
-  <dt-option value="Carajillo">Carajillo</dt-option>
-  <dt-option value="Cortado">Cortado</dt-option>
-  <dt-option value="Cuban espresso">Cuban espresso</dt-option>
-  <dt-option value="Espresso">Espresso</dt-option>
-  <dt-option value="The Flat White">The Flat White</dt-option>
-  <dt-option value="Frappuccino">Frappuccino</dt-option>
-  <dt-option value="Galao">Galao</dt-option>
-  <dt-option value="Greek frappé coffee">Greek frappé coffee</dt-option>
-  <dt-option value="Iced Coffee">Iced Coffee</dt-option>
-  <dt-option value="Indian filter coffee">Indian filter coffee</dt-option>
-  <dt-option value="Instant coffee">Instant coffee</dt-option>
-  <dt-option value="Irish coffee">Irish coffee</dt-option>
-  <dt-option value="Kopi Luwak">Kopi Luwak</dt-option>
-  <dt-option value="Kopi Tubruk">Kopi Tubruk</dt-option>
-  <dt-option value="Turkish coffee">Turkish coffee</dt-option>
-  <dt-option value="Vienna coffee">Vienna coffee</dt-option>
-  <dt-option value="Yuanyang">Yuanyang</dt-option>
-</dt-select>
+<p><input type="text" dtInput value="Enabled input with text" /></p>
+<p>
+  <input type="text" dtInput disabled value="Disabled input with text" />
+</p>
+<p>
+  <input type="text" dtInput placeholder="Enabled input with placeholder" />
+</p>
+<p>
+  <input
+    type="text"
+    dtInput
+    disabled
+    placeholder="Disabled input with placeholder"
+  />
+</p>
 
-<dt-select placeholder="Aggregation" #median>
-  <dt-option value="90th percentile">
-    90th percentile
-  </dt-option>
-  <dt-option value="95th percentile">95th percentile</dt-option>
-  <dt-option value="Sum">Sum</dt-option>
-  <dt-option value="Average">Average</dt-option>
-  <dt-option *ngIf="hasMedian" value="Median">Median</dt-option>
-</dt-select>
+<hr />
 
-<button dt-button (click)="changeToMedian()">switch to median</button>
+<p>
+  <dt-select
+    placeholder="Choose your coffee"
+    dt-ui-test-id="select"
+    [value]="'Yuanyang'"
+    ><dt-option value="Yuanyang">Enabled select with text</dt-option></dt-select
+  >
+</p>
+<p>
+  <dt-select
+    placeholder="Choose your coffee"
+    dt-ui-test-id="select"
+    [value]="'Yuanyang'"
+    disabled
+    ><dt-option value="Yuanyang"
+      >Disabled select with text</dt-option
+    ></dt-select
+  >
+</p>
+<p>
+  <dt-select
+    placeholder="Enabled select with placeholder"
+    dt-ui-test-id="select"
+    ><dt-option value="Yuanyang">Yuanyang</dt-option></dt-select
+  >
+</p>
+<p>
+  <dt-select
+    placeholder="Disabled select with placeholder"
+    dt-ui-test-id="select"
+    disabled
+    ><dt-option value="Yuanyang">Yuanyang</dt-option></dt-select
+  >
+</p>

libs/barista-components/core/src/style/_interactive-common.scss

@@ -12,6 +12,11 @@
   }
 }
 
+@mixin dt-no-focus-style() {
+  outline-offset: 0;
+  outline: transparent none 0;
+}
+
 // Mixin applying the cdk-keyboard-focus and cdk-program-focus
 // to the calling selector and applies the dt-focus-style
 @mixin dt-cdkmonitor-focus-style($is-dark: false) {

libs/barista-components/form-field/src/form-field.scss

@@ -22,6 +22,10 @@
 
 .dt-focused:not(.dt-form-field-non-box) .dt-form-field-body {
   @include dt-focus-style();
+
+  .dt-input:focus:not([disabled]) {
+    @include dt-no-focus-style();
+  }
 }
 
 .dt-form-field-prefix,