Skip to content

Commit

Permalink
feat(text): add letter-spacing prop (#558)
Browse files Browse the repository at this point in the history
  • Loading branch information
@privatenumber
privatenumber authored Aug 7, 2023
1 parent 5903559 commit 6be6616
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 14 deletions.
29 changes: 15 additions & 14 deletions src/components/Text/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,20 +63,21 @@ export default {

Themable props* can be configured via the [Theme](#/Theme) component using the key `text`.

| Prop | Type | Default | Possible values | Description |
| ---------------- | -------- | ------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| pattern* | `string` | `'paragraph'` | `'headline'`, `'title'`, `'paragraph'`, `'label'`, `'buttonLabel'`, any custom pattern defined within the theme | patterns are defined at the theme level |
| element* | `string` | `'p'` | `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`, `'p'`, `'span'`, `'div'`, `'li'` | [HTML Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |
| size* | `number` | `0` | - | Size of text as step in fluid scale (-2 to 7) |
| font-family* | `string` | `'inherit'` | - | [Font family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |
| font-weight* | `string` | `'400'` | - | [Font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) |
| font-size* | `string` | — | - | [Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). Overrides the `size` prop, and disables type scaling. |
| line-height | `string` | — | - | [Line height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). Overrides the internally calculated line height. |
| color* | `string` | `'#000000'` | - | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |
| font-style* | `string` | `'inherit'` | - | [Font style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) |
| text-transform* | `string` | `'inherit'` | - | [Text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) |
| text-decoration* | `string` | — | - | [Text decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| text-align* | `string` | `'inherit'` | - | [Text align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) |
| Prop | Type | Default | Possible values | Description |
| ---------------- | -------- | ------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| pattern* | `string` | `'paragraph'` | `'headline'`, `'title'`, `'paragraph'`, `'label'`, `'buttonLabel'`, any custom pattern defined within the theme | patterns are defined at the theme level |
| element* | `string` | `'p'` | `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`, `'p'`, `'span'`, `'div'`, `'li'` | [HTML Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |
| size* | `number` | `0` | - | Size of text as step in fluid scale (-2 to 7) |
| font-family* | `string` | `'inherit'` | - | [Font family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |
| font-weight* | `string` | `'400'` | - | [Font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) |
| font-size* | `string` | — | - | [Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). Overrides the `size` prop, and disables type scaling. |
| line-height | `string` | — | - | [Line height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). Overrides the internally calculated line height. |
| letter-spacing | `string` | — | - | [Letter spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing). Overrides the internally calculated line height. |
| color* | `string` | `'#000000'` | - | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |
| font-style* | `string` | `'inherit'` | - | [Font style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) |
| text-transform* | `string` | `'inherit'` | - | [Text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) |
| text-decoration* | `string` | — | - | [Text decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| text-align* | `string` | `'inherit'` | - | [Text align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) |


## Slots
Expand Down
9 changes: 9 additions & 0 deletions src/components/Text/src/Text.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,14 @@ export default {
default: undefined,
validator: cssValidator('line-height'),
},
/**
* [Letter spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing). Overrides the internally calculated line height.
*/
letterSpacing: {
type: String,
default: undefined,
validator: cssValidator('letter-spacing'),
},
/**
* [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
*/
Expand Down Expand Up @@ -157,6 +165,7 @@ export default {
const styles = {
fontSize: this.resolvedFontSize,
lineHeight: this.lineHeight,
letterSpacing: this.letterSpacing,
'--mobile-base-font-size': fonts.baseSize,
'--mobile-font-size-scale': fonts.sizeScale,
};
Expand Down

0 comments on commit 6be6616

Please sign in to comment.