Skip to content

Commit a6fb627

Browse files
bgravenorstbgravenorst
committed
Update drop-down and enum display.
Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
1 parent 59ce310 commit a6fb627

3 files changed

Lines changed: 94 additions & 20 deletions

File tree

‎src/components/ParserOpenRPC/CollapseBox/styles.module.scss‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,56 @@
11
.collapseWrapper {
22
overflow: hidden;
3-
margin: 0.5rem 0 0.6rem;
3+
margin: 0;
44
border-radius: 0;
55
border: 1px solid var(--general-gray-light);
6+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
7+
contain: layout;
8+
width: 100%;
9+
box-sizing: border-box;
610

711
html[data-theme='dark'] & {
812
border: 1px solid var(--general-black-light);
913
}
14+
15+
// Make both states use identical dimensions to prevent layout shifts
16+
.buttonToggle {
17+
// Common styles for both states
18+
border-radius: 0.6rem;
19+
margin: 0.5rem;
20+
width: calc(100% - 1rem);
21+
font-weight: 500;
22+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
23+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
24+
box-sizing: border-box;
25+
}
26+
27+
// Collapsed state styling (not expanded)
28+
&:not(.collapsedWrapperView) {
29+
border: none;
30+
background: transparent;
31+
32+
.buttonToggle {
33+
background-color: var(--general-gray-dark);
34+
color: var(--ifm-color-white);
35+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
36+
37+
&:hover {
38+
background-color: var(--general-black);
39+
transform: translateY(-1px);
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
41+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
42+
}
43+
44+
html[data-theme='dark'] & {
45+
background-color: var(--general-gray);
46+
color: var(--general-black);
47+
48+
&:hover {
49+
background-color: var(--general-gray-light);
50+
}
51+
}
52+
}
53+
}
1054
}
1155

1256
.buttonToggle {
@@ -15,10 +59,11 @@
1559
align-items: center;
1660
justify-content: space-between;
1761
gap: 0.5rem;
18-
width: 100%;
1962
padding: 1.6rem;
2063
color: var(--ifm-heading-color);
2164
font-size: 1.4rem;
65+
border: none;
66+
background: transparent;
2267

2368
&:hover {
2469
background-color: var(--general-white-off);
@@ -33,26 +78,44 @@
3378
display: flex;
3479
width: 1.6rem;
3580
height: 1.6rem;
81+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
3682
}
3783

3884
.arrowUp {
3985
display: flex;
4086
width: 1.6rem;
4187
height: 1.6rem;
4288
transform: scale(-1);
89+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
4390
}
4491

4592
.collapsedWrapperView {
4693
> div {
4794
border-top: 1px solid var(--general-gray-light);
4895
border-radius: 0;
96+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
4997
}
5098

5199
> button {
52-
background-color: var(--general-white-off);
100+
background-color: var(--general-gray-light);
101+
color: var(--general-gray-dark);
102+
103+
&:hover {
104+
background-color: var(--general-gray);
105+
color: var(--general-black);
106+
transform: translateY(-1px);
107+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
108+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
109+
}
53110

54111
html[data-theme='dark'] & {
55112
background-color: var(--general-black-light);
113+
color: var(--general-gray);
114+
115+
&:hover {
116+
background-color: var(--general-gray-dark);
117+
color: var(--general-gray-light);
118+
}
56119
}
57120
}
58121

‎src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ const renderSchema = (
166166
showRequired={showRequired}
167167
/>
168168
<div className="padding-bottom--md">
169-
<CollapseBox isInitExpanded={isExpandedByDefault}>
169+
<CollapseBox isInitExpanded={false}>
170170
<>{elements}</>
171171
</CollapseBox>
172172
</div>
@@ -293,7 +293,7 @@ const renderSchema = (
293293
/>
294294
{shouldShowDetails && (
295295
<div className="padding-bottom--md">
296-
<CollapseBox isInitExpanded={isExpandedByDefault}>
296+
<CollapseBox isInitExpanded={false}>
297297
{(() => {
298298
// Check if array items are objects - if so, render properties directly (flatter structure)
299299
if (arrayType === 'array of objects') {
@@ -384,15 +384,9 @@ const renderSchema = (
384384
if (schemaItem.allOf) return renderCombinations(schemaItem, name, 'allOf')
385385
if (schemaItem.anyOf) return renderCombinations(schemaItem, name, 'anyOf')
386386

387-
const renderEnum = enumValues => {
388-
const formattedValues = enumValues.map(value => `\`${value}\``).join(', ')
389-
return (
390-
<div className={styles.propItemWrapper}>
391-
<p className={clsx(styles.description, 'margin--none type-paragraph-m')}>
392-
<MDContent content={`Valid options are: ${formattedValues}`} />
393-
</p>
394-
</div>
395-
)
387+
const formatEnumType = enumValues => {
388+
const values = enumValues.map(value => String(value)).join(' | ')
389+
return `enum: ${values}`
396390
}
397391

398392
if (schemaItem?.schema) {
@@ -402,7 +396,7 @@ const renderSchema = (
402396
title={name || schemaItem.schema.title}
403397
type={
404398
schemaItem.schema.enum
405-
? 'enum'
399+
? formatEnumType(schemaItem.schema.enum)
406400
: schemaItem.schema.type === 'array'
407401
? getArrayTypeDescription(schemaItem.schema.items, schemas)
408402
: schemaItem.schema.type
@@ -415,7 +409,6 @@ const renderSchema = (
415409
defaultVal={schemaItem.schema.default || schemaItem.default}
416410
showRequired={showRequired}
417411
/>
418-
{schemaItem.schema.enum && renderEnum(schemaItem.schema.enum)}
419412
</div>
420413
)
421414
}
@@ -426,7 +419,7 @@ const renderSchema = (
426419
title={name || schemaItem.title}
427420
type={
428421
schemaItem.enum
429-
? 'enum'
422+
? formatEnumType(schemaItem.enum)
430423
: schemaItem.type === 'array'
431424
? getArrayTypeDescription(schemaItem.items, schemas)
432425
: schemaItem.type
@@ -437,7 +430,6 @@ const renderSchema = (
437430
defaultVal={schemaItem.default}
438431
showRequired={showRequired}
439432
/>
440-
{schemaItem.enum && renderEnum(schemaItem.enum)}
441433
</div>
442434
)
443435
}

‎src/components/ParserOpenRPC/DetailsBox/styles.module.scss‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -328,8 +328,11 @@
328328
font-size: 1.4rem;
329329
}
330330

331-
// Styles for markdown content rendered by MDContent component
332-
:global(.md-content) {
331+
// Styles for markdown content rendered by MDContent component - scoped to ParserOpenRPC
332+
:global(.colContentWrap_src-components-ParserOpenRPC-global-module .md-content) {
333+
font-size: 1.4rem;
334+
line-height: 1.5;
335+
333336
a {
334337
color: var(--ifm-link-color);
335338
text-decoration: underline;
@@ -356,6 +359,22 @@
356359
background: var(--ifm-code-background);
357360
border-radius: 0.4rem;
358361
}
362+
363+
ul,
364+
ol {
365+
font-size: 1.4rem;
366+
line-height: 1.5;
367+
}
368+
369+
li {
370+
font-size: 1.4rem;
371+
line-height: 1.5;
372+
}
373+
374+
p {
375+
font-size: 1.4rem;
376+
line-height: 1.5;
377+
}
359378
}
360379

361380
html[data-theme='dark'] {

0 commit comments

Comments
 (0)