Skip to content

Commit 0335114

Browse files
gregbergegregberge
committed
feat: add float property
Closes #192
1 parent 362dea3 commit 0335114

File tree

6 files changed

+217
-0
lines changed

6 files changed

+217
-0
lines changed

‎packages/system/src/styles/layout.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,29 @@ export const display = style({
3535
prop: 'display',
3636
})
3737

38+
type FloatProp<T extends ITheme> = SystemProp<CSS.Property.Float, T>
39+
export interface FloatProps<T extends ITheme = Theme> {
40+
float?: FloatProp<T>
41+
motionSafeFloat?: FloatProp<T>
42+
motionReduceFloat?: FloatProp<T>
43+
firstFloat?: FloatProp<T>
44+
lastFloat?: FloatProp<T>
45+
oddFloat?: FloatProp<T>
46+
evenFloat?: FloatProp<T>
47+
visitedFloat?: FloatProp<T>
48+
checkedFloat?: FloatProp<T>
49+
focusWithinFloat?: FloatProp<T>
50+
hoverFloat?: FloatProp<T>
51+
focusFloat?: FloatProp<T>
52+
focusVisibleFloat?: FloatProp<T>
53+
activeFloat?: FloatProp<T>
54+
disabledFloat?: FloatProp<T>
55+
placeholderFloat?: FloatProp<T>
56+
}
57+
export const float = style({
58+
prop: 'float',
59+
})
60+
3861
type BoxSizingProp<T extends ITheme> = SystemProp<CSS.Property.BoxSizing, T>
3962
export interface BoxSizingProps<T extends ITheme = Theme> {
4063
boxSizing?: BoxSizingProp<T>
@@ -412,6 +435,7 @@ export const objectFit = style({
412435

413436
export interface LayoutProps<T extends ITheme = Theme>
414437
extends DisplayProps<T>,
438+
FloatProps<T>,
415439
BoxSizingProps<T>,
416440
ContainerProps<T>,
417441
OverflowProps<T>,
@@ -429,6 +453,7 @@ export interface LayoutProps<T extends ITheme = Theme>
429453
export const layout = compose(
430454
boxSizing,
431455
display,
456+
float,
432457
container,
433458
overflow,
434459
overflowX,

‎website/pages/docs/layout/float.mdx‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
---
2+
section: Layout
3+
title: Float
4+
slug: /docs/float/
5+
---
6+
7+
# Float
8+
9+
Utilities for controlling the wrapping of content around an element.
10+
11+
<carbon-ad />
12+
13+
| React props | CSS Properties |
14+
| ----------------- | ------------------- |
15+
| `float={keyword}` | `float: {keyword};` |
16+
17+
## Float right
18+
19+
Use `float="right"` to float an element to the right of its container.
20+
21+
```jsx preview color=emerald
22+
<>
23+
<template preview>
24+
<>
25+
<x.img
26+
mt={2}
27+
mr={0}
28+
mb={4}
29+
ml={10}
30+
h={32}
31+
float="right"
32+
src="/img/placeholder-emerald.svg"
33+
/>
34+
<x.p
35+
color="emerald-500"
36+
fontFamily="Flow"
37+
textAlign="justify"
38+
fontWeight="medium"
39+
>
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis
41+
et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis
42+
ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit
43+
amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur
44+
ante. Cras convallis risus vel vehicula dapibus. Donec eget neque
45+
fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est,
46+
et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere,
47+
vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum
48+
fringilla. Donec varius vehicula magna sit amet auctor. Ut congue
49+
vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec
50+
sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur
51+
odio eu, finibus justo. Etiam eu vehicula felis.
52+
</x.p>
53+
</>
54+
</template>
55+
<x.img float="right" src="path/to/image.jpg" />
56+
<p>
57+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
58+
lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
59+
condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
60+
pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
61+
convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
62+
mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
63+
eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
64+
consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
65+
magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
66+
suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
67+
libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
68+
</p>
69+
</>
70+
```
71+
72+
## Float left
73+
74+
Use `float="left"` to float an element to the left of its container.
75+
76+
```jsx preview color=indigo
77+
<>
78+
<template preview>
79+
<>
80+
<x.img
81+
mt={2}
82+
mr={10}
83+
mb={4}
84+
ml={0}
85+
h={32}
86+
float="left"
87+
src="/img/placeholder-indigo.svg"
88+
/>
89+
<x.p
90+
color="indigo-500"
91+
fontFamily="Flow"
92+
textAlign="justify"
93+
fontWeight="medium"
94+
>
95+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis
96+
et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis
97+
ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit
98+
amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur
99+
ante. Cras convallis risus vel vehicula dapibus. Donec eget neque
100+
fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est,
101+
et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere,
102+
vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum
103+
fringilla. Donec varius vehicula magna sit amet auctor. Ut congue
104+
vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec
105+
sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur
106+
odio eu, finibus justo. Etiam eu vehicula felis.
107+
</x.p>
108+
</>
109+
</template>
110+
<x.img float="left" src="path/to/image.jpg" />
111+
<p>
112+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
113+
lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
114+
condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
115+
pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
116+
convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
117+
mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
118+
eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
119+
consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
120+
magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
121+
suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
122+
libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
123+
</p>
124+
</>
125+
```
126+
127+
## Don't float
128+
129+
Use `float="none"` to reset any floats that are applied to an element. This is the default value for the float property.
130+
131+
```jsx preview color=purple
132+
<>
133+
<template preview>
134+
<>
135+
<x.img
136+
mt={2}
137+
mb={4}
138+
h={32}
139+
float="none"
140+
src="/img/placeholder-purple.svg"
141+
/>
142+
<x.p
143+
color="purple-500"
144+
fontFamily="Flow"
145+
textAlign="justify"
146+
fontWeight="medium"
147+
>
148+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis
149+
et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis
150+
ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit
151+
amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur
152+
ante. Cras convallis risus vel vehicula dapibus. Donec eget neque
153+
fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est,
154+
et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere,
155+
vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum
156+
fringilla. Donec varius vehicula magna sit amet auctor. Ut congue
157+
vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec
158+
sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur
159+
odio eu, finibus justo. Etiam eu vehicula felis.
160+
</x.p>
161+
</>
162+
</template>
163+
<x.img float="none" src="path/to/image.jpg" />
164+
<p>
165+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
166+
lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
167+
condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
168+
pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
169+
convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
170+
mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
171+
eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
172+
consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
173+
magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
174+
suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
175+
libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
176+
</p>
177+
</>
178+
```
179+
180+
## Responsive
181+
182+
To control the float property of an element at a specific breakpoint, use responsive object notation. For example, adding the property `float={{ md: "none" }}` to an element would apply the `float="none"` utility at medium screen sizes and above.
183+
184+
```jsx
185+
<x.img float={{ md: 'none' }} />
186+
```
187+
188+
For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

‎website/src/smooth-doc/theme.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { css } from '@xstyled/styled-components'
22
import { theme as baseTheme, primaryColor } from 'smooth-doc/src/theme'
33
import deepmerge from 'deepmerge'
4+
import '../components/styles/flow-font.css'
45

56
export const theme = deepmerge(baseTheme, {
67
...baseTheme,

‎website/static/img/placeholder-emerald.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎website/static/img/placeholder-indigo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎website/static/img/placeholder-purple.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)