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.

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

feat: update tokens for better documentation #8395

Merged
merged 21 commits into from
Dec 18, 2023
Merged

Conversation

alisonailea
Copy link
Contributor

Related Issue: #8315

Summary

This PR updates tokens to include a "calcite-schema" in each token's attributes. This schema fully defines the token and it's role in the design system. It also changes the Docs output to always stringify the token value and fix the filePath to be relative to the tokens directory.

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 11, 2023
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.

LGTM! 🕹️👾

I have a couple of questions regarding the attributes/schema field:

  • Are these automatically populated from Figma? If not, what is the process to determine the schema?
  • To reduce duplication, would it possible to provide a common schema at the token parent level and have each token extend or override the parent schema?

@alisonailea
Copy link
Contributor Author

  • Are these automatically populated from Figma? If not, what is the process to determine the schema?

Not at this time. Automated Figma variables integration is still TBD. However, the schema organization was developed with the designers and the organization of Figma variables should mirror tokens. However I'm waiting for Skye to get back so we can do a final review of the schema before merging.

I'm also very open to feedback from devs as well. This naming schema will likely have long term effects on the organization of things. If needed I can move this into draft until the next engineering discussions.

  • To reduce duplication, would it possible to provide a common schema at the token parent level and have each token extend or override the parent schema?

I like this. It lends itself to part of a larger typescript refactor I was considering.

@alisonailea alisonailea added the skip visual snapshots Pull requests that do not need visual regression testing. label Dec 18, 2023
…/8315-docs-output

# Conflicts:
#	packages/calcite-design-tokens/src/core/font.json
#	packages/calcite-design-tokens/src/semantic/font.json
#	packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
#	packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
@alisonailea alisonailea merged commit ff19630 into main Dec 18, 2023
11 checks passed
@alisonailea alisonailea deleted the astump/8315-docs-output branch December 18, 2023 21:02
@github-actions github-actions bot added this to the 2023 December Priorities milestone Dec 18, 2023
benelan pushed a commit that referenced this pull request Dec 19, 2023
🤖 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
Labels
enhancement Issues tied to a new feature or request. skip visual snapshots Pull requests that do not need visual regression testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants