fix: removing spacing component (#837)

.release-please-manifest.json

@@ -16,7 +16,6 @@
 	"packages/ui-modal": "1.1.1",
 	"packages/ui-panel": "1.2.4",
 	"packages/ui-pill": "1.4.1",
-	"packages/ui-spacing": "1.1.1",
 	"packages/ui-spinner": "1.4.1",
 	"packages/ui-styles": "1.15.0",
 	"packages/ui-svgicon": "1.1.1",

packages/api/src/helpers/constants.ts

@@ -1,5 +1,5 @@
 export const commonControlsSetup = {
 	parameters: {
-		controls: { exclude: ["spacing"], sort: "requiredFirst" },
+		controls: { sort: "requiredFirst" },
 	},
 };

packages/documentation/.ladle/components.tsx

@@ -91,7 +91,7 @@ export const Provider: GlobalProvider = ({
 							noBorder
 							size="small"
 							mode="system"
-							spacing={{ b: 2 }}
+							className="mb-2"
 							label="link to UI Components GitHub repository"
 							onClick={handleOnClickGitHub}
 						>

packages/documentation/src/Components/Bubble.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 export const Basic: Story<any> = (args) => (
 	<div className="h-96 min-h-10 bg-slate-900 p-11">
-		<Bubble kind="right" spacing={{ b: 4 }} {...args}>
+		<Bubble kind="right" className="mb-4" {...args}>
 			Right bubble...
 		</Bubble>
 
@@ -22,7 +22,7 @@ export const Basic: Story<any> = (args) => (
 
 export const LongText: Story<any> = (args) => (
 	<div className="h-full min-h-10 bg-slate-900 p-11">
-		<Bubble kind="right" spacing={{ b: 4 }} {...args}>
+		<Bubble kind="right" className="mb-4" {...args}>
 			I have Vodka, St Germain and Grapefruit Juice. Can you suggest a few
 			cocktails I can make with these ingredients?
 		</Bubble>
@@ -86,7 +86,7 @@ export const WithFooter: Story<any> = (args) => (
 	<div className="h-96 min-h-10 bg-slate-900 p-11">
 		<Bubble
 			kind="right"
-			spacing={{ b: 4 }}
+			className="mb-4"
 			footer={{
 				Model: "gpt-4-1106-preview",
 			}}
@@ -115,7 +115,7 @@ export const WithRawFooter: Story<any> = (args) => {
 		<div className="h-96 min-h-10 bg-slate-900 p-11">
 			<Bubble
 				kind="right"
-				spacing={{ b: 4 }}
+				className="mb-4"
 				rawFooter={
 					<p className={rawFooterClasses}>Model: gpt-4-1106-preview</p>
 				}
@@ -145,21 +145,21 @@ export const Copy: Story<any> = (args) => {
 	const string = "DOM element with string";
 	return (
 		<div className=" bg-slate-900 h-full min-h-10 p-11">
-			<Bubble kind="right" spacing={{ b: 4 }} copyToClipboard {...args}>
+			<Bubble kind="right" className="mb-4" copyToClipboard {...args}>
 				Right bubble...
 			</Bubble>
 
-			<Bubble kind="left" spacing={{ b: 4 }} copyToClipboard {...args}>
+			<Bubble kind="left" className="mb-4" copyToClipboard {...args}>
 				Pure string with boolean
 			</Bubble>
 
-			<Bubble kind="left" spacing={{ b: 4 }} copyToClipboard {...args}>
+			<Bubble kind="left" className="mb-4" copyToClipboard {...args}>
 				<div>DOM element with boolean</div>
 			</Bubble>
 
 			<Bubble
 				kind="left"
-				spacing={{ b: 4 }}
+				className="mb-4"
 				copyToClipboard={() => {
 					navigator.clipboard.writeText("DOM element with function");
 				}}

packages/documentation/src/Components/Menu.stories.tsx

@@ -56,7 +56,7 @@ export default {
 
 export const Basic: Story<any> = (args) => (
 	<div className="flex h-96 min-h-10 flex-wrap p-11">
-		<Button size="small" noBorder spacing={{ r: 2 }}>
+		<Button size="small" noBorder className="mr-2">
 			Button
 		</Button>
 		<Menu
@@ -65,7 +65,7 @@ export const Basic: Story<any> = (args) => (
 					<IconSettings />
 				</ButtonIcon>
 			}
-			spacing={{ r: 2 }}
+			className="mr-2"
 			{...args}
 		>
 			<MenuItem label="Profile" />
@@ -81,7 +81,7 @@ export const Basic: Story<any> = (args) => (
 
 export const WithIcons: Story<any> = (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
@@ -90,7 +90,7 @@ export const WithIcons: Story<any> = (args) => (
 					<IconSettings />
 				</ButtonIcon>
 			}
-			spacing={{ r: 2 }}
+			className="mr-2"
 			{...args}
 		>
 			<MenuItem label="Profile" icon={<IconProfile />} />
@@ -134,7 +134,7 @@ export const WithMessageBox: Story<any> = (args) => {
 				<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
@@ -143,7 +143,7 @@ export const WithMessageBox: Story<any> = (args) => {
 							<IconSettings />
 						</ButtonIcon>
 					}
-					spacing={{ r: 2 }}
+					className="mr-2"
 					{...args}
 				>
 					<MenuItem label="Profile" icon={<IconProfile />} />
@@ -171,7 +171,7 @@ export const RawItem: Story<any> = (args) => {
 	const [value, setValue] = useState("Anthropic");
 	return (
 		<div className="flex h-96 min-h-10 flex-wrap p-11">
-			<Button size="small" noBorder spacing={{ r: 2 }}>
+			<Button size="small" noBorder className="mr-2">
 				Button
 			</Button>
 			<Menu
@@ -180,7 +180,7 @@ export const RawItem: Story<any> = (args) => {
 						<IconSettings />
 					</ButtonIcon>
 				}
-				spacing={{ r: 2 }}
+				className="mr-2"
 				{...args}
 			>
 				<MenuItem label="Profile" />

packages/documentation/src/Form/Toggle.stories.tsx

@@ -50,7 +50,7 @@ export const Programmatically: Story<any> = (args) => {
 				{...args}
 				labelHidden
 			/>
-			<Button spacing={{ t: 5 }} onClick={() => setChecked(!checked)}>
+			<Button className="mt-5" onClick={() => setChecked(!checked)}>
 				Toggle
 			</Button>
 		</>

packages/documentation/src/Form/ToggleGroup.stories.tsx

@@ -40,7 +40,7 @@ export const Basic: Story<any> = (args) => {
 				</ToggleGroup>
 			</div>
 			<div className="flex flex-wrap gap-2">
-				<ToggleGroup {...args} defaultValue="Anthropic" spacing={{ t: 2 }}>
+				<ToggleGroup {...args} defaultValue="Anthropic" className="mt-2">
 					<ToggleGroupItem value="OpenAI" />
 					<ToggleGroupItem value="Anthropic" />
 				</ToggleGroup>

packages/documentation/src/Styles/Typography.stories.tsx

@@ -167,10 +167,10 @@ const CommonTemplate = ({
 					</p>
 					<p>
 						I often have two or three paragraphs in these list items, too, so
-						the hard part is getting the spacing between the paragraphs, list
-						item heading, and separate list items to all make sense. Pretty
-						tough honestly, you could make a strong argument that you just
-						shouldn't write this way.
+						the hard part is getting the space between the paragraphs, list item
+						heading, and separate list items to all make sense. Pretty tough
+						honestly, you could make a strong argument that you just shouldn't
+						write this way.
 					</p>
 				</li>
 				<li>

packages/documentation/src/System/Flexgrid.stories.tsx

@@ -220,7 +220,7 @@ export const Responsive: Story<any> = (args) => {
 			<p className="text-copy-lighter">{example}</p>
 			<Flexgrid {...args}>
 				<FlexgridItem span={{ fallback: 12, sm: 6, md: 8 }}>
-					<Card spacing={{ t: 2 }}>
+					<Card className="mt-2">
 						<p className="text-center">Responsive Card</p>
 					</Card>
 				</FlexgridItem>

packages/ui-bubble/src/components/Bubble/__tests__/Bubble.test.tsx

@@ -13,7 +13,7 @@ describe("Bubble (exceptions)", () => {
 });
 
 describe("Bubble spacing", () => {
-	it("should render a button with a right margin spacing", async () => {
+	it("should render a bubble with a right margin spacing", async () => {
 		render(<Bubble className="mr-2">hello</Bubble>);
 		const bubble = await screen.findByText("hello");
 		// not only it should be there, but it should be the last entry

packages/ui-button/src/components/Button/__tests__/ButtonIcon.test.tsx

@@ -8,7 +8,6 @@ import { ButtonIcon } from "../ButtonIcon";
 const IconSettings = ({
 	className,
 	viewBox,
-	spacing,
 	title,
 	monotone,
 	...rest
@@ -19,7 +18,6 @@ const IconSettings = ({
 			defaultClassName="size-5"
 			viewBox={viewBox}
 			className={className}
-			spacing={spacing}
 			title={title || "Settings"}
 			{...rest}
 		>

packages/ui-button/src/components/private/__tests__/ButtonSort.test.tsx

@@ -9,7 +9,6 @@ import { ButtonSort_private as ButtonSort } from "../ButtonSort";
 const IconSettings = ({
 	className,
 	viewBox,
-	spacing,
 	title,
 	monotone,
 	...rest
@@ -20,7 +19,6 @@ const IconSettings = ({
 			defaultClassName="size-5"
 			viewBox={viewBox}
 			className={className}
-			spacing={spacing}
 			title={title || "Settings"}
 			{...rest}
 		>

packages/ui-card/src/components/Card/__tests__/Card.test.tsx

@@ -13,7 +13,7 @@ describe("Card (exceptions)", () => {
 });
 
 describe("Card spacing", () => {
-	it("should render a button with a right margin spacing", async () => {
+	it("should render a card with a right margin spacing", async () => {
 		const { container } = render(<Card className="mr-2">{cardContent}</Card>);
 		const card = container.children[0];
 		// not only it should be there, but it should be the last entry

packages/ui-icons/src/components/Icons/IconDog.tsx

@@ -2,12 +2,7 @@ import { SvgIcon } from "@versini/ui-svgicon";
 
 import type { IconsProps } from "./IconsTypes";
 
-export const IconDog = ({
-	className,
-	viewBox,
-	spacing,
-	...rest
-}: IconsProps) => {
+export const IconDog = ({ className, viewBox, ...rest }: IconsProps) => {
 	return (
 		<SvgIcon
 			defaultViewBox="0 0 1200 500"

packages/ui-icons/src/components/Icons/IconsTypes.d.ts

@@ -1,8 +1,4 @@
-import type { SpacingTypes } from "@versini/ui-types";
-
-export interface IconsProps
-	extends Omit<React.SVGAttributes<SVGElement>, "spacing">,
-		SpacingTypes.Props {
+export interface IconsProps extends React.SVGAttributes<SVGElement> {
 	/**
 	 * Whether or not to render the icon in a single color
 	 * @default false

packages/ui-icons/src/components/Icons/__tests__/Icons.test.tsx

@@ -28,9 +28,6 @@ describe("Custom IconDog prop tests", () => {
 		fill         | viewBox          | className    | description
 		${"red"}     | ${"0 0 666 666"} | ${"toto"}    | ${"with fill, viewBox and className"}
 		${undefined} | ${undefined}     | ${undefined} | ${"with default fill, default viewBox and default className"}
-		${undefined} | ${undefined}     | ${undefined} | ${"with string spacing"}
-		${undefined} | ${undefined}     | ${undefined} | ${"with number spacing"}
-		${undefined} | ${undefined}     | ${undefined} | ${"with object spacing"}
 	`(
 		"should render IconDog $description",
 		async ({ fill, viewBox, className }) => {
@@ -58,9 +55,6 @@ describe("Generic Icons prop tests", () => {
 		fill         | viewBox          | className    | description
 		${"red"}     | ${"0 0 666 666"} | ${"toto"}    | ${"with fill, viewBox and className"}
 		${undefined} | ${undefined}     | ${undefined} | ${"with default fill, default viewBox and default className"}
-		${undefined} | ${undefined}     | ${undefined} | ${"with string spacing"}
-		${undefined} | ${undefined}     | ${undefined} | ${"with number spacing"}
-		${undefined} | ${undefined}     | ${undefined} | ${"with object spacing"}
 	`(
 		"should render Icons $description",
 		async ({ fill, viewBox, className }) => {

packages/ui-main/src/components/Main/__tests__/Main.test.tsx

@@ -10,7 +10,7 @@ describe("Main (exceptions)", () => {
 });
 
 describe("Main spacing", () => {
-	it("should render a button with a right margin spacing", async () => {
+	it("should render a main tag with a right margin spacing", async () => {
 		render(<Main className="mr-2">hello</Main>);
 		const main = await screen.findByRole("main");
 		// not only it should be there, but it should be the last entry

packages/ui-menu/src/components/Menu/__tests__/Menu.test.tsx

@@ -17,7 +17,6 @@ const ButtonIcon = ({
 	noInternalClick,
 	focusMode,
 	mode,
-	spacing,
 	...props
 }: any) => <button {...props}>{children}</button>;
 ButtonIcon.displayName = "ButtonIcon";