Skip to content

Commit 50ee280

Browse files
bsastregxbsastregx
authored
[mercury] general fixes (#383)
* Fix vertical alignment of labels in inline fields Added a margin-block-start to labels positioned on the left or right of input fields for better vertical alignment. This adjustment is applied only when the parent has the field-inline class. Previously, labels positioned above fields inherited the margin-block-start, which caused alignment issues. The solution involves using the selector .field-inline > .label to ensure proper styling. * update radio-group showcase page Add chameleon vertical case. * rename `form-input` to just `input` an input could be used independently of a form. * rename `form-label` to just `label` A label could be used independently of a form. * rename `form-radio-group` to just `radio-group` A radio-group could be used independently of a form. * rename `form-checkbox` to just `checkbox` A checkbox could be used independently of a form. * split "layout" and "sapcing" bundles Moved the spacing-body classes out of utils/layout as they can be needed independently. There are cases where the layout classes aren't used, but spacing-body is still required. * Add :host() selector to widget and elevation bundles for Shadow DOM support Added the :host() selector for the widget and elevation bundles to allow direct application on the Host element in Shadow DOM components. * update showcase files * Include spacing-body tokens on accordion component. * Update accordion component sowcase with spacing-body classes * rename elevation classes by removing the "0" - `.elevation-01` was renamed to `.elevation-1` - `.elevation-02` was renamed to `.elevation-2` - `.elevation-03` was renamed to `.elevation-3` * add `utils/spacing` to `getThemeModelItem` * update mercury showcase files * Update sidebar styles and add showcase basic example. - Add `--spacing-body-*` tokens - Customize button styles * remove unwanted console.log * Include a "sidebar collapsed hidden" version * Include "with motion" sidebar case. - Include a "with motion" sidebar class selector. - Update sidebar showcase. * update showcase files * Update all.css
1 parent f1e63e2 commit 50ee280

27 files changed

+798
-258
lines changed

‎packages/mercury/showcase/_tests.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
html:not(.hydrated) {
1010
visibility: hidden;
1111
}
12-
.form-input {
13-
}
1412
.scrollable {
1513
height: 300px;
1614
overflow: auto;
@@ -205,22 +203,22 @@ <h1 class="section__title">tests page</h1>
205203

206204
<ch-tabular-grid-row class="tabular-grid-row" rowid="ar">
207205
<ch-tabular-grid-cell class="tabular-grid-cell"
208-
>.form-input</ch-tabular-grid-cell
206+
>.input</ch-tabular-grid-cell
209207
>
210208
<ch-tabular-grid-cell class="tabular-grid-cell">
211209
<ch-edit
212-
class="form-input"
210+
class="input"
213211
placeholder="e.g. Mike Shinoda"
214212
></ch-edit>
215213
</ch-tabular-grid-cell>
216214
</ch-tabular-grid-row>
217215
<ch-tabular-grid-row class="tabular-grid-row" rowid="bo">
218216
<ch-tabular-grid-cell class="tabular-grid-cell"
219-
>.form-input</ch-tabular-grid-cell
217+
>.input</ch-tabular-grid-cell
220218
>
221219
<ch-tabular-grid-cell class="tabular-grid-cell">
222220
<ch-edit
223-
class="form-input"
221+
class="input"
224222
placeholder="e.g. Mike Shinoda"
225223
></ch-edit>
226224
</ch-tabular-grid-cell>
@@ -366,12 +364,12 @@ <h1 class="section__title">tests page</h1>
366364
<div class="article__main">
367365
<div class="article__content controls-container">
368366
<ch-edit
369-
class="form-input control-height control-height--24"
367+
class="input control-height control-height--24"
370368
placeholder="24px"
371369
></ch-edit>
372-
<ch-edit class="form-input" placeholder="26px"></ch-edit>
370+
<ch-edit class="input" placeholder="26px"></ch-edit>
373371
<ch-edit
374-
class="form-input control-height control-height--26"
372+
class="input control-height control-height--26"
375373
placeholder="28px"
376374
></ch-edit>
377375
</div>

‎packages/mercury/showcase/accordion.html‎

Lines changed: 189 additions & 71 deletions
Large diffs are not rendered by default.

‎packages/mercury/showcase/all.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mercury/showcase/assets/json/navbar-items.json‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"chameleonUrl": null
1414
},
1515
{
16-
"caption": "form-checkbox",
17-
"url": "form-checkbox.html",
16+
"caption": "checkbox",
17+
"url": "checkbox.html",
1818
"chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/checkbox#ch-checkbox"
1919
},
2020
{
@@ -38,13 +38,13 @@
3838
"chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/image#ch-image"
3939
},
4040
{
41-
"caption": "form-input",
42-
"url": "form-input.html",
41+
"caption": "input",
42+
"url": "input.html",
4343
"chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/edit#ch-edit"
4444
},
4545
{
46-
"caption": "form-label",
47-
"url": "form-label.html",
46+
"caption": "label",
47+
"url": "label.html",
4848
"chameleonUrl": null
4949
},
5050
{
@@ -58,8 +58,8 @@
5858
"chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/action-list#ch-action-list-render"
5959
},
6060
{
61-
"caption": "form-radio-group",
62-
"url": "form-radio-group.html",
61+
"caption": "radio-group",
62+
"url": "radio-group.html",
6363
"chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/radio-group#ch-radio-group-render"
6464
},
6565
{
@@ -106,6 +106,12 @@
106106
"caption": "widget",
107107
"url": "widget.html",
108108
"chameleonUrl": null
109+
},
110+
{
111+
"caption": "sidebar",
112+
"url": "sidebar.html",
113+
"chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/sidebar#ch-sidebar",
114+
"hidden": true
109115
}
110116
]
111117
},

