feat(tile): add visual scales #8496
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…klharper/4759-tile-scale
…ed large visual selector and using css instead of inline style for larger icon
github-actions
bot
added
the
enhancement
…klharper/4759-tile-scale
…klharper/4759-tile-scale
…klharper/4759-tile-scale
…-tailwindified some class selectors, more to come
…ed content and redundant styles, updating shadowed text nodes to use design token variables for color and adding a row in the demo page to show slots without a link
…d we'll work on those in the redesign task forthcoming, removing a leftover tailwind reference and fixing the title on the demo page
…klharper/4759-tile-scale
…t the host one. Simplifying some scale code to set medium without the attr selector and adding scaled host padding
eriklharper
added
pr ready for visual snapshots
eriklharper
added
the
pr ready for visual snapshots
eriklharper
added
pr ready for visual snapshots
jcfranco
approved these changes
Jan 11, 2024
There was a problem hiding this comment.
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟨🟦🟦🟦🟨🟦🟦🟨🟨🟦🟦🟨🟨🟨🟦🟦🟨🟨🟨🟦🟨🟨🟨🟨🟦🟨🟦
🟦🟨🟨🟦🟦🟨🟦🟨🟦🟦🟨🟦🟦🟨🟦🟦🟨🟦🟦🟦🟦🟨🟦🟦🟦🟦🟨🟦
🟦🟨🟦🟨🟦🟨🟦🟨🟦🟦🟨🟦🟦🟨🟦🟦🟨🟦🟦🟦🟦🟨🟨🟨🟦🟦🟨🟦
🟦🟨🟦🟦🟨🟨🟦🟨🟦🟦🟨🟦🟦🟨🟦🟦🟨🟦🟦🟦🟦🟨🟦🟦🟦🟦🟦🟦
🟦🟨🟦🟦🟦🟨🟦🟦🟨🟨🟦🟦🟨🟨🟨🟦🟦🟨🟨🟨🟦🟨🟨🟨🟨🟦🟨🟦
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
Once the TW ➡️ CSS changes are rolled back, this is good to merge!
| } | ||
| .heading { | ||
| font-size: var(--calcite-font-size-0); | ||
| line-height: 1.375rem; |
There was a problem hiding this comment.
Is there a design token or TW util we could use for line height?
There was a problem hiding this comment.
I'll let @SkyeSeitz and @alisonailea chime in on this. Ali informed me that there aren't Figma variables for certain token types, including line-height.
I am noticing some line-height css variables in calcite-design-tokens, but only 1 of the values on the Tile Scale Figma file matches up with any of these, which is 1.375rem for --calcite-font-line-height-relative-snug.
…-design-system into eriklharper/4759-tile-scale
eriklharper
added
pr ready for visual snapshots
SkyeSeitz
approved these changes
Jan 12, 2024
Merged
geospatialem
pushed a commit
that referenced
this pull request
Jan 17, 2024
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.1.1</summary> ## [2.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-17) ### Bug Fixes * Allow users to control tabindex on interactive components ([#8166](#8166)) ([b15c052](b15c052)) ### Reverts * Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](#8392)) ([#8471](#8471)) ([4bedf99](4bedf99)) </details> <details><summary>@esri/calcite-components: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-17) ### Features * **action-menu:** Close menu on blur instead of on tab key. ([#8577](#8577)) ([ccfbd0c](ccfbd0c)) * **checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select:** Add required property ([#8517](#8517)) ([72a1ce4](72a1ce4)) * **handle, block, list-item:** Improve drag handle tooltip to include item label ([#8584](#8584)) ([6e643e2](6e643e2)) * **handle:** Add `blurUnselectDisabled` property to disable unselecting handle on blur. ([#8483](#8483)) ([4d665cc](4d665cc)) * **handle:** Add selected property and calciteHandleChange event. ([#8484](#8484)) ([d2e9880](d2e9880)) * **list-item:** Add dragSelected property and calciteListItemDragHandleChange event ([#8524](#8524)) ([4db2eb7](4db2eb7)) * **list-item:** Add tooltip for expanding and collapsing ([#8612](#8612)) ([4964491](4964491)) * **list:** Add "filter-no-results" slot to display content when no filtered items are shown ([#8569](#8569)) ([f1fc7f6](f1fc7f6)) * **list:** Introduce clearer unselected state ([#8510](#8510)) ([f1e836c](f1e836c)) * **radio-button-group, segmented control:** Add validationMessage, validationIcon, and status properties ([#8561](#8561)) ([d4c5efc](d4c5efc)) * Reflect validationIcon property ([#8583](#8583)) ([b3d38b3](b3d38b3)) * **table-header:** Add style when within a `selected` Table Row ([#8449](#8449)) ([13cfe75](13cfe75)) * **tabs:** Emit selection-related events when selection is modified after closing the selected tab ([#8582](#8582)) ([b15c940](b15c940)) * **tile:** Add visual scales ([#8496](#8496)) ([7638ec4](7638ec4)) * Use input-message to display validation messages for invalid fields after form submission ([#8574](#8574)) ([fd392fe](fd392fe)) ### Bug Fixes * **action:** Update component tokens to support transparent ([#8532](#8532)) ([81cb5cc](81cb5cc)) * Allow users to control tabindex on interactive components ([#8166](#8166)) ([b15c052](b15c052)) * **button:** Avoid needlessly overwriting title ([#8491](#8491)) ([350a983](350a983)) * **color-picker:** Emit color change when nudging color channels by using the shift key ([#8579](#8579)) ([4250598](4250598)) * **combobox:** Only allow deleting visible chips with the keyboard ([#8603](#8603)) ([2d38241](2d38241)) * **date-picker:** Prevent console error when selecting just an end date for input date picker ([#8444](#8444)) ([c0e51c3](c0e51c3)) * **filter:** Prevent console warning from displaying to end users ([#8458](#8458)) ([0de7646](0de7646)) * **input-date-picker:** Ensure range icon toggles open corresponding date-picker ([#8554](#8554)) ([cfafd15](cfafd15)) * **input-date-picker:** Resolve a hard to reproduce number formatter caching issue that occurred due to the countdown delay in queued Alerts. ([5f4fa3e](5f4fa3e)) * **input-message:** Add missing margin to scale="s", spacing CSS variable has effect ([#8592](#8592)) ([49b0a20](49b0a20)) * **input, input-number, input-text:** Restore focus on input after browser validation error is displayed and user continues typing ([#8563](#8563)) ([5897965](5897965)) * **input, input-number:** Support setting value property to Infinity ([#8547](#8547)) ([f6ac698](f6ac698)) * **list-item:** Store last focused cell from focusing on elements within a cell. ([#8494](#8494)) ([28f93b4](28f93b4)) * **list, list-item, list-item-group:** Honor hidden attribute on list-item and list-item-group ([#8541](#8541)) ([3851dc6](3851dc6)) * **list:** Correct selectedItems value when list is filtered ([#8481](#8481)) ([9de1922](9de1922)) * **list:** Fix event detail newIndex when down arrow pressed to sort ([#8462](#8462)) ([b3d5169](b3d5169)) * **list:** Fix keyboard arrow navigation ([#8470](#8470)) ([57fdaa4](57fdaa4)) * **modal:** Ensure focus trapping in dynamically created, subsequently opened modals ([#8593](#8593)) ([4ec6b94](4ec6b94)) * **table:** Fix double border on `bordered` Table Rows in `table-footer` ([#8509](#8509)) ([c16ea33](c16ea33)) * **table:** Improve Table overflow behavior ([#8424](#8424)) ([79743e1](79743e1)) * **text-area:** Prevent infinite render loop when `max-length` property is defined ([#8610](#8610)) ([f30d933](f30d933)) ### Reverts * Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper ([#8392](#8392)) ([#8471](#8471)) ([4bedf99](4bedf99)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1 </details> <details><summary>@esri/calcite-components-angular: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-17) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.0 </details> <details><summary>@esri/calcite-components-react: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-01-17) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.2.0-next.22 to ^2.2.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>
Merged
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #4759
Summary
This PR adds a
scaleproperty to control visual display for small, medium and large scales.