Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(date-picker): make component responsive #7872

Merged
merged 8 commits into from
Nov 14, 2023
Merged

feat(date-picker): make component responsive #7872

merged 8 commits into from
Nov 14, 2023
+189 −360

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Sep 23, 2023 •
edited
Loading

Related Issue: #6678

Summary

Updates the date-picker to adjust its content when explicitly made wider (default widths are preserved).

Note that this also required significant changes (refactor/clean up) to date-picker-day styles to ease spec updates.

@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 23, 2023
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 23, 2023
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 23, 2023
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 23, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Oct 4, 2023

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Oct 4, 2023
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. Stale Issues or pull requests that have not had recent activity. labels Oct 27, 2023
@jcfranco jcfranco marked this pull request as ready for review October 27, 2023 22:00
@jcfranco jcfranco requested a review from a team as a code owner October 27, 2023 22:00
@jcfranco
Copy link
Member Author

FYI: this is not low risk due to the extensive changes to date-picker-day.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 4, 2023

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 4, 2023
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. Stale Issues or pull requests that have not had recent activity. labels Nov 7, 2023
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 10, 2023
@jcfranco jcfranco merged commit f131218 into main Nov 14, 2023
16 checks passed
@jcfranco jcfranco deleted the jcfranco/6678-make-component-responsive branch November 14, 2023 01:50
@github-actions github-actions bot added this to the 2023 November Priorities milestone Nov 14, 2023
@calcite-admin calcite-admin mentioned this pull request Nov 14, 2023
Merged
benelan added a commit that referenced this pull request Nov 21, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
023e732 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

##
[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

##
[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

### Features

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))


### Bug Fixes

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

### Dependencies

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

## 1.11.0 (2023-11-21)


### Bug Fixes

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

##
[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan added a commit that referenced this pull request Nov 24, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
c4dc9af 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan added a commit that referenced this pull request Nov 24, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
c351890 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan added a commit that referenced this pull request Nov 26, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
e504346 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
@jcfranco jcfranco mentioned this pull request Dec 20, 2023
Closed
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alisonailea alisonailea alisonailea approved these changes

@SkyeSeitz SkyeSeitz Awaiting requested review from SkyeSeitz

@ashetland ashetland Awaiting requested review from ashetland

Assignees

@jcfranco jcfranco

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 November Priorities
Development

Successfully merging this pull request may close these issues.
2 participants
@jcfranco @alisonailea