-
Notifications
You must be signed in to change notification settings - Fork 80
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
Conversation
…or action-menu overflow (#8028)
Thanks @jcfranco ! |
There was a problem hiding this 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.
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. |
Ready for review. |
@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). |
@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. |
I think that test looks good. The content is still scrollable and the FAB is positioned correctly. |
Awesome |
There was a problem hiding this 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.
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? |
@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. |
**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
🤖 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]>
🤖 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]>
🤖 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]>
🤖 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]>
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 |
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