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

feat: reorganize breakpoints #7994

Merged
merged 4 commits into from
Oct 24, 2023
Merged

feat: reorganize breakpoints #7994

merged 4 commits into from
Oct 24, 2023

Conversation

alisonailea
Copy link
Contributor

Related Issue: n/a

Summary

Different platforms need to target breakpoints in different ways. It might be easier to be explicit about min vs max breakpoint sizes. This is not a breaking change as it retains the existing “breakpoint-width-“ tokens for the time being but does mark them for deprecation.

@alisonailea
feat: add XXS breakpoint to tokens
89ec182 
generates a new SCSS variable `$breakpoint-width-xxs: 320px;`
@alisonailea
feat: reorganize breakpoints to be clearer
9bd4b4d 
Different platforms need to target breakpoints in different ways. It might be easier to be explicit about min vs max breakpoint sizes. This is not a breaking change as it retains the existing “breakpoint-width-“ tokens for the time being but does mark them for deprecation.
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Oct 12, 2023
@alisonailea alisonailea added the low risk Issues with low risk for consideration in low risk milestones label Oct 12, 2023
jcfranco
jcfranco approved these changes Oct 12, 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.

Awesome, I really dig this updated structure. Clearer and they can be used for both width or height.

@jcfranco
Copy link
Member

Very, very, very nitpicky: re-organize -> reorganize 🤓

@alisonailea
feat: add height breakpoints
7bc65a8 
Adding the height breakpoints detailed in https://www.figma.com/file/iCQBMp5Q5zlSfyE9NxkdO7/Pagination---responsive?node-id=620%3A22254&mode=dev

while this commit moves the old “breakpoint.width.xs..” to “breakpoint.width.default.xs” this will not change the final SCSS output (“default” in path is ignored).
@alisonailea
Copy link
Contributor Author

they can be used for both width or height

While any token can technically be used anywhere I've updated the tokens to include the explicit breakpoint heights detailed in Figma so they are available for use as well.

@alisonailea
Merge branch 'main' of github.com:Esri/calcite-components into astump…
4c14cee 
…/re-organize-breakpoints

# Conflicts:
#	packages/calcite-design-tokens/src/core.json
@github-actions
Copy link
Contributor

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 Oct 20, 2023
@alisonailea alisonailea changed the title feat: re-organize breakpoints feat: reorganize breakpoints Oct 24, 2023
@alisonailea alisonailea added skip visual snapshots Pull requests that do not need visual regression testing. and removed Stale Issues or pull requests that have not had recent activity. labels Oct 24, 2023
@alisonailea alisonailea merged commit c64a059 into main Oct 24, 2023
16 checks passed
@alisonailea alisonailea deleted the astump/re-organize-breakpoints branch October 24, 2023 21:29
@calcite-admin calcite-admin mentioned this pull request Oct 24, 2023
Merged
benelan pushed a commit that referenced this pull request Oct 30, 2023
@calcite-admin @github-actions
chore: release main (#7997)
5153ccb 
🤖 I have created a release *beep* *boop*
---


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

##
[1.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.0.0...@esri/calcite-design-tokens@1.1.0)
(2023-10-30)


### Features

* Add icon tokens
([#8008](#8008))
([3623df1](3623df1))
* Add js platform formats to calcite-design-tokens
([#8044](#8044))
([0e1fefb](0e1fefb))
* Add xxs breakpoint to tokens
([#7992](#7992))
([05512b6](05512b6))
* Reorganize breakpoints
([#7994](#7994))
([c64a059](c64a059))
</details>

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

##
[1.10.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.9.2...@esri/calcite-components@1.10.0)
(2023-10-30)


### Features

* **block:** Ensure chevron is always displayed
([#8014](#8014))
([95fecb2](95fecb2))
* **navigation-logo:** Adds `icon` and `iconFlipRtl` properties
([#8054](#8054))
([049056d](049056d))
* **stepper,stepper-item:** Adds support for built-in translations
([#8002](#8002))
([bb91624](bb91624))


### Bug Fixes

* **button, fab, inline-editable, split-button:** Prevent redundant
opacity when button is both loading and disabled
([#8015](#8015))
([3a1d3fd](3a1d3fd))
* **combobox:** Clear custom input value on blur
([#8070](#8070))
([327ff06](327ff06))
* **combobox:** Ensure icon scales are consistent
([#8075](#8075))
([babba3b](babba3b))
* **filter:** Corrects the accessible label
([#8069](#8069))
([c203084](c203084))
* Floating components will now get an initial position even if they are
not opened
([#8001](#8001))
([78b680d](78b680d))
* **icon:** Use pixel sizes for icons
([#8009](#8009))
([49085d5](49085d5))
* **input-date-picker, input-time-picker:** Adjust chevron scale
accordingly
([#8012](#8012))
([f894f80](f894f80))
* **input-time-zone:** Fix city translations
([#8058](#8058))
([7df7e1f](7df7e1f))
* **list-item:** Restore tabbability when an item's disabled prop is
toggled
([#8042](#8042))
([c970603](c970603))
* **pagination:** Prevents console error when page-size is set to zero
([#8017](#8017))
([d09d485](d09d485))
* **segmented-control-item:** Fix text color contrast
([#8036](#8036))
([ede8c43](ede8c43))
* **stepper:** Selects next enabled stepper-item when first one is
disabled
([#8004](#8004))
([e0ed54e](e0ed54e))


### Dependencies

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

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

##
[1.10.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.9.2...@esri/calcite-components-react@1.10.0)
(2023-10-30)


### Miscellaneous Chores

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


### Dependencies

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

@SkyeSeitz SkyeSeitz Awaiting requested review from SkyeSeitz

@jacqueskeet jacqueskeet Awaiting requested review from jacqueskeet

@benelan benelan Awaiting requested review from benelan benelan is a code owner

@driskull driskull Awaiting requested review from driskull driskull is a code owner

@geospatialem geospatialem Awaiting requested review from geospatialem geospatialem is a code owner

Assignees

@alisonailea alisonailea

Labels
enhancement Issues tied to a new feature or request. low risk Issues with low risk for consideration in low risk milestones skip visual snapshots Pull requests that do not need visual regression testing.
Projects
None yet
Milestone
2023 October Priorities - Maintenance...
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@alisonailea @jcfranco