← All changes | src/blocks/button/element.tsx +50 -7 1.1.5 → 1.2.0 View file →

		@@ -18,8 +18,10 @@
18	18	ElementAlignment,
19	19	} from "../../alignment";
20	20	import { isProAvailable } from "../../pro-status";
21	21
	22	+export type ButtonVariant = "fill" | "outline";
	23	+
22	24	export interface ButtonElementAttributes {
23	25	content: string;
24	26	id: string;
25	27	align: ElementAlignment;
		@@ -27,8 +29,10 @@
27	29	url: string;
28	30	target: "_blank" | "_self";
29	31	};
30	32	styles: {
	33	+ /** Filled like the core Buttons block, or just an outline of it. */
	34	+ variant: ButtonVariant;
31	35	backgroundColor: string;
32	36	textColor: string;
33	37	backgroundHoverColor: string;
34	38	textHoverColor: string;
		@@ -62,8 +66,9 @@
62	66	url: "",
63	67	target: "_self",
64	68	},
65	69	styles: {
	70	+ variant: "fill",
66	71	backgroundColor: "#000000",
67	72	textColor: "#ffffff",
68	73	backgroundHoverColor: "",
69	74	textHoverColor: "",
		@@ -80,9 +85,10 @@
80	85	topRight: "4px",
81	86	bottomRight: "4px",
82	87	bottomLeft: "4px",
83	88	},
84		- fontSize: "1.38rem",
	89	+ // Inherited from the table unless the user sets one.
	90	+ fontSize: "",
85	91	},
86	92	};
87	93
88	94	export interface ButtonElementType {
		@@ -90,8 +96,47 @@
90	96	attributes: ButtonElementAttributes;
91	97	bindings?: ElementBindings;
92	98	}
93	99
	100	+/**
	101	+ * What a button paints with, in either variant.
	102	+ *
	103	+ * Filled is the plain case: the background colour behind the text colour.
	104	+ * Outline swaps that around, the way the core Buttons block does: nothing
	105	+ * behind the text, and the button's colour moves to the text and a border
	106	+ * around it. Hover then fills it in, so the text colour is readable again.
	107	+ */
	108	+export function getButtonVariantStyles(
	109	+ styles: Pick<
	110	+ ButtonElementAttributes["styles"],
	111	+ | "variant"
	112	+ | "backgroundColor"
	113	+ | "textColor"
	114	+ | "backgroundHoverColor"
	115	+ | "textHoverColor"
	116	+ >
	117	+) {
	118	+ const isOutline = styles.variant === "outline";
	119	+
	120	+ return {
	121	+ vars: {
	122	+ "--tableberg-button-background-color": isOutline
	123	+ ? "transparent"
	124	+ : styles.backgroundColor,
	125	+ "--tableberg-button-text-color": isOutline
	126	+ ? styles.backgroundColor
	127	+ : styles.textColor,
	128	+ "--tableberg-button-hover-background-color":
	129	+ styles.backgroundHoverColor || styles.backgroundColor,
	130	+ "--tableberg-button-text-hover-color":
	131	+ styles.textHoverColor || styles.textColor,
	132	+ },
	133	+ border: isOutline
	134	+ ? `2px solid ${styles.backgroundColor}`
	135	+ : undefined,
	136	+ };
	137	+}
	138	+
94	139	function getLegacyCustomWidthStyle(
95	140	width: ButtonElementAttributes["styles"]["width"]
96	141	): string | undefined {
97	142	switch (width) {
		@@ -150,18 +195,15 @@
150	195	const contentIsBound = !!bindings?.content;
151	196	const { content, align, styles } = buttonAttributes;
152	197	const customWidth = getLegacyCustomWidthStyle(styles.width);
153	198
	199	+ const variantStyles = getButtonVariantStyles(styles);
	200	+
154	201	const wrapperStyleCss: Record<string, string | undefined> = {
155	202	"display": "flex",
156	203	"justifyContent": elementAlignmentToJustifyContent(align),
157	204	"width": customWidth ? "100%" : undefined,
158		- "--tableberg-button-background-color": styles.backgroundColor,
159		- "--tableberg-button-text-color": styles.textColor,
160		- "--tableberg-button-hover-background-color":
161		- styles.backgroundHoverColor || styles.backgroundColor,
162		- "--tableberg-button-text-hover-color":
163		- styles.textHoverColor || styles.textColor,
	205	+ ...variantStyles.vars,
164	206	};
165	207
166	208	const customWidthWrapperStyleCss: Record<string, string | undefined> = {
167	209	width: customWidth,
		@@ -171,8 +213,9 @@
171	213	};
172	214
173	215	const buttonStyleCss: Record<string, string | undefined> = {
174	216	display: "inline-block",
	217	+ border: variantStyles.border,
175	218	textAlign: styles.textAlign,
176	219	fontSize: styles.fontSize,
177	220	paddingTop: styles.padding.top,
178	221	paddingRight: styles.padding.right,