‎packages/mercury/showcase/assets/scripts/scripts.js‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -300,24 +300,28 @@ const includeSidebarNav = async () => {
300300
});
301301

302302
listItemsArr.forEach(item => {
303-
const li = document.createElement("li");
304-
const a = document.createElement("a");
305-
a.href = item.url;
306-
a.textContent = item.caption;
307-
308-
// ¿Is this the item of the actual page?
309-
if (item.url.split(".")[0] === pageName) {
310-
CURRENT_PAGE_NAV_ITEM = li;
311-
li.classList.add("current-page");
312-
313-
// Include chameleon URL
314-
if (item.chameleonUrl && item.chameleonUrl !== null) {
315-
includeChameleonURL(item.chameleonUrl);
303+
const hidden = item.hidden;
304+
if (!hidden) {
305+
const li = document.createElement("li");
306+
const a = document.createElement("a");
307+
308+
a.href = item.url;
309+
a.textContent = item.caption;
310+
311+
// ¿Is this the item of the actual page?
312+
if (item.url.split(".")[0] === pageName) {
313+
CURRENT_PAGE_NAV_ITEM = li;
314+
li.classList.add("current-page");
315+
316+
// Include chameleon URL
317+
if (item.chameleonUrl && item.chameleonUrl !== null) {
318+
includeChameleonURL(item.chameleonUrl);
319+
}
316320
}
317-
}
318321

319-
li.appendChild(a);
320-
ul.appendChild(li);
322+
li.appendChild(a);
323+
ul.appendChild(li);
324+
}
321325
});
322326

323327
listSectionEl.appendChild(ul);
@@ -648,8 +652,6 @@ const includeBundleButtonV2 = () => {
648652
copyBundleButton.className = "button-tertiary button-icon-and-text";
649653
buttonCaption = `${bundleValue}`;
650654

651-
console.log(buttonCaption);
652-
653655
const buttonCaptionTextNode = document.createTextNode(buttonCaption);
654656

655657
copyBundleButton.addEventListener("click", e => {

‎packages/mercury/showcase/assets/styles/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ body.showcase {
202202
display: none;
203203
}
204204
::selection {
205-
background-color: var(--mer-color__tinted-blue--10);
205+
background-color: var(--mer-color__tinted-primary--10);
206206
color: var(--mer-text__on-surface);
207207
}
208208
.m-0 {

‎packages/mercury/showcase/form-checkbox.html‎ renamed to ‎packages/mercury/showcase/checkbox.html‎

File renamed without changes.

‎packages/mercury/showcase/doc-gemini-migration.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,7 @@ <h1 class="section__title">gemini migration</h1>
514514
<code>ch-edit</code> tag.
515515
</li>
516516
<li>Remove all the attributes and values</li>
517-
<li>Add the <code>.form-input</code> class.</li>
517+
<li>Add the <code>.input</code> class.</li>
518518
<li>
519519
If the <code>gxg-form-text</code> was displaying an icon,
520520
use the <code>startImgSrc</code> property
@@ -564,7 +564,7 @@ <h1 class="section__title">gemini migration</h1>
564564
// use inside <Host> or any TSX
565565
<ch-edit
566566
value="Adam Smith"
567-
class="form-input"
567+
class="input"
568568
placeholder="John Smith"
569569
startImgSrc={this.#chEditIcon}
570570
></ch-edit>`;
@@ -573,18 +573,16 @@ <h1 class="section__title">gemini migration</h1>
573573
<div class="article__content">
574574
<ch-edit
575575
value="Adam Smith"
576-
class="form-input"
576+
class="input"
577577
placeholder="John Smith"
578578
id="ch-edit"
579579
></ch-edit>
580580
</div>
581581
<!-- /.article__content -->
582582
<div class="article__content">
583583
<div class="dummy-grid-container">
584-
<a
585-
href="./form-input.html"
586-
class="dummy-grid-container__item"
587-
>form-input classes</a
584+
<a href="./input.html" class="dummy-grid-container__item"
585+
>input classes</a
588586
>
589587
</div>
590588
</div>
@@ -636,15 +634,15 @@ <h1 class="section__title">gemini migration</h1>
636634
<script>
637635
code = `// use inside <Host> or any TSX
638636
<ch-edit
639-
class="form-input"
637+
class="input"
640638
placeholder="Describe your experience as a backend developer"
641639
multiline={true}
642640
></ch-edit>`;
643641
</script>
644642
</div>
645643
<div class="article__content" style="height: 100px">
646644
<ch-edit
647-
class="form-input"
645+
class="input"
648646
placeholder="Describe your experience as a backend developer"
649647
multiline
650648
auto-grow

‎packages/mercury/showcase/doc-spacing.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<link rel="stylesheet" href="./assets/styles/main.css" />
2828
<link rel="stylesheet" href="./assets/styles/reset.css" />
2929
</head>
30-
<body class="showcase" data-sidebar>
30+
<body class="showcase" data-sidebar data-bundle="utils/spacing">
3131
<script src="./assets/scripts/scripts.js"></script>
3232
<main class="main">
3333
<div class="container">

‎packages/mercury/showcase/doc-utility-classes.html‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,13 @@ <h1 class="section__title">background</h1>
4949
</p>
5050
</header>
5151
<div class="section__articles-container">
52-
<!-- elevation 01 -->
53-
<article class="article" data-nav data-title="elevation 01">
52+
<!-- elevation 1 -->
53+
<article class="article" data-nav data-title="elevation 1">
5454
<header class="article__header"></header>
5555
<!-- main -->
5656
<div class="article__main">
5757
<p class="article__description">
58-
Apply the <code>.elevation-01</code> background color class
58+
Apply the <code>.elevation-1</code> background color class
5959
only when the container has no ancestor with an elevation
6060
background. This approach maintains a clear visual hierarchy
6161
by enhancing contrast between nested elevation containers.
@@ -67,17 +67,17 @@ <h1 class="section__title">background</h1>
6767
<label class="text-body-regular-m"
6868
>surface background color</label
6969
>
70-
<div class="elevation-dummy-box elevation-01">
70+
<div class="elevation-dummy-box elevation-1">
7171
<label class="text-body-regular-m"
72-
>.elevation-01 background color</label
72+
>.elevation-1 background color</label
7373
>
7474
</div>
7575
</div>
7676
</div>
7777
<div class="article__code">
7878
<ch-code language="tsx" class="code"> </ch-code>
7979
<script>
80-
code = `<div class="elevation-01">
80+
code = `<div class="elevation-1">
8181
<!-- Your content here -->
8282
</div>`;
8383
</script>
@@ -87,34 +87,34 @@ <h1 class="section__title">background</h1>
8787
<!-- /.article__main -->
8888
</article>
8989

90-
<!-- elevation 02 -->
91-
<article class="article" data-nav data-title="elevation 02">
90+
<!-- elevation 2 -->
91+
<article class="article" data-nav data-title="elevation 2">
9292
<header class="article__header"></header>
9393
<!-- main -->
9494
<div class="article__main">
9595
<p class="article__description">
96-
Apply the <code>.elevation-02</code> background color class
96+
Apply the <code>.elevation-2</code> background color class
9797
when the parent container's has a
98-
<code>.elevation-01</code> background. This maintains a clear
98+
<code>.elevation-1</code> background. This maintains a clear
9999
visual hierarchy by enhancing contrast between nested
100100
elevation containers.
101101
</p>
102102
<div class="article__content">
103-
<div class="elevation-dummy-box elevation-01">
103+
<div class="elevation-dummy-box elevation-1">
104104
<label class="text-body-regular-m"
105-
>.elevation-01 background color</label
105+
>.elevation-1 background color</label
106106
>
107-
<div class="elevation-dummy-box elevation-02">
107+
<div class="elevation-dummy-box elevation-2">
108108
<label class="text-body-regular-m"
109-
>.elevation-02 background color</label
109+
>.elevation-2 background color</label
110110
>
111111
</div>
112112
</div>
113113
</div>
114114
<div class="article__code">
115115
<ch-code language="tsx" class="code"> </ch-code>
116116
<script>
117-
code = `<div class="elevation-02">
117+
code = `<div class="elevation-2">
118118
<!-- Your content here -->
119119
</div>`;
120120
</script>
@@ -124,34 +124,34 @@ <h1 class="section__title">background</h1>
124124
<!-- /.article__main -->
125125
</article>
126126

127-
<!-- elevation 01 -->
128-
<article class="article" data-nav data-title="elevation 03">
127+
<!-- elevation 1 -->
128+
<article class="article" data-nav data-title="elevation 3">
129129
<header class="article__header"></header>
130130
<!-- main -->
131131
<div class="article__main">
132132
<p class="article__description">
133-
Apply the <code>.elevation-03</code> background color class
133+
Apply the <code>.elevation-3</code> background color class
134134
when the parent container's has a
135-
<code>.elevation-02</code> background. This maintains a clear
135+
<code>.elevation-2</code> background. This maintains a clear
136136
visual hierarchy by enhancing contrast between nested
137137
elevation containers.
138138
</p>
139139
<div class="article__content">
140-
<div class="elevation-dummy-box elevation-02">
140+
<div class="elevation-dummy-box elevation-2">
141141
<label class="text-body-regular-m"
142-
>.elevation-02 background color</label
142+
>.elevation-2 background color</label
143143
>
144-
<div class="elevation-dummy-box elevation-03">
144+
<div class="elevation-dummy-box elevation-3">
145145
<label class="text-body-regular-m"
146-
>elevation-03 background color</label
146+
>elevation-3 background color</label
147147
>
148148
</div>
149149
</div>
150150
</div>
151151
<div class="article__code">
152152
<ch-code language="tsx" class="code"> </ch-code>
153153
<script>
154-
code = `<div class="elevation-03">
154+
code = `<div class="elevation-3">
155155
<!-- Your content here -->
156156
</div>`;
157157
</script>

0 commit comments

Comments
 (0)