Skip to content

Commit 246701f

Browse files
cpaulve-1Acpaulve-1A
authored
fix: #3209 Use correct DF component for date-picker (#3483)
## Proposed change Rework date picker to follow DF. ## Related issues :bug: Fix resolves #3209
2 parents 72889b8 + f782798 commit 246701f

22 files changed

+120
-99
lines changed

‎apps/showcase/e2e-playwright/screenshots/sanity/visual-sanity.e2e.spec.ts/chromium/configuration.png

-34 Bytes
Loading

‎apps/showcase/e2e-playwright/screenshots/sanity/visual-sanity.e2e.spec.ts/chromium/dynamic-content.png

-120 Bytes
Loading

‎apps/showcase/e2e-playwright/screenshots/sanity/visual-sanity.e2e.spec.ts/chromium/forms.png

-412 Bytes
Loading

‎apps/showcase/e2e-playwright/screenshots/sanity/visual-sanity.e2e.spec.ts/chromium/localization.png

-140 Bytes
Loading

‎apps/showcase/e2e-playwright/screenshots/sanity/visual-sanity.e2e.spec.ts/chromium/placeholder.png

-69 Bytes
Loading

‎apps/showcase/e2e-playwright/screenshots/sanity/visual-sanity.e2e.spec.ts/chromium/rules-engine.png

-38 Bytes
Loading

‎apps/showcase/src/components/showcase/basic/basic-pres.template.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
<div class="col-8 container p-3">
77
<div class="card-bod d-flex flex-column h-100">
88
<div class="row card-title flex-fill d-flex align-items-center m-auto">
9-
<h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
9+
<h2
10+
class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
1011
Welcome!
11-
<div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
12+
<div aria-hidden="true"
13+
class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
1214
</h2>
1315
</div>
1416
<h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
@@ -17,18 +19,16 @@ <h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
1719
<div class="input-group">
1820
<label class="input-group-text w-50" for="destination">Destination</label>
1921
<select class="form-select" id="destination" formControlName="destination">
20-
<option disabled selected value> -- select a destination -- </option>
22+
<option disabled selected value> -- select a destination --</option>
2123
<option value="London">London</option>
2224
<option value="Paris">Paris</option>
2325
<option value="New-York" disabled>New-York</option>
2426
</select>
2527
</div>
2628
</div>
2729
<div class="col-12 col-xl-6">
28-
<div class="input-group">
29-
<label for="date-outbound" class="input-group-text w-50">Departure</label>
30-
<o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
31-
</div>
30+
<o3r-date-picker-input-pres [label]="'Departure'" [id]="'date-outbound'" class="w-50"
31+
formControlName="outboundDate"></o3r-date-picker-input-pres>
3232
</div>
3333
</form>
3434
</div>

‎apps/showcase/src/components/showcase/configuration/configuration-pres.template.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
<div class="col-8 container p-3">
77
<div class="card-bod d-flex flex-column h-100">
88
<div class="row card-title flex-fill d-flex align-items-center m-auto">
9-
<h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
9+
<h2
10+
class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
1011
Welcome!
11-
<div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
12+
<div aria-hidden="true"
13+
class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
1214
</h2>
1315
</div>
1416
<h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
@@ -17,25 +19,23 @@ <h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
1719
<div class="input-group">
1820
<label class="input-group-text w-50" for="destination">Destination</label>
1921
<select class="form-select" id="destination" formControlName="destination">
20-
<option disabled selected value> -- select a destination -- </option>
22+
<option disabled selected value> -- select a destination --</option>
2123
@for (destination of destinations(); track destination.cityCode) {
22-
<option [disabled]="!destination.available" [value]="destination.cityName">{{destination.cityName}}</option>
24+
<option [disabled]="!destination.available"
25+
[value]="destination.cityName">{{ destination.cityName }}
26+
</option>
2327
}
2428
</select>
2529
</div>
2630
</div>
2731
<div class="col-12 col-xl-6">
28-
<div class="input-group">
29-
<label for="date-outbound" class="input-group-text w-50">Departure</label>
30-
<o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
31-
</div>
32+
<o3r-date-picker-input-pres [id]="'date-outbound'" [label]="'Departure'"
33+
formControlName="outboundDate"></o3r-date-picker-input-pres>
3234
</div>
3335
@if (shouldProposeRoundTrip()) {
3436
<div class="col-12 col-xl-6">
35-
<div class="input-group">
36-
<label for="date-inbound" class="input-group-text w-50">Return</label>
37-
<o3r-date-picker-input-pres [id]="'date-inbound'" class="w-50" formControlName="inboundDate"></o3r-date-picker-input-pres>
38-
</div>
37+
<o3r-date-picker-input-pres [id]="'date-inbound'" [label]="'Return'"
38+
formControlName="inboundDate"></o3r-date-picker-input-pres>
3939
</div>
4040
}
4141
</form>

