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

Export js format from design-tokens #7986

Closed
1 task done
alisonailea opened this issue Oct 12, 2023 · 6 comments
Closed
1 task done

Export js format from design-tokens #7986

alisonailea opened this issue Oct 12, 2023 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. enhancement Issues tied to a new feature or request. estimate - 2 Small fix or update, may require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2023 December Pri...

Comments

@alisonailea
Copy link
Contributor

alisonailea commented Oct 12, 2023 •
edited
Loading

Check existing issues

Description

Add a new format to the transformer config that can be used for generating documentation on the Calcite docsite.

Acceptance Criteria

CI Verification

After #8050 is merged, output for the Calcite Design Tokens for each platform (including JS and ES6) can be observed and verified in the .snapshot files.

Local Verification

  1. checkout the branch locally
  2. run npm run build at root
  3. all build processess should pass
  4. observe calcite-design-tokens/dist now contains platform folders
  5. observe the platform folders include js and es6 folders which contain token files that are not empty and have the .js and .ts file extensions.
  6. These files align to the JSON spec

Relevant Info

https://amzn.github.io/style-dictionary/#/formats?id=javascriptmodule
https://amzn.github.io/style-dictionary/#/formats?id=typescriptmodule-declarations

Which Component

design-tokens

Priority impact

p3 - want for upcoming milestone

Calcite package

  • @esri/calcite-design-tokens

Esri team

Calcite (dev)
@alisonailea alisonailea added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Oct 12, 2023
@github-actions github-actions bot added p3 - want for upcoming milestone Calcite (dev) Issues logged by Calcite developers. labels Oct 12, 2023
@alisonailea alisonailea added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone and removed p3 - want for upcoming milestone labels Oct 19, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Oct 19, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 2 Small fix or update, may require updates to tests. and removed 0 - new New issues that need assignment. labels Oct 19, 2023
@alisonailea alisonailea added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Oct 23, 2023
@alisonailea alisonailea mentioned this issue Oct 23, 2023
Merged
alisonailea added a commit that referenced this issue Oct 24, 2023
@alisonailea
feat: add js platform formats to calcite-design-tokens (#8044)
0e1fefb 
**Related Issue:** #7986

## Summary

Adds two new platforms and four formats to design-token exports.

### JS platform

The "js" platform creates a javascript object of the design-tokens and a
typescript types declaration file representing that object. This format
is necessary for documentation.

#### Examples

```js
export default {
  core: {
    breakpoint: {
      width: {
        xxs: {
          value: "320px",
          type: "sizing",
          description: "Small handheld devices and mini-windows",
          filePath: "src/core.json",
          isSource: true,
          original: {
            value: "320px",
            type: "sizing",
            description: "Small handheld devices and mini-windows",
          },
          name: "xxs",
          attributes: {},
          path: ["core", "breakpoint", "width", "xxs"],
        },
      xs: {
```

```typescript
declare const root: RootObject
export default root
interface RootObject {
  core: Core;
  semantic: Semantic;
}
interface Core {
  font: Font20;
  border: Border7;
  opacity: Opacity2;
  color: Color;
  sizing: Sizing;
  spacing: Sizing;
  breakpoint: Breakpoint;
  'z-index': Zindex;
}
```

### ES6 platform
The "es6" platform provides the design tokens as tree-shakable
javascript named exports.

#### Examples

```js
export const CoreSpacing27 = "256px";
export const CoreSpacing28 = "288px";
export const CoreSpacingNone = "0px";
export const CoreBreakpointWidthXxs = "320px";
export const CoreBreakpointWidthXs = "476px";
export const CoreBreakpointWidthSm = "768px";
export const CoreBreakpointWidthMd = "1152px";
export const CoreBreakpointWidthLg = "1440px";
```

```typescript
export const CoreSpacing27 : string;
export const CoreSpacing28 : string;
export const CoreSpacingNone : string;
export const CoreBreakpointWidthXxs : string;
export const CoreBreakpointWidthXs : string;
export const CoreBreakpointWidthSm : string;
export const CoreBreakpointWidthMd : string;
export const CoreBreakpointWidthLg : string;
```
@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Oct 30, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@alisonailea alisonailea mentioned this issue Oct 30, 2023
Merged
@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Oct 30, 2023
@geospatialem
Copy link
Member

Re-assigned to development to finalize the snapshot tests, anticipated for later this week.

@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Nov 16, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned DitwanP and unassigned alisonailea Nov 16, 2023
@geospatialem
Copy link
Member

@alisonailea It looks like #8050 hasn't been merged in yet, reassigning until the PR has been merged to verify.

@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 21, 2023
@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Nov 22, 2023
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned alisonailea Nov 22, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 1, 2023
@geospatialem
Copy link
Member

Verified in 2.0.0-rc.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. enhancement Issues tied to a new feature or request. estimate - 2 Small fix or update, may require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2023 December Priorities
Development

No branches or pull requests
3 participants
@alisonailea @geospatialem @DitwanP