From d7405eb4387f5d9077c49a78884e4635d9b83943 Mon Sep 17 00:00:00 2001 From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> Date: Sun, 14 Jul 2024 23:21:53 +0900 Subject: [PATCH 1/3] feat: add reducedMotion setting to Provider --- .changeset/pretty-parrots-guess.md | 5 +++ .../docs/api-references/nextui-provider.mdx | 21 +++++++---- .../calendar/stories/calendar.stories.tsx | 36 +++++++++++++++++++ packages/core/system/src/provider.tsx | 15 ++++++-- 4 files changed, 68 insertions(+), 9 deletions(-) create mode 100644 .changeset/pretty-parrots-guess.md diff --git a/.changeset/pretty-parrots-guess.md b/.changeset/pretty-parrots-guess.md new file mode 100644 index 0000000000..cb8c424d99 --- /dev/null +++ b/.changeset/pretty-parrots-guess.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/system": minor +--- + +Add reducedMotion setting to Provider (#3395) diff --git a/apps/docs/content/docs/api-references/nextui-provider.mdx b/apps/docs/content/docs/api-references/nextui-provider.mdx index dcc6abb52f..530077ac4a 100644 --- a/apps/docs/content/docs/api-references/nextui-provider.mdx +++ b/apps/docs/content/docs/api-references/nextui-provider.mdx @@ -116,12 +116,12 @@ interface AppProviderProps { import {GregorianCalendar} from '@internationalized/date'; function createCalendar(identifier) { - switch (identifier) { - case 'gregory': - return new GregorianCalendar(); - default: - throw new Error(`Unsupported calendar ${identifier}`); - } + switch (identifier) { + case 'gregory': + return new GregorianCalendar(); + default: + throw new Error(`Unsupported calendar ${identifier}`); + } } ``` @@ -167,6 +167,15 @@ or mark the field as required or invalid via ARIA. - **Type**: `native | aria` - **Default**: `aria` +`reducedMotion` + +- **Description**: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. +The available options are: + - `"user"`: Adapts to the user's device settings for reduced motion. + - `"always"`: Disables all animations. + - `"never"`: Keeps all animations active. +- **Type**: `"user" | "always" | "never"` +- **Default**: `"never"` --- ## Types diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx index 9cd707b47e..2d89d644a2 100644 --- a/packages/components/calendar/stories/calendar.stories.tsx +++ b/packages/components/calendar/stories/calendar.stories.tsx @@ -13,6 +13,7 @@ import {I18nProvider, useLocale} from "@react-aria/i18n"; import {Button, ButtonGroup} from "@nextui-org/button"; import {Radio, RadioGroup} from "@nextui-org/radio"; import {cn} from "@nextui-org/theme"; +import {NextUIProvider, NextUIProviderProps} from "@nextui-org/system"; import {Calendar, CalendarProps, DateValue} from "../src"; @@ -38,6 +39,11 @@ export default { }, options: ["narrow", "short", "long"], }, + disableAnimation: { + control: { + type: "boolean", + }, + }, }, } as Meta; @@ -257,6 +263,30 @@ const CalendarWidthTemplate = (args: CalendarProps) => { ); }; +const ReducedMotionTemplate = (args: CalendarProps) => { + const [reducedMotion, setReducedMotion] = + React.useState("never"); + + return ( + + { + setReducedMotion(value as NextUIProviderProps["reducedMotion"]); + }} + > + user + always + never + + + + ); +}; + export const Default = { render: Template, args: { @@ -375,3 +405,9 @@ export const CalendarWidth = { ...defaultProps, }, }; +export const ReducedMotion = { + render: ReducedMotionTemplate, + args: { + ...defaultProps, + }, +}; diff --git a/packages/core/system/src/provider.tsx b/packages/core/system/src/provider.tsx index 4d92569476..f3d72ddf10 100644 --- a/packages/core/system/src/provider.tsx +++ b/packages/core/system/src/provider.tsx @@ -5,7 +5,7 @@ import {I18nProvider, I18nProviderProps} from "@react-aria/i18n"; import {RouterProvider} from "@react-aria/utils"; import {OverlayProvider} from "@react-aria/overlays"; import {useMemo} from "react"; -import {MotionGlobalConfig} from "framer-motion"; +import {MotionConfig, MotionGlobalConfig} from "framer-motion"; import {ProviderContext} from "./provider-context"; @@ -21,6 +21,12 @@ export interface NextUIProviderProps * animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`. */ skipFramerMotionAnimations?: boolean; + /** + * Defines a new default transition for the entire tree. + * @default "never" + * See: https://www.framer.com/motion/motion-config/#props + */ + reducedMotion?: "user" | "always" | "never"; /** * The locale to apply to the children. * @default "en-US" @@ -36,9 +42,10 @@ export interface NextUIProviderProps export const NextUIProvider: React.FC = ({ children, navigate, - disableAnimation = false, + disableAnimation, disableRipple = false, skipFramerMotionAnimations = disableAnimation, + reducedMotion = "never", validationBehavior = "aria", locale = "en-US", // if minDate / maxDate are not specified in `defaultDates` @@ -77,7 +84,9 @@ export const NextUIProvider: React.FC = ({ return ( - {contents} + + {contents} + ); From e8058abb979493c98605081461fc1c3049575e39 Mon Sep 17 00:00:00 2001 From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> Date: Mon, 15 Jul 2024 10:44:26 +0900 Subject: [PATCH 2/3] chore: refactor reducedMotion story --- .../calendar/stories/calendar.stories.tsx | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx index 2d89d644a2..cf8f410c76 100644 --- a/packages/components/calendar/stories/calendar.stories.tsx +++ b/packages/components/calendar/stories/calendar.stories.tsx @@ -13,7 +13,7 @@ import {I18nProvider, useLocale} from "@react-aria/i18n"; import {Button, ButtonGroup} from "@nextui-org/button"; import {Radio, RadioGroup} from "@nextui-org/radio"; import {cn} from "@nextui-org/theme"; -import {NextUIProvider, NextUIProviderProps} from "@nextui-org/system"; +import {NextUIProvider} from "@nextui-org/system"; import {Calendar, CalendarProps, DateValue} from "../src"; @@ -247,7 +247,6 @@ const CalendarWidthTemplate = (args: CalendarProps) => { return (
-

