Closed endigo9740 closed 1 year ago
The list above shows general changes, while the list below shows specific changes per item.
slot[SlotName]
props for adding arbitrary styles to slot wrapping elementssidebarLeftWidth
-> slotSidebarLeft
sidebarRightWidth
-> slotSidebarRight
footer
slotmessage
slot has been dropped in favor of the default slotNOTE: this component has had a major refactor
hover
and outline
toggles have been dropped in favor of individual propswidth
, text
, border
, rounded
, cursor
Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!
NOTE: this component has had a major refactor
current
prop is no longer used on the Crumb, instead we key off the presence of href
text
, color
Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!
Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!
NOTE: this component has had a major refactor
orientation
replaced with vertical: boolean
propvariant
dropped in favor of individual class propsborder[Width|Style|Color]
, margin
, opacity
Default <hr>
style added to core.css:
NOTE: this component has been split up. Please read changes below carefully.
Svelte Component:
List
component renamed ListBox
ListItem
component renamed to ListBoxItem
highlight
prop to accent
to match other componentspadding
, rounded
Tailwind Element: Used for UL, OL, DL, and NAV lists
Converted to a Tailwind Element, component is deprecated. Will be removed, please migrate asap!
select
prop is now functional, wasn't used previouslyvariant
and rounded
props dropped in favor of buttons
prop/lib/components/Progress/*
-> /lib/components/ProgressBar/*
color
prop in favor of meter
and track
, which accept arbitrary classesrounded
style prop/lib/components/Progress/*
-> /lib/components/ProgressRadial/*
NOTE: this component has had a major refactor
width
prop dropped, use display="flex"
if you want width to be 100%NOTE: this component has had a major refactor
label
prop dropped in favor of the default slottrail
slot has been added, appears below the sliderNOTE: this component has had a major refactor
locked: boolean
to prevent progress until a condition is metbutton[Type]:
prop formatNOTE: this component has had a minor refactor
border
prop into borderWidth
and borderColor
propshover
prop styling hover background colorrounded
propRecently updated, no changes needed.
Apollo
filter to prevent blowing out highlightsThis is ready to test! Everyone is welcome to pull down the PR and test locally. Please submit your feedback here. Thanks!
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.
Merged this into dev, but reopening this ticket so QA can continue forward over the next week.
@endigo9740 you can start with these ones for now before I am done with the rest
@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!
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.
Safari..... http://localhost:5173/components/range-sliders Accent doesn't work. Works fine in other browsers.
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!
@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!
Is okay, is clear now.
I've created a new ticket to track the progress on items not completed in this upcoming release:
Part 1 is released. Part 2 coming up soon!
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
borderSize
changed toborderWidth
to match Tailwind/CSSringSize
changed toringWidth
to match Tailwindvariants
, we should favor Tailwind class props$$props.class
has a fallback of''
to removeundefined
appearing in DOMComponent Docs
$$restProps
have this documented clearlyDesign Consistency
Introduce Tailwind Elements
We've opted to deprecate several components in favor of static Tailwind CSS styled elements.