‎apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<div class="card my-3">
22
<div class="row g-0">
33
<div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
4-
<img alt="An otter which will be replaced with another image to demonstrate the dynamic content capabilities" [src]="'otter-dynamic.svg' | o3rDynamicContent" class="img-fluid rounded-start" aria-hidden="true">
4+
<img alt="An otter which will be replaced with another image to demonstrate the dynamic content capabilities"
5+
[src]="'otter-dynamic.svg' | o3rDynamicContent" class="img-fluid rounded-start" aria-hidden="true">
56
</div>
67
<div class="col-8 container p-3">
78
<div class="card-bod d-flex flex-column h-100">
89
<div class="row card-title flex-fill d-flex align-items-center m-auto">
9-
<h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
10+
<h2
11+
class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative w-auto m-auto">
1012
Welcome!
11-
<div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
13+
<div aria-hidden="true"
14+
class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
1215
</h2>
1316
</div>
1417
<h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
@@ -17,18 +20,16 @@ <h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
1720
<div class="input-group">
1821
<label class="input-group-text w-50" for="destination">Destination</label>
1922
<select class="form-select" id="destination" formControlName="destination">
20-
<option disabled selected value> -- select a destination -- </option>
23+
<option disabled selected value> -- select a destination --</option>
2124
<option value="London">London</option>
2225
<option value="Paris">Paris</option>
2326
<option value="New-York" disabled>New-York</option>
2427
</select>
2528
</div>
2629
</div>
2730
<div class="col-12 col-xl-6">
28-
<div class="input-group">
29-
<label for="date-outbound" class="input-group-text w-50">Departure</label>
30-
<o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
31-
</div>
31+
<o3r-date-picker-input-pres [id]="'date-outbound'" [label]="'Departure'"
32+
formControlName="outboundDate"></o3r-date-picker-input-pres>
3233
</div>
3334
</form>
3435
</div>

‎apps/showcase/src/components/showcase/localization/localization-pres.template.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,23 @@
66
<div class="col-8 container p-3">
77
<div class="card-bod d-flex flex-column h-100">
88
<div class="row card-title flex-fill d-flex align-items-center m-auto">
9-
<h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative">
9+
<h2
10+
class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative">
1011
@if (form.value.destination) {
11-
{{ translations.welcomeWithCityName | o3rTranslate: { cityName: (translations.cityName + '.' + form.value.destination) | o3rTranslate } }}
12+
{{ translations.welcomeWithCityName | o3rTranslate: {cityName: (translations.cityName + '.' + form.value.destination) | o3rTranslate} }}
1213
} @else {
1314
{{ translations.welcome | o3rTranslate }}
1415
}
15-
<div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
16+
<div aria-hidden="true"
17+
class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
1618
</h2>
1719
</div>
1820
<h3 class="row card-text mt-auto ms-1 h5">{{ translations.question | o3rTranslate }}</h3>
1921
<form class="row g-2" [formGroup]="form">
2022
<div class="col-12 col-xl-6">
2123
<div class="input-group">
22-
<label class="input-group-text w-50" for="destination">{{ translations.destinationLabel | o3rTranslate }}</label>
24+
<label class="input-group-text w-50"
25+
for="destination">{{ translations.destinationLabel | o3rTranslate }}</label>
2326
<select class="form-select" id="destination" formControlName="destination">
2427
<option disabled selected value>{{ translations.destinationPlaceholder | o3rTranslate }}</option>
2528
<option value="LON">{{ (translations.cityName + '.LON') | o3rTranslate }}</option>
@@ -29,10 +32,8 @@ <h3 class="row card-text mt-auto ms-1 h5">{{ translations.question | o3rTranslat
2932
</div>
3033
</div>
3134
<div class="col-12 col-xl-6">
32-
<div class="input-group">
33-
<label for="date-outbound" class="input-group-text w-50">{{ translations.departureLabel | o3rTranslate }}</label>
34-
<o3r-date-picker-input-pres [id]="'date-outbound'" class="w-50" formControlName="outboundDate"></o3r-date-picker-input-pres>
35-
</div>
35+
<o3r-date-picker-input-pres [id]="'date-outbound'" [label]="translations.departureLabel | o3rTranslate"
36+
formControlName="outboundDate"></o3r-date-picker-input-pres>
3637
</div>
3738
</form>
3839
</div>

0 commit comments

Comments
 (0)