Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add button link as styles function, introduce tailwind-merge #593

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add button link as styles function, introduce tailwind-merge #593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76049bd
Add button link as styles function, introduce tailwind-merge
DTCurrie Oct 28, 2024
89b49d5
Updates with options and deduped
DTCurrie Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@
"lodash-es": "^4.17.21",
"nanoid": "^5.0.4",
"prism-themes": "^1.9.0",
"prismjs": "^1.29.0"
"prismjs": "^1.29.0",
"tailwind-merge": "^2.5.4"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
Expand Down
13 changes: 13 additions & 0 deletions packages/core/prime.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,16 @@ button {
:host([hidden]) {
display: none;
}

/* Just give me the CSS classes option */
.button-link {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it doesn't look like anything here is related to link, should we just call this .button? My assumption when looking at this name is that it's a special collection for link buttons, when it's just the primary button styles.

@apply flex h-7.5 items-center gap-1.5 whitespace-nowrap px-3 py-1.5 text-xs;
}

.button-link-ghost {
@apply button-link text-default hover:bg-ghost-light active:bg-ghost-medium;
}

.button-link-dark {
@apply button-link border border-gray-9 bg-gray-9 text-white hover:border-black hover:bg-black active:bg-[#000];
}
46 changes: 46 additions & 0 deletions packages/core/src/lib/button/button-link.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* Link styled to look like a button.
*
* Currently, only the "ghost" variant is implemented.
*
* @function
*/

import { twJoin, twMerge, type ClassNameValue } from 'tailwind-merge';

export type ButtonLinkVariant = 'ghost' | 'dark';

export interface ButtonLinkAttributes {
variant?: ButtonLinkVariant;
extraClasses?: ClassNameValue;
}

const BUTTON_LINK_CLASSES =
'flex h-7.5 items-center gap-1.5 whitespace-nowrap px-3 py-1.5 text-xs';

const BUTTON_LINK_VARIANT_CLASSES = {
ghost: 'text-default hover:bg-ghost-light active:bg-ghost-medium',
dark: 'border border-gray-9 bg-gray-9 text-white hover:border-black hover:bg-black active:bg-[#000]',
} as const;

// Just export the classes option (I can handle overrides myself)
export const BUTTON_LINK_GHOST = twJoin(
BUTTON_LINK_CLASSES,
BUTTON_LINK_VARIANT_CLASSES.ghost
);

export const BUTTON_LINK_DARK = twJoin(
BUTTON_LINK_CLASSES,
BUTTON_LINK_VARIANT_CLASSES.dark
);

// Give me a function to generate the classes function (allows overrides)
export const buttonLinkStyles = ({
variant = 'ghost',
extraClasses = '',
}: ButtonLinkAttributes) =>
twMerge(
BUTTON_LINK_CLASSES,
BUTTON_LINK_VARIANT_CLASSES[variant],
extraClasses
);
1 change: 1 addition & 0 deletions packages/core/src/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export { default as Badge } from './badge.svelte';
export { Banner, BannerVariant, type BannerVariantType } from './banner';
export { default as Breadcrumbs } from './breadcrumbs.svelte';
export { default as Button } from './button/button.svelte';
export * from './button/button-link';
export { default as IconButton } from './button/icon-button.svelte';
export { clickOutside } from './click-outside';
export { default as CodeSnippet } from './code-snippet.svelte';
Expand Down
176 changes: 148 additions & 28 deletions packages/core/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,58 @@
<script lang="ts">
import { uniqueId } from 'lodash-es';
import {
provideNotify,
useNotify,
provideToast,
ToastVariant,
Badge,
Banner,
Breadcrumbs,
Button,
IconButton,
buttonLinkStyles,
CodeSnippet,
ContextMenu,
ContextMenuItem,
ContextMenuSeparator,
FloatingMenu,
Icon,
Label,
Banner,
IconButton,
Input,
Label,
Modal,
Multiselect,
NotificationContainer,
NumericInput,
Pill,
Switch,
Progress,
Radio,
TabsBar,
Tab,
Tooltip,
TooltipContainer,
TooltipTarget,
TooltipText,
TextInput,
NumericInput,
RangeInput,
RestrictedTextInput,
SearchableSelect,
Select,
SliderInput,
VectorInput,
Switch,
Tab,
Table,
TableBody,
TableCell,
TableHeaderCell,
TableHeader,
TableHeaderCell,
TableRow,
TabsBar,
TextInput,
ToastBanner,
ToastContainer,
ToastVariant,
ToggleButtons,
Select,
SearchableSelect,
Multiselect,
NotificationContainer,
provideNotify,
provideToast,
useNotify,
Modal,
CodeSnippet,
RangeInput,
Progress,
Tooltip,
TooltipContainer,
TooltipTarget,
TooltipText,
VectorInput,
BUTTON_LINK_GHOST,
BUTTON_LINK_DARK,
} from '$lib';
import { uniqueId } from 'lodash-es';
import { twMerge } from 'tailwind-merge';

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some import sorting.

provideNotify();

Expand Down Expand Up @@ -193,7 +197,6 @@ console.log(\`The FizzBuzz sequence for n = 15 is:\`);
console.log(sequence); // Outputs: ["1", "2", "Fizz", "4", "Buzz", "Fizz", "7", "8", "Fizz", "Buzz", "11", "Fizz", "13", "14", "FizzBuzz"]`.trim();

const goSnippet = `
import "fmt"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The linter actually hates this, will fix later.


// FizzBuzz
//
Expand Down Expand Up @@ -465,6 +468,123 @@ const onHoverDelayMsInput = (event: Event) => {

<NotificationContainer />

<div class="container mx-auto my-4 flex flex-col gap-8 p-4">
<h2 class="h-2">With a function</h2>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this cool thing:</p>
<a
href="https://design.viam.com"
target="_blank"
rel=""
class={buttonLinkStyles({})}
>
My button link
</a>
</div>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this cool thing with an icon:</p>
<a
href="https://design.viam.com"
target="_blank"
class={buttonLinkStyles({ variant: 'dark' })}
>
<Icon name="link" />
My button link
</a>
</div>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this pink thing:</p>
<a
href="https://design.viam.com"
target="_blank"
class={buttonLinkStyles({ extraClasses: 'text-pink-500' })}
>
My button link
</a>
</div>
</div>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will create a better example if we decide to go this way.

<div class="container mx-auto my-4 flex flex-col gap-8 p-4">
<h2 class="h-2">With class exports</h2>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this cool thing:</p>
<a
href="https://design.viam.com"
target="_blank"
rel=""
class={BUTTON_LINK_GHOST}
>
My button link
</a>
</div>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this cool thing with an icon:</p>
<a
href="https://design.viam.com"
target="_blank"
class={BUTTON_LINK_DARK}
>
<Icon name="link" />
My button link
</a>
</div>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this pink thing:</p>
<a
href="https://design.viam.com"
target="_blank"
class={twMerge(BUTTON_LINK_GHOST, 'text-pink-500')}
>
My button link
</a>
</div>
</div>

<div class="container mx-auto my-4 flex flex-col gap-8 p-4">
<h2 class="h-2">With class definitions</h2>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this cool thing:</p>
<a
href="https://design.viam.com"
target="_blank"
rel=""
class="button-link-ghost"
>
My button link
</a>
</div>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this cool thing with an icon:</p>
<a
href="https://design.viam.com"
target="_blank"
class="button-link-dark"
>
<Icon name="link" />
My button link
</a>
</div>

<div class="flex items-center gap-2">
<p class="text-xs">Check out this pink thing:</p>
<a
href="https://design.viam.com"
target="_blank"
class="button-link-ghost !text-pink-500"
>
My button link
</a>
</div>
</div>

<div class="container mx-auto my-4 flex flex-col gap-8 p-4">
<!-- Badge -->
<h1 class="text-2xl">Badge</h1>
Expand Down
Loading
Loading