@basic-ui/material 1.0.0-alpha.55 → 1.0.0-alpha.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/index.js +9 -0
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Button/BaseButton.d.ts +1 -1
- package/build/esm/Button/BaseButton.js +9 -0
- package/build/esm/Button/BaseButton.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +5 -10
- package/src/Button/BaseButton.tsx +10 -1
- package/src/Button/Button.story.tsx +5 -4
- package/src/Button/ButtonGroup.story.tsx +2 -2
- package/src/Button/SplitButton.story.tsx +2 -2
|
@@ -2,7 +2,7 @@ import type { ButtonHTMLAttributes } from 'react';
|
|
|
2
2
|
import type { BoxProps } from '../Box';
|
|
3
3
|
import type { ButtonVariants } from './Button';
|
|
4
4
|
export type ButtonElevation = 'none' | 'default' | 'elevated' | 'floating' | 'contained';
|
|
5
|
-
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
5
|
+
export type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
6
6
|
export type ButtonShape = 'rounded' | 'square';
|
|
7
7
|
export interface BaseButtonProps extends BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>> {
|
|
8
8
|
elevation?: ButtonElevation;
|
|
@@ -3,6 +3,14 @@ import { useTheme } from '@emotion/react';
|
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
const sizeStyles = {
|
|
6
|
+
xxs: {
|
|
7
|
+
height: "1.5rem",
|
|
8
|
+
iconSize: "1.125rem",
|
|
9
|
+
contentPaddingInline: "0.625rem",
|
|
10
|
+
standardInnerRadius: "0.5rem",
|
|
11
|
+
connectedInnerRadius: "0.125rem",
|
|
12
|
+
splitInnerRadius: "0.125rem"
|
|
13
|
+
},
|
|
6
14
|
xs: {
|
|
7
15
|
height: "2rem",
|
|
8
16
|
iconSize: "1.25rem",
|
|
@@ -51,6 +59,7 @@ function getTypographyVariant(size) {
|
|
|
51
59
|
return 'text.label-large';
|
|
52
60
|
}
|
|
53
61
|
function getSquareRadius(size) {
|
|
62
|
+
if (size === 'xxs') return 'small';
|
|
54
63
|
if (size === 'md') return 'large';
|
|
55
64
|
if (size === 'lg' || size === 'xl') return 'extra-large';
|
|
56
65
|
return 'medium';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.js","names":["forwardRef","useTheme","Box","jsx","_jsx","sizeStyles","
|
|
1
|
+
{"version":3,"file":"BaseButton.js","names":["forwardRef","useTheme","Box","jsx","_jsx","sizeStyles","xxs","height","iconSize","contentPaddingInline","standardInnerRadius","connectedInnerRadius","splitInnerRadius","xs","sm","md","lg","xl","getTypographyVariant","size","getSquareRadius","isIconVariant","variant","BaseButton","props","ref","theme","__css","variantProp","elevation","shape","isGroupedButton","otherProps","sizeStyle","iconOnly","contentButton","as","undefined","boxSizing","position","appearance","display","alignItems","justifyContent","textAlign","lineHeight","textDecoration","fontSize","border","boxShadow","overflow","WebkitTapHighlightColor","touchAction","userSelect","minWidth","whiteSpace","cursor","outline","py","borderRadius","px","width","maxWidth","maxHeight","buttons","elevations"],"sources":["../../../src/Button/BaseButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useTheme } from '@emotion/react';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport type { ButtonVariants } from './Button';\n\nexport type ButtonElevation =\n | 'none'\n | 'default'\n | 'elevated'\n | 'floating'\n | 'contained';\nexport type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type ButtonShape = 'rounded' | 'square';\n\nexport interface BaseButtonProps\n extends BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>> {\n elevation?: ButtonElevation;\n size?: ButtonSize;\n shape?: ButtonShape;\n isGroupedButton?: boolean;\n variant?: ButtonVariants;\n}\n\nconst sizeStyles = {\n xxs: {\n height: rem(24),\n iconSize: rem(18),\n contentPaddingInline: rem(10),\n standardInnerRadius: rem(8),\n connectedInnerRadius: rem(2),\n splitInnerRadius: rem(2),\n },\n xs: {\n height: rem(32),\n iconSize: rem(20),\n contentPaddingInline: rem(12),\n standardInnerRadius: rem(12),\n connectedInnerRadius: rem(4),\n splitInnerRadius: rem(4),\n },\n sm: {\n height: rem(40),\n iconSize: rem(24),\n contentPaddingInline: rem(16),\n standardInnerRadius: rem(12),\n connectedInnerRadius: rem(8),\n splitInnerRadius: rem(4),\n },\n md: {\n height: rem(56),\n iconSize: rem(24),\n contentPaddingInline: rem(24),\n standardInnerRadius: rem(16),\n connectedInnerRadius: rem(8),\n splitInnerRadius: rem(4),\n },\n lg: {\n height: rem(96),\n iconSize: rem(32),\n contentPaddingInline: rem(48),\n standardInnerRadius: rem(28),\n connectedInnerRadius: rem(16),\n splitInnerRadius: rem(8),\n },\n xl: {\n height: rem(136),\n iconSize: rem(40),\n contentPaddingInline: rem(64),\n standardInnerRadius: rem(28),\n connectedInnerRadius: rem(20),\n splitInnerRadius: rem(12),\n },\n};\n\nfunction getTypographyVariant(size: ButtonSize) {\n if (size === 'md') return 'text.title-medium';\n if (size === 'lg') return 'text.headline-small';\n if (size === 'xl') return 'text.headline-large';\n return 'text.label-large';\n}\n\nfunction getSquareRadius(size: ButtonSize) {\n if (size === 'xxs') return 'small';\n if (size === 'md') return 'large';\n if (size === 'lg' || size === 'xl') return 'extra-large';\n return 'medium';\n}\n\nfunction isIconVariant(variant?: ButtonVariants) {\n return (\n variant === 'icon' ||\n variant === 'icon-filled' ||\n variant === 'icon-outlined' ||\n variant === 'fab'\n );\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(\n (props, ref) => {\n const theme = useTheme();\n const {\n __css,\n variant: variantProp = 'text',\n elevation = 'none',\n size = 'sm',\n shape = 'rounded',\n isGroupedButton,\n ...otherProps\n } = props;\n const sizeStyle = sizeStyles[size] ?? sizeStyles['sm'];\n const iconOnly = isIconVariant(variantProp);\n const contentButton = !iconOnly;\n\n return (\n <Box<BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>>\n as=\"button\"\n ref={ref}\n variant={variantProp}\n data-button-grouped={isGroupedButton ? '' : undefined}\n data-button-shape={shape}\n data-button-size={size}\n __css={{\n boxSizing: 'border-box',\n position: 'relative',\n appearance: 'none',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n lineHeight: 'inherit',\n textDecoration: 'none',\n fontSize: 'inherit',\n border: 0,\n boxShadow: 'none',\n overflow: 'hidden',\n WebkitTapHighlightColor: 'transparent',\n touchAction: 'manipulation',\n userSelect: 'none',\n minWidth: 'fit-content',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n outline: 'none',\n py: 0,\n variant: getTypographyVariant(size),\n height: sizeStyle.height,\n borderRadius: shape === 'square' ? getSquareRadius(size) : 'full',\n ...(contentButton && {\n px: sizeStyle.contentPaddingInline,\n }),\n ...(iconOnly && {\n width: sizeStyle.height,\n maxWidth: sizeStyle.height,\n maxHeight: sizeStyle.height,\n px: `calc((${sizeStyle.height} - ${sizeStyle.iconSize}) / 2)`,\n }),\n '--btn-pill-radius': `calc(${sizeStyle.height} / 2)`,\n '--btn-standard-inner-radius': sizeStyle.standardInnerRadius,\n '--btn-connected-inner-radius': sizeStyle.connectedInnerRadius,\n '--btn-split-inner-radius': sizeStyle.splitInnerRadius,\n '& svg': {\n width: sizeStyle.iconSize,\n height: sizeStyle.iconSize,\n },\n '&::-moz-focus-inner': {\n border: 0,\n },\n ...((theme.buttons.elevations as Record<string, object>)[elevation] ??\n {}),\n ...__css,\n }}\n {...otherProps}\n />\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|