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

use tailwind components layer #13983

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
+83 −65
Draft

use tailwind components layer #13983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 5 additions & 65 deletions libs/components/src/button/button.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,6 @@ import { debounce, interval } from "rxjs";

import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";

const focusRing = [
"focus-visible:tw-ring-2",
"focus-visible:tw-ring-offset-2",
"focus-visible:tw-ring-primary-600",
"focus-visible:tw-z-10",
];

const buttonStyles: Record<ButtonType, string[]> = {
primary: [
"tw-border-primary-600",
"tw-bg-primary-600",
"!tw-text-contrast",
"hover:tw-bg-primary-700",
"hover:tw-border-primary-700",
...focusRing,
],
secondary: [
"tw-bg-transparent",
"tw-border-primary-600",
"!tw-text-primary-600",
"hover:tw-bg-primary-600",
"hover:tw-border-primary-600",
"hover:!tw-text-contrast",
...focusRing,
],
danger: [
"tw-bg-transparent",
"tw-border-danger-600",
"!tw-text-danger",
"hover:tw-bg-danger-600",
"hover:tw-border-danger-600",
"hover:!tw-text-contrast",
...focusRing,
],
unstyled: [],
};

@Component({
selector: "button[bitButton], a[bitButton]",
templateUrl: "button.component.html",
Expand All @@ -58,34 +21,11 @@ const buttonStyles: Record<ButtonType, string[]> = {
export class ButtonComponent implements ButtonLikeAbstraction {
@HostBinding("class") get classList() {
return [
"tw-font-semibold",
"tw-py-1.5",
"tw-px-3",
"tw-rounded-full",
"tw-transition",
"tw-border-2",
"tw-border-solid",
"tw-text-center",
"tw-no-underline",
"hover:tw-no-underline",
"focus:tw-outline-none",
]
.concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
.concat(buttonStyles[this.buttonType ?? "secondary"])
.concat(
this.showDisabledStyles() || this.disabled()
? [
"disabled:tw-bg-secondary-300",
"disabled:hover:tw-bg-secondary-300",
"disabled:tw-border-secondary-300",
"disabled:hover:tw-border-secondary-300",
"disabled:!tw-text-muted",
"disabled:hover:!tw-text-muted",
"disabled:tw-cursor-not-allowed",
"disabled:hover:tw-no-underline",
]
: [],
);
"bit-btn",
this.buttonType ?? "secondary",
this.block ? "block" : "",
this.showDisabledStyles() || this.disabled() ? "disabled" : "",
];
}

protected disabledAttr = computed(() => {
Expand Down
12 changes: 12 additions & 0 deletions libs/components/src/button/button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,3 +120,15 @@
block: true,
},
};

export const VanillaButton: Story = {
render: (args) => ({

Check warning on line 125 in libs/components/src/button/button.stories.ts

View check run for this annotation

Codecov / codecov/patch

libs/components/src/button/button.stories.ts#L124-L125 

Added lines #L124 - L125 were not covered by tests
props: args,
template: /*html*/ `
<button class="bit-btn {{ buttonType }}">Button</button>
`,
}),
args: {
buttonType: "primary",
},
};
66 changes: 66 additions & 0 deletions libs/components/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,69 @@
html {
font-size: 16px;
}

@layer components {
.focus-ring {
@apply focus-visible:tw-ring-2
focus-visible:tw-ring-offset-2
focus-visible:tw-ring-primary-600
focus-visible:tw-z-10;
}

.bit-btn {
@apply tw-font-semibold
tw-py-1.5
tw-px-3
tw-rounded-full
tw-transition
tw-border-2
tw-border-solid
tw-text-center
tw-no-underline
hover:tw-no-underline
focus:tw-outline-none
tw-inline-block
focus-ring;

&.block {
@apply tw-w-full tw-block;
}

&.primary {
@apply tw-border-primary-600
tw-bg-primary-600
!tw-text-contrast
hover:tw-bg-primary-700
hover:tw-border-primary-700;
}

&.secondary {
@apply tw-bg-transparent
tw-border-primary-600
!tw-text-primary-600
hover:tw-bg-primary-600
hover:tw-border-primary-600
hover:!tw-text-contrast;
}

&.danger {
@apply tw-bg-transparent
tw-border-danger-600
!tw-text-danger
hover:tw-bg-danger-600
hover:tw-border-danger-600
hover:!tw-text-contrast;
}

&.disabled {
@apply disabled:tw-bg-secondary-300
disabled:hover:tw-bg-secondary-300
disabled:tw-border-secondary-300
disabled:hover:tw-border-secondary-300
disabled:!tw-text-muted
disabled:hover:!tw-text-muted
disabled:tw-cursor-not-allowed
disabled:hover:tw-no-underline;
}
}
}
Loading