feat: add float property

Closes #192
styled-components · Mar 21, 2021 · 0335114 · 0335114
1 parent 362dea3
commit 0335114
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 0 deletions.
diff --git a/packages/system/src/styles/layout.ts b/packages/system/src/styles/layout.ts
@@ -35,6 +35,29 @@ export const display = style({
   prop: 'display',
 })
 
+type FloatProp<T extends ITheme> = SystemProp<CSS.Property.Float, T>
+export interface FloatProps<T extends ITheme = Theme> {
+  float?: FloatProp<T>
+  motionSafeFloat?: FloatProp<T>
+  motionReduceFloat?: FloatProp<T>
+  firstFloat?: FloatProp<T>
+  lastFloat?: FloatProp<T>
+  oddFloat?: FloatProp<T>
+  evenFloat?: FloatProp<T>
+  visitedFloat?: FloatProp<T>
+  checkedFloat?: FloatProp<T>
+  focusWithinFloat?: FloatProp<T>
+  hoverFloat?: FloatProp<T>
+  focusFloat?: FloatProp<T>
+  focusVisibleFloat?: FloatProp<T>
+  activeFloat?: FloatProp<T>
+  disabledFloat?: FloatProp<T>
+  placeholderFloat?: FloatProp<T>
+}
+export const float = style({
+  prop: 'float',
+})
+
 type BoxSizingProp<T extends ITheme> = SystemProp<CSS.Property.BoxSizing, T>
 export interface BoxSizingProps<T extends ITheme = Theme> {
   boxSizing?: BoxSizingProp<T>
@@ -412,6 +435,7 @@ export const objectFit = style({
 
 export interface LayoutProps<T extends ITheme = Theme>
   extends DisplayProps<T>,
+    FloatProps<T>,
     BoxSizingProps<T>,
     ContainerProps<T>,
     OverflowProps<T>,
@@ -429,6 +453,7 @@ export interface LayoutProps<T extends ITheme = Theme>
 export const layout = compose(
   boxSizing,
   display,
+  float,
   container,
   overflow,
   overflowX,

diff --git a/website/pages/docs/layout/float.mdx b/website/pages/docs/layout/float.mdx
@@ -0,0 +1,188 @@
+---
+section: Layout
+title: Float
+slug: /docs/float/
+---
+
+# Float
+
+Utilities for controlling the wrapping of content around an element.
+
+<carbon-ad />
+
+| React props       | CSS Properties      |
+| ----------------- | ------------------- |
+| `float={keyword}` | `float: {keyword};` |
+
+## Float right
+
+Use `float="right"` to float an element to the right of its container.
+
+```jsx preview color=emerald
+<>
+  <template preview>
+    <>
+      <x.img
+        mt={2}
+        mr={0}
+        mb={4}
+        ml={10}
+        h={32}
+        float="right"
+        src="/img/placeholder-emerald.svg"
+      />
+      <x.p
+        color="emerald-500"
+        fontFamily="Flow"
+        textAlign="justify"
+        fontWeight="medium"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis
+        et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis
+        ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit
+        amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur
+        ante. Cras convallis risus vel vehicula dapibus. Donec eget neque
+        fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est,
+        et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere,
+        vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum
+        fringilla. Donec varius vehicula magna sit amet auctor. Ut congue
+        vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec
+        sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur
+        odio eu, finibus justo. Etiam eu vehicula felis.
+      </x.p>
+    </>
+  </template>
+  <x.img float="right" src="path/to/image.jpg" />
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
+    lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
+    condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
+    pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
+    convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
+    mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
+    eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
+    consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
+    magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
+    suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
+    libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
+  </p>
+</>
+```
+
+## Float left
+
+Use `float="left"` to float an element to the left of its container.
+
+```jsx preview color=indigo
+<>
+  <template preview>
+    <>
+      <x.img
+        mt={2}
+        mr={10}
+        mb={4}
+        ml={0}
+        h={32}
+        float="left"
+        src="/img/placeholder-indigo.svg"
+      />
+      <x.p
+        color="indigo-500"
+        fontFamily="Flow"
+        textAlign="justify"
+        fontWeight="medium"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis
+        et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis
+        ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit
+        amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur
+        ante. Cras convallis risus vel vehicula dapibus. Donec eget neque
+        fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est,
+        et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere,
+        vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum
+        fringilla. Donec varius vehicula magna sit amet auctor. Ut congue
+        vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec
+        sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur
+        odio eu, finibus justo. Etiam eu vehicula felis.
+      </x.p>
+    </>
+  </template>
+  <x.img float="left" src="path/to/image.jpg" />
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
+    lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
+    condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
+    pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
+    convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
+    mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
+    eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
+    consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
+    magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
+    suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
+    libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
+  </p>
+</>
+```
+
+## Don't float
+
+Use `float="none"` to reset any floats that are applied to an element. This is the default value for the float property.
+
+```jsx preview color=purple
+<>
+  <template preview>
+    <>
+      <x.img
+        mt={2}
+        mb={4}
+        h={32}
+        float="none"
+        src="/img/placeholder-purple.svg"
+      />
+      <x.p
+        color="purple-500"
+        fontFamily="Flow"
+        textAlign="justify"
+        fontWeight="medium"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis
+        et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis
+        ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit
+        amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur
+        ante. Cras convallis risus vel vehicula dapibus. Donec eget neque
+        fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est,
+        et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere,
+        vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum
+        fringilla. Donec varius vehicula magna sit amet auctor. Ut congue
+        vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec
+        sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur
+        odio eu, finibus justo. Etiam eu vehicula felis.
+      </x.p>
+    </>
+  </template>
+  <x.img float="none" src="path/to/image.jpg" />
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et
+    lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices
+    condimentum velit. Proin velit libero, interdum ac rhoncus sit amet,
+    pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras
+    convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus
+    mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum
+    eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi
+    consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula
+    magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus
+    suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar
+    libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.
+  </p>
+</>
+```
+
+## Responsive
+
+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.
+
+```jsx
+<x.img float={{ md: 'none' }} />
+```
+
+For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
diff --git a/website/src/smooth-doc/theme.js b/website/src/smooth-doc/theme.js
@@ -1,6 +1,7 @@
 import { css } from '@xstyled/styled-components'
 import { theme as baseTheme, primaryColor } from 'smooth-doc/src/theme'
 import deepmerge from 'deepmerge'
+import '../components/styles/flow-font.css'
 
 export const theme = deepmerge(baseTheme, {
   ...baseTheme,

diff --git a/website/static/img/placeholder-emerald.svg b/website/static/img/placeholder-emerald.svg
diff --git a/website/static/img/placeholder-indigo.svg b/website/static/img/placeholder-indigo.svg
diff --git a/website/static/img/placeholder-purple.svg b/website/static/img/placeholder-purple.svg