Browse Source

feat(button): add full width icons

tags/v1.4.0
Dany Sluijk 3 months ago
parent
commit
d8669d5f65
Signed by: dsluijk GPG Key ID: EEEBA79CCB6729B0
3 changed files with 41 additions and 8 deletions
  1. +26
    -0
      example/src/pages/components/Button.tsx
  2. +4
    -2
      src/button/index.tsx
  3. +11
    -6
      src/button/style.scss

+ 26
- 0
example/src/pages/components/Button.tsx View File

@@ -3,6 +3,7 @@ import {
faBalanceScale,
faBolt,
faInfinity,
faBars,
} from "@fortawesome/free-solid-svg-icons";
import { Button as ButtonComp, card, Icon } from "teenyui";
import { timeout } from "~utils";
@@ -31,6 +32,19 @@ export const Button: FunctionalComponent = () => (
>
Ghost Button
</ButtonComp>
<ButtonComp>
<Icon icon={faBalanceScale} />
With Icon!
</ButtonComp>
<ButtonComp>
<Icon icon={faBolt} />
</ButtonComp>
<ButtonComp secondary>
<Icon icon={faInfinity} />
</ButtonComp>
<ButtonComp ghost>
<Icon icon={faBars} />
</ButtonComp>
<ButtonComp round>
<Icon icon={faBalanceScale} />
</ButtonComp>
@@ -40,5 +54,17 @@ export const Button: FunctionalComponent = () => (
<ButtonComp round ghost>
<Icon icon={faInfinity} />
</ButtonComp>
<ButtonComp full>
<Icon icon={faInfinity} />
Full width!
</ButtonComp>
<ButtonComp full secondary>
<Icon icon={faInfinity} />
Full secondary!
</ButtonComp>
<ButtonComp full ghost>
<Icon icon={faInfinity} />
Full ghost!
</ButtonComp>
</Card>
);

+ 4
- 2
src/button/index.tsx View File

@@ -6,10 +6,11 @@ import style from "./style.scss";
export const Button: FunctionalComponent<RenderableProps<Props>> = (props) => {
const [loading, setLoading] = useState(false);

const round = props.round ? style.round : "";
const full = props.full ? style.full : "";
const secondary = props.secondary ? style.secondary : "";
const ghost = props.ghost ? style.ghost : "";
const round = props.round ? style.round : "";
const styles = `${style.button} ${secondary} ${ghost} ${round}`;
const styles = `${style.button} ${full} ${round} ${secondary} ${ghost}`;

const clickListener = async (): Promise<void> => {
if (!props.onClick) return;
@@ -33,6 +34,7 @@ export const Button: FunctionalComponent<RenderableProps<Props>> = (props) => {

interface Props {
disabled?: boolean;
full?: boolean;
secondary?: boolean;
ghost?: boolean;
round?: boolean;


+ 11
- 6
src/button/style.scss View File

@@ -1,7 +1,7 @@
.button {
display: inline-flex;
padding: 8px 20px;
margin: 8px;
padding: 8px;
margin: 4px;
align-items: center;
min-width: 20px;

@@ -19,16 +19,21 @@
}
}

.full {
width: 100%;
justify-content: center;
}

.round {
border-radius: 16px;
}

.secondary {
color: var(--secondary-color-text);
background: rgba(var(--secondary-color-rgb), 0.8);
border: 2px solid var(--secondary-color);
}

.round {
border-radius: 999px;
}

.ghost {
color: var(--text-color-header);
background: rgba(var(--background-rgb), 0.1);


Loading…
Cancel
Save