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

fix(shell-panel): adds border at the start when slotted in panel-end #8314

Merged
merged 9 commits into from
Dec 7, 2023
Merged

fix(shell-panel): adds border at the start when slotted in panel-end #8314

merged 9 commits into from
Dec 7, 2023

Conversation

anveshmekala
Copy link
Contributor

@anveshmekala anveshmekala commented Dec 1, 2023 •
edited
Loading

Related Issue: #7929

Summary

Adds border to the calcite-shell-panel when slotted in panel-end of calcite-shell.

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 1, 2023
@anveshmekala anveshmekala changed the title fix(shell-panel): adds border at the start when slotted in panel-end fix(shell-panel): adds border at the start when slotted in panel-end Dec 1, 2023
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 1, 2023
@anveshmekala anveshmekala marked this pull request as ready for review December 1, 2023 20:36
@anveshmekala anveshmekala requested a review from a team as a code owner December 1, 2023 20:36
@anveshmekala anveshmekala marked this pull request as draft December 1, 2023 21:02
@anveshmekala anveshmekala marked this pull request as ready for review December 1, 2023 22:00
@anveshmekala anveshmekala 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 Dec 1, 2023
@anveshmekala anveshmekala marked this pull request as draft December 1, 2023 23:24
@anveshmekala anveshmekala marked this pull request as ready for review December 1, 2023 23:48
@anveshmekala anveshmekala 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 Dec 1, 2023
@anveshmekala anveshmekala 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 Dec 2, 2023
@anveshmekala anveshmekala 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 Dec 5, 2023
jcfranco
jcfranco approved these changes Dec 5, 2023
View reviewed changes
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.

🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊
🌊🏄🏄🏄🌊🌊🏄🏄🏄🏄🌊🏄🏄🏄🌊🌊🏄🌊
🌊🏄🌊🌊🏄🌊🏄🌊🌊🏄🌊🏄🌊🌊🏄🌊🏄🌊
🌊🏄🏄🏄🌊🌊🏄🏄🏄🏄🌊🏄🌊🌊🏄🌊🏄🌊
🌊🏄🌊🏄🌊🌊🏄🌊🌊🏄🌊🏄🌊🌊🏄🌊🌊🌊
🌊🏄🌊🌊🏄🌊🏄🌊🌊🏄🌊🏄🏄🏄🌊🌊🏄🌊
🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊

Once selectors are simplified, this looks good to merge!

