feat(slider): vertical orientation added, start & end content, bug fixes

nextui-org · Oct 5, 2023 · 443c6f1 · 443c6f1
1 parent 70da752
commit 443c6f1
Show file tree

Hide file tree

Showing 17 changed files with 475 additions and 77 deletions.
diff --git a/apps/docs/content/components/badge/index.ts b/apps/docs/content/components/badge/index.ts
@@ -6,7 +6,7 @@ import placements from "./placements";
 import shapes from "./shapes";
 import visibility from "./visibility";
 import contentExamples from "./content-examples";
-import disableOutline from "./disable-outline";
+import showOutline from "./show-outline";
 import a11y from "./a11y";
 
 export const badgeContent = {
@@ -18,6 +18,6 @@ export const badgeContent = {
   shapes,
   visibility,
   contentExamples,
-  disableOutline,
+  showOutline,
   a11y,
 };
diff --git a/...ntent/components/badge/disable-outline.ts → .../content/components/badge/show-outline.ts b/...ntent/components/badge/disable-outline.ts → .../content/components/badge/show-outline.ts
@@ -3,14 +3,14 @@ const App = `import {Badge, Avatar} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex gap-4 items-center">
-      <Badge content="5" color="danger" shape="rectangle" disableOutline>
+      <Badge content="5" color="danger" shape="rectangle" showOutline={false}>
         <Avatar
           isBordered
           radius="md"
           src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
         />
       </Badge>
-      <Badge content="5" color="danger" shape="circle" disableOutline>
+      <Badge content="5" color="danger" shape="circle" showOutline={false}>
         <Avatar
           isBordered
           radius="full"

diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
@@ -13,7 +13,7 @@ Badges are used as a small numerical value or status descriptor for UI elements.
 
 ---
 
-<CarbonAd/>
+<CarbonAd />
 
 ## Import
 
@@ -62,9 +62,9 @@ You can control the visibility of the badge by using the `isInvisible` property.
 
 ### Disable Outline
 
-By default, the badge has an outline, you can disable it by using the `disableOutline` property.
+By default, the badge has an outline, you can disable it by using the `showOutline={false}` property.
 
-<CodeDemo title="Disable outline" files={badgeContent.disableOutline} />
+<CodeDemo title="Disable outline" files={badgeContent.showOutline} />
 
 ### Accessibility
 
@@ -79,18 +79,19 @@ Instead, consider supplying a comprehensive description, such as using `aria-lab
 
 ### Badge Props
 
-| Attribute        | Type                                                                        | Description                                                                    | Default     |
-| ---------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------- |
-| children \*      | `ReactNode`                                                                 | The wrapped component.                                                         | -           |
-| content          | `string` \| `number` \| `ReactNode`                                         | The content of the badge. The badge will be rendered relative to its children. | -           |
-| variant          | `solid` \| `flat` \| `faded` \| `shadow`                                    | The variant style of the badge.                                                | `solid`     |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge.                                                        | `default`   |
-| size             | `sm` \| `md` \| `lg`                                                        | The size of the badge.                                                         | `md`        |
-| shape            | `circle` \| `rectangle`                                                     | The shape of the badge.                                                        | `rectangle` |
-| placement        | `top-right` \| `top-left` \| `bottom-right` \| `bottom-left`                | The placement of the badge.                                                    | `top-right` |
-| disableOutline   | `boolean`                                                                   | If `true`, the badge will not have an outline.                                 | `false`     |
-| disableAnimation | `boolean`                                                                   | If `true`, the badge will not have an animation.                               | `false`     |
-| isInvisible      | `boolean`                                                                   | If `true`, the badge will be invisible.                                        | `false`     |
-| isOneChar        | `boolean`                                                                   | If `true`, the badge will have the same width and height.                      | `false`     |
-| isDot            | `boolean`                                                                   | If `true`, the badge will have smaller dimensions.                             | `false`     |
-| classNames       | `Record<"base"｜"badge", string>`                                           | Allows to set custom class names for the badge slots.                          | -           |
+| Attribute        | Type                                                                        | Description                                                                              | Default     |
+| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------- |
+| children \*      | `ReactNode`                                                                 | The wrapped component.                                                                   | -           |
+| content          | `string` \| `number` \| `ReactNode`                                         | The content of the badge. The badge will be rendered relative to its children.           | -           |
+| variant          | `solid` \| `flat` \| `faded` \| `shadow`                                    | The variant style of the badge.                                                          | `solid`     |
+| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge.                                                                  | `default`   |
+| size             | `sm` \| `md` \| `lg`                                                        | The size of the badge.                                                                   | `md`        |
+| shape            | `circle` \| `rectangle`                                                     | The shape of the badge.                                                                  | `rectangle` |
+| placement        | `top-right` \| `top-left` \| `bottom-right` \| `bottom-left`                | The placement of the badge.                                                              | `top-right` |
+| showOutline      | `boolean`                                                                   | If `true`, the badge will have an outline.                                               | `true`      |
+| disableOutline   | `boolean`                                                                   | If `true`, the badge will not have an outline. **Deprecated** use `showOutline` instead. | `false`     |
+| disableAnimation | `boolean`                                                                   | If `true`, the badge will not have an animation.                                         | `false`     |
+| isInvisible      | `boolean`                                                                   | If `true`, the badge will be invisible.                                                  | `false`     |
+| isOneChar        | `boolean`                                                                   | If `true`, the badge will have the same width and height.                                | `false`     |
+| isDot            | `boolean`                                                                   | If `true`, the badge will have smaller dimensions.                                       | `false`     |
+| classNames       | `Record<"base"｜"badge", string>`                                           | Allows to set custom class names for the badge slots.                                    | -           |
diff --git a/packages/components/badge/src/use-badge.ts b/packages/components/badge/src/use-badge.ts
@@ -21,6 +21,12 @@ interface Props extends HTMLNextUIProps<"span", "content"> {
    * The content of the badge. The badge will be rendered relative to its children.
    */
   content?: string | number | ReactNode;
+  /**
+   * Whether to disable the outline around the badge.
+   * @deprecated use `showOutline` instead
+   * @default false
+   */
+  disableOutline?: boolean;
   /**
    * Classname or List of classes to change the classNames of the element.
    * if `className` is passed, it will be added to the base slot.
@@ -58,6 +64,9 @@ export function useBadge(originalProps: UseBadgeProps) {
     () =>
       badge({
         ...variantProps,
+        showOutline: !!originalProps?.disableOutline
+          ? !originalProps?.disableOutline
+          : originalProps?.showOutline,
         isOneChar,
         isDot,
       }),

diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
@@ -16,4 +16,12 @@ describe("Slider", () => {
     render(<Slider ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
+
+  it("should support aria-label", () => {
+    const {getByRole} = render(<Slider aria-label="Aria Label" />);
+
+    const group = getByRole("group");
+
+    expect(group).toHaveAttribute("aria-label", "Aria Label");
+  });
 });
diff --git a/packages/components/slider/package.json b/packages/components/slider/package.json
@@ -49,9 +49,9 @@
     "@react-aria/utils": "^3.20.0",
     "@react-aria/visually-hidden": "^3.8.4",
     "@react-stately/slider": "^3.4.2"
-
   },
   "devDependencies": {
+    "@nextui-org/shared-icons": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0"
   },

diff --git a/packages/components/slider/src/index.ts b/packages/components/slider/src/index.ts
@@ -2,6 +2,7 @@ import Slider from "./slider";
 
 // export types
 export type {SliderProps} from "./slider";
+export type {SliderValue} from "./use-slider";
 
 // export hooks
 export {useSlider} from "./use-slider";

diff --git a/packages/components/slider/src/slider.tsx b/packages/components/slider/src/slider.tsx
@@ -3,22 +3,27 @@ import {forwardRef} from "@nextui-org/system";
 import Thumb from "./slider-thumb";
 import {UseSliderProps, useSlider} from "./use-slider";
 
-export interface SliderProps extends UseSliderProps {}
+export interface SliderProps extends Omit<UseSliderProps, "isVertical"> {}
 
 const Slider = forwardRef<"div", SliderProps>((props, ref) => {
   const {
     Component,
     state,
     label,
     steps,
+    startContent,
+    endContent,
     getStepProps,
     getBaseProps,
+    getTrackWrapperProps,
     getLabelWrapperProps,
     getLabelProps,
     getOutputProps,
     getTrackProps,
     getFillerProps,
     getThumbProps,
+    getStartContentProps,
+    getEndContentProps,
   } = useSlider({...props, ref});
 
   return (
@@ -29,13 +34,17 @@ const Slider = forwardRef<"div", SliderProps>((props, ref) => {
           <output {...getOutputProps()} />
         </div>
       )}
-      <div {...getTrackProps()}>
-        <div {...getFillerProps()} />
-        {Number.isFinite(steps) &&
-          Array.from({length: steps}, (_, index) => <div key={index} {...getStepProps(index)} />)}
-        {state.values.map((_, index) => (
-          <Thumb key={index} {...getThumbProps(index)} />
-        ))}
+      <div {...getTrackWrapperProps()}>
+        {startContent && <div {...getStartContentProps()}>{startContent}</div>}
+        <div {...getTrackProps()}>
+          <div {...getFillerProps()} />
+          {Number.isFinite(steps) &&
+            Array.from({length: steps}, (_, index) => <div key={index} {...getStepProps(index)} />)}
+          {state.values.map((_, index) => (
+            <Thumb key={index} {...getThumbProps(index)} />
+          ))}
+        </div>
+        {endContent && <div {...getEndContentProps()}>{endContent}</div>}
       </div>
     </Component>
   );

diff --git a/packages/components/slider/src/use-slider-thumb.ts b/packages/components/slider/src/use-slider-thumb.ts
@@ -42,6 +42,7 @@ export function useSliderThumb(props: UseSliderThumbProps) {
       trackRef,
       inputRef,
       name,
+      ...otherProps,
     },
     state,
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,6 +42,7 @@ export function useSliderThumb(props: UseSliderThumbProps) { @@
           trackRef,
           inputRef,
           name,
+          ...otherProps,
         },
         state,
       );
@@ Expand Down @@