Skip to content

Commit

Permalink
fix(Button)!: first pass at removing spacing prop from all components (
Browse files Browse the repository at this point in the history
…#817)

BREAKING CHANGE: spacing prop is deprecated - use className and Tailwind
margins instead.

And let consumers use Tailwind margins classes such as mt-2, mr-4, etc
on the className prop directly.
  • Loading branch information
aversini authored Dec 29, 2024
1 parent 900bc75 commit 0d79337
Show file tree
Hide file tree
Showing 13 changed files with 64 additions and 27 deletions.
11 changes: 7 additions & 4 deletions configuration/tailwind.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@

import { twPlugin } from "@versini/ui-styles";

export const commonTailwindConfigForComponent = () => {
return twPlugin.merge({
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
});
export const commonTailwindConfigForComponent = (name) => {
return twPlugin.merge(
{
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
},
name,
);
};
6 changes: 3 additions & 3 deletions packages/api/src/stories/Components/Menu.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const Basic: Story = {
...commonControlsSetup,
render: (args) => (
<div className="flex h-56 flex-wrap p-11">
<Button size="small" noBorder spacing={{ r: 2 }}>
<Button size="small" noBorder className="mr-2">
Button
</Button>
<Menu
Expand Down Expand Up @@ -74,7 +74,7 @@ export const WithIcons: Story = {
...commonControlsSetup,
render: (args) => (
<div className="flex min-h-10 flex-wrap p-11">
<Button size="small" spacing={{ r: 2 }}>
<Button size="small" className="mr-2">
Button
</Button>
<Menu
Expand Down Expand Up @@ -130,7 +130,7 @@ export const WithMessageBox: Story = {
<p>Are you sure you want to log out?</p>
</Panel>
<div className="flex min-h-10 flex-wrap p-11">
<Button size="small" spacing={{ r: 2 }}>
<Button size="small" className="mr-2">
Button
</Button>
<Menu
Expand Down
2 changes: 0 additions & 2 deletions packages/ui-button/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonTypes.Props>(
size = "medium",
raw = false,
noBorder = false,
spacing,
variant = "primary",
noTruncate = false,
radius = "large",
Expand All @@ -35,7 +34,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonTypes.Props>(
className,
size,
noBorder,
spacing,
variant,
noTruncate,
radius,
Expand Down
2 changes: 0 additions & 2 deletions packages/ui-button/src/components/Button/ButtonIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export const ButtonIcon = React.forwardRef<
size = "medium",
labelRight,
labelLeft,
spacing,
noBackground = false,
align = "center",
radius = "large",
Expand All @@ -46,7 +45,6 @@ export const ButtonIcon = React.forwardRef<
size,
labelRight,
labelLeft,
spacing,
noBackground,
align,
radius,
Expand Down
2 changes: 0 additions & 2 deletions packages/ui-button/src/components/Button/ButtonLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export const ButtonLink = React.forwardRef<
target,
noTruncate = false,
noNewWindowIcon = false,
spacing,
radius = "large",

...otherProps
Expand All @@ -38,7 +37,6 @@ export const ButtonLink = React.forwardRef<
className,
size,
noBorder,
spacing,
noTruncate,
radius,
});
Expand Down
5 changes: 1 addition & 4 deletions packages/ui-button/src/components/Button/utilities.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { getSpacing } from "@versini/ui-spacing";
import type { ButtonIconTypes, ButtonTypes } from "@versini/ui-types";
import clsx from "clsx";

Expand Down Expand Up @@ -309,7 +308,6 @@ export const getButtonClasses = ({
noBorder,
labelRight,
labelLeft,
spacing,
noBackground,
variant,
noTruncate,
Expand All @@ -323,8 +321,6 @@ export const getButtonClasses = ({
? clsx(BUTTON_CLASSNAME, className)
: clsx(
BUTTON_CLASSNAME,
className,
getSpacing(spacing),
getButtonBaseClasses({
mode,
variant,
Expand All @@ -341,5 +337,6 @@ export const getButtonClasses = ({
"w-full": fullWidth,
"disabled:cursor-not-allowed disabled:opacity-50": disabled,
},
className,
);
};
2 changes: 0 additions & 2 deletions packages/ui-button/src/components/private/ButtonSort.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export const ButtonSort_private = React.forwardRef<
size = "medium",
labelRight,
labelLeft,
spacing,
noBackground = false,
align = "center",
active = false,
Expand All @@ -47,7 +46,6 @@ export const ButtonSort_private = React.forwardRef<
size,
labelRight,
labelLeft,
spacing,
noBackground,
align,
radius,
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-button/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
export default commonTailwindConfigForComponent();
export default commonTailwindConfigForComponent("ui-button");
38 changes: 38 additions & 0 deletions packages/ui-styles/src/plugins/__tests__/tailwindPlugin.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,42 @@ describe("Non-DOM tests", () => {
expect(mergedConfig.plugins).toContain("plugins");
expect(mergedConfig.plugins).toHaveLength(3);
});

it("should return a custom configuration for button", () => {
const config: any = {};

const mergedConfig = twPlugin.merge(config, "ui-button");
const content = (mergedConfig.content as string[]).join(" ");

expect(content).not.toContain("./src/*.{js,ts,jsx,tsx}");

expect(content).toContain("node_modules/@versini/ui-anchor");
expect(content).toContain("node_modules/@versini/ui-bubble");
expect(content).toContain("node_modules/@versini/ui-button");
expect(content).toContain("node_modules/@versini/ui-card");
expect(content).toContain("node_modules/@versini/ui-footer");
expect(content).toContain("node_modules/@versini/ui-header");
expect(content).toContain("node_modules/@versini/ui-hooks");
expect(content).toContain("node_modules/@versini/ui-icons");
expect(content).toContain("node_modules/@versini/ui-main");
expect(content).toContain("node_modules/@versini/ui-menu");
expect(content).toContain("node_modules/@versini/ui-panel");
expect(content).toContain("node_modules/@versini/ui-pill");
expect(content).toContain("node_modules/@versini/ui-spinner");
expect(content).toContain("node_modules/@versini/ui-system");
expect(content).toContain("node_modules/@versini/ui-table");
expect(content).toContain("node_modules/@versini/ui-textarea");
expect(content).toContain("node_modules/@versini/ui-textinput");
expect(content).toContain("node_modules/@versini/ui-toggle");
expect(content).toContain("node_modules/@versini/ui-components");
expect(content).toContain("node_modules/@versini/ui-form");

expect(mergedConfig.safelist).not.toContain("mt-0");
expect(mergedConfig.safelist).not.toContain("mt-52");
expect(mergedConfig.safelist).not.toContain("mt-53");
expect(mergedConfig.safelist).not.toContain("safelist");

expect(mergedConfig.plugins).not.toContain("plugins");
expect(mergedConfig.plugins).toHaveLength(2);
});
});
13 changes: 11 additions & 2 deletions packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,13 @@ const customPlugins = [
}, customTypography),
];

/**
* List of components that are not relying on the legacy spacing prop
* anymore. They are using the new TailwindCSS classes, and therefore
* don't need to be added to the safelist.
*/
const componentsWithNoSpacingProp = ["ui-button", "ui-truncate"];

/**
* The plugin "merge" function is used to merge the custom configuration with
* the default and user TailwindCSS configuration.
Expand All @@ -89,10 +96,12 @@ const customPlugins = [
* });
*/
export const twPlugin = {
merge: (config: TailwindConfig) => {
merge: (config: TailwindConfig, componentName = "") => {
const content = customContentPath;
const plugins = customPlugins;
const safelist = customSafelist;
const safelist = componentsWithNoSpacingProp.includes(componentName)
? []
: customSafelist;

config.safelist = [...(config.safelist || []), ...safelist];
config.content = [...(config.content || []), ...content];
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-truncate/src/components/Truncate/Truncate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const Truncate = ({
<Button
mode={mode}
focusMode={focusMode}
spacing={{ l: 2 }}
className="ml-2"
size="small"
onClick={handleToggleExpanded}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-truncate/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
export default commonTailwindConfigForComponent();
export default commonTailwindConfigForComponent("ui-truncate");
4 changes: 1 addition & 3 deletions packages/ui-types/src/button.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import type { SpacingTypes } from "./spacing";

type CommonButtonProps = {
/**
* CSS class(es) to add to the main component wrapper.
Expand Down Expand Up @@ -42,7 +40,7 @@ type CommonButtonProps = {
* The rounded style of the Button.
*/
radius?: "small" | "medium" | "large";
} & SpacingTypes.Props;
};

declare namespace ButtonTypes {
export type Props = {
Expand Down

0 comments on commit 0d79337

Please sign in to comment.