Skip to content

fix(panel, flow-item): remove overflow rule #8055

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.

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

Merged
merged 1 commit into from
Nov 10, 2023

Conversation

asangma
Copy link
Contributor

@asangma asangma commented Oct 25, 2023

Related Issue: #8028

Summary

Attempt to fix the clipping of action-menu in Panel and FlowItem.
This draft adds a test demo to approximate one of the use cases where the issue is appearing.

I could use some help testing if this update breaks other stuff.
cc @geospatialem

@asangma asangma self-assigned this Oct 25, 2023
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Oct 25, 2023
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 25, 2023
@asangma
Copy link
Contributor Author

asangma commented Oct 25, 2023

Thanks @jcfranco !

@geospatialem geospatialem self-requested a review October 26, 2023 23:06
Copy link
Member

@geospatialem geospatialem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This LGTM with all Windows browsers (Chrome, FF, and Edge). Did a few more edge cases around flow, panel, and flow-item and didn't observe anything out of the ordinary.

That said, defer to the designers and devs on final snapshot changes and code respectively.

Copy link
Contributor

github-actions bot commented Nov 3, 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 3, 2023
@asangma asangma marked this pull request as ready for review November 3, 2023 16:04
@asangma asangma requested a review from a team as a code owner November 3, 2023 16:04
@asangma
Copy link
Contributor Author

asangma commented Nov 3, 2023

Ready for review.

@asangma asangma removed the Stale Issues or pull requests that have not had recent activity. label Nov 3, 2023
@asangma asangma requested a review from geospatialem November 3, 2023 16:07
@geospatialem
Copy link
Member

@asangma Summarizing our Teams discussion below:

To ensure the above fix does not impact functionality, if adopted earlier into the milestone, we could ask teams to perform testing to get more 👀 on this as well. Alan and I performed some initial tests, but we think the more testing and folks to look at this - the better. As a result will add as another testing mechanism for our November breaking change release (on our internal breaking change page).

cc: @jcfranco @brittneytewks

@jcfranco
Copy link
Member

jcfranco commented Nov 4, 2023

@asangma belated thanks for helping us out with this one! 💪🏼

@geospatialem thank you for testing and the summary above.

There does seem to be one screenshot test affected by this change. @driskull @SkyeSeitz @ashetland could you take a closer look? If everything looks good, we can proceed with @geospatialem’s recommendation to install early for additional testing.

@jcfranco jcfranco changed the title fix(panel, flowitem): remove overflow rule fix(panel, flow-item): remove overflow rule Nov 4, 2023
@driskull
Copy link
Member

driskull commented Nov 6, 2023

I think that test looks good. The content is still scrollable and the FAB is positioned correctly.

@ashetland
Copy link
Contributor

I think that test looks good. The content is still scrollable and the FAB is positioned correctly.

Awesome

Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM!

@asangma Could you make sure to add a screenshot test before merging?

@driskull @ashetland thanks for taking a look.

@driskull
Copy link
Member

driskull commented Nov 6, 2023

Maybe we should create an issue to add more information for each screenshot test? Maybe we could put a paragraph of text for verifying a screenshot for each test?

Not sure where but maybe within the screenshot might be best so designers can see the information as well?

@jcfranco
Copy link
Member

jcfranco commented Nov 7, 2023

@driskull I think we could do an audit on all tests to see which ones need additional info. The story title should indicate what the screenshot test entails. Some stories could benefit from additional info within the story. We do this for the responsive stories and I think it's pretty helpful for composite or complex screenshot tests.

@jcfranco
Copy link
Member

I'm going to go ahead and merge this for early testing.

@asangma @driskull can you team up and make sure we add a screenshot test for this?

@jcfranco jcfranco merged commit d0c3ed2 into main Nov 10, 2023
@jcfranco jcfranco deleted the asangma/panel-flowitem-overflow-8028 branch November 10, 2023 03:30
@github-actions github-actions bot added this to the 2023 November Priorities milestone Nov 10, 2023
benelan pushed a commit that referenced this pull request Nov 13, 2023
**Related Issue:** #8028

## Summary
Attempt to fix the clipping of action-menu in Panel and FlowItem.
This adds a test demo to approximate one of the use cases where
the issue is appearing.

I could use some help testing if this update breaks other stuff.
cc @geospatialem
jcfranco pushed a commit that referenced this pull request Nov 18, 2023
)

**Related Issue:** #8028 

## Summary
Adds screenshots for panel and flow-item.
Follow-up from #8055

cc @driskull
benelan added a commit that referenced this pull request Nov 21, 2023
🤖 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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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 <[email protected]>
benelan pushed a commit that referenced this pull request Nov 24, 2023
)

**Related Issue:** #8028 

## Summary
Adds screenshots for panel and flow-item.
Follow-up from #8055

cc @driskull
benelan added a commit that referenced this pull request Nov 24, 2023
🤖 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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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 <[email protected]>
benelan pushed a commit that referenced this pull request Nov 24, 2023
)

**Related Issue:** #8028 

## Summary
Adds screenshots for panel and flow-item.
Follow-up from #8055

cc @driskull
benelan added a commit that referenced this pull request Nov 24, 2023
🤖 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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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 <[email protected]>
benelan pushed a commit that referenced this pull request Nov 26, 2023
)

**Related Issue:** #8028 

## Summary
Adds screenshots for panel and flow-item.
Follow-up from #8055

cc @driskull
benelan added a commit that referenced this pull request Nov 26, 2023
🤖 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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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/[email protected]...@esri/[email protected])
(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 <[email protected]>
@MukeZ
Copy link

MukeZ commented Jan 15, 2024

Hey guys, after updating to this version, the scroll bar gets disabled if the panel height is too long. It was working with version 1.10.0. Now, I need to add a function to automatically set the max-height of the panel based on the window's height and add 'overflow-y: auto;' to my custom CSS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants