Component Improvements & Docs Overhaul

[huntabyte]

New Components

• Calendar - Presents a calendar view tailored for selecting dates.
• Range Calendar - Presents a calendar view tailored for selecting date ranges.
• Date Picker - Facilitates the selection of dates through an input and calendar-based interface.
• Date Range Picker - Facilitates the selection of date ranges through an input and calendar-based interface.
• Date Field - Enables users to input specific dates within a designated field.
• Date Range Field - Enables users to input specific date ranges within a designated field.

Improvements

Docs Overhaul & Redesign ✨

The docs have been completely redesigned by the incredible Pavel Stianko / Bitworks, who refuses to be paid for this work as he wants to contribute to the Svelte community just as I do. I'm incredibly grateful for his work and I hope you all enjoy the new docs!

• API references for all components
• At least 1 example for each component (more to come)

Select Component

• fix numerous bugs with multiple behavior (closes Select's "multiple" typing is incorrect as it doesn't allow true #188 & Weird Select behavior #121)
• prevent onChange from firing on init / multiple times (closes Prevent Select onValueChange from firing on init #73)
• add the ability to pass in a custom items array to be used for type inference

Floating Components

• improve positioning behavior (closes 🐛Bug: DropdownMenu positioning FloatingConfig - Offset and gutter not working #161)
• Remove arrowSize prop from Root components in favor of passing it directly to the Arrow components

Indicator Components (Checkbox & Radio)

• Standardize the Indicator components for checkbox/radio items to a similar API / underlying element

Misc Improvements

• Apply data- attributes to all components for easier global styling
• Add asChild prop to all components that we render an element for to allow for more flexibility in element structure & scoped styles
• Export individual prop types from the library for cleaner imports

Major Breaking Changes

As you're all probably aware, anything pre-1.0 is subject to breaking changes, but this release will introduce a few more than usual, so I wanted to call them out here and provide some guidance on how to migrate.

Replace positioning prop

The positioning prop is confusing and has been something I've wanted to change since I rapidly released this project. It's applied to the Root component which is not intuitive considering it's not actually positioning the Root component but the Content component, so I've decided to remove it in favor of individual props on the Content components of your floating components (see "Components Impacted" below).

The props you can now use to adjust the positioning of your floating content components are:

• side - the preferred side of the trigger the content should be positioned against ("top", "right", "bottom", "left")
• sideOffset - the offset in pixels from the preferred side. This is useful when you want to position your content a little further away from the trigger
• align - the preferred alignment of the content relative to the trigger ("start", "center", "end")
• alignOffset - the offset in pixels from the preferred alignment.
• avoidCollisions - whether or not the content should avoid collisions with the viewport, which defaults to true and is what causes the content to flip sides when it's too close to the edge of the viewport.
• collisionBoundary - The boundary element to check for collisions against. Defaults to the viewport.
• collisionPadding - The amount of padding to apply to the collision boundary, which determines how close the content can get to the edge of the boundary before it flips sides.
• fitViewport - Whether or not the content should be forced to fit within the viewport.
• sameWidth - Whether or not the content should be forced to be the same width as the trigger.
• strategy - The positioning strategy to use for the floating element.
• overlap - Whether or not the floating element can overlap the trigger.

These props are applied to the Content components.

For example, if you wanted to position a Popover component to the right of the trigger, you would now do something like this:

<script lang="ts">
	import { Popover } from "bits-ui";
</script>

<Popover.Root>
	<Popover.Trigger>Open</Popover.Trigger>
	<Popover.Content side="right" align="start">
		Content Here
	</Popover.Content>
</Popover.Root>

Components Impacted: Context Menu, Dropdown Menu, Link Preview, Popover, Select & Tooltip

Move arrowSize prop

Currently, the arrowSize prop is applied to the Root component of several floating components. Similar to the positioning prop, this is not intuitive and I've decided to move it to the Arrow component of the floating components.

For example, if you wanted to change the size of the arrow on a Tooltip component, you would now do something like this:

<script lang="ts">
	import { Tooltip } from "bits-ui";
</script>

<Tooltip.Root>
	<Tooltip.Trigger>Open</Tooltip.Trigger>
	<Tooltip.Content>
		<Tooltip.Arrow size={8} />
	</Tooltip.Content>
</Tooltip.Root>

[changeset-bot]

🦋 Changeset detected

Latest commit: 83b2a5b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
bits-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
bits-ui	✅ Ready (Inspect)	Visit Preview	💬 10 unresolved ✅ 71 resolved	Dec 9, 2023 3:18pm
primitives	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 9, 2023 3:18pm

[ollema]

hi @huntabyte - just wanted to pop in and ask if you have seen my comments on the wip calendar here:
#171 (comment)

since maybe you intend for this patch to get merged and #171 to get closed

[huntabyte]

hi @huntabyte - just wanted to pop in and ask if you have seen my comments on the wip calendar here: #171 (comment)

since maybe you intend for this patch to get merged and #171 to get closed

Hey @ollema, I believe most of the issues were addressed, will take a look at the builder attrs, its likely because the attributes are as const which should be a simple fix.

For the styling on the th and other specific table elements, it's because the browsers default stylesheet for those, so you need to make them important (this also gave me a hard time until I dug into it a bit further).

As for the value slot prop, I'm hesitant to go adding a ton of stuff to the slot props considering its accessible at the root via alternate ways, like bind:value and if I add it for one, it has to be added to all and then documented that there are a few different ways to access the value which I'm unsure is a good idea, especially considering slots will be (mostly) obsolete come S5 :)