diff --git a/pkgs/clan-app/ui/src/components/Button/Button.mdx b/pkgs/clan-app/ui/src/components/Button/Button.mdx index b9ee681d9..27c4f4a86 100644 --- a/pkgs/clan-app/ui/src/components/Button/Button.mdx +++ b/pkgs/clan-app/ui/src/components/Button/Button.mdx @@ -8,14 +8,14 @@ import * as ButtonStories from "./Button.stories"; Buttons have a simple hierarchy, `primary` or `secondary`, and two sizes, `default` and `s`. -A `Button` can also have a label with a `startIcon`, an `endIcon` or both: +A `Button` can also have a label with a `icon`, an `endIcon` or both: ```tsx
-
@@ -70,7 +65,7 @@ const ButtonExamples: Component = (props) => ( @@ -115,14 +118,17 @@ export const HostFileInput = (props: HostFileInputProps) => { diff --git a/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css b/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css index a9c31fdfb..bc407ba68 100644 --- a/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css +++ b/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css @@ -20,16 +20,6 @@ @apply w-full relative; } -.icon { - @apply absolute left-1.5; - top: calc(50% - 0.5rem); - - &.iconSmall { - @apply left-[0.3125rem] size-[0.75rem]; - top: calc(50% - 0.3125rem); - } -} - .input { @apply outline outline-1 outline-def-acc-1 bg-def-1 fg-def-1 w-full; @apply px-[1.625rem] py-1.5 rounded-sm; diff --git a/pkgs/clan-app/ui/src/components/Form/MachineTags.tsx b/pkgs/clan-app/ui/src/components/Form/MachineTags.tsx index b6676349b..23aff5c03 100644 --- a/pkgs/clan-app/ui/src/components/Form/MachineTags.tsx +++ b/pkgs/clan-app/ui/src/components/Form/MachineTags.tsx @@ -17,6 +17,7 @@ import { Label } from "@/src/components/Form/Label"; import { Orienter } from "@/src/components/Form/Orienter"; import { CollectionNode } from "@kobalte/core"; import styles from "./MachineTags.module.css"; +import { keepTruthy } from "@/src/util"; export interface MachineTag { value: string; @@ -247,9 +248,10 @@ export const MachineTags = (props: MachineTagsProps) => { icon="Tag" color="secondary" inverted={props.inverted} - class={cx(styles.icon, { - [styles.iconSmall]: props.size == "s", - })} + in={keepTruthy( + "MachineTags", + props.size == "s" && "MachineTags-s", + )} /> > = { ClanIcon: "0 0 72 89", }; +type In = + | "Button" + | "Button-primary" + | "Button-secondary" + | "Button-s" + | "Button-xs" + | "MachineTags" + | "MachineTags-s" + | "ConfigureRole" + // TODO: better name + | "WorkflowPanelTitle"; export interface IconProps extends JSX.SvgSVGAttributes { icon: IconVariant; - class?: string; size?: number | string; color?: Color; inverted?: boolean; + in?: In | In[]; } const Icon: Component = (props) => { - const [local, iconProps] = splitProps(props, [ - "icon", - "color", - "class", - "size", - "inverted", - ]); - - const IconComponent = () => icons[local.icon]; - + const [local, iconProps] = splitProps( + mergeProps({ color: "primary", size: "1em" } as const, props), + ["icon", "color", "size", "inverted", "in"], + ); + const component = () => icons[local.icon]; // we need to adjust the view box for certain icons - const viewBox = () => viewBoxes[local.icon] ?? "0 0 48 48"; - - return IconComponent() ? ( + const viewBox = () => viewBoxes[local.icon] || "0 0 48 48"; + return ( - ) : undefined; + ); }; export default Icon; diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.module.css b/pkgs/clan-app/ui/src/components/Loader/Loader.module.css index 3ff796fb4..59036dcd1 100644 --- a/pkgs/clan-app/ui/src/components/Loader/Loader.module.css +++ b/pkgs/clan-app/ui/src/components/Loader/Loader.module.css @@ -53,6 +53,16 @@ animation: moveLoaderChild 1.8s ease-in-out infinite; } +.loader.in-Button { + /* FIXME: using hidden prevents transition from working, but without it, flex + creates a gap for it */ + @apply hidden w-0 opacity-0 transition-all duration-500 ease-linear; + + &.loading { + @apply block w-4 opacity-100 mr-[revert]; + } +} + @keyframes moveLoaderWrapper { 0% { transform: translate(0%, 0%) rotate(-45deg); diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx index 70044074e..f6f79f617 100644 --- a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx +++ b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx @@ -1,4 +1,5 @@ // Loader.tsx +import { mergeProps } from "solid-js"; import styles from "./Loader.module.css"; import cx from "classnames"; @@ -6,23 +7,28 @@ export type Hierarchy = "primary" | "secondary"; export interface LoaderProps { hierarchy?: Hierarchy; - class?: string; size?: "default" | "l" | "xl"; + loading?: boolean; + in?: "Button"; } export const Loader = (props: LoaderProps) => { - const size = () => props.size || "default"; + const local = mergeProps( + { hierarchy: "primary", size: "default", loading: false } as const, + props, + ); return (
diff --git a/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx b/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx index c2ef728e9..676b44d15 100644 --- a/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Search/Search.stories.tsx @@ -189,6 +189,7 @@ export const Multiple: Story = { // Test with lots of modules options: machinesAndTags, placeholder: "Search for Machine or Tags", + values: [], renderItem: (item: MachineOrTag, opts: ItemRenderOptions) => { console.log("Rendering item:", item, "opts", opts); return ( @@ -223,12 +224,13 @@ export const Multiple: Story = { )} - +
+ +
); }, diff --git a/pkgs/clan-app/ui/src/components/Search/TagSelect.tsx b/pkgs/clan-app/ui/src/components/Search/TagSelect.tsx index 4fb798fba..320cbc8d9 100644 --- a/pkgs/clan-app/ui/src/components/Search/TagSelect.tsx +++ b/pkgs/clan-app/ui/src/components/Search/TagSelect.tsx @@ -41,8 +41,8 @@ export function TagSelect( icon="Settings" hierarchy="primary" ghost - class="ml-auto" size="xs" + in="TagSelect" /> diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx index 1844eb506..91bab4813 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx @@ -102,7 +102,7 @@ const Machines = () => { +
+ +
setShowModal(false)} /> @@ -113,7 +114,7 @@ const welcome = (props: { }; return ( -
+
Start building -
+
= (props) => { }; return ( -
+
{background({ form: setupForm, state: state() })} -
+
{welcome({ @@ -298,8 +299,8 @@ export const Onboarding: Component = (props) => { -
-
+
+
@@ -882,8 +882,9 @@ const InstallProgress = () => {