calendarWidth: 300

calendarWidth: 300

@@ -264,26 +263,27 @@ const CalendarWidthTemplate = (args: CalendarProps) => { }; const ReducedMotionTemplate = (args: CalendarProps) => { - const [reducedMotion, setReducedMotion] = - React.useState("never"); - return ( - - { - setReducedMotion(value as NextUIProviderProps["reducedMotion"]); - }} - > - user - always - never - - - +
+
+

reducedMotion: never

+ + + +
+
+

reducedMotion: always

+ + + +
+
+

reducedMotion: user

+ + + +
+
); }; @@ -405,6 +405,7 @@ export const CalendarWidth = { ...defaultProps, }, }; + export const ReducedMotion = { render: ReducedMotionTemplate, args: { From a2287a717e75c2e31157e0d5b67c14840e6ec3aa Mon Sep 17 00:00:00 2001 From: Junior Garcia Date: Sun, 17 Nov 2024 15:15:11 -0300 Subject: [PATCH 3/3] Update .changeset/pretty-parrots-guess.md --- .changeset/pretty-parrots-guess.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/pretty-parrots-guess.md b/.changeset/pretty-parrots-guess.md index cb8c424d99..444998fd5b 100644 --- a/.changeset/pretty-parrots-guess.md +++ b/.changeset/pretty-parrots-guess.md @@ -1,5 +1,5 @@ --- -"@nextui-org/system": minor +"@nextui-org/system": patch --- Add reducedMotion setting to Provider (#3395)