packages/calcite-components/src/components/shell-panel/shell-panel.scss Outdated
:host([position="start"]) slot[name="action-bar"]::slotted(calcite-action-bar),
:host([position="start"]) .content ::slotted(calcite-flow),
:host([position="start"]) .content ::slotted(calcite-panel) {
:host([position="start"]:not([slot="panel-end"])) slot[name="action-bar"]::slotted(calcite-action-bar),
Copy link
Member

Choose a reason for hiding this comment

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

Can you use nesting to reduce some duplication?

Applies to other updated, grouped selectors.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Initially had nesting and it affected the readability to some extent. Thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ex:

:host([position="end"][slot="panel-start"]),
:host([position="end"][slot="panel-start"]) {
  slot[name="action-bar"]::slotted(calcite-action-bar),
  .content ::slotted(calcite-flow),
  .content ::slotted(calcite-panel) {
    border-inline-start: none;
  }
}

Copy link
Member

Choose a reason for hiding this comment

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

Maybe it's just me, but I find that simpler to read since grouping is more explicit with nesting. 😅

before

:host([position="start"]:not([slot="panel-end"])) slot[name="action-bar"]::slotted(calcite-action-bar),
:host([position="start"]:not([slot="panel-end"])) .content ::slotted(calcite-flow),
:host([position="start"]:not([slot="panel-end"])) .content ::slotted(calcite-panel) {
  border-inline-start: none;
}

:host([slot="panel-start"][position="end"]) slot[name="action-bar"]::slotted(calcite-action-bar),
:host([slot="panel-start"][position="end"]) .content ::slotted(calcite-flow),
:host([slot="panel-start"][position="end"]) .content ::slotted(calcite-panel) {
  border-inline-start: none;
}

after

:host([position="start"]:not([slot="panel-end"]),
:host([position="end"][slot="panel-start"]) {
  slot[name="action-bar"]::slotted(calcite-action-bar),
  .content ::slotted(calcite-flow),
  .content ::slotted(calcite-panel) {
    border-inline-start: none;
  }
}

@jcfranco jcfranco requested a review from ashetland December 5, 2023 23:02
@ashetland
Copy link

ashetland commented Dec 6, 2023 •
edited
Loading

⛴️👍

@anveshmekala anveshmekala 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 Dec 6, 2023
@anveshmekala anveshmekala 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 Dec 6, 2023
jcfranco
jcfranco reviewed Dec 7, 2023
View reviewed changes
packages/calcite-components/src/components/shell-panel/shell-panel.scss
:host([position="start"]) .content ::slotted(calcite-flow),
:host([position="start"]) .content ::slotted(calcite-panel) {
border-inline-start: none;
:host([position="start"]:not([slot="panel-end"])),
Copy link
Member

Choose a reason for hiding this comment

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

Can you clean up the duplicate selectors?

Copy link
Contributor Author

@anveshmekala anveshmekala Dec 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

these aren't duplicate selectors. The reason having them is to accommodate any existing code which do not specify slot for the shell-panel .

Copy link
Contributor Author

Choose a reason for hiding this comment

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

nvm.

@anveshmekala anveshmekala 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 Dec 7, 2023
@anveshmekala anveshmekala merged commit 2d1a1e2 into main Dec 7, 2023
16 checks passed
@anveshmekala anveshmekala deleted the anveshmekala/7929-fix-shell-panel-outline branch December 7, 2023 18:31
@github-actions github-actions bot added this to the 2023 December Priorities milestone Dec 7, 2023
@calcite-admin calcite-admin mentioned this pull request Dec 7, 2023
Merged
alisonailea pushed a commit that referenced this pull request Dec 7, 2023
@anveshmekala @alisonailea
fix(shell-panel): adds border at the start when slotted in panel-end (
161502a 
#8314)

**Related Issue:** #7929 

## Summary

Adds border to the `calcite-shell-panel` when slotted in `panel-end` of
`calcite-shell`.
benelan added a commit that referenced this pull request Dec 7, 2023
@benelan
Merge remote-tracking branch 'origin/main' into jcfranco/switch-from-…
7745ebd 
…ts-node-to-tsx

* origin/main:
  chore: release next
  ci(next): install deps before running npm scripts (#8370)
  feat: provide legacy CSS custom props for backwards compatibility (#8355)
  fix(input-date-picker): no longer emits redundant change event (#8341)
  fix(shell-panel): adds border at the start when slotted in `panel-end` (#8314)
  build(deps): update dependency sortablejs to v1.15.1 (#8364)
benelan added a commit that referenced this pull request Dec 8, 2023
@benelan
Merge remote-tracking branch 'origin/main' into benelan/8057-input-me…
939f966 
…ssage

* origin/main:
  build(node): bump node version to v20 (latest LTS) (#8381)
  build: swap ts-node for tsx (#8196)
  chore: release next
  build(deps): update dependency @types/prettier to v2.7.3 (#8375)
  build(deps): update dependency ng-packagr to v17.0.2 (#8362)
  test(tab-nav): stabilize test (#8356)
  fix(list-item): drag grid cell should be accessible via arrow keys. (#8353)
  chore: release next
  feat(list): Add `calciteListDragStart` and `calciteListDragEnd` events for when a drag starts and ends. (#8361)
  build(deps): update dependency tailwindcss to v3.3.6 (#8376)
  ci(eslint): disable eslint rules that are failing (#8372)
  chore: release next
  fix: replace "\n" to support Windows for tokens output (#8352)
  chore: release next
  ci(next): install deps before running npm scripts (#8370)
  feat: provide legacy CSS custom props for backwards compatibility (#8355)
  fix(input-date-picker): no longer emits redundant change event (#8341)
  fix(shell-panel): adds border at the start when slotted in `panel-end` (#8314)
  build(deps): update dependency sortablejs to v1.15.1 (#8364)
benelan pushed a commit that referenced this pull request Dec 19, 2023
@calcite-admin @github-actions
chore: release main (#8329)
44d4b83 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.0.0...@esri/calcite-design-tokens@2.1.0)
(2023-12-19)


### Features

* **font tokens:** Add font family fallbacks
([#8389](#8389))
([b2fd255](b2fd255))
* Update tokens for better documentation
([#8395](#8395))
([ff19630](ff19630))


### Bug Fixes

* **color tokens:** Fix errors in schema
([#8446](#8446))
([f36a90e](f36a90e))
* **color-context tokens:** Only apply when `.calcite-mode-auto` is
applied
([#8344](#8344))
([19de817](19de817))
* Replace "\n" to support Windows for tokens output
([#8352](#8352))
([02cf5d5](02cf5d5))
</details>

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

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.0.0...@esri/calcite-components@2.1.0)
(2023-12-19)


### Features

* Add `validation-message` and `validation-icon` attributes to form
components for new internal `calcite-input-message`
([#8305](#8305))
([a554cfd](a554cfd))
* **dropdown-item:** Add disabled support
([#8312](#8312))
([4c311c6](4c311c6))
* **list-item:** Add calciteListItemToggle event.
([#8433](#8433))
([1d2fa04](1d2fa04))
* **list:** Add `calciteListDragStart` and `calciteListDragEnd` events
for when a drag starts and ends.
([#8361](#8361))
([1314605](1314605))
* **list:** Add drag event details to `calciteListDragStart` and
`calciteListDragEnd` events
([#8438](#8438))
([e199c08](e199c08))
* Provide legacy CSS custom props for backwards compatibility
([#8355](#8355))
([b0f063e](b0f063e))


### Bug Fixes

* **action-menu:** Filter hidden or disabled actions via keyboard.
([#8336](#8336))
([11c0007](11c0007))
* **action-menu:** Fix closing action menu after a drag occurs
([#8339](#8339))
([dcb8548](dcb8548))
* **action-menu:** Keep internal popover open property in sync
([#8387](#8387))
([38dff7c](38dff7c))
* **dropdown-item:** Avoid hover/active styling when disabled
([#8398](#8398))
([35817dc](35817dc))
* **floating-ui:** Improve floating element performance
([#8409](#8409))
([4d8cfb8](4d8cfb8))
* **input-date-picker:** Ensure range input toggling is consistent
([#8414](#8414))
([cd92586](cd92586))
* **input-date-picker:** No longer emits redundant change event
([#8341](#8341))
([cd5b92b](cd5b92b))
* **input-date-picker:** Respect the numberingSystem property when
rendering the input
([#8383](#8383))
([395b538](395b538))
* **list-item:** Drag grid cell should be accessible via arrow keys.
([#8353](#8353))
([2718ab3](2718ab3))
* **menu-item:** Improve keyboard navigability when `href` populated
([#8408](#8408))
([5b44798](5b44798))
* **modal:** Ensure document overflow styles are properly restored when
multiple modals are closed/removed
([#8390](#8390))
([f2c6b09](f2c6b09))
* Replace "\n" to support Windows for tokens output
([#8352](#8352))
([02cf5d5](02cf5d5))
* **shell-panel:** Adds border at the start when slotted in `panel-end`
([#8314](#8314))
([2d1a1e2](2d1a1e2))
* **shell, shell-panel:** Support resizing shell panel when there is an
iframe slotted in shell content
([#8317](#8317))
([e0f69c9](e0f69c9))
* **stepper:** Emits `calciteStepperItemChange` event when switched to
first step
([#8422](#8422))
([508979f](508979f))
* **table-cell:** Fix background css variable
([#8439](#8439))
([9e5c59b](9e5c59b))
* **tab:** Prevent vertical scrollbar on content pane when the height of
outer elements are specified
([#8399](#8399))
([9e6d901](9e6d901))
* Use Stencil watchers instead of global attributes util
([#8407](#8407))
([c531d81](c531d81))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^2.1.0-next.1 to ^2.1.0
</details>

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

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.0.0...@esri/calcite-components-angular@2.1.0)
(2023-12-19)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize undefined versions


### Dependencies

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

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

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.0.0...@esri/calcite-components-react@2.1.0)
(2023-12-19)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jcfranco jcfranco jcfranco approved these changes

@ashetland ashetland Awaiting requested review from ashetland

Assignees

@anveshmekala anveshmekala

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
Milestone
2023 December Priorities
Development

Successfully merging this pull request may close these issues.
3 participants
@anveshmekala @ashetland @jcfranco