Skip to content

Button Border Fix #13

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

Merged
milkybytes merged 2 commits into from
Mar 30, 2026
Merged

Button Border Fix #13

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
296633e
fixing an issue that caused the bottom border of buttons to not prope…
milkybytes Mar 30, 2026
3403953
making the demo more presentable, prettying up some of the code blocks
milkybytes Mar 30, 2026
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
10 changes: 6 additions & 4 deletions demo/src/App.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,19 +107,19 @@
/* ── Example block: preview + code ─────────────────────────────── */
.example {
display: flex;
gap: 1.5rem;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}

.preview {
min-width: 0;
max-width: 100%;
max-width: 400px;
}

.codeBlock {
min-width: 0;
width: 100%;
padding: 1rem 1.25rem;
background: #011627;
border: 1px solid rgba(255, 255, 255, 0.08);
Expand All @@ -128,6 +128,8 @@
line-height: 1.55;
color: #d6deeb;
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
box-sizing: border-box;
overflow-x: auto;

>pre {
width: max-content;
Expand Down
10 changes: 5 additions & 5 deletions demo/src/examples/ThemingExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default function ThemingExample({ theme, onThemeChange }: { theme: string
</p>

<h3 className={styles.subTitle}>CSS only (no provider needed)</h3>
<div className={styles.example} style={{ flexDirection: 'column' }}>
<div className={styles.example}>
<div className={styles.preview}>
<p className={styles.sectionDesc} style={{ marginBottom: 0 }}>
The simplest approach, no React context required.
Expand All @@ -97,8 +97,8 @@ export default function ThemingExample({ theme, onThemeChange }: { theme: string
</div>

<h3 className={styles.subTitle}>WfuiProvider + useWfuiTheme</h3>
<div className={styles.example} style={{ flexDirection: 'column' }}>
<div className={styles.preview}>
<div className={styles.example}>
<div className={styles.preview} style={{ maxWidth: '100%' }}>
<WfuiProvider theme={theme} onThemeChange={onThemeChange}>
<ThemeConsumer />
</WfuiProvider>
Expand Down Expand Up @@ -137,7 +137,7 @@ function MyContent() {
</div>

<h3 className={styles.subTitle}>useWfuiThemeVars</h3>
<div className={styles.example} style={{ flexDirection: 'column' }}>
<div className={styles.example}>
<div className={styles.preview}>
<p className={styles.sectionDesc} style={{ marginBottom: 0 }}>
Read resolved CSS variable values to use in inline styles or logic.
Expand All @@ -157,7 +157,7 @@ function MyComponent() {
</div>

<h3 className={styles.subTitle}>Custom Theme (registerTheme)</h3>
<div className={styles.example} style={{ flexDirection: 'column' }}>
<div className={styles.example}>
<div className={styles.preview}>
<p className={styles.sectionDesc} style={{ marginBottom: 0 }}>
Click <strong>Custom</strong> button above to see the custom theme in action.
Expand Down
2 changes: 2 additions & 0 deletions src/Button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,13 @@
}

.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba(from var(--wfui-text-interactive) R G B / 0.3);
pointer-events: none;
}

.bottom::after {
Expand Down
Loading