wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-09 12:30:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support wrapping, disable shrink by default

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-16 16:25:32 -03:00
parent b34b9e5986
commit f24c21c94e
3 changed files with 68 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/Button/Button.mdx
+16 -13
View File
@@ -5,23 +5,26 @@ menu: UI Kit
import { Playground } from 'docz'
import Button from './Button'
import Flex from '../Flex'
# Button
## Basic usage
<Playground>
<Button style={{margin: "0 10px 10px 0"}}>Push Me</Button>
<Button style={{margin: "0 10px 10px 0"}} disabled>Push Me</Button>
<Button style={{margin: "0 10px 10px 0"}} anchor>I'm an Anchor Tag</Button>
<Button style={{margin: "0 10px 10px 0"}} primary>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} primary disabled>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary>Secondary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary disabled>Secondary</Button>
<Button style={{margin: "0 10px 10px 0"}} primary invert>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} primary invert disabled>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary invert>Secondary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary invert disabled>Secondary</Button>
<Button style={{marginBottom: "10px"}} primary fullWidth>Full Width</Button>
<Button style={{marginBottom: "10px"}} primary invert fullWidth>Full Width Invert</Button>
<Flex itemGutter wrap>
<Button>Push Me</Button>
<Button disabled>Push Me</Button>
<Button anchor>I'm an Anchor Tag</Button>
<Button primary>Primary</Button>
<Button primary disabled>Primary</Button>
<Button secondary>Secondary</Button>
<Button secondary disabled>Secondary</Button>
<Button primary invert>Primary</Button>
<Button primary invert disabled>Primary</Button>
<Button secondary invert>Secondary</Button>
<Button secondary invert disabled>Secondary</Button>
<Button primary fullWidth>Full Width</Button>
<Button primary invert fullWidth>Full Width Invert</Button>
</Flex>
</Playground>
src/core/client/ui/components/Flex/Flex.css
+48
View File
@@ -1,5 +1,8 @@
.root {
display: flex;
& > * {
flex-shrink: 0;
}
}
.halfItemGutter {
@@ -50,6 +53,51 @@
}
}
.wrap {
flex-wrap: wrap;
}
.wrapReverse {
flex-wrap: wrap-reverse;
}
.wrap,
.wrapReverse {
&.itemGutter {
&:not(:empty) {
margin-top: calc(-1 * var(--spacing-unit));
}
& > * {
margin-top: var(--spacing-unit);
}
}
&.directionColumn.itemGutter {
&:not(:empty) {
margin-left: calc(-1 * var(--spacing-unit));
}
&.itemGutter > * {
margin-left: var(--spacing-unit);
}
}
&.halfItemGutter {
&:not(:empty) {
margin-top: calc(-0.5 * var(--spacing-unit));
}
& > * {
margin-top: calc(0.5 * var(--spacing-unit));
}
}
&.directionColumn.halfItemGutter {
&:not(:empty) {
margin-left: calc(-0.5 * var(--spacing-unit));
}
&.halfItemGutter > * {
margin-left: calc(0.5 * var(--spacing-unit));
}
}
}
.justifyFlexStart {
justify-content: flex-start;
}
src/core/client/ui/components/Flex/Flex.tsx
+4
View File
@@ -20,6 +20,7 @@ interface InnerProps {
direction?: "row" | "column" | "row-reverse" | "column-reverse";
itemGutter?: boolean | "half";
className?: string;
wrap?: boolean | "reverse";
}
const Flex: StatelessComponent<InnerProps> = props => {
@@ -29,12 +30,15 @@ const Flex: StatelessComponent<InnerProps> = props => {
alignItems,
direction,
itemGutter,
wrap,
...rest
} = props;
const classObject: Record<string, boolean> = {
[styles.itemGutter]: itemGutter === true,
[styles.halfItemGutter]: itemGutter === "half",
[styles.wrap]: wrap === true,
[styles.wrapReverse]: wrap === "reverse",
};
if (justifyContent) {