Add more size options for paragraphs and headings

This commit is contained in:
Andrew Kingston 2021-08-13 12:07:45 +01:00
parent ec83a77ce9
commit c7687b6400
2 changed files with 27 additions and 10 deletions

View File

@ -595,6 +595,9 @@
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Extra Small",
"value": "XS"
}, {
"label": "Small",
"value": "S"
}, {
@ -603,6 +606,15 @@
}, {
"label": "Large",
"value": "L"
}, {
"label": "Extra Large",
"value": "XL"
}, {
"label": "2XL",
"value": "XXL"
}, {
"label": "3XL",
"value": "XXXL"
}]
},
{
@ -689,6 +701,9 @@
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Extra Small",
"value": "XS"
}, {
"label": "Small",
"value": "S"
}, {
@ -697,6 +712,15 @@
}, {
"label": "Large",
"value": "L"
}, {
"label": "Extra Large",
"value": "XL"
}, {
"label": "2XL",
"value": "XXL"
}, {
"label": "3XL",
"value": "XXXL"
}]
},
{

View File

@ -16,6 +16,8 @@
$: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text"
: text || ""
$: sizeClass = `spectrum-Body--size${size || "M"}`
$: alignClass = `align--${align || "left"}`
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
@ -41,7 +43,7 @@
class:bold
class:italic
class:underline
class="align--{align || 'left'} size--{size || 'M'}"
class="spectrum-Body {sizeClass} {alignClass}"
>
{componentText}
</p>
@ -65,15 +67,6 @@
.underline {
text-decoration: underline;
}
.size--S {
font-size: 14px;
}
.size--M {
font-size: 16px;
}
.size--L {
font-size: 18px;
}
.align--left {
text-align: left;
}