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(scrim): Responsively set the scale of the loading spinner #7182

Merged
merged 5 commits into from
Jun 17, 2023
Merged

fix(scrim): Responsively set the scale of the loading spinner #7182

merged 5 commits into from
Jun 17, 2023

Conversation

driskull
Copy link
Member

@driskull driskull commented Jun 15, 2023 •
edited
Loading

Related Issue: #7147

Summary

  • Updates the scrim to set the scale of the internal loading spinner based on the scrim size.
  • Scrim is now responsive with a resize observer.
  • Breakpoints added based on design. These could maybe go into some kind of component token in the future.
  • Breakpoint is based on the minimum value of width or height.
  • Adds test

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 15, 2023
@driskull driskull changed the title fix(scrim): Adjust loader scale size depending on scrim size. fix(scrim): Set the scale of the internal loading spinner based on the scrim size Jun 16, 2023
@driskull driskull changed the title fix(scrim): Set the scale of the internal loading spinner based on the scrim size fix(scrim): Responsively et the scale of the internal loading spinner Jun 16, 2023
@driskull driskull changed the title fix(scrim): Responsively et the scale of the internal loading spinner fix(scrim): Responsively set the scale of the internal loading spinner Jun 16, 2023
@driskull driskull changed the title fix(scrim): Responsively set the scale of the internal loading spinner fix(scrim): Responsively set the scale of the internal loader Jun 16, 2023
@driskull driskull changed the title fix(scrim): Responsively set the scale of the internal loader fix(scrim): Responsively set the scale of the loading spinner Jun 16, 2023
@driskull driskull marked this pull request as ready for review June 16, 2023 15:55
@driskull driskull requested a review from a team as a code owner June 16, 2023 15:55
jcfranco
jcfranco approved these changes Jun 16, 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.

📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏
📏🔄📏📏📏🔄📏🔄🔄🔄📏📏🔄🔄🔄📏🔄🔄🔄🔄📏🔄📏
📏🔄🔄📏📏🔄📏📏🔄📏📏🔄📏📏📏📏🔄📏📏📏📏🔄📏
📏🔄📏🔄📏🔄📏📏🔄📏📏🔄📏📏📏📏🔄🔄🔄📏📏🔄📏
📏🔄📏📏🔄🔄📏📏🔄📏📏🔄📏📏📏📏🔄📏📏📏📏📏📏
📏🔄📏📏📏🔄📏🔄🔄🔄📏📏🔄🔄🔄📏🔄🔄🔄🔄📏🔄📏
📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏

Would this be possible to simplify by using container queries? We'd need to set some polyfills, but it looks like it could help here.

packages/calcite-components/src/components/scrim/scrim.tsx Show resolved Hide resolved
packages/calcite-components/src/components/scrim/scrim.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/scrim/resources.ts Outdated Show resolved Hide resolved
@driskull
Copy link
Member Author

Would this be possible to simplify by using container queries? We'd need to set some polyfills, but it looks like it could help here.

I think a resize observer makes most sense in this case since we're in JS land. If it were a pure CSS change then container queries.

@driskull driskull added this to the 2023 June patch priorities milestone Jun 16, 2023
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 17, 2023
@driskull driskull merged commit 72c5943 into master Jun 17, 2023
@driskull driskull deleted the dris0000/scrim-loader-responsive branch June 17, 2023 00:16
@calcite-admin calcite-admin mentioned this pull request Jun 17, 2023
Merged
benelan added a commit that referenced this pull request Jun 27, 2023
@calcite-admin @github-actions @benelan
chore: release latest (#7144)
2422120 
🤖 I have created a release *beep* *boop*
---


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

##
[1.4.3](https://github.com/Esri/calcite-components/compare/@esri/[email protected]...@esri/[email protected])
(2023-06-26)

### Bug Fixes

* **accordion-item:** support items working across shadowDOM ([#7035](#7035)) ([6378e35](6378e35)), closes [#6167](#6167)
* **alert:** Sets autoCloseDuration to "medium" by default
([#7157](#7157))
([1b9a8ed](1b9a8ed))
* **alert:** Update alert queue when an alert is removed from the DOM
([#7189](#7189))
([edd59eb](edd59eb))
* **combobox, dropdown, input-date-picker, input-time-picker, popover,
tooltip:** Prevent repositioning from affecting other floating
components
([#7178](#7178))
([1b02dae](1b02dae))
* Ensure mouse events are blocked for disabled components in Firefox
([#7107](#7107))
([271d985](271d985))
* **input-date-picker:** Fix showing the placeholder when resetting the
value ([#7156](#7156))
([8d60ffd](8d60ffd))
* **input, input-number:** Allows numeric characters.
([#7213](#7213))
([739f0af](739f0af))
* **input,input-number:** Allow typing decimal separator in firefox for
arabic locale
([#7173](#7173))
([595e6f2](595e6f2))
* **list:** No longer has incorrect border width
([a810943](a810943))
* **list:** Update selectedItems property on all item selection changes
([#7204](#7204))
([da048f6](da048f6))
* **menu-item:** Ensure correct order of rendered icons ([#7098](#7098)) ([fd344e9](fd344e9)), closes [#7097](#7097)

* **navigation:** Label is no longer a required property
([#7084](#7084))
([ba2bd4d](ba2bd4d))
* **radio-button-group:** No longer focus first radio button on label
click and adds `setFocus` method.
([#7050](#7050))
([4267b8c](4267b8c))
* **radio-button, radio-button-group:** Prevent emitting events when
selecting a checked radio button
([#7102](#7102))
([77fcc81](77fcc81))
* **radio-button:** Focuses first focusable radio-button element in
group. ([#7152](#7152))
([dd7ec60](dd7ec60))
* **scrim:** Responsively set the scale of the loading spinner
([#7182](#7182))
([72c5943](72c5943))
* **tooltip:** Improve component timing
([#7172](#7172))
([106f5d2](106f5d2))
* **tree-item:** Ensure expanded tree-item is displayed when expanded
and made visible
([#7216](#7216))
([3c0fbf5](3c0fbf5))

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

##
[1.4.3](https://github.com/Esri/calcite-components/compare/@esri/[email protected]...@esri/[email protected])
(2023-06-26)


### Miscellaneous Chores

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


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.4.3-next.7 to 1.4.3
</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]>
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

Assignees

@driskull driskull

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 June patch priorities
Development

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