Initial draft of cem-* elements for rendering manifest data #1425
Conversation
|
A live preview of this PR will be available at the URL below and will update on each commit. = https://pr1425---site-khswqo4xea-wl.a.run.app/
|
| </div> | ||
| <cem-class-declaration id="content" .declaration=${declaration}> | ||
| <div slot="usage"> | ||
| <h4>Usage</h4> |
There was a problem hiding this comment.
Should the title go in the element so it's standardized?
| "lit": "^2.6.0", | ||
| "lit-analyzer": "^1.2.1" | ||
| "lit-analyzer": "^1.2.1", | ||
| "marked": "^4.2.5" |
There was a problem hiding this comment.
Todo: I think we should make a separate package that has a markdown parser pre-configured with all the plugins we accept so we make sure it's consistent across uses.
| @@ -0,0 +1,292 @@ | |||
| /** | |||
| * @license | |||
| * Copyright 2022 Google LLC | |||
There was a problem hiding this comment.
| * Copyright 2022 Google LLC | |
| * Copyright 2023 Google LLC |
| >deprecated | ||
| </span>` | ||
| )} | ||
| ${privacy !== undefined && privacy !== 'public' |
There was a problem hiding this comment.
maybe pull up into a named variable so it can have a comment, like:
// only display private and protected privacy
const privacyString = privacy !== ...| : ''}${statik ? 'static ' : ''}${rest ? '...' : ''} | ||
| ${name}</code | ||
| > | ||
| ${optional ? html`<span class="optional"> (optional)</span>` : ''} |
There was a problem hiding this comment.
I'm assuming there's markup here and not for other modifiers because of the drafty nature of the PR? If so, I think I'd include a span/class for all modifiers or none and we can add them as needed later?
| parameters, | ||
| (params: cem.Parameter[]) => | ||
| html` | ||
| <table> |
There was a problem hiding this comment.
We might want to consider using CSS grid so that multiple parameters tables have their columns line up.
| @customElement('cem-class-declaration') | ||
| export class CemClassDeclaration extends LitElement { | ||
| static styles = styles; | ||
| @property() |
There was a problem hiding this comment.
formatting nit: give these some newlines so they have rom to breathe
| this.declaration.members?.filter( | ||
| (m) => m.kind === 'field' && m.privacy !== 'private' | ||
| ), | ||
| (m) => html` <h4>Fields</h4> |
There was a problem hiding this comment.
nit: Prettier maintains leading whitespace if you initially had a newline. You can search for `` ` to find and remove these.
| @@ -0,0 +1,94 @@ | |||
| /** | |||
| * @license | |||
| * Copyright 2022 Google LLC | |||
There was a problem hiding this comment.
| * Copyright 2022 Google LLC | |
| * Copyright 2023 Google LLC |
here and elsewhere
| export const styles = css` | ||
| :host { | ||
| display: block; | ||
| padding: 0 0 15px 15px; |
There was a problem hiding this comment.
we'll need variables for all of these spacing and colors.
No description provided.