fix(panel): Remove double border styling when content isn't provided #7368

driskull · 2023-07-24T21:31:20Z

Related Issue: #7423

Summary

Fixes display issue when no content is slotted within a panel but a footer or action-bar is displayed then a double border occurs.
Cleans up code to use slotChangeHasAssignedElement dom utility for slot changes
Fixes conditional element surrounding default slot.
Adds screenshot tests

…hout content.

…ri/calcite-design-system into dris0000/panel-footer-without-content

jcfranco · 2023-07-25T05:52:02Z

Can you double check the screenshot diffs? I think there's some spacing inconsistencies between panel and flow-item.

driskull · 2023-07-25T16:21:20Z

Can you double check the screenshot diffs? I think there's some spacing inconsistencies between panel and flow-item.

@jcfranco updated.

driskull · 2023-07-25T16:23:03Z

packages/calcite-components/src/components/panel/panel.tsx

-
-    const defaultSlotNode: VNode = <slot key="default-slot" />;
-    const containerNode = hasFab ? (
-      <section class={CSS.contentContainer}>{defaultSlotNode}</section>


@asangma do you think you could review these changes? I changed this because it was causing some problems with onSlotChange since this default slot was getting moved into a section element depending on if there was a FAB or not. I don't think its necessary if we always have the section element present and the FAB content classes are no longer conditional.

driskull · 2023-07-25T20:33:36Z

packages/calcite-components/src/components/panel/panel.scss

@@ -29,9 +29,8 @@
 }

 .header {
-  border-block-end: 1px solid;
+  border-block-end: 1px solid var(--calcite-ui-border-3);


moved these together since border-block-end isnt exactly the same as border-bottom. Applies to other CSS

driskull · 2023-07-25T20:34:48Z

packages/calcite-components/src/components/panel/panel.tsx

        onScroll={this.panelScrollHandler}
        // eslint-disable-next-line react/jsx-sort-props
        ref={this.setPanelScrollEl}
      >
-        {containerNode}
+        <section class={CSS.contentContainer}>


@asangma do you remember why this section was necessary for the FAB? Is there any harm in always having it there for consistency and so the default slot doesn't get rearranged?

I think the section was there to keep the FAB sticky. But if it can be sticky without the section, that's cool too.

Ok. i have it so the section is always there regardless of the FAB or not. Ill move forward with that since its safer.

…ri/calcite-design-system into dris0000/panel-footer-without-content

driskull · 2023-07-28T21:50:54Z

@jcfranco can you review? I'd like to get this one in if possible.

jcfranco

Nice! 🎉

Can you also submit an issue to link to this? Otherwise, we have no test case nor issue to verify. cc @geospatialem

packages/calcite-components/src/components/panel/panel.scss

jcfranco · 2023-08-02T01:40:55Z

@asangma Friendly ping! 😄

…7368) **Related Issue:** #7423 ## Summary - Fixes display issue when no content is slotted within a panel but a footer or action-bar is displayed then a double border occurs. - Cleans up code to use `slotChangeHasAssignedElement` dom utility for slot changes - Fixes conditional element surrounding default slot. - Adds screenshot tests

