From ecd190f95e772cb124c14aa59ebbbb185da70465 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 2 Oct 2024 09:34:09 -0400 Subject: [PATCH] feat(status-badge): add borderless size --- .changeset/clean-llamas-joke.md | 6 + .changeset/fuzzy-crews-brake.md | 5 + .changeset/soft-snails-crash.md | 6 + .../paste-core/components/badge/src/index.tsx | 2 +- .../components/status/src/StatusBadge.tsx | 45 +- .../status/stories/StatusBadge.stories.tsx | 15 +- .../components/status/type-docs.json | 5 +- .../StatusPatternExamples.tsx | 737 +++++++++--------- .../pages/components/status-badge/index.mdx | 52 ++ .../src/pages/patterns/status/index.mdx | 2 +- 10 files changed, 494 insertions(+), 381 deletions(-) create mode 100644 .changeset/clean-llamas-joke.md create mode 100644 .changeset/fuzzy-crews-brake.md create mode 100644 .changeset/soft-snails-crash.md diff --git a/.changeset/clean-llamas-joke.md b/.changeset/clean-llamas-joke.md new file mode 100644 index 0000000000..1925be3b5d --- /dev/null +++ b/.changeset/clean-llamas-joke.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/status": minor +"@twilio-paste/core": minor +--- + +[Status Badge] add new `size` value "borderless" which removes padding and border (box shadow) for a less stylized option of Status Badge for use in Tables and other crowded layouts. diff --git a/.changeset/fuzzy-crews-brake.md b/.changeset/fuzzy-crews-brake.md new file mode 100644 index 0000000000..3549ab6a9f --- /dev/null +++ b/.changeset/fuzzy-crews-brake.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/codemods": minor +--- + +[Codemods] new export from badge package (type) diff --git a/.changeset/soft-snails-crash.md b/.changeset/soft-snails-crash.md new file mode 100644 index 0000000000..a6d3a9e7ac --- /dev/null +++ b/.changeset/soft-snails-crash.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/badge": minor +"@twilio-paste/core": minor +--- + +[Badge] new type export: BadgeSizes for use in status-badge package diff --git a/packages/paste-core/components/badge/src/index.tsx b/packages/paste-core/components/badge/src/index.tsx index e0f9721c0b..4c41a51e12 100644 --- a/packages/paste-core/components/badge/src/index.tsx +++ b/packages/paste-core/components/badge/src/index.tsx @@ -1,4 +1,4 @@ -export type { BadgeBaseProps, BadgeProps, BadgeButtonProps, BadgeSpanProps } from "./types"; +export type { BadgeBaseProps, BadgeProps, BadgeButtonProps, BadgeSpanProps, BadgeSizes } from "./types"; export { useResizeChildIcons } from "./hooks"; export { badgeBaseStyles, badgeVariantStyles, badgeButtonStyles, getBadgeButtonStyles } from "./styles"; export { BadgeVariants } from "./constants"; diff --git a/packages/paste-core/components/status/src/StatusBadge.tsx b/packages/paste-core/components/status/src/StatusBadge.tsx index b8e257a535..dff12e6936 100644 --- a/packages/paste-core/components/status/src/StatusBadge.tsx +++ b/packages/paste-core/components/status/src/StatusBadge.tsx @@ -1,12 +1,13 @@ import { badgeBaseStyles, badgeVariantStyles } from "@twilio-paste/badge"; -import type { BadgeBaseProps, BadgeSpanProps } from "@twilio-paste/badge"; -import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import type { BadgeBaseProps, BadgeSizes, BadgeSpanProps } from "@twilio-paste/badge"; +import { Box, BoxStyleProps, safelySpreadBoxProps } from "@twilio-paste/box"; +import { Space } from "@twilio-paste/style-props"; import * as React from "react"; import { StatusObject } from "./constants"; import type { StatusBadgeVariants } from "./types"; -export type StatusBadgeProps = Omit & +export type StatusBadgeProps = Omit & BadgeSpanProps & { /** * Overrides the default element name to apply unique styles with the Customization Provider @@ -21,10 +22,43 @@ export type StatusBadgeProps = Omit & * @type {StatusBadgeVariants} */ variant: StatusBadgeVariants; + /** + * Sets the size of the Status Badge + * + * @default "default" + * @type {"default" | "small" | "borderless"} + */ + size?: BadgeSizes | "borderless"; }; +const paddingX = (size: StatusBadgeProps["size"]): Space => { + switch (size) { + case "small": + return "space20"; + case "borderless": + return "space0"; + default: + return "space30"; + } +}; +const paddingY = (size: StatusBadgeProps["size"]): Space => { + switch (size) { + case "small": + return "space10"; + case "borderless": + return "space0"; + default: + return "space20"; + } +}; + const badgeStyles = { ...badgeBaseStyles, ...badgeVariantStyles.default }; +const badgeBorderlessStyles: BoxStyleProps = { + boxShadow: "none", + backgroundColor: "transparent", +}; + const StatusBadge = React.forwardRef( ({ children, element = "STATUS_BADGE", size, variant, ...props }, ref) => { return ( @@ -35,12 +69,13 @@ const StatusBadge = React.forwardRef( variant={variant} {...badgeStyles} color={StatusObject[variant].color} - paddingX={size === "small" ? "space20" : "space30"} - paddingY={size === "small" ? "space10" : "space20"} + paddingX={paddingX(size)} + paddingY={paddingY(size)} display="flex" flexDirection="row" columnGap="space20" alignItems="center" + {...(size === "borderless" && badgeBorderlessStyles)} ref={ref} > {StatusObject[variant].icon} diff --git a/packages/paste-core/components/status/stories/StatusBadge.stories.tsx b/packages/paste-core/components/status/stories/StatusBadge.stories.tsx index 00043f9a21..d02a26680d 100644 --- a/packages/paste-core/components/status/stories/StatusBadge.stories.tsx +++ b/packages/paste-core/components/status/stories/StatusBadge.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryFn } from "@storybook/react"; +import { Box } from "@twilio-paste/box"; import * as React from "react"; import { StatusBadge } from "../src"; @@ -18,9 +19,17 @@ export default { } as Meta; const Template: StoryFn = ({ variant }) => ( - - {variant} - + + + {variant} + + + {variant} + + + {variant} + + ); export const ProcessSuccessStatusBadge = Template.bind({}); diff --git a/packages/paste-core/components/status/type-docs.json b/packages/paste-core/components/status/type-docs.json index 618e843dfb..cf8f1620c5 100644 --- a/packages/paste-core/components/status/type-docs.json +++ b/packages/paste-core/components/status/type-docs.json @@ -1542,10 +1542,11 @@ "externalProp": true }, "size": { - "type": "BadgeSizes", + "type": "BadgeSizes | \"borderless\"", "defaultValue": "default", "required": false, - "externalProp": false + "externalProp": false, + "description": "Sets the size of the Status Badge" }, "slot": { "type": "string", diff --git a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx index d8e799fa0c..63739a74c1 100644 --- a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx +++ b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx @@ -7,14 +7,14 @@ import { ProcessNeutralIcon } from "@twilio-paste/icons/esm/ProcessNeutralIcon"; import { ProcessSuccessIcon } from "@twilio-paste/icons/esm/ProcessSuccessIcon"; import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon"; -export const BannerExample = ` - - - Success - +export const BannerExample = ` + + + Success + `.trim(); export const ProcessError = (): JSX.Element => { @@ -69,377 +69,376 @@ export const ConnectivityOffline = (): JSX.Element => { ); }; -export const processStatusExamples = ` - - - - Error - - - - Warning - - - - Success - - - - Neutral - - - - In-progress - - - - Disabled - - - - Draft - - +export const processStatusExamples = ` + + + + Error + + + + Warning + + + + Success + + + + Neutral + + + + In-progress + + + + Disabled + + + + Draft + + `.trim(); -export const prefixSuffixTooltipExamples = ` - - - - - Failed to process - - - - Failed to process - - - +export const prefixSuffixTooltipExamples = ` + + + + + Failed to process + + + + Failed to process + + + `.trim(); -export const tableExample = ` -<> - - Exports - - - - - - - - - - - - - - - - - - -
StatusExport name
- - - - Successfully exported - Tuesday, January 2, 2021 - - - - Contacts who did not click -
- - - - Successfully exported - Tuesday, February 2, 2021 - - - - All contacts -
- - - IDs - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IDUnique nameRegionStatusOrder Date
90294808908109537WE902990c21gjioGasdNorth America - Active - 2020-10-15
90294808908872345WE928471c21gjioGasdNorth America - Ready - 2020-10-15
- +export const tableExample = ` +<> + + Exports + + + + + + + + + + + + + + + + + + +
StatusExport name
+ + + + Successfully exported + Tuesday, January 2, 2021 + + + + Contacts who did not click +
+ + + + Successfully exported + Tuesday, February 2, 2021 + + + + All contacts +
+ + + IDs + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDUnique nameRegionStatusOrder Date
90294808908109537WE902990c21gjioGasdNorth America + Active + 2020-10-15
90294808908872345WE928471c21gjioGasdNorth America + Ready + 2020-10-15
+ `.trim(); -export const tableWithPlainTextExample = ` -<> - - Reboots - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TitleMediaStatus
BewitchedSeries - Progress halted -
MulanFeatureReleased
Little WomenFeatureReleased
- +export const tableWithPlainTextExample = ` +<> + + Reboots + + + + + + + + + + + + + + + + + + + + + + + + + + +
TitleMediaStatus
BewitchedSeries + Progress halted +
MulanFeatureReleased
Little WomenFeatureReleased
+ `.trim(); -export const linkInStatusExamples = ` - - - - - Pre-registration needed - - - - - - Pre-registration needed - - - Fill out the registration form here - - - - - - - - Pre-registration needed - - - - - - +export const linkInStatusExamples = ` + + + + + Pre-registration needed + + + + + + Pre-registration needed + + + Fill out the registration form here + + + + + + + + Pre-registration needed + + + + + + `.trim(); -export const otherCommonPlacements = ` - - - - - - Business Profile - - - Approved - - - Information about your business - - - - - Account Security - - Connected - - - - Autopilot - - Connected - - - - Carrier Network - - Intermittent - - - - +export const otherCommonPlacements = ` + + + + + + Business Profile + + + Approved + + + Information about your business + + + + + Account Security + + Connected + + + + Autopilot + + Connected + + + + Carrier Network + + Intermittent + + + + `.trim(); -export const connectivityStatusExamples = ` - - - - Available - - - - Busy - - - - Unavailable - - - - Neutral - - - - Offline - - +export const connectivityStatusExamples = ` + + + + Available + + + + Busy + + + + Unavailable + + + + Neutral + + + + Offline + + `.trim(); diff --git a/packages/paste-website/src/pages/components/status-badge/index.mdx b/packages/paste-website/src/pages/components/status-badge/index.mdx index adf7ee53c0..0932292329 100644 --- a/packages/paste-website/src/pages/components/status-badge/index.mdx +++ b/packages/paste-website/src/pages/components/status-badge/index.mdx @@ -260,6 +260,58 @@ Use small Badges sparingly, only when needed for vertical density. Guidelines fo `.trim()} +### Borderless Badges + +A borderless Status Badge has no border, padding, or background color. + +Use a borderless Status Badge inside of a Table to indicate the current state or condition of items of the Table. Placement of the status in the Table should depend on the importance of the status to the given user flow and should be tested with users. + + + {` + + + Success + + + Error + + + Warning + + + Neutral + + + In-progress + + + Disabled + + + Draft + + + + + Available + + + Unavailable + + + Busy + + + Neutral + + + Offline + + + +`.trim()} + + --- ## Composition Notes diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/status/index.mdx index 2929ff1fab..9cd24a68fa 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/status/index.mdx @@ -659,4 +659,4 @@ Statuses are not always placed in tables. Other common placements are near avata - + \ No newline at end of file