From 2c6ee6bba03fdcf7bf8970fd3be8a70962787ff1 Mon Sep 17 00:00:00 2001 From: Carlos Date: Wed, 18 Sep 2024 18:11:22 +0200 Subject: [PATCH] chore(Button): Revert Button upgrade commits (#259) --- .storybook/storybook.requires.js | 1 + src/elements/Button/Button.stories.tsx | 172 +---- src/elements/Button/Button.tsx | 631 ++++++++++++------ src/elements/Button/FollowButton.tsx | 15 +- src/elements/Button/LinkButton.tsx | 8 + src/elements/Button/colors.ts | 68 +- src/elements/Button/index.ts | 4 + src/elements/ButtonNew/Button.stories.tsx | 245 +++++++ .../{Button => ButtonNew}/Button.tests.tsx | 0 src/elements/ButtonNew/Button.tsx | 284 ++++++++ src/elements/ButtonNew/CTAButton.tsx | 3 + src/elements/ButtonNew/FollowButton.tsx | 45 ++ src/elements/ButtonNew/LinkButton.tsx | 8 + src/elements/ButtonNew/colors.ts | 83 +++ src/elements/{Button => ButtonNew}/index.tsx | 1 + 15 files changed, 1136 insertions(+), 432 deletions(-) create mode 100644 src/elements/Button/LinkButton.tsx create mode 100644 src/elements/Button/index.ts create mode 100644 src/elements/ButtonNew/Button.stories.tsx rename src/elements/{Button => ButtonNew}/Button.tests.tsx (100%) create mode 100644 src/elements/ButtonNew/Button.tsx create mode 100644 src/elements/ButtonNew/CTAButton.tsx create mode 100644 src/elements/ButtonNew/FollowButton.tsx create mode 100644 src/elements/ButtonNew/LinkButton.tsx create mode 100644 src/elements/ButtonNew/colors.ts rename src/elements/{Button => ButtonNew}/index.tsx (74%) diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js index b801256e..28d01e3f 100644 --- a/.storybook/storybook.requires.js +++ b/.storybook/storybook.requires.js @@ -33,6 +33,7 @@ const getStories = () => { require("../src/elements/Banner/Banner.stories.tsx"), require("../src/elements/Box/Box.stories.tsx"), require("../src/elements/Button/Button.stories.tsx"), + require("../src/elements/ButtonNew/Button.stories.tsx"), require("../src/elements/Checkbox/Checkbox.stories.tsx"), require("../src/elements/Collapse/Collapse.stories.tsx"), require("../src/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.tsx"), diff --git a/src/elements/Button/Button.stories.tsx b/src/elements/Button/Button.stories.tsx index 6fd56372..b142c21a 100644 --- a/src/elements/Button/Button.stories.tsx +++ b/src/elements/Button/Button.stories.tsx @@ -1,16 +1,10 @@ import { capitalize } from "lodash" import { useState } from "react" -import { Button as RNButton } from "react-native" import { Button, ButtonProps } from "./Button" -import { CTAButton } from "./CTAButton" -import { FollowButton } from "./FollowButton" import { DataList, List } from "../../storybook/helpers" -import { BellIcon, LinkIcon } from "../../svgs" import { Wrap } from "../../utils/Wrap" import { NoUndefined } from "../../utils/types" -import { Box } from "../Box" import { Flex } from "../Flex" -import { Spacer } from "../Spacer" import { LinkText } from "../Text" const sizes: Array> = ["small", "large"] @@ -43,6 +37,7 @@ export const Sizes = () => ( export const States = () => { const [variant, setVariant] = useState>("fillDark") + return ( @@ -61,9 +56,6 @@ export const States = () => { - ) } @@ -88,153 +80,21 @@ export const Variants = () => ( export const VariantsLoading = () => ( ( - - - - - + renderItem={({ item: variant }) => { + if (variant !== "outlineLight") { + return ( + + ) + } + return ( + + - - )} + ) + }} /> ) - -export const VariantsDisabled = () => ( - ( - - - - - - - - )} - /> -) - -export const TheFollowButton = () => { - const [follow, setFollow] = useState(true) - - return ( - - setFollow((v) => !v)} /> - setFollow((v) => !v)} /> - setFollow((v) => !v)} /> - setFollow((v) => !v)} /> - setFollow((v) => !v)} /> - setFollow((v) => !v)} /> - setFollow((v) => !v)} - /> - - ) -} - -export const TheCTAButton = () => ( - - console.log("pressed")}>cta button - -) - -export const Miscellaneous = () => ( - - - - - - - - - - - - - - - - - - - - - -) - -export const Playground = () => { - const [loading, setLoading] = useState(false) - const [disabled, setDisabled] = useState(true) - const [block, setBlock] = useState(false) - - return ( - <> - setLoading((v) => !v)} /> - setDisabled((v) => !v)} /> - setBlock((v) => !v)} /> - - - - - ) -} - -export const SpacingAround = () => ( - - - - -) diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx index f48ecd9a..74e015b6 100644 --- a/src/elements/Button/Button.tsx +++ b/src/elements/Button/Button.tsx @@ -1,43 +1,35 @@ -import { useEffect, useState } from "react" -import { PressableProps, GestureResponderEvent, Pressable } from "react-native" +import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3" // TODO: remove palette-tokens when this file (Button.tsx) is removed. +import { useState } from "react" +import { PressableProps, TextStyle, GestureResponderEvent, Pressable } from "react-native" import Haptic, { HapticFeedbackTypes } from "react-native-haptic-feedback" -import Animated, { - interpolateColor, - useAnimatedReaction, - useAnimatedStyle, - useDerivedValue, - useSharedValue, - withTiming, -} from "react-native-reanimated" -import { useColorsForVariantAndState } from "./colors" -import { MeasuredView, ViewMeasurements } from "../../elements/MeasuredView" +import { config } from "react-spring" +// @ts-ignore +import { animated, Spring } from "react-spring/renderprops-native" +import styled from "styled-components/native" +import { Color, SpacingUnit } from "../../types" +import { useColor } from "../../utils/hooks" import { Box, BoxProps } from "../Box" -import { Flex } from "../Flex" +import { Flex } from "../Flex/Flex" +import { MeasuredView, ViewMeasurements } from "../MeasuredView" import { Spacer } from "../Spacer" import { Spinner } from "../Spinner" -import { Text, useTextStyleForPalette } from "../Text" - -const ANIMATION_DURATION = 150 - -type ButtonSize = "small" | "large" -type ButtonVariant = - | "fillDark" - | "fillLight" - | "fillGray" - | "fillSuccess" - | "outline" - | "outlineGray" - | "outlineLight" - | "text" +import { Text } from "../Text/Text" +import { useTextStyleForPalette } from "../Text/helpers" export interface ButtonProps extends BoxProps { children: React.ReactNode - size?: ButtonSize - variant?: ButtonVariant + size?: "small" | "large" + variant?: + | "fillDark" + | "fillLight" + | "fillGray" + | "fillSuccess" + | "outline" + | "outlineGray" + | "outlineLight" + | "text" onPress?: PressableProps["onPress"] - onPressIn?: PressableProps["onPressIn"] - onPressOut?: PressableProps["onPressOut"] icon?: React.ReactNode iconPosition?: "left" | "left-start" | "right" @@ -64,68 +56,82 @@ export interface ButtonProps extends BoxProps { longestText?: string /** Used only for tests and stories */ - testOnly_pressed?: PressableProps["testOnly_pressed"] + testOnly_state?: DisplayState + + textVariant?: TextVariant +} + +enum DisplayState { + Enabled = "enabled", + Disabled = "disabled", + Loading = "loading", + Pressed = "pressed", } -export const Button = ({ +export const Button: React.FC = ({ children, - disabled: disabledProp, + disabled, haptic, icon, iconPosition = "left", - loading: loadingProp, - block, + loading, longestText, onPress, - onPressIn, - onPressOut, size = "large", variant = "fillDark", - testOnly_pressed, + testOnly_state, testID, + textVariant, hitSlop, - ...restProps -}: ButtonProps) => { - const [disabled] = useStateWithProp(!!disabledProp) - const [loading] = useStateWithProp(!!loadingProp) - const [_, setPressed, pressedV] = useStateWithProp(!!testOnly_pressed) - - const pressAnimationProgress = useSharedValue(0) - useAnimatedReaction( - () => { - return pressedV.value - }, - (pressedVal) => { - return (pressAnimationProgress.value = withTiming(pressedVal, { - duration: ANIMATION_DURATION, - })) - } - ) + ...rest +}) => { + const textVariantBySize = size === "small" ? "xs" : "sm" + const textStyle = useTextStyleForPalette(textVariant ?? textVariantBySize) + + const [innerDisplayState, setInnerDisplayState] = useState(DisplayState.Enabled) - const textStyle = useTextStyleForPalette(size === "small" ? "xs" : "sm") const [longestTextMeasurements, setLongestTextMeasurements] = useState({ width: 0, height: 0, }) - const height = (() => { + const displayState = + testOnly_state ?? // if we use the test prop, use that + (loading // if we have loading or disabled in props, they are used + ? DisplayState.Loading + : disabled + ? DisplayState.Disabled + : innerDisplayState) // otherwise use the inner state for pressed or enabled + + const getSize = (): { height: number; mx: SpacingUnit } => { switch (size) { case "small": - return 30 + return { height: 30, mx: "15px" } case "large": - return 50 + return { height: 50, mx: "30px" } } - })() + } const handlePress = (event: GestureResponderEvent) => { if (onPress === undefined || onPress === null) { return } - if (disabled || loading) { + if (displayState === DisplayState.Loading || displayState === DisplayState.Disabled) { return } + // Did someone tap really fast? Flick the highlighted state + if (displayState === DisplayState.Enabled) { + setInnerDisplayState(DisplayState.Pressed) + setTimeout(() => { + setInnerDisplayState(DisplayState.Enabled) + }, 0.3) + } else { + // Was already selected + setInnerDisplayState(DisplayState.Enabled) + } + if (haptic !== undefined) { Haptic.trigger(haptic === true ? "impactLight" : haptic) } @@ -133,160 +139,365 @@ export const Button = ({ onPress(event) } - const colorsForVariantAndState = useColorsForVariantAndState() - - const containerColorsAnim = useAnimatedStyle(() => { - const colors = colorsForVariantAndState[variant] - if (disabled) { - return { - backgroundColor: colors.disabled.bg, - borderColor: colors.disabled.border, - } - } - - if (loading) { - return { - backgroundColor: colors.loading.bg, - borderColor: colors.loading.border, - } - } - - return { - backgroundColor: interpolateColor( - pressAnimationProgress.value, - [0, 1], - [colors.active.bg, colors.pressed.bg] - ), - borderColor: interpolateColor( - pressAnimationProgress.value, - [0, 1], - [colors.active.border, colors.pressed.border] - ), - } - }) - - const textAnim = useAnimatedStyle(() => { - const colors = colorsForVariantAndState[variant] - - if (loading) { - return { color: colors.loading.text } - } - - return { - color: interpolateColor( - pressAnimationProgress.value, - [0, 1], - [colors.active.text, colors.pressed.text] - ), - textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none", - } - }) - const loaderColor = colorsForVariantAndState[variant].loading.loader + const containerSize = getSize() + const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState) return ( - { - onPressIn?.(e) - setPressed(true) - }} - onPressOut={(e) => { - onPressOut?.(e) - setPressed(false) - }} - onPress={handlePress} - testID={testID} - testOnly_pressed={testOnly_pressed} - hitSlop={hitSlop} - > - - + {(springProps: typeof to) => ( + { + if (displayState === DisplayState.Loading) { + return + } + setInnerDisplayState(DisplayState.Pressed) + }} + onPressOut={() => { + if (displayState === DisplayState.Loading) { + return + } + setInnerDisplayState(DisplayState.Enabled) + }} + onPress={handlePress} + testID={testID} > - - + - {iconPosition === "left-start" && !!icon ? ( - - {icon} - - - ) : null} - {iconPosition === "left" && !!icon ? ( - <> - {icon} - - - ) : null} - - {children} - - - - {longestText ? longestText : children} - - - {iconPosition === "right" && !!icon && ( - <> - - {icon} - - )} - - {loading && ( - - - - )} - - - - - + + + {iconPosition === "left-start" && !!icon ? ( + + {icon} + + + ) : null} + {iconPosition === "left" && !!icon ? ( + <> + {icon} + + + ) : null} + {/* This makes sure that in testing environment the button text is + not rendered twice, in normal environment this is not visible. + This will result in us being able to use getByText over + getAllByText()[0] to select the buttons in the test environment. + */} + {!__TEST__ && longestText && ( + + + {longestText ? longestText : children} + + + )} + + {children} + + {iconPosition === "right" && !!icon && ( + <> + + {icon} + + )} + + + {displayState === DisplayState.Loading && ( + + + + )} + + + + + )} + ) } -const AText = Animated.createAnimatedComponent(Text) -const AFlex = Animated.createAnimatedComponent(Flex) - -const useStateWithProp = ( - prop: boolean -): [ - boolean, - React.Dispatch>, - Readonly> -] => { - const [state, setState] = useState(!!prop) - - useEffect(() => { - setState(!!prop) - }, [prop]) - - const stateV = useDerivedValue(() => { - if (!!state) { - return 1 - } - return 0 - }, [state]) +const useStyleForVariantAndState = ( + variant: Exclude, + state: DisplayState +): { + backgroundColor: string + borderColor: string + borderWidth?: number + textColor: string + loaderColor: Color + textDecorationLine?: TextStyle["textDecorationLine"] +} => { + const color = useColor() + + const retval = { + textDecorationLine: "none", + } as ReturnType + + switch (variant) { + case "fillDark": + retval.textColor = color("white100") + switch (state) { + case DisplayState.Enabled: + retval.backgroundColor = color("black100") + retval.borderColor = color("black100") + break + case DisplayState.Disabled: + retval.backgroundColor = color("black30") + retval.borderColor = color("black30") + break + case DisplayState.Loading: + retval.backgroundColor = color("black100") + retval.borderColor = color("black100") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "white100" + break + case DisplayState.Pressed: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + retval.textDecorationLine = "underline" + break + default: + null + } + break + + case "fillLight": + switch (state) { + case DisplayState.Enabled: + retval.backgroundColor = color("white100") + retval.borderColor = color("white100") + retval.textColor = color("black100") + break + case DisplayState.Disabled: + retval.backgroundColor = color("black30") + retval.borderColor = color("black30") + retval.textColor = color("white100") + break + case DisplayState.Loading: + retval.backgroundColor = color("white100") + retval.borderColor = color("white100") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "black100" + break + case DisplayState.Pressed: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + retval.textColor = color("white100") + retval.textDecorationLine = "underline" + break + default: + null + } + break + + case "fillGray": + switch (state) { + case DisplayState.Enabled: + retval.backgroundColor = color("black10") + retval.borderColor = color("black10") + retval.textColor = color("black100") + break + case DisplayState.Disabled: + retval.backgroundColor = color("black30") + retval.borderColor = color("black30") + retval.textColor = color("white100") + break + case DisplayState.Loading: + retval.backgroundColor = color("black10") + retval.borderColor = color("black10") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "black100" + break + case DisplayState.Pressed: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + retval.textColor = color("white100") + retval.textDecorationLine = "underline" + break + default: + null + } + break + + case "fillSuccess": + retval.textColor = color("white100") + switch (state) { + case DisplayState.Enabled: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + break + case DisplayState.Disabled: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + break + case DisplayState.Loading: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "white100" + break + case DisplayState.Pressed: + retval.backgroundColor = color("blue10") + retval.borderColor = color("blue10") + retval.textDecorationLine = "underline" + break + default: + null + } + break + + case "outline": + switch (state) { + case DisplayState.Enabled: + retval.backgroundColor = color("white100") + retval.borderColor = color("black60") + retval.textColor = color("black100") + break + case DisplayState.Disabled: + retval.backgroundColor = color("white100") + retval.borderColor = color("black30") + retval.textColor = color("black30") + break + case DisplayState.Loading: + retval.backgroundColor = color("white100") + retval.borderColor = color("black60") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "black100" + break + case DisplayState.Pressed: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + retval.textColor = color("white100") + retval.textDecorationLine = "underline" + break + default: + null + } + break + + case "outlineGray": + switch (state) { + case DisplayState.Enabled: + retval.backgroundColor = color("white100") + retval.borderColor = color("black30") + retval.textColor = color("black100") + break + case DisplayState.Disabled: + retval.backgroundColor = color("white100") + retval.borderColor = color("black30") + retval.textColor = color("black30") + break + case DisplayState.Loading: + retval.backgroundColor = color("white100") + retval.borderColor = color("black30") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "black100" + break + case DisplayState.Pressed: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + retval.textColor = color("white100") + retval.textDecorationLine = "underline" + break + default: + null + } + break + + case "outlineLight": + switch (state) { + case DisplayState.Enabled: + retval.backgroundColor = "rgba(0, 0, 0, 0)" + retval.borderColor = color("white100") + retval.textColor = color("white100") + break + case DisplayState.Disabled: + retval.backgroundColor = "rgba(0, 0, 0, 0)" + retval.borderColor = color("black30") + retval.textColor = color("black30") + break + case DisplayState.Loading: + retval.backgroundColor = "rgba(0, 0, 0, 0)" + retval.borderColor = color("white100") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "white100" + break + case DisplayState.Pressed: + retval.backgroundColor = color("blue100") + retval.borderColor = color("blue100") + retval.textColor = "rgba(0, 0, 0, 0)" + retval.textDecorationLine = "underline" + break + default: + null + } + break + + case "text": + retval.backgroundColor = "rgba(0, 0, 0, 0)" + retval.borderColor = "rgba(0, 0, 0, 0)" + switch (state) { + case DisplayState.Enabled: + retval.textColor = color("black100") + break + case DisplayState.Disabled: + retval.textColor = color("black30") + break + case DisplayState.Loading: + retval.textColor = "rgba(0, 0, 0, 0)" + retval.loaderColor = "blue100" + break + case DisplayState.Pressed: + retval.textColor = color("blue100") + retval.textDecorationLine = "underline" + break + default: + null + } + break + + default: + null + } - return [state, setState, stateV] + return retval } + +const Container = styled(Box)` + position: relative; + border-width: 1px; + border-radius: 50px; + width: ${(p) => (p.block ? "100%" : "auto")}; + overflow: hidden; +` + +const SpinnerContainer = styled(Box)` + position: absolute; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; +` + +const AnimatedContainer = animated(Container) +const AnimatedText = animated(Text) + +export { DisplayState as _test_DisplayState } diff --git a/src/elements/Button/FollowButton.tsx b/src/elements/Button/FollowButton.tsx index 59aab4f4..f41667c5 100644 --- a/src/elements/Button/FollowButton.tsx +++ b/src/elements/Button/FollowButton.tsx @@ -19,7 +19,6 @@ export const FollowButton = ({ loading, ...restProps }: FollowButtonProps) => { - const label = isFollowed ? "Following" : "Follow" return ( + )} + /> +) + +export const States = () => { + const [variant, setVariant] = useState>("fillDark") + return ( + + + {variants.map((variant) => ( + setVariant(variant)} mr="2"> + {variant} + + ))} + + + + + + + ) +} + +export const Variants = () => ( + ( + + + + + + + + )} + /> +) + +export const VariantsLoading = () => ( + ( + + )} + /> +) + +export const VariantsDisabled = () => ( + ( + + + + + + + + )} + /> +) + +export const TheFollowButton = () => { + const [follow, setFollow] = useState(true) + + return ( + + setFollow((v) => !v)} /> + setFollow((v) => !v)} /> + setFollow((v) => !v)} /> + setFollow((v) => !v)} /> + setFollow((v) => !v)} /> + setFollow((v) => !v)} + /> + setFollow((v) => !v)} + /> + + ) +} + +export const TheCTAButton = () => ( + + console.log("pressed")}>cta button + +) + +export const TheLinkButton = () => ( + + console.log("pressed")}>LinkButton + +) + +export const Miscellaneous = () => ( + + + + + + + + + + + + + + + + + + + + + +) + +export const Playground = () => { + const [loading, setLoading] = useState(false) + const [disabled, setDisabled] = useState(true) + const [block, setBlock] = useState(false) + + return ( + <> + setLoading((v) => !v)} /> + setDisabled((v) => !v)} /> + setBlock((v) => !v)} /> + + + + + ) +} + +export const SpacingAround = () => ( + + + + +) diff --git a/src/elements/Button/Button.tests.tsx b/src/elements/ButtonNew/Button.tests.tsx similarity index 100% rename from src/elements/Button/Button.tests.tsx rename to src/elements/ButtonNew/Button.tests.tsx diff --git a/src/elements/ButtonNew/Button.tsx b/src/elements/ButtonNew/Button.tsx new file mode 100644 index 00000000..f3e9f4d7 --- /dev/null +++ b/src/elements/ButtonNew/Button.tsx @@ -0,0 +1,284 @@ +import { useEffect, useState } from "react" +import { PressableProps, GestureResponderEvent, Pressable } from "react-native" +import Haptic, { HapticFeedbackTypes } from "react-native-haptic-feedback" +import Animated, { + interpolateColor, + useAnimatedReaction, + useAnimatedStyle, + useDerivedValue, + useSharedValue, + withTiming, +} from "react-native-reanimated" +import { useColorsForVariantAndState } from "./colors" +import { MeasuredView, ViewMeasurements } from "../../elements/MeasuredView" +import { Box, BoxProps } from "../Box" +import { Flex } from "../Flex" +import { Spacer } from "../Spacer" +import { Spinner } from "../Spinner" +import { Text, useTextStyleForPalette } from "../Text" + +const ANIMATION_DURATION = 150 + +type ButtonSize = "small" | "large" +type ButtonVariant = + | "fillDark" + | "fillLight" + | "fillGray" + | "fillSuccess" + | "outline" + | "outlineGray" + | "outlineLight" + | "text" + +export interface ButtonProps extends BoxProps { + children: React.ReactNode + + size?: ButtonSize + variant?: ButtonVariant + onPress?: PressableProps["onPress"] + + icon?: React.ReactNode + iconPosition?: "left" | "left-start" | "right" + + /** + * `haptic` can be used like: + * + ) +} diff --git a/src/elements/ButtonNew/LinkButton.tsx b/src/elements/ButtonNew/LinkButton.tsx new file mode 100644 index 00000000..f8715224 --- /dev/null +++ b/src/elements/ButtonNew/LinkButton.tsx @@ -0,0 +1,8 @@ +import { Text, TextProps } from "../Text" +import { Touchable } from "../Touchable" + +export const LinkButton = (props: TextProps) => ( + + + +) diff --git a/src/elements/ButtonNew/colors.ts b/src/elements/ButtonNew/colors.ts new file mode 100644 index 00000000..4699b946 --- /dev/null +++ b/src/elements/ButtonNew/colors.ts @@ -0,0 +1,83 @@ +import { ButtonProps } from "./Button" +import { useColor, useTheme } from "../../utils/hooks" +import { NoUndefined } from "../../utils/types" + +type State = "disabled" | "pressed" | "active" + +export const useColorsForVariantAndState = (): Record< + NoUndefined, + Record +> => { + const color = useColor() + + return { + fillDark: { + disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") }, + pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") }, + active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") }, + }, + fillLight: { + disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") }, + pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") }, + active: { + bg: color("white100"), + border: color("white100"), + text: color("black100"), + }, + }, + fillGray: { + disabled: { bg: color("black30"), border: color("black30"), text: color("white100") }, + pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") }, + active: { bg: color("black10"), border: color("black10"), text: color("black100") }, + }, + fillSuccess: { + disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") }, + pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") }, + active: { bg: color("blue10"), border: color("blue10"), text: color("white100") }, + }, + outline: { + disabled: { + bg: color("background"), + border: color("onBackgroundLow"), + text: color("onBackgroundLow"), + }, + pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") }, + active: { + bg: color("background"), + border: color("onBackgroundMedium"), + text: color("onBackgroundHigh"), + }, + }, + outlineGray: { + disabled: { + bg: color("white100"), + border: color("black30"), + text: color("black30"), + }, + pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") }, + active: { + bg: color("white100"), + border: color("black30"), + text: color("black100"), + }, + }, + outlineLight: { + disabled: { + bg: "rgba(0, 0, 0, 0)", + border: color("black30"), + text: color("black30"), + }, + pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") }, + active: { + bg: "rgba(0, 0, 0, 0)", + border: color("white100"), + text: color("white100"), + }, + }, + text: { + disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") }, + pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") }, + active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") }, + }, + } +} diff --git a/src/elements/Button/index.tsx b/src/elements/ButtonNew/index.tsx similarity index 74% rename from src/elements/Button/index.tsx rename to src/elements/ButtonNew/index.tsx index 0073bf50..2ff213f4 100644 --- a/src/elements/Button/index.tsx +++ b/src/elements/ButtonNew/index.tsx @@ -1,3 +1,4 @@ export * from "./Button" export * from "./CTAButton" export * from "./FollowButton" +export * from "./LinkButton"