From 3808b4fd1bbdeea2906d6574ce51cb6d1a8605b2 Mon Sep 17 00:00:00 2001 From: Marcos Kolodny Date: Thu, 12 Sep 2024 18:39:08 +0200 Subject: [PATCH] feat(Feedback, FixedFooterLayout, Dialog, Accordion, Touchable, Header, IconButton, NavigationBar, OverscrollColor): remove deprecated props (#1205) --- playroom/snippets.tsx | 2 +- .../__ssr_pages__/header.tsx | 12 +- ...cess-feedback-screen-with-navbar-story.tsx | 2 +- src/__stories__/fixed-footer-layout-story.tsx | 3 +- .../form-automatic-state-management-story.tsx | 3 +- src/__stories__/menu-story.tsx | 3 +- src/__stories__/use-modal-state-story.tsx | 3 +- src/accordion.tsx | 2 - src/button-fixed-footer-layout.tsx | 10 +- src/button-layout.css.ts | 12 -- src/button-layout.tsx | 52 ++----- src/card.tsx | 5 +- src/community/__stories__/blocks-story.tsx | 7 +- src/community/blocks.tsx | 49 +------ src/dialog-context.tsx | 38 ----- src/dialog.tsx | 4 - src/feedback.tsx | 12 +- src/header.tsx | 58 +------- src/icon-button.tsx | 134 +----------------- src/index.tsx | 9 +- src/navigation-bar.tsx | 41 ++---- src/overscroll-color-context.tsx | 34 ----- src/touchable.tsx | 1 - 23 files changed, 62 insertions(+), 434 deletions(-) diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx index 799e8d435c..f7fd27c3f9 100644 --- a/playroom/snippets.tsx +++ b/playroom/snippets.tsx @@ -220,7 +220,7 @@ const buttonSnippets: Array = [ code: ' {}}>Action', }, { - name: 'ButtonGroup (internal use)', + name: 'ButtonGroup', code: ` {}}>Action} diff --git a/src/__acceptance_tests__/__ssr_pages__/header.tsx b/src/__acceptance_tests__/__ssr_pages__/header.tsx index 123be82d20..752c06b6f5 100644 --- a/src/__acceptance_tests__/__ssr_pages__/header.tsx +++ b/src/__acceptance_tests__/__ssr_pages__/header.tsx @@ -6,20 +6,14 @@ import { MainSectionHeader, ButtonPrimary, Stack, + Placeholder, } from '../../..'; const HeaderTest = (): JSX.Element => ( Descargar factura} - subtitle="Y esto es un subtitulo" - /> - } + header={
} + extra={} /> = ({largeContent, input}) => { {() => ( <> ({ title, onPress: () => { diff --git a/src/__stories__/fixed-footer-layout-story.tsx b/src/__stories__/fixed-footer-layout-story.tsx index 47d29451a4..6b0c69b8fa 100644 --- a/src/__stories__/fixed-footer-layout-story.tsx +++ b/src/__stories__/fixed-footer-layout-story.tsx @@ -10,7 +10,7 @@ import { ResponsiveLayout, Box, Inline, - alert, + useDialog, } from '..'; import {useCheckbox} from './helpers'; @@ -100,6 +100,7 @@ MoreComplexFooter.storyName = 'Fixed footer layout'; MoreComplexFooter.parameters = {fullScreen: true}; export const DialogOverFixedFooter: StoryComponent = () => { + const {alert} = useDialog(); return ( alert({message: 'Message'})}>Open dialog} diff --git a/src/__stories__/form-automatic-state-management-story.tsx b/src/__stories__/form-automatic-state-management-story.tsx index 014acd7faf..c2d820e118 100644 --- a/src/__stories__/form-automatic-state-management-story.tsx +++ b/src/__stories__/form-automatic-state-management-story.tsx @@ -15,7 +15,7 @@ import { Switch, Checkbox, TextLink, - alert, + useDialog, RadioGroup, RadioButton, Text3, @@ -39,6 +39,7 @@ const fruitOptions = fruitEntries.map(([text, value]) => ({text, value})); const countryOptions = countriesList.map((text, i) => ({text, value: '' + i})); export const Default: StoryComponent = () => { + const {alert} = useDialog(); return (
= ({ icon, checkbox, }) => { + const {alert} = useDialog(); const [valuesState, setValuesState] = React.useState>([]); const setValues = (val: number) => { diff --git a/src/__stories__/use-modal-state-story.tsx b/src/__stories__/use-modal-state-story.tsx index 7b864ab77e..4f51763e1f 100644 --- a/src/__stories__/use-modal-state-story.tsx +++ b/src/__stories__/use-modal-state-story.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {useModalState, Stack, Text2, alert} from '..'; +import {useModalState, Stack, Text2, useDialog} from '..'; import {ButtonPrimary} from '../button'; export default { @@ -8,6 +8,7 @@ export default { export const UseModalState: StoryComponent = () => { const {isModalOpen} = useModalState(); + const {alert} = useDialog(); return (
diff --git a/src/accordion.tsx b/src/accordion.tsx index 39cad35a77..1a5b85f3bd 100644 --- a/src/accordion.tsx +++ b/src/accordion.tsx @@ -45,8 +45,6 @@ interface AccordionItemContentProps { dataAttributes?: DataAttributes; trackingEvent?: TrackingEvent | ReadonlyArray; role?: string; - /** @deprecated Use onChange Accordion's onChange callback instead */ - onToogle?: (value: boolean) => void; } const useAccordionState = ({ diff --git a/src/button-fixed-footer-layout.tsx b/src/button-fixed-footer-layout.tsx index 277ea7a674..011795da7a 100644 --- a/src/button-fixed-footer-layout.tsx +++ b/src/button-fixed-footer-layout.tsx @@ -1,8 +1,6 @@ -'use client'; import * as React from 'react'; import FixedFooterLayout from './fixed-footer-layout'; import ButtonLayout from './button-layout'; -import {useScreenSize} from './hooks'; import {InternalResponsiveLayout} from './responsive-layout'; import Box from './box'; @@ -12,8 +10,6 @@ import type {RendersNullableElement} from './utils/types'; type Props = { isFooterVisible?: boolean; button?: NullableButtonElement; - /** @deprecated */ - desktopButtonAlign?: 'left' | 'center'; secondaryButton?: NullableButtonElement; link?: RendersNullableElement; footerBgColor?: string; @@ -28,12 +24,10 @@ const ButtonFixedFooterLayout = ({ secondaryButton, link, children, - desktopButtonAlign, footerBgColor, containerBgColor, onChangeFooterHeight, }: Props): JSX.Element => { - const {isDesktopOrBigger} = useScreenSize(); const hasButton = !!button || !!secondaryButton; return ( diff --git a/src/button-layout.css.ts b/src/button-layout.css.ts index 3c2aff0e77..9532342065 100644 --- a/src/button-layout.css.ts +++ b/src/button-layout.css.ts @@ -5,18 +5,6 @@ import {buttonPaddingX, borderSize} from './button.css'; const buttonLayoutSpacing = 16; -export const margins = style({ - margin: '16px 0', - padding: '0 16px', - - '@media': { - [mq.tabletOrSmaller]: { - padding: 0, - margin: 16, - }, - }, -}); - export const container = style([ sprinkles({display: 'flex', alignItems: 'center'}), { diff --git a/src/button-layout.tsx b/src/button-layout.tsx index fb0056b049..76eda87bef 100644 --- a/src/button-layout.tsx +++ b/src/button-layout.tsx @@ -1,61 +1,41 @@ 'use client'; import * as React from 'react'; -import {ButtonPrimary, ButtonSecondary, ButtonDanger} from './button'; import classnames from 'classnames'; import {getPrefixedDataAttributes} from './utils/dom'; import * as styles from './button-layout.css'; +import type {ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink} from './button'; import type {DataAttributes, RendersNullableElement} from './utils/types'; -import type {NullableButtonElement, ButtonLink} from './button'; - -type MaybeButtonElement = NullableButtonElement | void | false; type ButtonLayoutProps = { - /** @deprecated Use primaryButton and secondaryButton props */ - children?: MaybeButtonElement | [MaybeButtonElement, MaybeButtonElement]; align?: 'center' | 'left' | 'right' | 'full-width'; primaryButton?: RendersNullableElement; secondaryButton?: RendersNullableElement; link?: RendersNullableElement; - /** @deprecated Use a wrapping Box if you need paddings */ - withMargins?: boolean; dataAttributes?: DataAttributes; }; -const buttonsRange = [ButtonPrimary, ButtonDanger, ButtonSecondary]; - const ButtonLayout = ({ - children, primaryButton, secondaryButton, align = 'full-width', link, - withMargins = false, dataAttributes, }: ButtonLayoutProps): JSX.Element => { - const sortedButtons = React.Children.toArray(children as any).sort((b1: any, b2: any) => { - const range1 = buttonsRange.indexOf(b1.type); - const range2 = buttonsRange.indexOf(b2.type); - return align === 'right' ? range2 - range1 : range1 - range2; - }); + const numberOfButtons = (primaryButton ? 1 : 0) + (secondaryButton ? 1 : 0); - const numberOfButtons = children - ? sortedButtons.length - : (primaryButton ? 1 : 0) + (secondaryButton ? 1 : 0); - - const buttons = children ? ( - sortedButtons - ) : align === 'right' ? ( - <> - {secondaryButton} - {primaryButton} - - ) : ( - <> - {primaryButton} - {secondaryButton} - - ); + const buttons = + align === 'right' ? ( + <> + {secondaryButton} + {primaryButton} + + ) : ( + <> + {primaryButton} + {secondaryButton} + + ); const linkContainer = link ? (
) : null; - const content = ( + return (
1, @@ -86,8 +66,6 @@ const ButtonLayout = ({ )}
); - - return withMargins ?
{content}
: content; }; export default ButtonLayout; diff --git a/src/card.tsx b/src/card.tsx index bd8163341d..dd1c7d9c2a 100644 --- a/src/card.tsx +++ b/src/card.tsx @@ -1461,8 +1461,6 @@ export const DisplayDataCard = React.forwardRef( width, height, aspectRatio = '7:10', - ariaLabel: deprecatedAriaLabel, - ['aria-label']: ariaLabelProp = deprecatedAriaLabel, + 'aria-label': ariaLabelProp, actions, onClose, closeButtonLabel, diff --git a/src/community/__stories__/blocks-story.tsx b/src/community/__stories__/blocks-story.tsx index 46ccc14eab..0ae1c33535 100644 --- a/src/community/__stories__/blocks-story.tsx +++ b/src/community/__stories__/blocks-story.tsx @@ -9,6 +9,7 @@ import { ValueBlock, } from '../blocks'; import imgExample from '../../__stories__/images/avatar.jpg'; +import {vars} from '../../skins/skin-contract.css'; import type {TagType} from '../..'; @@ -146,8 +147,10 @@ export const BlockHighlightedValue: StoryComponent = headline={{headline}} title={title} description={description} - mainHeading={{value, text}} - secondaryValue={secondaryValue} + headings={[ + {value, text}, + {value: secondaryValue, valueColor: vars.colors.textSecondary}, + ]} /> diff --git a/src/community/blocks.tsx b/src/community/blocks.tsx index 72a5c47de2..5b56f57e90 100644 --- a/src/community/blocks.tsx +++ b/src/community/blocks.tsx @@ -143,49 +143,26 @@ interface Heading { interface HighlightedValueBlockProps { headline?: RendersNullableElement; - headings?: ReadonlyArray; - - /** @deprecated Use headings instead */ - mainHeading?: { - value: string; - text: string; - }; - - /** @deprecated Use headings instead */ - secondHeading?: { - value: string; - text: string; - }; - - /** @deprecated Use headings instead */ - secondaryValue?: string; - title?: string; description?: ReadonlyArray | string; - /** @deprecated Use headings instead */ - valueColor?: string; 'aria-label'?: string; } export const HighlightedValueBlock = ({ headline, headings, - mainHeading, - secondHeading, - secondaryValue, title, description, - valueColor = vars.colors.textPrimary, 'aria-label': ariaLabel, }: HighlightedValueBlockProps): JSX.Element => { return (
{headline && {headline}} - - {headings && - headings.map((heading, index) => ( + {headings && ( + + {headings.map((heading, index) => ( {heading.value} @@ -195,24 +172,8 @@ export const HighlightedValueBlock = ({ ))} - {mainHeading && ( - - {mainHeading.value} - - {mainHeading.text} - - - )} - {secondHeading && ( - - {secondHeading.value} - - {secondHeading.text} - - - )} - {secondaryValue && {secondaryValue}} - + + )} {title || description ? ( diff --git a/src/dialog-context.tsx b/src/dialog-context.tsx index 7b34b1e159..b7952694b1 100644 --- a/src/dialog-context.tsx +++ b/src/dialog-context.tsx @@ -47,43 +47,6 @@ export const useDialog = (): { ); }; -const missingDialogFunctions: ReturnType = { - alert: throwMissingDialogRootError, - confirm: throwMissingDialogRootError, - dialog: throwMissingDialogRootError, -}; - -let currentDialogFunctions = missingDialogFunctions; - -/** - * @deprecated Created for backwards compatibility - */ -const ExposeDialogFunctions = (): JSX.Element => { - const dialogFunctions = useDialog(); - React.useEffect(() => { - currentDialogFunctions = dialogFunctions; - return () => { - currentDialogFunctions = missingDialogFunctions; - }; - }, [dialogFunctions]); - return <>; -}; - -/** - * @deprecated Use useDialog to get this function - */ -export const alert = (params: AlertProps): void => currentDialogFunctions.alert(params); - -/** - * @deprecated Use useDialog to get this function - */ -export const confirm = (params: ConfirmProps): void => currentDialogFunctions.confirm(params); - -/** - * @deprecated Use useDialog to get this function - */ -export const dialog = (params: ExtendedDialogProps): void => currentDialogFunctions.dialog(params); - type DialogRootProps = {children?: React.ReactNode}; export const DialogRoot = ({children}: DialogRootProps): JSX.Element => { @@ -98,7 +61,6 @@ export const DialogRoot = ({children}: DialogRootProps): JSX.Element => { return ( - {children} {dialog && ( diff --git a/src/dialog.tsx b/src/dialog.tsx index 0ba25da430..f4c303bfef 100644 --- a/src/dialog.tsx +++ b/src/dialog.tsx @@ -33,10 +33,6 @@ interface BaseDialogProps { onAccept?: () => void; destructive?: boolean; closeButtonLabel?: string; - /** @deprecated this does nothing */ - forceWeb?: boolean; - /** @deprecated this does nothing */ - showCancel?: boolean; } export type AlertProps = BaseDialogProps; diff --git a/src/feedback.tsx b/src/feedback.tsx index 0e8cdfe2ab..db4a0e19fa 100644 --- a/src/feedback.tsx +++ b/src/feedback.tsx @@ -173,10 +173,6 @@ type FeedbackButtonsProps = ButtonGroupProps; interface FeedbackProps extends FeedbackButtonsProps { title: string; description?: string | ReadonlyArray; - /** - * @deprecated This field is deprecated, please use extra instead. - */ - children?: React.ReactNode; extra?: React.ReactNode; unstable_inlineInDesktop?: boolean; dataAttributes?: DataAttributes; @@ -197,7 +193,6 @@ interface FeedbackScreenProps extends AssetFeedbackProps { export const FeedbackScreen = ({ title, description, - children, extra, primaryButton, secondaryButton, @@ -218,7 +213,7 @@ export const FeedbackScreen = ({ const hasButtons = checkHasButtons({primaryButton, secondaryButton, link}); const feedbackBody = renderFeedbackBody( - {icon, title, description, extra: extra ?? children}, + {icon, title, description, extra}, animateText && areAnimationsSupported(platformOverrides) ); @@ -311,7 +306,6 @@ interface ErrorFeedbackScreenProps extends Omit { } export const ErrorFeedbackScreen = ({ - children, errorReference, dataAttributes, ...otherProps @@ -325,7 +319,6 @@ export const ErrorFeedbackScreen = ({ dataAttributes={{'component-name': 'ErrorFeedbackScreen', ...dataAttributes}} extra={ - {children} {errorReference && ( {errorReference} @@ -358,7 +351,6 @@ export const InfoFeedbackScreen = ({ export const SuccessFeedback = ({ title, description, - children, extra, primaryButton, secondaryButton, @@ -379,7 +371,7 @@ export const SuccessFeedback = ({ ); const feedbackBody = renderFeedbackBody( - {icon, title, description, extra: extra ?? children}, + {icon, title, description, extra}, areAnimationsSupported(platformOverrides) ); const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, { diff --git a/src/header.tsx b/src/header.tsx index 63d94a1acb..bd1d97ef12 100644 --- a/src/header.tsx +++ b/src/header.tsx @@ -2,12 +2,10 @@ import * as React from 'react'; import Box from './box'; import Stack from './stack'; -import {useIsInverseVariant} from './theme-variant-context'; import ResponsiveLayout from './responsive-layout'; import GridLayout from './grid-layout'; import {useSetOverscrollColor} from './overscroll-color-context'; -import {Text8, Text7, Text6, Text3, Text2} from './text'; -import ButtonGroup from './button-group'; +import {Text7, Text6, Text3, Text2} from './text'; import {vars} from './skins/skin-contract.css'; import * as styles from './header.css'; import {getPrefixedDataAttributes} from './utils/dom'; @@ -35,30 +33,6 @@ type HeaderProps = { description?: string; small?: boolean; dataAttributes?: DataAttributes; - /** - * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead. - */ - preamount?: RichText; - /** - * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead. - */ - amount?: string; - /** - * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead. - */ - button?: RendersNullableElement; - /** - * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead. - */ - secondaryButton?: RendersNullableElement; - /** - * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead. - */ - subtitle?: RichText; - /** - * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead. - */ - isErrorAmount?: boolean; }; export const Header = ({ @@ -70,15 +44,7 @@ export const Header = ({ description, dataAttributes, small = false, - preamount, - amount, - button, - subtitle, - isErrorAmount, - secondaryButton, }: HeaderProps): JSX.Element => { - const isInverse = useIsInverseVariant(); - const renderRichText = (richText: RichText, baseProps: Omit) => { if (typeof richText === 'string') { return ( @@ -122,28 +88,6 @@ export const Header = ({ )} - {(preamount || amount || button || subtitle) && ( - - {(preamount || amount) && ( - - {preamount && renderRichText(preamount, {color: vars.colors.textPrimary})} - - {amount} - - - )} - {(button || secondaryButton) && ( - - )} - {subtitle && renderRichText(subtitle, {})} - - )} ); }; diff --git a/src/icon-button.tsx b/src/icon-button.tsx index c978bfb84b..4d3bfbf16c 100644 --- a/src/icon-button.tsx +++ b/src/icon-button.tsx @@ -10,109 +10,6 @@ import type {TouchableElement, TouchableComponentProps} from './touchable'; import type {ExclusifyUnion} from './utils/utility-types'; import type {DataAttributes, IconProps, TrackingEvent} from './utils/types'; -interface HrefProps { - href: string; - newTab?: boolean; -} - -interface ToProps { - to: string; - newTab?: boolean; - fullPageOnWebView?: boolean; - replace?: boolean; -} - -interface OnPressProps { - onPress: (event: React.MouseEvent) => void | undefined | Promise; -} - -interface MaybeProps { - onPress?: undefined; - href?: undefined; - to?: undefined; -} - -interface BaseDeprecatedProps { - /** @deprecated */ - children?: React.ReactNode; - /** @deprecated */ - className?: string; - disabled?: boolean; - /** @deprecated */ - icon?: string; - /** @deprecated */ - iconSize?: number; - /** @deprecated */ - backgroundColor?: string; - /** @deprecated */ - size?: number | string; - /** @deprecated */ - style?: React.CSSProperties; - /** @deprecated */ - 'aria-live'?: 'polite' | 'off' | 'assertive'; - - trackingEvent?: TrackingEvent | ReadonlyArray; - /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */ - dataAttributes?: DataAttributes; - newTab?: boolean; - 'aria-label'?: string; -} - -type DeprecatedProps = BaseDeprecatedProps & ExclusifyUnion; - -const ICON_SIZE_1 = 24; - -const getButtonStyle = ( - backgroundUrl: string | undefined, - size: string | number, - backgroundColor: string, - iconSize: number | undefined, - disabled: boolean | undefined -): React.CSSProperties => { - const normalizedIconSize = iconSize ? `${iconSize}px ${iconSize}px` : '100% 100%'; - return { - padding: 0, - backgroundColor, - backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : 'initial', - backgroundSize: normalizedIconSize, - cursor: disabled ? 'default' : 'pointer', - height: size, - width: size, - verticalAlign: 'middle', - textAlign: 'center', - }; -}; - -/** - * @deprecated these usages of IconButton will be removed - * - * IconButton with image url: - * - * - * - * IconButton with SVG component as icon. Child ignored if `icon` prop is set. Only one child is accepted! - * - * - * - * - * - */ -export const RawDeprecatedIconButton = React.forwardRef((props, ref) => { - const {icon, children, ...rest} = props; - - return ( - - {!icon && React.Children.only(children)} - - ); -}); - export type IconButtonType = 'neutral' | 'brand' | 'danger'; export type IconButtonBackgroundType = 'transparent' | 'solid' | 'soft'; @@ -260,33 +157,12 @@ export const RawIconButton = React.forwardRef< export const InternalIconButton = React.forwardRef< TouchableElement, - ExclusifyUnion ->((props, ref) => { - /** - * The new IconButton requires Icon prop, so if it it's used we render the new version. - * Otherwise, we render the deprecated one (to avoid breaking changes). - */ - if (props.Icon) { - return ; - } + ExclusifyUnion +>((props, ref) => ); - const {icon, backgroundColor = 'transparent', iconSize, size = ICON_SIZE_1} = props; - return ( - - ); -}); - -export const IconButton = React.forwardRef< - TouchableElement, - ExclusifyUnion ->((props, ref) => { - return ; -}); +export const IconButton = React.forwardRef>( + (props, ref) => +); type ToggleStateProps = { Icon: (props: IconProps) => JSX.Element; diff --git a/src/index.tsx b/src/index.tsx index 56ae090ba9..3aa4cee4fe 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,6 +10,7 @@ export {default as FadeIn} from './fade-in'; export {AccordionItem, BoxedAccordionItem, Accordion, BoxedAccordion} from './accordion'; export {ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink, ButtonLinkDanger} from './button'; +export {default as ButtonGroup} from './button-group'; export {default as ButtonLayout} from './button-layout'; export {default as Counter} from './counter'; export {default as FixedFooterLayout} from './fixed-footer-layout'; @@ -21,11 +22,7 @@ export {default as LoadingBar} from './loading-bar'; export {default as FixedToTop, TopDistanceContext} from './fixed-to-top'; export {createNestableContext} from './nestable-context'; export type {NestableContext} from './nestable-context'; -export { - default as OverscrollColor, - useSetOverscrollColor, - OverscrollColorProvider, -} from './overscroll-color-context'; +export {useSetOverscrollColor, OverscrollColorProvider} from './overscroll-color-context'; export { FeedbackScreen, ErrorFeedbackScreen, @@ -37,7 +34,7 @@ export {LoadingScreen, BrandLoadingScreen} from './loading-screen'; export {IconButton, ToggleIconButton} from './icon-button'; export {default as Popover} from './popover'; export {default as FocusTrap} from './focus-trap'; -export {confirm, alert, dialog, useDialog} from './dialog-context'; +export {useDialog} from './dialog-context'; export {default as Badge} from './badge'; export {default as TextLink} from './text-link'; export {default as Overlay} from './overlay'; diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx index ad0e63e6ad..9eb83453d3 100644 --- a/src/navigation-bar.tsx +++ b/src/navigation-bar.tsx @@ -50,8 +50,6 @@ type HeaderProps = { children: React.ReactNode; topFixed?: boolean; variant?: Variant; - /** @deprecated Use variant instead */ - isInverse?: boolean; withBorder?: boolean; isMenuOpen?: boolean; dataAttributes?: DataAttributes; @@ -63,16 +61,13 @@ const Header = ({ topFixed, withBorder, isMenuOpen, - variant, - isInverse, + variant = 'default', dataAttributes, }: HeaderProps) => { const {isDarkMode} = useTheme(); - const headerVariant = variant ?? (isInverse ? 'inverse' : 'default'); - const getBorderClass = () => { - const inverse = headerVariant === 'inverse' && !isDarkMode; + const inverse = variant === 'inverse' && !isDarkMode; if (inverse || !withBorder) return styles.navbarBorderColorVariants.noBorder; if (isMenuOpen) return styles.navbarBorderColorVariants.menuOpen; @@ -89,7 +84,7 @@ const Header = ({
@@ -128,8 +123,6 @@ type MainNavigationBarPropsBase = { right?: React.ReactElement; logo?: React.ReactElement; variant?: Variant; - /** @deprecated Use variant instead */ - isInverse?: boolean; children?: undefined; topFixed?: boolean; withBorder?: boolean; @@ -145,8 +138,7 @@ export const MainNavigationBar = ({ sections = [], selectedIndex, right, - variant, - isInverse = false, + variant = 'default', topFixed = true, withBorder = true, burgerMenuExtra, @@ -174,12 +166,10 @@ export const MainNavigationBar = ({ styles.section, { [styles.selectedSectionVariantes[ - variant === 'inverse' || isInverse ? 'inverse' : 'default' + variant === 'inverse' ? 'inverse' : 'default' ]]: idx === selectedIndex, }, - styles.textWrapperVariants[ - variant === 'inverse' || isInverse ? 'inverse' : 'default' - ] + styles.textWrapperVariants[variant === 'inverse' ? 'inverse' : 'default'] )} > @@ -209,13 +199,12 @@ export const MainNavigationBar = ({ const showBurger = sections.length > 1; const mainNavBar = ( - +
@@ -325,8 +314,6 @@ export const MainNavigationBar = ({ }; interface NavigationBarCommonProps { - /** @deprecated Use variant instead */ - isInverse?: boolean; variant?: Variant; onBack?: () => void; title?: string; @@ -353,8 +340,7 @@ export const NavigationBar = ({ title, titleAs, right, - variant, - isInverse = false, + variant = 'default', topFixed = true, paddingX = 0, withBorder = true, @@ -379,12 +365,11 @@ export const NavigationBar = ({ ); return ( - +
{topFixed ? ( @@ -409,8 +394,6 @@ export const NavigationBar = ({ type FunnelNavigationBarProps = { variant?: Variant; - /** @deprecated Use variant instead */ - isInverse?: boolean; logo?: React.ReactElement; right?: React.ReactElement; topFixed?: boolean; @@ -421,20 +404,18 @@ type FunnelNavigationBarProps = { export const FunnelNavigationBar = ({ logo, right, - variant, - isInverse = false, + variant = 'default', topFixed = true, withBorder = true, }: FunnelNavigationBarProps): JSX.Element => { logo = logo ?? ; return ( - +
diff --git a/src/overscroll-color-context.tsx b/src/overscroll-color-context.tsx index d2d9e7c65f..1a893ea574 100644 --- a/src/overscroll-color-context.tsx +++ b/src/overscroll-color-context.tsx @@ -1,13 +1,10 @@ 'use client'; import * as React from 'react'; -import {useThemeVariant} from './theme-variant-context'; import {useTheme} from './hooks'; import {createNestableContext} from './nestable-context'; import {getPlatform} from './utils/platform'; -import {vars} from './skins/skin-contract.css'; import {getCssVarValue, isCssVar} from './utils/dom'; -import type {Variant} from './theme-variant-context'; import type {Theme} from './theme'; type OverscrollColorConfig = {topColor?: string; bottomColor?: string}; @@ -139,37 +136,6 @@ export const OverscrollColorProvider = ({children}: ProviderProps): JSX.Element ); }; -const getColorFromVariant = (themeVariant: Variant) => { - switch (themeVariant) { - case 'default': - return vars.colors.background; - case 'alternative': - return vars.colors.backgroundAlternative; - case 'inverse': - return vars.colors.backgroundBrand; - default: - const exhaustiveCheck: never = themeVariant; - throw new Error(`Invalid variant: ${exhaustiveCheck}`); - } -}; - -const OverscrollColorComponent = () => { - const variant = useThemeVariant(); - useSetValue({ - topColor: getColorFromVariant(variant), - }); - - return null; -}; - -/** - * @deprecated use useSetOverscrollColor hook instead - */ -const OverscrollColor = (): JSX.Element => - shouldRender(useTheme().platformOverrides) ? : <>; - export const useSetOverscrollColor = (config: OverscrollColorConfig): void => { useSetValue(config); }; - -export default OverscrollColor; diff --git a/src/touchable.tsx b/src/touchable.tsx index 20bbec9ca2..2632e05899 100644 --- a/src/touchable.tsx +++ b/src/touchable.tsx @@ -54,7 +54,6 @@ type HrefProps = { type ToProps = { to: string | Location; newTab?: boolean; - /** @deprecated set the newTab */ fullPageOnWebView?: boolean; replace?: boolean; onNavigate?: () => void | Promise;