This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
1 parent
a60789c
commit a319601
Showing
6 changed files
with
113 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,7 @@ | ||
:host { | ||
display: block; | ||
} | ||
|
||
.dt-form-field { | ||
margin-bottom: 8px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters