diff --git a/packages/orbit-components/src/Button/index.tsx b/packages/orbit-components/src/Button/index.tsx index 1964c9ed39..74e012bec4 100644 --- a/packages/orbit-components/src/Button/index.tsx +++ b/packages/orbit-components/src/Button/index.tsx @@ -4,49 +4,16 @@ import * as React from "react"; import cx from "clsx"; import ButtonPrimitive from "../primitives/ButtonPrimitive"; -import type { Props, Size, Type } from "./types"; - -const sizeStyles: Record = { - small: "h-button-small text-small [&_svg]:h-icon-small [&_svg]:w-icon-small", - normal: "h-button-normal text-normal [&_svg]:h-icon-medium [&_svg]:w-icon-medium", - large: "h-button-large text-large [&_svg]:h-icon-large [&_svg]:w-icon-large", -}; - -const paddingNoIconsStyles: Record = { - small: "px-button-padding-sm", - normal: "px-button-padding-md", - large: "px-button-padding-xl", -}; - -const paddingLeftIconStyles: Record = { - small: "ps-button-padding-xs pe-button-padding-sm", - normal: "ps-button-padding-sm pe-button-padding-md", - large: "ps-button-padding-lg pe-button-padding-xl", -}; - -const paddingRightIconStyles: Record = { - small: "ps-button-padding-sm pe-button-padding-xs", - normal: "ps-button-padding-md pe-button-padding-sm", - large: "ps-button-padding-xl pe-button-padding-lg", -}; - -const paddingBothIconsStyles: Record = { - small: "px-button-padding-xs", - normal: "px-button-padding-sm", - large: "px-button-padding-lg", -}; - -const circledStyles: Record = { - small: "rounded-button-circled-small", - normal: "rounded-button-circled-normal", - large: "rounded-button-circled-large", -}; - -const circledIconOnlyStyles: Record = { - small: "w-button-small", - normal: "w-button-normal", - large: "w-button-large", -}; +import { + iconOnlyStyles, + circledStyles, + paddingBothIconsStyles, + paddingLeftIconStyles, + paddingNoIconsStyles, + paddingRightIconStyles, + sizeStyles, +} from "../primitives/ButtonPrimitive/sizes"; +import type { Props, Type } from "./types"; const typeStyles: Record = { primary: @@ -97,15 +64,15 @@ const Button = React.forwardRef( disabled={disabled} {...props} className={cx( - "orbit-button space-x-xs rtl:space-x-reverse", + "space-x-xs rtl:space-x-reverse", sizeStyles[size], + children == null && iconOnlyStyles[size], disabled === true ? typeDisabledStyled[type] : typeStyles[type], children != null && iconLeft == null && iconRight == null && paddingNoIconsStyles[size], children != null && iconLeft != null && iconRight == null && paddingLeftIconStyles[size], children != null && iconLeft == null && iconRight != null && paddingRightIconStyles[size], children != null && iconLeft != null && iconRight != null && paddingBothIconsStyles[size], props.circled === true && circledStyles[size], - props.circled === true && children == null && circledIconOnlyStyles[size], )} > {children} diff --git a/packages/orbit-components/src/Button/types.d.ts b/packages/orbit-components/src/Button/types.d.ts index d0e57de61d..d1f17f0112 100644 --- a/packages/orbit-components/src/Button/types.d.ts +++ b/packages/orbit-components/src/Button/types.d.ts @@ -8,8 +8,6 @@ import type { FullWidthConditionalProps, } from "../primitives/ButtonPrimitive/types"; -export type { Size }; - export type Type = | "primary" | "secondary" diff --git a/packages/orbit-components/src/primitives/ButtonPrimitive/index.tsx b/packages/orbit-components/src/primitives/ButtonPrimitive/index.tsx index bdde42521d..762160ed61 100644 --- a/packages/orbit-components/src/primitives/ButtonPrimitive/index.tsx +++ b/packages/orbit-components/src/primitives/ButtonPrimitive/index.tsx @@ -159,13 +159,13 @@ const ButtonPrimitive = React.forwardRef*]:align-middle [&_.orbit-loading-spinner]:stroke-[currentColor]", + "orbit-button-primitive font-base duration-fast group relative max-w-full items-center border-none text-center leading-none transition-all [&>*]:align-middle [&_.orbit-loading-spinner]:stroke-[currentColor]", fullWidth && "w-full", centered || children == null ? "justify-center" : "justify-[var(--button-content-align)]", circled !== true && "rounded-large tb:rounded-normal", isDisabled ? "cursor-not-allowed opacity-30" - : "hover:no-underline focus:no-underline active:no-underline", + : "cursor-pointer hover:no-underline focus:no-underline active:no-underline", isLink ? "inline-flex" : "flex", underlined && "underline", boxShadowFocus != null && "outline-none", diff --git a/packages/orbit-components/src/primitives/ButtonPrimitive/sizes.ts b/packages/orbit-components/src/primitives/ButtonPrimitive/sizes.ts new file mode 100644 index 0000000000..0e4d35cc33 --- /dev/null +++ b/packages/orbit-components/src/primitives/ButtonPrimitive/sizes.ts @@ -0,0 +1,43 @@ +import type { Size } from "./types"; + +export const sizeStyles: Record = { + small: "h-button-small text-small [&_svg]:h-icon-small [&_svg]:w-icon-small", + normal: "h-button-normal text-normal [&_svg]:h-icon-medium [&_svg]:w-icon-medium", + large: "h-button-large text-large [&_svg]:h-icon-large [&_svg]:w-icon-large", +}; + +export const paddingNoIconsStyles: Record = { + small: "px-button-padding-sm", + normal: "px-button-padding-md", + large: "px-button-padding-lg", +}; + +export const paddingLeftIconStyles: Record = { + small: "ps-button-padding-xs pe-button-padding-sm", + normal: "ps-button-padding-sm pe-button-padding-md", + large: "ps-button-padding-md pe-button-padding-lg", +}; + +export const paddingRightIconStyles: Record = { + small: "ps-button-padding-sm pe-button-padding-xs", + normal: "ps-button-padding-md pe-button-padding-sm", + large: "ps-button-padding-lg pe-button-padding-md", +}; + +export const paddingBothIconsStyles: Record = { + small: "px-button-padding-xs", + normal: "px-button-padding-sm", + large: "px-button-padding-md", +}; + +export const circledStyles: Record = { + small: "rounded-button-circled-small", + normal: "rounded-button-circled-normal", + large: "rounded-button-circled-large", +}; + +export const iconOnlyStyles: Record = { + small: "w-button-small", + normal: "w-button-normal", + large: "w-button-large", +}; diff --git a/packages/orbit-components/src/tmp-tailwind/ButtonLink/ButtonLink.stories.tsx b/packages/orbit-components/src/tmp-tailwind/ButtonLink/ButtonLink.stories.tsx new file mode 100644 index 0000000000..ec621f4a65 --- /dev/null +++ b/packages/orbit-components/src/tmp-tailwind/ButtonLink/ButtonLink.stories.tsx @@ -0,0 +1,163 @@ +import * as React from "react"; +import { action } from "@storybook/addon-actions"; +import { text, number, boolean, select } from "@storybook/addon-knobs"; + +import * as Icons from "../../icons"; +import { TYPES } from "../../ButtonLink/consts"; +import { SIZE_OPTIONS } from "../../primitives/ButtonPrimitive/common/consts"; +import RenderInRtl from "../../utils/rtl/RenderInRtl"; +import SPACINGS_AFTER from "../../common/getSpacingToken/consts"; + +import ButtonLink from "."; + +const getIcons = (name: string, defaultIcon: string) => + select(name, [null, ...Object.keys(Icons)], defaultIcon); + +const getIcon = (source: string | null) => (source ? Icons[source] : null); + +export default { + title: "tailwind/ButtonLink", +}; + +export const Default = () => ButtonLink; + +Default.story = { + parameters: { + info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.", + }, +}; + +export const Secondary = () => ( + + ButtonLink + +); + +Secondary.story = { + parameters: { + info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.", + }, +}; + +export const Critical = () => ( + + ButtonLink + +); + +Critical.story = { + parameters: { + info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.", + }, +}; + +export const Circled = () => { + const circled = boolean("circled", true); + const type = select("Type", Object.values(TYPES), TYPES.SECONDARY); + const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.LARGE); + const IconLeft = getIcon(getIcons("iconLeft", "Airplane")); + + return ( + } + onClick={action("clicked")} + circled={circled} + title="Button" + /> + ); +}; + +Circled.story = { + parameters: { + info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.", + }, +}; + +export const Playground = () => { + const children = text("Children", "ButtonLink"); + const disabled = boolean("Disabled", false); + const fullWidth = boolean("fullWidth", false); + const type = select("Type", Object.values(TYPES), TYPES.SECONDARY); + const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.LARGE); + const width = number("Width", NaN); + const IconLeft = getIcon(getIcons("iconLeft", "Airplane")); + const IconRight = getIcon(getIcons("iconRight", "ChevronDown")); + const href = text("Href", ""); + const dataTest = text("dataTest", "test"); + const external = boolean("External", false); + const compact = boolean("compact", false); + const submit = boolean("Submit", false); + const ariaExpanded = boolean("Aria expanded", false); + const ariaControls = text("Aria controls", "element ID"); + const tabIndex = text("tabIndex", "0"); + const spaceAfter = select("spaceAfter", [undefined, ...Object.values(SPACINGS_AFTER)], undefined); + const title = text("Title", "Additional information for accessibility"); + const rel = text("Rel", "nofollow"); + + return ( + } + iconRight={IconRight && } + width={String(width)} + external={external} + onClick={action("clicked")} + compact={compact} + submit={submit} + ariaExpanded={ariaExpanded} + ariaControls={ariaControls} + tabIndex={tabIndex} + spaceAfter={spaceAfter} + title={title} + rel={rel} + > + {children} + + ); +}; + +Playground.story = { + parameters: { + info: "Link buttons have a similar look as classic links, but the area surrounding them is clickable. That makes them great to use outside of paragraphs or for less important actions in the interface. We use Link buttons only in a small and normal version.", + }, +}; + +export const Accessibility = () => { + const children = text("Children", "ButtonLink"); + const ariaExpanded = boolean("Aria expanded", false); + const ariaControls = text("Aria controls", "element ID"); + const title = text("Title", "Additional information for accessibility"); + + return ( + + {children} + + ); +}; + +Accessibility.story = { + parameters: { + info: "This is a preview of component accessibility props", + }, +}; + +export const Rtl = () => ( + + }>ButtonLink + +); + +Rtl.story = { + name: "RTL", + + parameters: { + info: "This is a preview of this component in RTL setup.", + }, +}; diff --git a/packages/orbit-components/src/tmp-tailwind/ButtonLink/index.tsx b/packages/orbit-components/src/tmp-tailwind/ButtonLink/index.tsx new file mode 100644 index 0000000000..dbb55db2d8 --- /dev/null +++ b/packages/orbit-components/src/tmp-tailwind/ButtonLink/index.tsx @@ -0,0 +1,95 @@ +"use client"; + +import * as React from "react"; +import cx from "clsx"; + +import ButtonPrimitive from "../../primitives/ButtonPrimitive"; +import { + iconOnlyStyles, + circledStyles, + paddingBothIconsStyles, + paddingLeftIconStyles, + paddingNoIconsStyles, + paddingRightIconStyles, + sizeStyles, +} from "../../primitives/ButtonPrimitive/sizes"; +import type { Props, Type } from "../../ButtonLink/types"; + +const typeStyles: Record = { + primary: + "bg-button-link-primary-background hover:bg-button-link-primary-background-hover active:bg-button-link-primary-background-active focus:bg-button-link-primary-background-focus text-button-link-primary-foreground focus:text-button-link-primary-foreground-focus active:text-button-link-primary-foreground-active hover:text-button-link-primary-foreground-hover", + secondary: + "bg-button-link-secondary-background hover:bg-button-link-secondary-background-hover active:bg-button-link-secondary-background-active focus:bg-button-link-secondary-background-focus text-button-link-secondary-foreground focus:text-button-link-secondary-foreground-focus active:text-button-link-secondary-foreground-active hover:text-button-link-secondary-foreground-hover", + critical: + "bg-button-link-critical-background hover:bg-button-link-critical-background-hover active:bg-button-link-critical-background-active focus:bg-button-link-critical-background-focus text-button-link-critical-foreground focus:text-button-link-critical-foreground-focus active:text-button-link-critical-foreground-active hover:text-button-link-critical-foreground-hover", +}; + +const typeCompactStyles: Record = { + primary: + "text-button-link-primary-foreground focus:text-button-link-primary-foreground-focus active:text-button-link-primary-foreground-active hover:text-button-link-primary-foreground-hover", + secondary: + "text-button-link-secondary-foreground focus:text-product-normal-hover active:text-product-normal-active hover:text-product-normal-hover", + critical: + "text-button-link-critical-foreground focus:text-button-link-critical-foreground-focus active:text-button-link-critical-foreground-active hover:text-button-link-critical-foreground-hover", +}; + +const typeDisabledStyles: Record = { + primary: "bg-button-link-primary-background text-button-link-primary-foreground", + secondary: "bg-button-link-secondary-background text-button-link-secondary-foreground", + critical: "bg-button-link-critical-background text-button-link-critical-foreground", +}; + +const typeCompactDisabledStyles: Record = { + primary: "text-button-link-primary-foreground", + secondary: "text-button-link-secondary-foreground", + critical: "text-button-link-critical-foreground", +}; + +const ButtonLink = React.forwardRef( + ( + { + type = "primary", + size = "normal", + compact, + disabled, + children, + iconLeft, + iconRight, + ...props + }, + ref, + ) => { + return ( + + {children} + + ); + }, +); + +ButtonLink.displayName = "ButtonLink"; + +export default ButtonLink; diff --git a/packages/orbit-design-tokens/output/docs-tokens.json b/packages/orbit-design-tokens/output/docs-tokens.json index b8e9c4d93a..34645aa209 100644 --- a/packages/orbit-design-tokens/output/docs-tokens.json +++ b/packages/orbit-design-tokens/output/docs-tokens.json @@ -8496,37 +8496,14 @@ }, "javascript": { "name": "buttonPaddingLarge", - "value": "24px" - }, - "foundation": { - "name": "buttonPaddingLarge", - "value": "foundation.space.large" - }, - "scss": { - "name": "buttonPaddingLarge", - "value": "24px" - } - }, - "buttonPaddingXLarge": { - "type": "size", - "deprecated": false, - "replacement": null, - "schema": { - "namespace": "component", - "object": "button", - "variant": "padding", - "subVariant": "x-large" - }, - "javascript": { - "name": "buttonPaddingXLarge", "value": "28px" }, "foundation": { - "name": "buttonPaddingXLarge", + "name": "buttonPaddingLarge", "value": "none" }, "scss": { - "name": "buttonPaddingXLarge", + "name": "buttonPaddingLarge", "value": "28px" } }, diff --git a/packages/orbit-design-tokens/output/tokens.css b/packages/orbit-design-tokens/output/tokens.css index 89b4da93b2..069b3d371d 100644 --- a/packages/orbit-design-tokens/output/tokens.css +++ b/packages/orbit-design-tokens/output/tokens.css @@ -365,8 +365,7 @@ --button-padding-x-small: 8; --button-padding-small: 12; --button-padding-normal: 16; - --button-padding-large: 24; - --button-padding-x-large: 28; + --button-padding-large: 28; --button-primary-subtle-background: rgb(225, 244, 243); --button-primary-subtle-background-hover: rgb(214, 240, 236); --button-primary-subtle-background-active: rgb(191, 232, 226); diff --git a/packages/orbit-design-tokens/output/tokens.less b/packages/orbit-design-tokens/output/tokens.less index 24735bdba4..ba960fcf6c 100644 --- a/packages/orbit-design-tokens/output/tokens.less +++ b/packages/orbit-design-tokens/output/tokens.less @@ -364,8 +364,7 @@ @button-padding-x-small: 8; @button-padding-small: 12; @button-padding-normal: 16; -@button-padding-large: 24; -@button-padding-x-large: 28; +@button-padding-large: 28; @button-primary-subtle-background: rgb(225, 244, 243); @button-primary-subtle-background-hover: rgb(214, 240, 236); @button-primary-subtle-background-active: rgb(191, 232, 226); diff --git a/packages/orbit-design-tokens/output/tokens.scss b/packages/orbit-design-tokens/output/tokens.scss index 958eaa3648..4f54df2969 100644 --- a/packages/orbit-design-tokens/output/tokens.scss +++ b/packages/orbit-design-tokens/output/tokens.scss @@ -375,8 +375,7 @@ $button-without-text-padding: 0; $button-padding-x-small: 8px; $button-padding-small: 12px; $button-padding-normal: 16px; -$button-padding-large: 24px; -$button-padding-x-large: 28px; +$button-padding-large: 28px; $button-primary-subtle-background: rgb(225, 244, 243); $button-primary-subtle-background-hover: rgb(214, 240, 236); $button-primary-subtle-background-active: rgb(191, 232, 226); diff --git a/packages/orbit-design-tokens/output/tokens.styl b/packages/orbit-design-tokens/output/tokens.styl index c40dd365df..1044db99b6 100644 --- a/packages/orbit-design-tokens/output/tokens.styl +++ b/packages/orbit-design-tokens/output/tokens.styl @@ -364,8 +364,7 @@ $button-without-text-padding= 0; $button-padding-x-small= 8; $button-padding-small= 12; $button-padding-normal= 16; -$button-padding-large= 24; -$button-padding-x-large= 28; +$button-padding-large= 28; $button-primary-subtle-background= rgb(225, 244, 243); $button-primary-subtle-background-hover= rgb(214, 240, 236); $button-primary-subtle-background-active= rgb(191, 232, 226); diff --git a/packages/orbit-design-tokens/output/tokens.xml b/packages/orbit-design-tokens/output/tokens.xml index e3d194085b..21833dd94f 100644 --- a/packages/orbit-design-tokens/output/tokens.xml +++ b/packages/orbit-design-tokens/output/tokens.xml @@ -1465,10 +1465,6 @@ buttonPaddingLarge - 24 - - - buttonPaddingXLarge 28 diff --git a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap index 1035c8eaab..dd8fa3a138 100644 --- a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap @@ -267,10 +267,9 @@ exports[`defaultTokens should match snapshot 1`] = ` "buttonNormalLeftIconPadding": "0 16px 0 12px", "buttonNormalPadding": "0 16px", "buttonNormalRightIconPadding": "0 12px 0 16px", - "buttonPaddingLarge": "24px", + "buttonPaddingLarge": "28px", "buttonPaddingNormal": "16px", "buttonPaddingSmall": "12px", - "buttonPaddingXLarge": "28px", "buttonPaddingXSmall": "8px", "buttonPrimaryBackground": "#00A58E", "buttonPrimaryBackgroundActive": "#008472", diff --git a/packages/orbit-design-tokens/src/dictionary/definitions/component/button/button-padding.json b/packages/orbit-design-tokens/src/dictionary/definitions/component/button/button-padding.json index 9dc7a706a3..426c6adb27 100644 --- a/packages/orbit-design-tokens/src/dictionary/definitions/component/button/button-padding.json +++ b/packages/orbit-design-tokens/src/dictionary/definitions/component/button/button-padding.json @@ -21,10 +21,6 @@ "value": "{foundation.space.medium}" }, "large": { - "type": "size", - "value": "{foundation.space.large}" - }, - "x-large": { "type": "size", "value": 28 } diff --git a/packages/orbit-design-tokens/src/js/createTokens.ts b/packages/orbit-design-tokens/src/js/createTokens.ts index eba7d4e1e5..b376c94689 100644 --- a/packages/orbit-design-tokens/src/js/createTokens.ts +++ b/packages/orbit-design-tokens/src/js/createTokens.ts @@ -381,7 +381,6 @@ export interface Tokens { buttonPaddingSmall: string; buttonPaddingNormal: string; buttonPaddingLarge: string; - buttonPaddingXLarge: string; buttonPrimarySubtleBackground: string; buttonPrimarySubtleBackgroundHover: string; buttonPrimarySubtleBackgroundActive: string; @@ -1239,8 +1238,7 @@ const createTokens: CreateTokens = foundation => ({ buttonPaddingXSmall: foundation.space.XSmall, buttonPaddingSmall: foundation.space.small, buttonPaddingNormal: foundation.space.medium, - buttonPaddingLarge: foundation.space.large, - buttonPaddingXLarge: "28px", + buttonPaddingLarge: "28px", buttonPrimarySubtleBackground: foundation.palette.product.light, buttonPrimarySubtleBackgroundHover: foundation.palette.product.lightHover, buttonPrimarySubtleBackgroundActive: foundation.palette.product.lightActive, diff --git a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap index a8c1f94663..5d5c8b0e28 100644 --- a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap +++ b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap @@ -348,6 +348,7 @@ exports[`orbitPreset should match snapshot 1`] = ` "lineHeight": { "extra-large": "24px", "large": "24px", + "none": "1", "normal": "20px", "small": "16px", }, @@ -2533,10 +2534,9 @@ exports[`orbitPreset should match snapshot 1`] = ` "button-normal-left-icon-padding": "0 16px 0 12px", "button-normal-padding": "0 16px", "button-normal-right-icon-padding": "0 12px 0 16px", - "button-padding-lg": "24px", + "button-padding-lg": "28px", "button-padding-md": "16px", "button-padding-sm": "12px", - "button-padding-xl": "28px", "button-padding-xs": "8px", "button-small-both-icons-padding": "0 8px", "button-small-left-icon-padding": "0 12px 0 8px", diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts index 6ce4be6d7b..c89bd14587 100644 --- a/packages/orbit-tailwind-preset/src/presets/components/index.ts +++ b/packages/orbit-tailwind-preset/src/presets/components/index.ts @@ -174,7 +174,6 @@ const cfg = (options?: Options): Config => { "button-padding-sm": defaultTokens.buttonPaddingSmall, "button-padding-md": defaultTokens.buttonPaddingNormal, "button-padding-lg": defaultTokens.buttonPaddingLarge, - "button-padding-xl": defaultTokens.buttonPaddingXLarge, }, borderRadius: { "dialog-desktop": defaultTokens.dialogBorderRadiusDesktop, diff --git a/packages/orbit-tailwind-preset/src/presets/foundation/index.ts b/packages/orbit-tailwind-preset/src/presets/foundation/index.ts index fdbd127ba3..9541273eae 100644 --- a/packages/orbit-tailwind-preset/src/presets/foundation/index.ts +++ b/packages/orbit-tailwind-preset/src/presets/foundation/index.ts @@ -13,7 +13,7 @@ const config: Config = { colors: { ...defaultFoundation.palette, transparent: "transparent" }, borderRadius: defaultFoundation["border-radius"], screens, - lineHeight: defaultFoundation["line-height"], + lineHeight: { ...defaultFoundation["line-height"], none: "1" }, boxShadow, transitionDuration: duration, spacing,