Skip to content

Commit

Permalink
[html-elements] Update layout elements (#7027)
Browse files Browse the repository at this point in the history 
* Created new layout elements

* Updated docs

* Updated small size

* updated heading snapshots

* lint fix

* fix format
  • Loading branch information
@EvanBacon
EvanBacon committed Feb 12, 2020
1 parent 1c9b7a5 commit 68675f3
Show file tree
Hide file tree
Showing 70 changed files with 489 additions and 461 deletions.
141 changes: 71 additions & 70 deletions packages/html-elements/README.md
View file
Expand Up @@ -50,6 +50,7 @@ Here is a list of all the currently supported elements and the web feature they
| ----------------------------------- | :-----------------------------: |
| [`<a />`][html-a] | [`<A />`](#a) |
| [`<article />`][html-article] | [`<Article />`](#article) |
| [`<aside />`][html-aside] | [`<Aside />`](#aside) |
| [`<b />`][html-b] | [`<B />`](#b) |
| [`<blockquote />`][html-blockquote] | [`<BlockQuote />`](#blockquote) |
| [`<br />`][html-br] | [`<BR />`](#br) |
Expand Down Expand Up @@ -95,6 +96,8 @@ Here is a list of all the currently supported elements and the web feature they
| [`<picture />`][html-picture] | ⏱ Pending |
| [`<figure />`][html-figure] | ⏱ Pending |
| [`<figcaption />`][html-figcaption] | ⏱ Pending |
| [`<form />`][html-form] | ⏱ Pending |
| [`<label />`][html-label] | ⏱ Pending |

## External

Expand Down Expand Up @@ -331,10 +334,23 @@ import { Article } from '@expo/html-elements';
export default () => <Article />;
```

| Platform | Output |
| -------- | ------------------------------------------------- |
| Web | `<article role="article" style="display:flex" />` |
| Native | `<View />` |
| Platform | Output |
| -------- | ---------------------------- |
| Web | `<article role="article" />` |
| Native | `<View />` |

### `<Aside/>`

```tsx
import { Aside } from '@expo/html-elements';

export default () => <Aside />;
```

| Platform | Output |
| -------- | -------------------------------- |
| Web | `<aside role="complementary" />` |
| Native | `<View />` |

### `<Footer/>`

Expand All @@ -346,16 +362,16 @@ import { Footer } from '@expo/html-elements';
export default () => <Footer />;
```

| Platform | Output |
| -------- | --------------------------------- |
| Web | `<footer style="display:flex" />` |
| Native | `<View />` |
| Platform | Output |
| -------- | ------------------------------- |
| Web | `<footer role="contentinfo" />` |
| Native | `<View />` |

## Text

Wraps the primitive `Text` element on native and renders the expected HTML on web.
Text elements currently use `Text` universally rendering either a `div` or `span` to emulate Yoga style properly.

- Style is slightly modified to match web.
- Style is modified to match web.
- All font styles are reset.
- All elements accept styles from `StyleSheet` API.

Expand All @@ -380,84 +396,75 @@ export default () => (

Standard paragraph element.

| Platform | Output |
| -------- | ------------------------------------------------------------- |
| Web | `<p style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ fontSize: '1em', marginVertical: '1em' }} />` |
| Platform | Output |
| --------- | ------------------------------------------------------------- |
| Universal | `<Text style={{ fontSize: '1em', marginVertical: '1em' }} />` |

### `<B/>`

Bold text text.

| Platform | Output |
| -------- | ----------------------------------------- |
| Web | `<b style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ fontWeight: 'bold' }} />` |
| Platform | Output |
| --------- | ----------------------------------------- |
| Universal | `<Text style={{ fontWeight: 'bold' }} />` |

### `<Strong/>`

Alternate bold text.

| Platform | Output |
| -------- | --------------------------------------------- |
| Web | `<strong style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ fontWeight: 'bold' }} />` |
| Platform | Output |
| --------- | ----------------------------------------- |
| Universal | `<Text style={{ fontWeight: 'bold' }} />` |

### `<S/>`

Strike through text.

| Platform | Output |
| -------- | --------------------------------------------------------- |
| Web | `<s style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ textDecorationLine: 'line-through' }} />` |
| Platform | Output |
| --------- | --------------------------------------------------------- |
| Universal | `<Text style={{ textDecorationLine: 'line-through' }} />` |

### `<Del/>`

Alternate strike through text.

| Platform | Output |
| -------- | --------------------------------------------------------- |
| Web | `<del style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ textDecorationLine: 'line-through' }} />` |
| Platform | Output |
| --------- | --------------------------------------------------------- |
| Universal | `<Text style={{ textDecorationLine: 'line-through' }} />` |

### `<I/>`

Italic text.

| Platform | Output |
| -------- | ------------------------------------------ |
| Web | `<i style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ fontStyle: 'italic' }} />` |
| Platform | Output |
| --------- | ------------------------------------------ |
| Universal | `<Text style={{ fontStyle: 'italic' }} />` |

### `<EM/>`

Alternate italic text.

| Platform | Output |
| -------- | ------------------------------------------ |
| Web | `<em style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ fontStyle: 'italic' }} />` |
| Platform | Output |
| --------- | ------------------------------------------ |
| Universal | `<Text style={{ fontStyle: 'italic' }} />` |

### `<Small/>`

Smaller than default text.

| Platform | Output |
| -------- | -------------------------------------------- |
| Web | `<small style={{ fontFamily: 'System' }} />` |
| Native | `<Text style={{ fontSize: 10 }} />` |
| Platform | Output |
| --------- | ----------------------------------- |
| Universal | `<Text style={{ fontSize: 10 }} />` |

### `<Code/>`

Inline code block.

- [ ] Support lazy loading mono font on mobile.

| Platform | Output |
| -------- | --------------------------- |
| Web | `<code />` |
| Native | `<Text style={[Custom]} />` |
| Platform | Output |
| --------- | --------------------------- |
| Universal | `<Text style={[Custom]} />` |

### `<Pre/>`

Expand All @@ -479,48 +486,39 @@ body {

- [ ] Support lazy loading mono font on mobile.

| Platform | Output |
| -------- | ----------------------------------------- |
| Web | `<pre />` |
| Native | `<Text style={[Custom]} />` \| `<View />` |
| Platform | Output |
| --------- | ----------------------------------------- |
| Universal | `<Text style={[Custom]} />` \| `<View />` |

### `<Mark/>`

Highlight text.

| Platform | Output |
| -------- | ---------------------------------------------------------------- |
| Web | `<mark />` |
| Native | `<Text style={{ backgroundColor: 'yellow', color: 'black' }} />` |
| Platform | Output |
| --------- | ---------------------------------------------------------------- |
| Universal | `<Text style={{ backgroundColor: 'yellow', color: 'black' }} />` |

### `<Q/>`

Quoted text.

| Platform | Output |
| -------- | -------------------------------------------------- |
| Web | `<q />` |
| Native | `<Text style={[Custom]}>"{props.children}"</Text>` |
| Platform | Output |
| --------- | -------------------------------------------------- |
| Universal | `<Text style={[Custom]}>"{props.children}"</Text>` |

### `<BlockQuote/>`

Render a [`<blockquote />`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) on web, and a `<View />` on native. This element doesn't accept text directly.

| Platform | Output |
| -------- | --------------------------- |
| Web | `<blockquote />` |
| Native | `<View style={[Custom]} />` |
| Platform | Output |
| --------- | --------------------------- |
| Universal | `<View style={[Custom]} />` |

### `<Time/>`

Renders a `<time />` element with reset styles on web, and a regular `<Text />` on native.

- `dateTime` prop is supported on web and stripped on native.

| Platform | Output |
| -------- | --------------------------- |
| Web | `<time />` |
| Native | `<Text style={[Custom]} />` |
| Platform | Output |
| --------- | --------------------------- |
| Universal | `<Text style={[Custom]} />` |

## Lists

Expand Down Expand Up @@ -773,6 +771,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con

[html-a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
[html-article]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
[html-aside]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
[html-b]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
[html-blockquote]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
[html-br]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Expand All @@ -781,6 +780,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con
[html-del]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
[html-em]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
[html-footer]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
[html-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
[html-h1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1
[html-h2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2
[html-h3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3
Expand Down Expand Up @@ -811,6 +811,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con
[html-tr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
[html-ul]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
[html-li]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
[html-label]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
[html-details]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
[html-summary]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
[html-progress]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
Expand Down
4 changes: 0 additions & 4 deletions packages/html-elements/build/Elements.d.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 0 additions & 4 deletions packages/html-elements/build/Elements.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/html-elements/build/Elements.js.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 9 additions & 2 deletions packages/html-elements/build/elements/Anchor.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/html-elements/build/elements/Anchor.js.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions packages/html-elements/build/elements/Article.d.ts
View file

This file was deleted.

13 changes: 0 additions & 13 deletions packages/html-elements/build/elements/Article.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion packages/html-elements/build/elements/Article.js.map
View file

This file was deleted.

3 changes: 0 additions & 3 deletions packages/html-elements/build/elements/Header.d.ts
View file

This file was deleted.

0 comments on commit 68675f3

Please sign in to comment.