-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10801 from ethereum/staging
Deploy v7.17.2
- Loading branch information
Showing
177 changed files
with
8,176 additions
and
3,900 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { | ||
| createMultiStyleConfigHelpers, | ||
| SystemStyleObject, | ||
| } from "@chakra-ui/react" | ||
| import { alertAnatomy } from "@chakra-ui/anatomy" | ||
| import { alertDefaultTheme, defineMergeStyles } from "./components.utils" | ||
| import { AlertStatusType } from "../../../components/Alert" | ||
|
|
||
| const STATUS_COLORS: Record< | ||
| "solid" | "subtle", | ||
| Record<AlertStatusType, SystemStyleObject> | ||
| > = { | ||
| solid: { | ||
| error: { | ||
| bg: "error.base", | ||
| color: "error.light", | ||
| }, | ||
| info: { | ||
| bg: "body.medium", | ||
| color: "background.base", | ||
| }, | ||
| warning: { | ||
| bg: "attention.base", | ||
| color: "attention.light", | ||
| }, | ||
| success: { | ||
| bg: "success.base", | ||
| color: "success.light", | ||
| }, | ||
| }, | ||
| subtle: { | ||
| error: { | ||
| bg: "error.light", | ||
| color: "error.base", | ||
| }, | ||
| info: { | ||
| bg: "background.highlight", | ||
| color: "body.base", | ||
| }, | ||
| warning: { | ||
| bg: "attention.light", | ||
| color: "gray.700", | ||
| }, | ||
| success: { | ||
| bg: "success.light", | ||
| color: "success", | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| const { baseStyle: alertBaseStyle } = alertDefaultTheme | ||
|
|
||
| const { defineMultiStyleConfig, definePartsStyle } = | ||
| createMultiStyleConfigHelpers(alertAnatomy.keys) | ||
|
|
||
| const baseStyleContainer = defineMergeStyles(alertBaseStyle?.container, { | ||
| justifyContent: "center", | ||
| gap: 2, | ||
| }) | ||
|
|
||
| const baseStyleIcon = defineMergeStyles(alertBaseStyle?.icon, { | ||
| me: 2, | ||
| }) | ||
|
|
||
| const baseStyle = definePartsStyle({ | ||
| container: baseStyleContainer, | ||
| icon: baseStyleIcon, | ||
| }) | ||
|
|
||
| const variantSolid = definePartsStyle((props) => ({ | ||
| container: { | ||
| ...STATUS_COLORS["solid"][props.status], | ||
| }, | ||
| })) | ||
|
|
||
| const variantSubtle = definePartsStyle((props) => ({ | ||
| container: { | ||
| ...STATUS_COLORS["subtle"][props.status], | ||
| }, | ||
| })) | ||
|
|
||
| const variants = { | ||
| solid: variantSolid, | ||
| subtle: variantSubtle, | ||
| } | ||
|
|
||
| export const Alert = defineMultiStyleConfig({ | ||
| baseStyle, | ||
| variants, | ||
| defaultProps: { | ||
| variant: "solid", | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import * as React from "react" | ||
| import { Meta, StoryObj } from "@storybook/react" | ||
| import Alert from "." | ||
| import { Box, Flex, Text } from "@chakra-ui/react" | ||
|
|
||
| type AlertType = typeof Alert | ||
|
|
||
| const meta: Meta<AlertType> = { | ||
| title: "Molecules / Action Feedback / Alerts", | ||
| component: Alert, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <Flex flexDir="column" gap={4} width="3xl"> | ||
| <Story /> | ||
| </Flex> | ||
| ), | ||
| ], | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<AlertType> | ||
|
|
||
| const DEMO_DESC = "This is an alert to be used in the top of the content" | ||
|
|
||
| const STATUSES = ["error", "success", "warning", "info"] as const | ||
|
|
||
| export const StatusVariants: Story = { | ||
| args: { | ||
| description: DEMO_DESC, | ||
| onClose: () => {}, | ||
| }, | ||
| render: (args) => ( | ||
| <> | ||
| {STATUSES.map((status) => ( | ||
| <Alert key={status} status={status} {...args} /> | ||
| ))} | ||
| </> | ||
| ), | ||
| } | ||
|
|
||
| export const ContentVariants: Story = { | ||
| args: { | ||
| description: DEMO_DESC, | ||
| }, | ||
| render: (args) => ( | ||
| <> | ||
| <Alert {...args} /> | ||
| <Alert hasIcon={false} {...args} /> | ||
| <Alert maxW="sm" onClose={() => {}} {...args} /> | ||
| </> | ||
| ), | ||
| } | ||
|
|
||
| export const StyleVariants: Story = { | ||
| args: { | ||
| description: DEMO_DESC, | ||
| onClose: () => {}, | ||
| }, | ||
| argTypes: { | ||
| status: { | ||
| options: STATUSES, | ||
| control: { | ||
| type: "radio", | ||
| }, | ||
| }, | ||
| }, | ||
| render: (args) => ( | ||
| <> | ||
| <Box> | ||
| <Text>Solid</Text> | ||
| <Alert {...args} /> | ||
| </Box> | ||
| <Box> | ||
| <Text>Subtle</Text> | ||
| <Alert variant="subtle" {...args} /> | ||
| </Box> | ||
| </> | ||
| ), | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import * as React from "react" | ||
| import { | ||
| Alert as ChakraAlert, | ||
| AlertDescription, | ||
| AlertIcon, | ||
| AlertProps as ChakraAlertProps, | ||
| AlertStatus, | ||
| CloseButton, | ||
| forwardRef, | ||
| } from "@chakra-ui/react" | ||
|
|
||
| export type AlertStatusType = Exclude<AlertStatus, "loading"> | ||
|
|
||
| interface AlertProps extends Omit<ChakraAlertProps, "status"> { | ||
| /** | ||
| * Should the alert icon show? | ||
| * | ||
| * @default true | ||
| */ | ||
| hasIcon?: boolean | ||
| /** | ||
| * The description of the alert | ||
| */ | ||
| description: string | ||
| status?: AlertStatusType | ||
| /** | ||
| * Function to handle closing of the Alert | ||
| * | ||
| * If this prop is present, a `CloseButton` component is rendered | ||
| */ | ||
| onClose?: () => void | ||
| } | ||
|
|
||
| const Alert = forwardRef<AlertProps, "div">((props, ref) => { | ||
| const { | ||
| hasIcon = true, | ||
| description, | ||
| onClose, | ||
| status = "info", | ||
| ...rest | ||
| } = props | ||
|
|
||
| const isCloseable = !!onClose | ||
|
|
||
| const closeButtonStateStyles = { | ||
| borderRadius: "base", | ||
| _active: { | ||
| boxShadow: "none", | ||
| transform: "translate(0)", | ||
| transitionDuration: "20ms", | ||
| }, | ||
| } | ||
|
|
||
| return ( | ||
| <ChakraAlert ref={ref} position="relative" status={status} {...rest}> | ||
| <> | ||
| {hasIcon ? <AlertIcon ms={isCloseable ? "auto" : undefined} /> : null} | ||
| <AlertDescription>{description}</AlertDescription> | ||
| {isCloseable ? ( | ||
| <CloseButton | ||
| onClick={onClose} | ||
| ms="auto" | ||
| {...closeButtonStateStyles} | ||
| /> | ||
| ) : null} | ||
| </> | ||
| </ChakraAlert> | ||
| ) | ||
| }) | ||
|
|
||
| export default Alert |
Oops, something went wrong.