* origin/main: (40 commits) fix(combobox): add space after grouped items (#7302) fix(tooltip): emits `close` and `beforeClose` events when container is set to `display:none` (#7258) chore: release next feat(block): improve block's content layout to allow scrolling (#7367) test(input, input-number): await on missed `page.waitForChanges` calls (#7429) chore: release next fix(color-picker): draw slider thumbs within bounds (#7398) chore: release next fix(slider): prevent excessive tick rendering (#7421) fix(tooltip): avoid extra before open/close event emitting (#7422) chore(storybook): hide warning and show TestOnly stories in local builds (#7424) chore: release next fix(panel): Remove double border styling when content isn't provided (#7368) feat(list): Add support for dragging items. (#7109) chore: release next fix(scrim): update loader scale on resize of component. (#7419) feat(text-area): provide additional context for AT users when character limit exceeds (#7412) chore: release next fix(chip): disconnect mutation observer when component is disconnected from the DOM (#7418) fix(switch): Fix for focus outline style in certain cases (#7414) ...

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * **action-group:** Adds overlayPositioning property. ([#7366](#7366)) ([ca9f35a](ca9f35a)) * Allow sharing focus trap stacks via configuration global ([#7334](#7334)) ([934a19f](934a19f)) * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) * **block, block-section:** Add setFocus method ([#7208](#7208)) ([35d4bbb](35d4bbb)) * **block:** Improve block's content layout to allow scrolling ([#7367](#7367)) ([ecbf17b](ecbf17b)) * **color-picker:** Replaces thumb focus outline to rounded ([#7378](#7378)) ([d803980](d803980)) * **filter:** Add filter method ([#7127](#7127)) ([5a4283f](5a4283f)) * **flow:** Adds setFocus method ([#7252](#7252)) ([2472c58](2472c58)) * Improve focus behavior in components ([#7277](#7277)) ([ad9fbca](ad9fbca)) * **input-time-zone:** Add input-time-zone component ([#6947](#6947)) ([87bd496](87bd496)) * **list:** Add slots for filter actions ([#7183](#7183)) ([da07ab1](da07ab1)) * **list:** Add support for dragging items. ([#7109](#7109)) ([7324f70](7324f70)) * **menu-item:** Update spacing and icon layout ([#7381](#7381)) ([5659671](5659671)) * **navigation-logo:** Increase font-size of heading with no description ([#7081](#7081)) ([355e101](355e101)) * **switch:** Updates focus outline to be rounded ([#7390](#7390)) ([2616b82](2616b82)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7299](#7299)) ([c5678eb](c5678eb)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7412](#7412)) ([c1af3c7](c1af3c7)) ### Bug Fixes * **accordion, accordion-item:** `icon-position`, `icon-type`, `selection-mode` and `scale` can now be set as props or attributes ([#7191](#7191)) ([2b09aba](2b09aba)) * **action-bar:** No longer delegates focus when clicked on non-focusable region ([#7310](#7310)) ([1a9c15c](1a9c15c)) * **action:** Correctly focus the button after rendering updates. ([#7255](#7255)) ([40fe2ce](40fe2ce)) * **block:** Loader now appears for all loading cases ([#7303](#7303)) ([5af3600](5af3600)) * **block:** Removes extra loading indicator ([#7239](#7239)) ([a334a75](a334a75)) * **card:** Ensure teardown logic is called when disconnected ([#7289](#7289)) ([d07e322](d07e322)) * **chip:** Disconnect mutation observer when component is disconnected from the DOM ([#7418](#7418)) ([412e5fb](412e5fb)) * **color-picker:** Draw slider thumbs within bounds ([#7398](#7398)) ([2f37854](2f37854)) * **color-picker:** Fix opacity slider keyboard nudging ([#7400](#7400)) ([2b4f7c3](2b4f7c3)) * **color-picker:** Maintains correct numbering system when entering invalid RGB value ([#7327](#7327)) ([8d2a3a5](8d2a3a5)) * **combobox:** Add space after grouped items ([#7302](#7302)) ([b1580c7](b1580c7)) * **dropdown-item:** Provides accessible label when href is not parsed ([#7316](#7316)) ([966b83d](966b83d)) * **flow:** Call setFocus() on back button click ([#7285](#7285)) ([9102aa4](9102aa4)) * **input-date-picker:** Provides placeholder text context for AT users ([#7320](#7320)) ([31e0ba2](31e0ba2)) * **input-date-picker:** Reset active date picker date after closing ([#7219](#7219)) ([91b2a1b](91b2a1b)) * **input, input-number:** No longer removes trailing decimal separator ([#7159](#7159)) ([01535cf](01535cf)) * **link:** Adds outline-offset to avoid overlapping with text. ([#7342](#7342)) ([c30db4e](c30db4e)) * **list:** Changing filterText property will now update filtered items ([#7133](#7133)) ([a9c0bce](a9c0bce)) * **list:** Fix keyboard navigation after a listItem's disabled or closed property changes ([#7275](#7275)) ([91d28eb](91d28eb)) * **list:** Fix keyboard navigation when filterEnabled is true ([#7385](#7385)) ([41a2e42](41a2e42)) * **menu-item:** Prevent duplicate border in nested vertical menu-items ([#7387](#7387)) ([186a738](186a738)) * **panel:** Remove double border styling when content isn't provided ([#7368](#7368)) ([91a0610](91a0610)) * Remove style modifying all host components with hidden attribute ([#7346](#7346)) ([3103e2f](3103e2f)) * **scrim:** Update loader scale on resize of component. ([#7419](#7419)) ([24e7f70](24e7f70)) * **slider:** Prevent excessive tick rendering ([#7421](#7421)) ([c799409](c799409)) * **switch:** Fix for focus outline style in certain cases ([#7414](#7414)) ([217324f](217324f)) * **tab-title:** Add full focus outline to closable tab button in high contrast mode ([#7272](#7272)) ([d812d17](d812d17)) * **tooltip:** Avoid extra before open/close event emitting ([#7422](#7422)) ([dbb6818](dbb6818)) * **tooltip:** Deprecate the label property due to the description coming from the component's content ([#7247](#7247)) ([7934d75](7934d75)) * **tooltip:** Emits `close` and `beforeClose` events when container is set to `display:none` ([#7258](#7258)) ([60a4683](60a4683)) * **tooltip:** Ensure --calcite-app-z-index-tooltip is applied ([#7345](#7345)) ([a9a7072](a9a7072)) </details> <details><summary>@esri/calcite-components-react: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.5.0-next.38 to ^1.5.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>

fix(panel): Remove double border styling when a footer is present wit…

8fe2141

…hout content.

driskull self-assigned this Jul 24, 2023

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 24, 2023

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jul 24, 2023

fix borders

4eca82f

driskull 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 Jul 24, 2023

cleanup

18b6399

driskull removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 24, 2023

driskull added 3 commits July 24, 2023 17:28

cleanup

c44eaf7

cleanup

c72b469

cleanup

27e11d5

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 25, 2023

Merge branch 'main' into dris0000/panel-footer-without-content

38debdf

driskull 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 Jul 25, 2023

driskull added 2 commits July 24, 2023 18:03

story update

8b9ee32

Merge branch 'dris0000/panel-footer-without-content' of github.com:Es…

862c543

…ri/calcite-design-system into dris0000/panel-footer-without-content

driskull 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 Jul 25, 2023

Update panel.tsx

3250ea2

driskull removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 25, 2023

driskull marked this pull request as ready for review July 25, 2023 05:10

driskull requested a review from a team as a code owner July 25, 2023 05:10

cleanup

14d2a7c

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 25, 2023

driskull commented Jul 25, 2023

View reviewed changes

jcfranco requested a review from asangma July 25, 2023 17:13

Merge branch 'main' into dris0000/panel-footer-without-content

144edd6

driskull 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 Jul 25, 2023

driskull requested a review from jcfranco July 25, 2023 17:18

driskull commented Jul 25, 2023

View reviewed changes

driskull changed the title ~~fix(panel): Remove double border styling when a footer is present without content.~~ fix(panel): Remove double border styling without content. Jul 25, 2023

driskull changed the title ~~fix(panel): Remove double border styling without content.~~ fix(panel): Remove double border styling when content isn't provided Jul 25, 2023

driskull added 2 commits July 25, 2023 14:44

refactoring

6ae14e4

Merge branch 'dris0000/panel-footer-without-content' of github.com:Es…

1d97835

…ri/calcite-design-system into dris0000/panel-footer-without-content

driskull 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 Jul 25, 2023

jcfranco approved these changes Aug 2, 2023

View reviewed changes

packages/calcite-components/src/components/panel/panel.scss Outdated Show resolved Hide resolved

rename class

dddf440

driskull 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 Aug 2, 2023

driskull merged commit 91a0610 into main Aug 2, 2023

driskull deleted the dris0000/panel-footer-without-content branch August 2, 2023 17:01

github-actions bot added this to the 2023 July Priorities milestone Aug 2, 2023

calcite-admin mentioned this pull request Aug 2, 2023

chore: release latest #7261

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(panel): Remove double border styling when content isn't provided #7368

fix(panel): Remove double border styling when content isn't provided #7368

driskull commented Jul 24, 2023 •

edited

Loading

jcfranco commented Jul 25, 2023

driskull commented Jul 25, 2023

driskull Jul 25, 2023

driskull Jul 25, 2023

driskull Jul 25, 2023

asangma Aug 2, 2023

driskull Aug 2, 2023

driskull commented Jul 28, 2023

jcfranco left a comment

jcfranco commented Aug 2, 2023

fix(panel): Remove double border styling when content isn't provided #7368

fix(panel): Remove double border styling when content isn't provided #7368

Conversation

driskull commented Jul 24, 2023 • edited Loading

Summary

jcfranco commented Jul 25, 2023

driskull commented Jul 25, 2023

driskull Jul 25, 2023

Choose a reason for hiding this comment

driskull Jul 25, 2023

Choose a reason for hiding this comment

driskull Jul 25, 2023

Choose a reason for hiding this comment

asangma Aug 2, 2023

Choose a reason for hiding this comment

driskull Aug 2, 2023

Choose a reason for hiding this comment

driskull commented Jul 28, 2023

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco commented Aug 2, 2023

driskull commented Jul 24, 2023 •

edited

Loading