@rogieking/figui3 8.9.39 → 8.9.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/components.css +29 -3
- package/dist/components.css +1 -1
- package/dist/fig-lab.css +1 -1
- package/dist/fig-lab.js +2 -2
- package/dist/fig.css +1 -1
- package/dist/fig.js +2 -2
- package/fig-lab.css +24 -5
- package/fig-lab.js +120 -15
- package/fig.js +3 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -174,6 +174,7 @@ Minimal example:
|
|
|
174
174
|
| `selected` | boolean | `false` | Selected state (toggle type) |
|
|
175
175
|
| `disabled` | boolean | `false` | Disabled state |
|
|
176
176
|
| `icon` | boolean | `false` | Icon-only styling |
|
|
177
|
+
| `align` | string | `"center"` | Content alignment: `"start"`, `"center"`, or `"end"` |
|
|
177
178
|
| `href` | string | — | URL for link buttons |
|
|
178
179
|
| `target` | string | — | Link target (e.g. `"_blank"`) |
|
|
179
180
|
|
|
@@ -184,6 +185,7 @@ Minimal example:
|
|
|
184
185
|
<fig-button variant="destructiveSecondary">Destructive secondary</fig-button>
|
|
185
186
|
<fig-button variant="destructiveGhost">Destructive ghost</fig-button>
|
|
186
187
|
<fig-button variant="destructiveLink">Destructive link</fig-button>
|
|
188
|
+
<fig-button full align="start">Start aligned</fig-button>
|
|
187
189
|
<fig-button type="toggle" selected="true">Toggle</fig-button>
|
|
188
190
|
<fig-button variant="ghost" icon>
|
|
189
191
|
<svg><!-- icon --></svg>
|
package/components.css
CHANGED
|
@@ -785,10 +785,14 @@ select,
|
|
|
785
785
|
/* Button */
|
|
786
786
|
button,
|
|
787
787
|
fig-button {
|
|
788
|
+
--fig-button-content-alignment: center;
|
|
789
|
+
--fig-button-text-alignment: center;
|
|
790
|
+
|
|
788
791
|
color: var(--figma-color-text-onbrand);
|
|
789
792
|
display: flex;
|
|
790
793
|
align-items: center;
|
|
791
|
-
justify-content:
|
|
794
|
+
justify-content: var(--fig-button-content-alignment);
|
|
795
|
+
text-align: var(--fig-button-text-alignment);
|
|
792
796
|
height: var(--spacer-4);
|
|
793
797
|
padding: 0 var(--spacer-2);
|
|
794
798
|
appearance: none;
|
|
@@ -1029,15 +1033,31 @@ fig-button {
|
|
|
1029
1033
|
/* Block button */
|
|
1030
1034
|
&[inline="false"],
|
|
1031
1035
|
&[inline="false"] > button {
|
|
1036
|
+
--fig-button-content-alignment: flex-start;
|
|
1037
|
+
--fig-button-text-alignment: start;
|
|
1038
|
+
|
|
1032
1039
|
display: flex;
|
|
1033
1040
|
width: 100%;
|
|
1034
|
-
justify-content: left;
|
|
1035
1041
|
height: auto;
|
|
1036
|
-
text-align: left;
|
|
1037
1042
|
align-items: center;
|
|
1038
1043
|
padding: var(--spacer-1) var(--spacer-2);
|
|
1039
1044
|
}
|
|
1040
1045
|
|
|
1046
|
+
&[align="start"] {
|
|
1047
|
+
--fig-button-content-alignment: flex-start;
|
|
1048
|
+
--fig-button-text-alignment: start;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
&[align="center"] {
|
|
1052
|
+
--fig-button-content-alignment: center;
|
|
1053
|
+
--fig-button-text-alignment: center;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
&[align="end"] {
|
|
1057
|
+
--fig-button-content-alignment: flex-end;
|
|
1058
|
+
--fig-button-text-alignment: end;
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1041
1061
|
&[type="select"],
|
|
1042
1062
|
&[type="upload"] {
|
|
1043
1063
|
position: relative;
|
|
@@ -1101,6 +1121,12 @@ fig-button {
|
|
|
1101
1121
|
margin-left: auto;
|
|
1102
1122
|
}
|
|
1103
1123
|
}
|
|
1124
|
+
&:has(fig-icon[slot="prepend"]){
|
|
1125
|
+
padding-left: var(--spacer-1);
|
|
1126
|
+
&[size="large"]{
|
|
1127
|
+
padding-left: var(--spacer-2);
|
|
1128
|
+
}
|
|
1129
|
+
}
|
|
1104
1130
|
}
|
|
1105
1131
|
|
|
1106
1132
|
/* Combo button */
|