feat: Slider Component

[jrgarciadev]

Closes #172
Closes #886
Closes #888

📝 Description

New component added: Slider

💣 Is this a breaking change (Yes/No): Yes

📝 Additional Information

Breaking Changes

• Popover API changed to improve the arrow implementation, arrow is now a pseudo-element, which allows the popover to also move the arrow altogether, this change impacts the Popover, Tooltip and Select implementations.

Popover changes:

  <Popover
      showArrow
      backdrop="opaque"
      placement="right"
      classNames={{
-        base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
-        arrow: "bg-default-200",
+        base: [
+          // the "before" pseudo element is now the popover' arrow
+          "before:bg-default-200"
+        ],
+        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
+          "py-3 px-4 border border-default-200",
+          "bg-gradient-to-br from-white to-default-300",
+          "dark:from-default-100 dark:to-default-50",
        ],
      }}
    >
      <PopoverTrigger>
        <Button>Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        {(titleProps) => (
          <div className="px-1 py-2">
            <h3 className="text-small font-bold" {...titleProps}>
              Popover Content
            </h3>
            <div className="text-tiny">This is the popover content</div>
          </div>
        )}
      </PopoverContent>
  </Popover>

Tooltip changes:

 <Tooltip
      showArrow
      placement="right"
      content="I am a tooltip"
      classNames={{
-        base: "py-2 px-4 shadow-xl text-black bg-gradient-to-br from-white to-neutral-400",
-        arrow: "bg-neutral-400 dark:bg-white",
+        base: [
+          // the "before" pseudo element is now the popover' arrow
+          "before:bg-neutral-400 dark:before:bg-white",
+        ],
+        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
+          "py-2 px-4 shadow-xl",
+          "text-black bg-gradient-to-br from-white to-neutral-400",
+        ],
      }}
    >
      <Button variant="flat">Hover me</Button>
</Tooltip>

Select changes:

 <Select
      items={users}
      label="Assigned to"
      className="max-w-xs"
      variant="bordered"
      classNames={{
        label: "group-data-[filled=true]:-translate-y-5",
        trigger: "min-h-unit-16",
        listboxWrapper: "max-h-[400px]",
      }}
      listboxProps={{
        itemClasses: {
          base: [
            "rounded-md",
            "text-default-500",
            "transition-opacity",
            "data-[hover=true]:text-foreground",
            "data-[hover=true]:bg-default-100",
            "dark:data-[hover=true]:bg-default-50",
            "data-[selectable=true]:focus:bg-default-50",
            "data-[pressed=true]:opacity-70",
            "data-[focus-visible=true]:ring-default-500",
          ],
        },
      }}
      popoverProps={{
        classNames: {
-          base: "p-0 border-small border-divider bg-background",
-          arrow: "bg-default-200",
+          base: "before:bg-default-200", // the before pseudo element controls the popover's arrow
+          content: "p-0 border-small border-divider bg-background", // now instead of the "base" slot we use the "content" slot
        },
      }}
      renderValue={(items) => {
        return items.map((item) => (
          <div key={item.key} className="flex items-center gap-2">
            <Avatar
              alt={item.data.name}
              className="flex-shrink-0"
              size="sm"
              src={item.data.avatar}
            />
            <div className="flex flex-col">
              <span>{item.data.name}</span>
              <span className="text-default-500 text-tiny">({item.data.email})</span>
            </div>
          </div>
        ));
      }}
    >
      {(user) => (
        <SelectItem key={user.id} textValue={user.name}>
          <div className="flex gap-2 items-center">
            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
            <div className="flex flex-col">
              <span className="text-small">{user.name}</span>
              <span className="text-tiny text-default-400">{user.email}</span>
            </div>
          </div>
        </SelectItem>
      )}
    </Select>
  );
}`;

Dropdown Changes

    <Dropdown
      showArrow
      classNames={{
-        base: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
-        arrow: "bg-default-200",
+        content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",  // now instead of the "base" slot we use the "content" 
+        base: "before:bg-default-200",  // the before pseudo element controls the popover's arrow
      }}
    >

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: 3433d40

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

This PR includes changesets to release 41 packages

Name	Type
@nextui-org/shared-icons	Patch
@nextui-org/popover	Patch
@nextui-org/tooltip	Patch
@nextui-org/select	Patch
@nextui-org/slider	Patch
@nextui-org/badge	Patch
@nextui-org/theme	Patch
@nextui-org/react-rsc-utils	Patch
@nextui-org/dropdown	Patch
@nextui-org/snippet	Patch
@nextui-org/react	Patch
@nextui-org/accordion	Patch
@nextui-org/avatar	Patch
@nextui-org/button	Patch
@nextui-org/checkbox	Patch
@nextui-org/chip	Patch
@nextui-org/input	Patch
@nextui-org/link	Patch
@nextui-org/listbox	Patch
@nextui-org/menu	Patch
@nextui-org/modal	Patch
@nextui-org/navbar	Patch
@nextui-org/pagination	Patch
@nextui-org/switch	Patch
@nextui-org/table	Patch
@nextui-org/tabs	Patch
@nextui-org/card	Patch
@nextui-org/code	Patch
@nextui-org/divider	Patch
@nextui-org/image	Patch
@nextui-org/kbd	Patch
@nextui-org/progress	Patch
@nextui-org/radio	Patch
@nextui-org/ripple	Patch
@nextui-org/scroll-shadow	Patch
@nextui-org/skeleton	Patch
@nextui-org/spacer	Patch
@nextui-org/spinner	Patch
@nextui-org/user	Patch
@nextui-org/react-utils	Patch
@nextui-org/use-real-shape	Patch

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)
nextui-docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 13, 2023 11:43pm
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 13, 2023 11:43pm

[THE-SIMPLE-MARK]

When will this be merged?

[mauriciabad]

The error I mentioned is still there. I'll try to contribute to fix it.