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

[Question]: Custom format to look for official $description in group? #1003

Open
chris-dura opened this issue Jul 28, 2023 · 0 comments
Open

Comments

@chris-dura
Copy link

chris-dura commented Jul 28, 2023

I don't believe the official group $description property is supported in SD currently.

But, I'd like to start using it to author my tokens to be better prepared for the future. And, I want to write a custom formatter to use the official $description instead of SD's comment attribute. This is pretty straight-forward if I'm looking for $description on individual tokens themselves; however, trying to discover if there is a $description on a "parent group" seems like it'll be trickier, and probably involve some recursion...

So, just wanted to see if anyone had a recommendation on an efficient approach using the dictionary.allTokens or token objects in a format?

Example source:

// my-container.js

module.exports = {
	"my-container": {
		$description: "These tokens define generic containers",
		color: {
			value: "#fff",
			comment: "{my-container.color.$description}",
			$description: "This is the default color for a container"
		},
		margin: {
			value: 24,
			comment: "{my-container.margin.$description}",
			$description: "This is the default margin for a container"
		}
	}
}

And, let's say I wanted to write a custom formatter to output a markdown table template like this...

<!-- my-template.md.template -->

## ${group.name}

> ${group.$description}

| Name          | Description          | Value         |
|---------------|----------------------|---------------|
| ${token.name} | ${token.description} | ${token.value |

Resulting in an output of:

My Container

These tokens define generic containers

Name Description Value
my-container-color This is the default color for a container #fff
my-container-margin This is the default margin for a container 1.5rem

I know how to do most of it, but, just asking if anyone has an elegant way to do this logic in the formatter? Or, am I stuck with just searching the JSON objects up the ancestor chain?

// my-custom-format.js

// If the token has a parent group with a `$description` property
if (????) {
  let group.description = "the-group's-description";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant