Improve Component Consistency

[endigo9740]

We've created and implemented a lot of new design patterns and paradigms over the last few months. I think it would be useful to go through and ensure all components are in sync with the latest standards.

NOTE: THIS UPDATE WILL INTRODUCE BREAKING CHANGES

Code Consistency

• Ensure we're following similar conventions for component prop naming
  • All instances of borderSize changed to borderWidth to match Tailwind/CSS
  • All instances of ringSize changed to ringWidth to match Tailwind
• Ensure we define our component scripts in a consistent manner
• Some of our earliest components many be due for a refactor and cleanup
• Remove or reduce the use of variants, we should favor Tailwind class props
• Ensure all use of $$props.class has a fallback of '' to remove undefined appearing in DOM
• Ensure consistence application of "id" classes for each element within the component templates.

Component Docs

• Add and improve interactive examples
• Improve usage instructions and code snippets
• Ensure all available component props are documented and accurate (type, description, etc)
• Ensure all components that utilize $$restProps have this documented clearly

Design Consistency

• Verify that we're using a cohesive visual style and aesthetic.
• Hover state styles should be standardized

Introduce Tailwind Elements

We've opted to deprecate several components in favor of static Tailwind CSS styled elements.

• Migrate presentational components to Tailwind Elements #240
• Button component refactor #216

[endigo9740]

The list above shows general changes, while the list below shows specific changes per item.

Components

App Shell

• Doc: interactive example updated
• Added multiple slot[SlotName] props for adding arbitrary styles to slot wrapping elements
• Renamed prop sidebarLeftWidth -> slotSidebarLeft
• Renamed prop sidebarRightWidth -> slotSidebarRight
• Added a fixed footer slot

App Bar

• Added slot wrapper style props
• Bugfix: fixed an issue where the padding was too small on small screens

Accordion

• Add fallback warning message when missing required slots
• Added identifying classes per each relevant template element
• Added slot wrapper style props

Alerts

• Initials now render with responsive SVG text.
• Added identifying classes per each slot
• Added slot wrapper style props
• The message slot has been dropped in favor of the default slot

Avatars

NOTE: this component has had a major refactor

• Doc: example has been overhauled
• Doc: Dynamic usage code block replace with fixed examples
• Canned sizes have been dropped in favor of individual style props
• The hover and outline toggles have been dropped in favor of individual props
• New props include: width, text, border, rounded, cursor
• New syntax for importing Svelte actions, supports our Filter action

Badges

Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!

• Migrate presentational components to Tailwind Elements #240

Breadcrumbs

NOTE: this component has had a major refactor

• The current prop is no longer used on the Crumb, instead we key off the presence of href
• New props added to the Crumb component: text, color
• Anchors now adapt to global anchor CSS styles (links look like links!)

Buttons

Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!

• Button component refactor #216

Cards

Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!

• Migrate presentational components to Tailwind Elements #240

Data Tables

• Data Table refactor and cleanup #217

Dividers

NOTE: this component has had a major refactor

• orientation replaced with vertical: boolean prop
• variant dropped in favor of individual class props
• New style props include border[Width|Style|Color], margin, opacity

Default <hr> style added to core.css:

• Migrate presentational components to Tailwind Elements #240

Gradient Heading

• Docs: minor updates
• Minor adjustments to the component code

Lists

NOTE: this component has been split up. Please read changes below carefully.

Svelte Component:

• List component renamed ListBox
• ListItem component renamed to ListBoxItem
• Listbox now now only support selection lists
• Renamed highlight prop to accent to match other components
• Added new styles props: padding, rounded
• Docs: overhauls docs and resolve scroll to top error on selection

Tailwind Element: Used for UL, OL, DL, and NAV lists

• Migrate presentational components to Tailwind Elements #240

Logo Cloud

Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!

• Migrate presentational components to Tailwind Elements #240

Menus

• Recreate Menu as a Svelte Action #196

Paginators

• Bugfix: select prop is now functional, wasn't used previously
• The variant and rounded props dropped in favor of buttons prop
• You now provide arbitrary styles to the button, including button variant classes

Progress Bars

• Migrated from /lib/components/Progress/* -> /lib/components/ProgressBar/*
• Dropped color prop in favor of meter and track, which accept arbitrary classes
• Added rounded style prop

Progress Radials

• Moved from /lib/components/Progress/* -> /lib/components/ProgressRadial/*

Radio Groups

NOTE: this component has had a major refactor

• Updated and improved the visual style
• Added a hover state for non-selected radio items
• Please review all props as many were changed
• width prop dropped, use display="flex" if you want width to be 100%

Range Sliders

NOTE: this component has had a major refactor

• Doc: interactive example added
• The label prop dropped in favor of the default slot
• A trail slot has been added, appears below the slider
• Bugfix: ticks can now be toggle on/off in a responsive manner

Slide Toggles

• Minor code cleanup

Steppers

NOTE: this component has had a major refactor

• Fresh new UI design and slide animation when changing steps
• The timeline UI now has a fill effect as you progress
• Completed steps marked with a checkmark
• Individual steps can use prop locked: boolean to prevent progress until a condition is met
• All button styles can be modified with button[Type]: prop format
• Arbitrary class can be provided to each button prop, including button variant classes
• More changes coming soon: Stepper update to drop length/index props #222

Tabs

NOTE: this component has had a minor refactor

• Minor UI refresh
• Split border prop into borderWidth and borderColor props
• Added new hover prop styling hover background color
• Added new rounded prop

Tooltips

• Recreate Tooltip as a Svelte Action #195

Utilities

Code Block

• Add "Copy to Clipboard" feature to Code Blocks #204

Drawers

Recently updated, no changes needed.

Dialogs

• Refactor and improve the Dialog utility #197

Toasts

• Refactor and improve the Toast utility #198

Light Switch

• Docs: improved setup instructions and detail how it works

Actions

Copy to Clipboard

• New Action: Copy to Clipboard #199

Filters

• Docs: minor revisions to better explain how this operates.
• Minor adjustments to the Apollo filter to prevent blowing out highlights

[endigo9740]

This is ready to test! Everyone is welcome to pull down the PR and test locally. Please submit your feedback here. Thanks!

[endigo9740]

Note I've completed a round of updates. The first was just general QA and cleanup fixes. The second added more "selector classes", the id-like classes we use to describe each element within the component templates.

[endigo9740]

Merged this into dev, but reopening this ticket so QA can continue forward over the next week.

[salisshuaibu11]

1. The fill property on the button component is not taking effect.
2. If you check the list component under selection ListBox there is a writing typo in the description the "to" that comes before the store needs to get removed.
3. missing toggles for rounded and cursor props in the Avatar component, I think it will make sense if you add those.
4. There is a need to add an interactive example for the Badges component the way you did it for the Avatar, check mantine's badges.
5. How about code that we are adding as a usage to be referring to the component examples, what's your opinion on this? The reason am bringing this up is because the doc for BreadCrumb is unclear to me, but I don't know for others.

@endigo9740 you can start with these ones for now before I am done with the rest

[endigo9740]

@salisshuaibu11 The button component wasn't touched in this update. It's been pulled to it's own dedicated ticket. But I noted your posted on there already.

We're adding interactive examples over time as I'm still settled on the best way to handle a few things. We'll have them for most components eventually. Though some like Cards work a bit better as is.

Let's chat about the Breacrumb a bit more tomorrow. I'd like to hear your thoughts.

Thanks though, this is a great start!

[niktek]

Safari (of course) doesn't show the initials on components/avatars even though the rendered HTML has it and it shows fine in other browsers like Chrome.

[niktek]

Safari..... http://localhost:5173/components/range-sliders Accent doesn't work. Works fine in other browsers.

[endigo9740]

Per Avatars - I'm using the same technique as the progress radio for SVG text - which scale responsively. So I'll check both!

Per Radio Sliders - yeah, I'm aware. Hopefully they resolve that soon!

[endigo9740]

@salisshuaibu11 @niktek The items you mentioned above have been fixed and changes push to dev branch. Please confirm.

@salisshuaibu11 I didn't include the Avatar cursor in the preview because it's not very visibly notable. Also we never followed up on your issue with the breadcrumbs. If you can provide more details on what's unclear there I'd be happy to explain. Breadcrumbs are a component that have been part of web pages since early days. I'm not sure what else we can do to explain them. But I'l open to ideas!

[salisshuaibu11]

Is okay, is clear now.

[endigo9740]

I've created a new ticket to track the progress on items not completed in this upcoming release:

• Consistency Update - Part 2 #254

[endigo9740]

Part 1 is released. Part 2 coming up soon!