Skip to content

Commit 7f26835

Browse files
bsastregxbsastregx
committed
[mercury][list-box] Update styles to match Figma design
1 parent d9a7e1b commit 7f26835

File tree

5 files changed

+241
-72
lines changed

5 files changed

+241
-72
lines changed

‎packages/common/src/metadata/components/list-box/metadata.ts‎

Lines changed: 99 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import type { MercuryBundleOptimized } from "@genexus/mercury";
12
import { CSS_CLASSES } from "../../../html";
23
import type { ComponentMetadata } from "../../../typings/component-metadata";
34
import { chameleonImportType } from "../../../utils";
45
import { parseMetadata } from "../../parseMetadata";
56
import {
7+
onElevationModel,
68
plainModel,
79
withAdditionalInormationEndModel,
810
withDisabledItemsModel,
@@ -12,12 +14,20 @@ import {
1214
withSeparatorModel
1315
} from "./models";
1416

17+
const BASE_BUNDLES: MercuryBundleOptimized[] = [
18+
"components/list-box",
19+
"chameleon/scrollbar"
20+
];
21+
22+
const customCssOnlyForPreviewDefault = ".list-box { block-size: 170px }";
23+
const customCssOnlyForPreviewOnElevation = ".list-box { block-size: 208px }";
24+
1525
export const listBoxMetadata = parseMetadata({
1626
title: "List Box",
1727
description:
1828
"A List Box component is a versatile UI element used to present a selectable list of items, offering users a straightforward way to make choices or navigate through options. It's commonly employed in forms, dropdown menus, and selection interfaces where space is limited. The list-box displays a series of options, allowing users to select one or multiple items from the list, depending on its configuration.",
19-
bundles: ["components/list-box", "chameleon/scrollbar"],
20-
customCssOnlyForPreview: ".list-box { block-size: 154px }",
29+
bundles: BASE_BUNDLES,
30+
customCssOnlyForPreview: customCssOnlyForPreviewDefault,
2131
codeSnippets: {
2232
plain: {
2333
linkId: "plain",
@@ -28,7 +38,7 @@ export const listBoxMetadata = parseMetadata({
2838
imports: [chameleonImportType("ActionListModel")],
2939
template: {
3040
tag: "ch-action-list-render",
31-
class: CSS_CLASSES.LIST_BOX.CLASS,
41+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR}`,
3242
properties: [
3343
{ name: "selection", value: "single" },
3444
{ name: "model", value: "listBoxModel" }
@@ -49,7 +59,7 @@ export const listBoxMetadata = parseMetadata({
4959
imports: [chameleonImportType("ActionListModel")],
5060
template: {
5161
tag: "ch-action-list-render",
52-
class: CSS_CLASSES.LIST_BOX.CLASS,
62+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR}`,
5363
properties: [
5464
{ name: "selection", value: "single" },
5565
{ name: "model", value: "listBoxModel" }
@@ -70,7 +80,7 @@ export const listBoxMetadata = parseMetadata({
7080
imports: [chameleonImportType("ActionListModel")],
7181
template: {
7282
tag: "ch-action-list-render",
73-
class: CSS_CLASSES.LIST_BOX.CLASS,
83+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR}`,
7484
properties: [
7585
{ name: "selection", value: "single" },
7686
{ name: "model", value: "listBoxModel" }
@@ -91,7 +101,7 @@ export const listBoxMetadata = parseMetadata({
91101
imports: [chameleonImportType("ActionListModel")],
92102
template: {
93103
tag: "ch-action-list-render",
94-
class: CSS_CLASSES.LIST_BOX.CLASS,
104+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR}`,
95105
properties: [
96106
{ name: "selection", value: "single" },
97107
{ name: "model", value: "listBoxModel" }
@@ -115,7 +125,85 @@ export const listBoxMetadata = parseMetadata({
115125
],
116126
template: {
117127
tag: "ch-action-list-render",
118-
class: CSS_CLASSES.LIST_BOX.CLASS,
128+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR}`,
129+
properties: [
130+
{ name: "selection", value: "single" },
131+
{ name: "model", value: "listBoxModel" }
132+
]
133+
}
134+
},
135+
136+
elevation1: {
137+
linkId: "elevation-1",
138+
title: "6. Elevation 1 (Default)",
139+
bundles: [...BASE_BUNDLES, "utils/elevation"],
140+
customCssOnlyForPreview: customCssOnlyForPreviewOnElevation,
141+
imports: [
142+
chameleonImportType("ActionListModel"),
143+
'import { getIconPath } from "@genexus/mercury/assets-manager.js";'
144+
],
145+
states: [
146+
{
147+
name: "listBoxModel",
148+
type: "ActionListModel",
149+
value: onElevationModel
150+
}
151+
],
152+
template: {
153+
tag: "ch-action-list-render",
154+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR} ${CSS_CLASSES.ELEVATION[1].SELECTOR}`,
155+
properties: [
156+
{ name: "selection", value: "single" },
157+
{ name: "model", value: "listBoxModel" }
158+
]
159+
}
160+
},
161+
162+
elevation2: {
163+
linkId: "elevation-2",
164+
title: "7. Elevation 2",
165+
bundles: [...BASE_BUNDLES, "utils/elevation"],
166+
customCssOnlyForPreview: customCssOnlyForPreviewOnElevation,
167+
imports: [
168+
chameleonImportType("ActionListModel"),
169+
'import { getIconPath } from "@genexus/mercury/assets-manager.js";'
170+
],
171+
states: [
172+
{
173+
name: "listBoxModel",
174+
type: "ActionListModel",
175+
value: onElevationModel
176+
}
177+
],
178+
template: {
179+
tag: "ch-action-list-render",
180+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR} ${CSS_CLASSES.ELEVATION[2].SELECTOR}`,
181+
properties: [
182+
{ name: "selection", value: "single" },
183+
{ name: "model", value: "listBoxModel" }
184+
]
185+
}
186+
},
187+
188+
elevation3: {
189+
linkId: "elevation-3",
190+
title: "8. Elevation 3",
191+
bundles: [...BASE_BUNDLES, "utils/elevation"],
192+
customCssOnlyForPreview: customCssOnlyForPreviewOnElevation,
193+
imports: [
194+
chameleonImportType("ActionListModel"),
195+
'import { getIconPath } from "@genexus/mercury/assets-manager.js";'
196+
],
197+
states: [
198+
{
199+
name: "listBoxModel",
200+
type: "ActionListModel",
201+
value: onElevationModel
202+
}
203+
],
204+
template: {
205+
tag: "ch-action-list-render",
206+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR} ${CSS_CLASSES.ELEVATION[3].SELECTOR}`,
119207
properties: [
120208
{ name: "selection", value: "single" },
121209
{ name: "model", value: "listBoxModel" }
@@ -125,7 +213,7 @@ export const listBoxMetadata = parseMetadata({
125213

126214
withAditionalInformationEnd: {
127215
linkId: "with-additional-information-end",
128-
title: "6. With Additional Information (End)",
216+
title: "9. With Additional Information (End)",
129217
states: [
130218
{
131219
name: "listBoxModel",
@@ -136,7 +224,7 @@ export const listBoxMetadata = parseMetadata({
136224
imports: [chameleonImportType("ActionListModel")],
137225
template: {
138226
tag: "ch-action-list-render",
139-
class: CSS_CLASSES.LIST_BOX.CLASS,
227+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR}`,
140228
properties: [
141229
{ name: "selection", value: "single" },
142230
{ name: "model", value: "listBoxModel" }
@@ -146,7 +234,7 @@ export const listBoxMetadata = parseMetadata({
146234

147235
disabled: {
148236
linkId: "disabled",
149-
title: "7. Disabled",
237+
title: "10. Disabled",
150238
states: [
151239
{
152240
name: "listBoxModel",
@@ -157,7 +245,7 @@ export const listBoxMetadata = parseMetadata({
157245
imports: [chameleonImportType("ActionListModel")],
158246
template: {
159247
tag: "ch-action-list-render",
160-
class: CSS_CLASSES.LIST_BOX.CLASS,
248+
class: `${CSS_CLASSES.LIST_BOX.CLASS} ${CSS_CLASSES.SCROLLABLE.SELECTOR}`,
161249
properties: [
162250
{ name: "selection", value: "single" },
163251
{ name: "model", value: "listBoxModel" }

‎packages/common/src/metadata/components/list-box/models.ts‎

Lines changed: 77 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ import { getIconPath } from "@genexus/mercury/assets-manager.js";
88
// const deleteIconPath =
99
// "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/delete.svg";
1010

11+
const FOLDER_ICON = {
12+
imgSrc: getIconPath({
13+
category: "system",
14+
name: "folder",
15+
colorType: "on-interactive"
16+
})
17+
};
18+
1119
export const plainModel = [
1220
{ id: "item-1", type: "actionable", caption: "Item 1" },
1321
{ id: "item-2", type: "actionable", caption: "Item 2" },
@@ -189,9 +197,7 @@ export const withIconsModel: ActionListModel = [
189197
caption: "Item 1",
190198
additionalInformation: {
191199
"stretch-start": {
192-
center: [
193-
{ imgSrc: getIconPath({ category: "objects", name: "workflow" }) }
194-
]
200+
center: [FOLDER_ICON]
195201
}
196202
}
197203
},
@@ -201,9 +207,7 @@ export const withIconsModel: ActionListModel = [
201207
caption: "Item 2",
202208
additionalInformation: {
203209
"stretch-start": {
204-
center: [
205-
{ imgSrc: getIconPath({ category: "objects", name: "work-panel" }) }
206-
]
210+
center: [FOLDER_ICON]
207211
}
208212
}
209213
},
@@ -213,9 +217,7 @@ export const withIconsModel: ActionListModel = [
213217
caption: "Item 3",
214218
additionalInformation: {
215219
"stretch-start": {
216-
center: [
217-
{ imgSrc: getIconPath({ category: "objects", name: "webpanel" }) }
218-
]
220+
center: [FOLDER_ICON]
219221
}
220222
}
221223
},
@@ -225,11 +227,7 @@ export const withIconsModel: ActionListModel = [
225227
caption: "Item 4",
226228
additionalInformation: {
227229
"stretch-start": {
228-
center: [
229-
{
230-
imgSrc: getIconPath({ category: "objects", name: "web-component" })
231-
}
232-
]
230+
center: [FOLDER_ICON]
233231
}
234232
}
235233
},
@@ -239,9 +237,71 @@ export const withIconsModel: ActionListModel = [
239237
caption: "Item 5",
240238
additionalInformation: {
241239
"stretch-start": {
242-
center: [
243-
{ imgSrc: getIconPath({ category: "objects", name: "version" }) }
244-
]
240+
center: [FOLDER_ICON]
241+
}
242+
}
243+
}
244+
];
245+
246+
export const onElevationModel: ActionListModel = [
247+
{
248+
id: "item-a-1",
249+
type: "actionable",
250+
caption: "Item A-1",
251+
additionalInformation: {
252+
"stretch-start": {
253+
center: [FOLDER_ICON]
254+
}
255+
}
256+
},
257+
{
258+
id: "item-a-2",
259+
type: "actionable",
260+
caption: "Item A-2",
261+
additionalInformation: {
262+
"stretch-start": {
263+
center: [FOLDER_ICON]
264+
}
265+
}
266+
},
267+
{
268+
id: "item-a-3",
269+
type: "actionable",
270+
caption: "Item A-3",
271+
additionalInformation: {
272+
"stretch-start": {
273+
center: [FOLDER_ICON]
274+
}
275+
}
276+
},
277+
{ type: "separator" },
278+
{
279+
id: "item-b-1",
280+
type: "actionable",
281+
caption: "Item B-1",
282+
additionalInformation: {
283+
"stretch-start": {
284+
center: [FOLDER_ICON]
285+
}
286+
}
287+
},
288+
{
289+
id: "item-b-2",
290+
type: "actionable",
291+
caption: "Item B-2",
292+
additionalInformation: {
293+
"stretch-start": {
294+
center: [FOLDER_ICON]
295+
}
296+
}
297+
},
298+
{
299+
id: "item-b-3",
300+
type: "actionable",
301+
caption: "Item B-3",
302+
additionalInformation: {
303+
"stretch-start": {
304+
center: [FOLDER_ICON]
245305
}
246306
}
247307
}

‎packages/mercury/src/components/list-box/_list-box-styles.scss‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
@use "../../base/typography" as *;
44

55
%list-box {
6-
--ch-action-list-group__expandable-button-image-size: var(--icon-box-md);
6+
--ch-action-list-group__expandable-button-image-size: var(--size-14);
77
--ch-action-list-group__expandable-button-size: var(--icon-box-md);
88
--ch-action-list-item__background-image-size: var(--icon-size-md);
9-
--ch-action-list-item__image-size: var(--icon-box-md);
9+
--ch-action-list-item__image-size: var(--icon-box-sm);
1010

1111
@include items-container-border();
1212
@include items-container-border-radius();
@@ -35,7 +35,7 @@
3535

3636
&--not-selectable {
3737
&--hover {
38-
@include item-colors-hover();
38+
// @include item-colors-hover();
3939
}
4040
}
4141

@@ -44,11 +44,16 @@
4444
@include item-colors-hover();
4545
}
4646
}
47+
&--selectable {
48+
&--active {
49+
@include item-colors-selected();
50+
}
51+
}
4752
&--selected {
4853
@include item-colors-selected();
49-
&--hover {
50-
@include item-colors-selected-hover();
51-
}
54+
}
55+
&--selected-hover {
56+
@include item-colors-selected-hover();
5257
}
5358
&--not-selected {
5459
&--hover {
@@ -186,10 +191,16 @@
186191
#{$group-action--selected-selector} {
187192
@extend %list-box-item-action--selected;
188193
&:hover {
189-
@extend %list-box-item-action--selected--hover;
194+
@extend %list-box-item-action--selected-hover;
190195
}
191196
}
192197

198+
// Selectable Active
199+
#{$item-action-selectable-selector}:active,
200+
#{$group-action-selectable-selector}:active {
201+
@extend %list-box-item-action--selectable--active;
202+
}
203+
193204
// Selectable Not Selected
194205
#{$item-action--not-selected-selector},
195206
#{$group-action--not-selected-selector} {

0 commit comments

Comments
 (0)