diff --git a/example/storybook/src/components/Feedback/Toast/Toast.stories.tsx b/example/storybook/src/components/Feedback/Toast/Toast.stories.tsx index a067d761e6..74e6bed770 100644 --- a/example/storybook/src/components/Feedback/Toast/Toast.stories.tsx +++ b/example/storybook/src/components/Feedback/Toast/Toast.stories.tsx @@ -19,7 +19,7 @@ const ToastMeta: ComponentMeta = { }, action: { control: 'select', - options: ['error', 'warning', 'success', 'info', 'muted'], + options: ['error', 'warning', 'success', 'info', 'attention'], }, variant: { control: 'select', diff --git a/example/storybook/src/components/Feedback/Toast/Toast.tsx b/example/storybook/src/components/Feedback/Toast/Toast.tsx index 382b9dc990..6e8523308b 100644 --- a/example/storybook/src/components/Feedback/Toast/Toast.tsx +++ b/example/storybook/src/components/Feedback/Toast/Toast.tsx @@ -8,6 +8,7 @@ import { VStack, CheckIcon, Pressable, + Center, } from '../../../ui-components'; import { MessageCircle, AlertTriangleIcon } from 'lucide-react-native'; @@ -19,10 +20,6 @@ const ToastStory = ({ placement = 'top', ...props }: any) => { toast.show({ placement: placement, duration: null, - accessibilityAnnouncement: 'hello', - accessibilityLiveRegion: 'polite', - avoidKeyboard: false, - render: ({ id }) => { return ( <> @@ -61,4 +58,5 @@ export { AlertTriangleIcon, Button, Pressable, + Center, }; diff --git a/example/storybook/src/components/Feedback/Toast/index.stories.mdx b/example/storybook/src/components/Feedback/Toast/index.stories.mdx index 4452f19636..86df65dbf5 100644 --- a/example/storybook/src/components/Feedback/Toast/index.stories.mdx +++ b/example/storybook/src/components/Feedback/Toast/index.stories.mdx @@ -15,8 +15,14 @@ import { Meta } from '@storybook/addon-docs'; import { Toast, useToast, Icon, CloseIcon, VStack } from './Toast'; -import { Button, Pressable } from './Toast'; -import { CheckIcon, MessageCircle, AlertTriangleIcon } from './Toast'; +import { + CheckIcon, + MessageCircle, + AlertTriangleIcon, + Button, + Pressable, + Center, +} from './Toast'; import { transformedCode } from '../../../utils'; import { AppProvider, @@ -44,16 +50,20 @@ Following is the default implementation of the **Toast** component without any a code: ` function Example() { const toast = useToast(); - const placement ="top"; return ( + ) + }) + } + + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + useToast, + Text, + Button, + VStack, + Center, + }, + argsType: {}, + }} + /> + + +#### Toast with variants + +A versatile Toast component with multiple variants, offering different styles and visual cues to effectively convey various types of notifications and feedback to users. + + + { + toast.show({ + placement:"top", + render: ({ id }) => { + return ( + + + Attention! + + Please review and accept our updated terms and conditions before continuing to use the application. + + + + ); + }, + }); + }} + > + Press Me + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + View, + Wrapper, + Toast, + useToast, + Text, + Button, + VStack, + }, + argsType: { + variant: { + control: 'select', + options: ['accent', 'solid', 'outline'], + default: 'solid', + }, + }, + }} + /> + + #### Toast with placement A Toast component with different placement options allows for the flexible positioning of toast notifications, enabling them to appear in various locations within a user interface, enhancing user visibility and providing a customizable approach to displaying temporary messages or alerts. @@ -338,7 +475,7 @@ A Toast component with different placement options allows for the flexible posit render: ({ id }) => { return ( - {placements[placement]} + {placements[placement]} ); }, @@ -397,7 +534,7 @@ A dismissable Toast component offers users the ability to dismiss or close the t placement: 'top', render: ({ id }) => { return ( - + Download Complete diff --git a/example/storybook/src/components/Forms/Input/index.stories.mdx b/example/storybook/src/components/Forms/Input/index.stories.mdx index d18e8f9f05..b9f0901098 100644 --- a/example/storybook/src/components/Forms/Input/index.stories.mdx +++ b/example/storybook/src/components/Forms/Input/index.stories.mdx @@ -507,3 +507,13 @@ export default () => ( ); ``` + + diff --git a/example/storybook/src/ui-components/Toast/styled-components/Root.tsx b/example/storybook/src/ui-components/Toast/styled-components/Root.tsx index f62151ba46..1e98952d82 100644 --- a/example/storybook/src/ui-components/Toast/styled-components/Root.tsx +++ b/example/storybook/src/ui-components/Toast/styled-components/Root.tsx @@ -67,7 +67,7 @@ export default styled( }, }, }, - muted: { + attention: { bg: '$backgroundLightMuted', borderColor: '$secondary300', _icon: { @@ -107,7 +107,7 @@ export default styled( defaultProps: { hardShadow: '5', variant: 'solid', - action: 'muted', + action: 'attention', }, }, { descendantStyle: ['_icon', '_text'] } diff --git a/packages/toast/CHANGELOG.md b/packages/toast/CHANGELOG.md index dda470c9f5..ea529b501d 100644 --- a/packages/toast/CHANGELOG.md +++ b/packages/toast/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-ui/toast +## 0.1.12 + +### Patch Changes + +- Toast accessibility and style fixes + ## 0.1.11 ### Patch Changes diff --git a/packages/toast/package.json b/packages/toast/package.json index 73784fc113..c7ef3a3c67 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -15,7 +15,7 @@ "ios", "nextjs" ], - "version": "0.1.11", + "version": "0.1.12", "main": "lib/commonjs/index", "module": "lib/module/index", "types": "lib/typescript/index.d.ts", diff --git a/packages/toast/src/Toast.tsx b/packages/toast/src/Toast.tsx index 3d36dd15ed..be3a2b5952 100644 --- a/packages/toast/src/Toast.tsx +++ b/packages/toast/src/Toast.tsx @@ -1,5 +1,4 @@ import React, { useState, createContext, useMemo } from 'react'; -import { AccessibilityInfo, Platform } from 'react-native'; import { ToastList } from './ToastList'; import type { IToastInfo, IToast, IToastProps, IToastContext } from './types'; @@ -82,7 +81,6 @@ export const ToastProvider = ({ children }: { children: any }) => { render, id = toastIndex.current++, duration = 5000, - accessibilityAnnouncement, } = props; let positionToastArray = toastInfo[placement]; @@ -104,10 +102,6 @@ export const ToastProvider = ({ children }: { children: any }) => { hideToast(id); }, duration); } - // iOS doesn't support accessibilityLiveRegion - if (accessibilityAnnouncement && Platform.OS === 'ios') { - AccessibilityInfo.announceForAccessibility(accessibilityAnnouncement); - } } return id; }, diff --git a/packages/toast/src/ToastTitle.tsx b/packages/toast/src/ToastTitle.tsx index d497542759..c7551bedba 100644 --- a/packages/toast/src/ToastTitle.tsx +++ b/packages/toast/src/ToastTitle.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from 'react'; - +import { AccessibilityInfo } from 'react-native'; export function ToastTitle( StyledToastTitle: React.ComponentType ) { @@ -8,8 +8,19 @@ export function ToastTitle( { children, ...props }: StyledToastTitleProps & { children?: any }, ref?: any ) => { + React.useEffect(() => { + // Issue from react-native side + // Hack for now, will fix this later + AccessibilityInfo.announceForAccessibility(children); + }); return ( - + {children} ); diff --git a/packages/toast/src/types.ts b/packages/toast/src/types.ts index c40efab4d0..bdd4f0737a 100644 --- a/packages/toast/src/types.ts +++ b/packages/toast/src/types.ts @@ -20,23 +20,15 @@ export interface InterfaceToastProps { */ placement?: | 'top' - | 'top-right' - | 'top-left' + | 'top right' + | 'top left' | 'bottom' - | 'bottom-left' - | 'bottom-right'; + | 'bottom left' + | 'bottom right'; /** * Render a component toast component. Any component passed will receive 2 props: `id` and `onClose`. */ render?: (props: any) => ReactNode; - /** - * The text to be announced by a screen reader when the Toast opens. - */ - accessibilityAnnouncement?: string; - /** - * Determines the [accessibility announcement tone](https://reactnative.dev/docs/accessibility#accessibilityliveregion-android). - */ - accessibilityLiveRegion?: 'none' | 'polite' | 'assertive'; /** * If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height. * @default false