sara-component-updates-for-accounting #19

slhinyc · 2023-08-04T14:42:32Z

Component updates for patterns used in Accounting app
- Styling updates to Breadcrumb, Tab, Tag
- Additional colors added to Tag, plus new variant names added
  - Old variant names were retained, so no breaking changes
- New shadow show/hide booleans added to Card and Details
  - Booleans default to false
Styling update and new header slot for Alert
Doc site updates
- New doc pages for Spacing, Elevation, Border Radius
- New design pattern & Figma status tags for all components (for the design team)
- Some styling & copy updates to doc site & example pages

Review app link

…okens docs

vercel · 2023-08-04T14:42:36Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 23, 2023 5:58pm

…to sara-docsite-june

CrookedGrin

Overall, really awesome. A few minor changes and questions.

docs/components/details.md

CrookedGrin · 2023-08-04T18:24:02Z

scripts/make-search.js

@@ -80,7 +80,15 @@ console.log('Generating search index for documentation');
 relativePath.startsWith('assets/') ||
 relativePath.startsWith('dist/') ||
 filename === '_sidebar.md' ||
- filename === '404.md'
+ filename === '404.md' ||
+ filename === 'border-radius.md' ||


What's the rationale for excluding all these files below from the search?

The rationale for hiding the border radius, color, elevation, spacing, and typography files is because I created new files that show our tokens & content (they're the ones linked in the sidebar under Styles), but you could still get to the orig Shoelace files through search & the information is actually not correct because it just shows the SL defaults. So I thought it'd be better to hide these from search so that people don't get to those page by accident & then mistakenly reference those values. The other hidden token files aren't really documented or used in Figma or our designs right now, so they're not technically incorrect but just not relevant yet, and since we can still get the same content from the Shoelace site (or even our own github repo, since the files are still there), I thought it'd be better to just hide them.

CrookedGrin · 2023-08-04T18:26:10Z

src/components/alert/alert.styles.ts

@@ -20,60 +20,68 @@ export default css`
 border-top-width: calc(var(--sl-panel-border-width) * 3);
 border-radius: var(--sl-border-radius-medium);
 font-family: var(--sl-font-sans);
- font-size: var(--sl-font-size-small);
+ font-size: var(--ts-font-sm);


I'm not sure we should be embedding references to --ts vars directly into the library. We already have a layer that assigns the --sl- vars to their corresponding --ts- values; can we just use that? Otherwise we start introducing inconsistency.

Ah, okay. I hadn't thought of that. I'll revert this & check other changes to make sure I've only used the --sl- var

So there are some font related decs where I previously created a --ts- var and set a hard-coded value because there was no equivalent --sl- var & I didn't want to update the --sl- var. What do you think of leaving those as is? (--ts-leading-5 is one example. It's set in tokens.css as 1.25rem)

docs/components/card.md

CrookedGrin · 2023-08-04T18:33:12Z

src/components/select/select.ts

@@ -26,6 +26,7 @@ import type SlRemoveEvent from '../../events/sl-remove';
 * @documentation https://shoelace.style/components/select
 * @status stable
 * @since 2.0
+ * @pattern stable


Is this also supposed to have a @figma annotation?

When there's no annotation, it defaults to just showing the "Figma Needed" tag, which is right for Select -- right now we have no Figma component for Select.

CrookedGrin · 2023-08-04T18:33:38Z

src/components/tab-group/tab-group.styles.ts

@@ -100,7 +100,7 @@ export default css`

 .tab-group--top .tab-group__indicator {
 bottom: calc(-1 * var(--track-width));
- border-bottom: solid var(--track-width) var(--indicator-color);
+ border-bottom: solid calc(4 * var(--track-width)) var(--indicator-color);


CrookedGrin · 2023-08-04T18:35:31Z

src/components/tag/tag.styles.ts

- .tag--primary {
- background-color: var(--sl-color-primary-50);
- border-color: var(--sl-color-primary-200);
+ .tag--blue {


I'm curious about why we're switching to presentational classes instead of semantic ones. Wouldn't that encourage people to use them in arbitrary places?

The design team went back & forth on this a bit. We wanted to add three new decorative (non-semantic) colors, which seemed inconsistent to have alongside the existing 5 semantic naming for the variants, and we weren't sure that the primary (blue) variant makes sense for us anyway, so we landed on just switching to presentational naming & just adding guidelines in Figma and the doc site (to do later) for generally reserving Yellow, Red, and Green for semantic uses. But after seeing that we're using the sl-tag in a few places already I thought it wouldn't be a bad thing to keep the semantically named variants as well, so that you could use either danger or red to create a red tag. Open to your thoughts on how to update though, if you think this is a bad idea!

Fix syntax for boolean in slim example Co-authored-by: Michael Daross <daross@teamshares.com>

Fix boolean syntax for slim example Co-authored-by: Michael Daross <daross@teamshares.com>

Co-Authored-By: Michael Daross <daross@teamshares.com>

CrookedGrin

Looking great!

slhinyc added 20 commits August 1, 2023 10:58

Update content pages to use FA icons instead of Heroicons

9c807ae

Minor doc site style updates

a617087

Update badge colors to be AA a11y

6f30840

Update ts-color-link to primary-600

d6d9ee0

Update breadcrumb and breadcrumb-item styles

39b5290

Update tab and tab-group styles

67a7a19

Add noShadow option to card; Move overrides to component stylesheet

fd2a210

Add shadow option to details; Move overrides to component stylesheet

da85f2e

Update tag styles, variant names, variant options

34500d9

Update example text

60b4e7e

Add token doc pages for Spacing, Elevation, Border Radius; Hide old t…

0d1ed6c

…okens docs

Update Alert visual styling; Add optional Header slot with styling

80b119a

Add design pattern and figma status tags to all components

fbd7993

Disable doc site dark.css for now because the dark theme is broken

0e334d9

Keep tag semantic variants; Update tag examples

6f6ffcc

Make breadcrumb separator darker; Update breadcrumb examples

754cc9c

Add spacing token; Move alert overrides tokens to component styles

cb46cef

Misc doc site and component example updates

d57149b

Prettier updates

33e6fba

Adjust Blue and Teal tag colors for a11y

836cdbc

slhinyc requested review from CrookedGrin, mgmllr, adrianbautista, ebabian and lizziekoshelev August 4, 2023 14:42

Fix test references for Tag

419e56c

vercel bot deployed to Preview August 4, 2023 15:29 View deployment

CrookedGrin added 2 commits August 4, 2023 10:43

Test fixes

1e4d83f

Merge branch 'sara-docsite-june' of github.com:teamshares/shoelace in…

3df76b1

…to sara-docsite-june

vercel bot deployed to Preview August 4, 2023 15:44 View deployment

Removing accidental .only

658860f

vercel bot deployed to Preview August 4, 2023 18:28 View deployment

CrookedGrin suggested changes Aug 4, 2023

View reviewed changes

Update docs/components/details.md

81983ca

Fix syntax for boolean in slim example Co-authored-by: Michael Daross <daross@teamshares.com>

vercel bot deployed to Preview August 4, 2023 20:19 View deployment

Update docs/components/card.md

6b2f7a1

Fix boolean syntax for slim example Co-authored-by: Michael Daross <daross@teamshares.com>

vercel bot deployed to Preview August 4, 2023 20:22 View deployment

Replace --ts- vars with --sl- vars when available

c2767db

Co-Authored-By: Michael Daross <daross@teamshares.com>

vercel bot deployed to Preview August 4, 2023 21:30 View deployment

slhinyc requested a review from CrookedGrin August 4, 2023 21:32

slhinyc added 3 commits August 23, 2023 13:24

Merge branch 'next' into sara-docsite-june

54c959e

Update changelog

b614517

Bump to version 1.3.0

d34a941

vercel bot deployed to Preview August 23, 2023 17:58 View deployment

CrookedGrin approved these changes Aug 23, 2023

View reviewed changes

slhinyc merged commit 3fc04bb into next Aug 24, 2023
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

sara-component-updates-for-accounting #19

sara-component-updates-for-accounting #19

slhinyc commented Aug 4, 2023

vercel bot commented Aug 4, 2023 •

edited

Loading

CrookedGrin left a comment

CrookedGrin Aug 4, 2023

slhinyc Aug 4, 2023

CrookedGrin Aug 4, 2023

slhinyc Aug 4, 2023

slhinyc Aug 4, 2023

CrookedGrin Aug 4, 2023

slhinyc Aug 4, 2023

CrookedGrin Aug 4, 2023

CrookedGrin Aug 4, 2023

slhinyc Aug 4, 2023

CrookedGrin left a comment

sara-component-updates-for-accounting #19

sara-component-updates-for-accounting #19

Conversation

slhinyc commented Aug 4, 2023

vercel bot commented Aug 4, 2023 • edited Loading

CrookedGrin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CrookedGrin left a comment

Choose a reason for hiding this comment

vercel bot commented Aug 4, 2023 •

edited

Loading