Skip to content

Commit bb252ae

Browse files
author
Marcell Toth
authored
fix: styling issues (#117)
* fix: align arrows * fix: symmetric margins * fix: let the description text break into new lines * test: update snapshots
1 parent 854d436 commit bb252ae

File tree

6 files changed

+108
-107
lines changed

6 files changed

+108
-107
lines changed

‎src/__tests__/__snapshots__/index.spec.tsx.snap‎

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

‎src/__tests__/index.spec.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ describe('Expanded depth', () => {
243243
<div>
244244
<div>
245245
<div>
246-
<div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
246+
<div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
247247
<div><span>array of objects</span></div>
248248
</div>
249249
</div>
@@ -268,7 +268,7 @@ describe('Expanded depth', () => {
268268
<div>
269269
<div>
270270
<div>
271-
<div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
271+
<div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
272272
<div><span>array of objects</span></div>
273273
</div>
274274
</div>
@@ -281,7 +281,7 @@ describe('Expanded depth', () => {
281281
<div>
282282
<div>
283283
<div>
284-
<div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
284+
<div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
285285
<div>
286286
<div>foo</div>
287287
<span>array of objects</span>
@@ -311,7 +311,7 @@ describe('Expanded depth', () => {
311311
<div>
312312
<div>
313313
<div>
314-
<div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
314+
<div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
315315
<div><span>array of objects</span></div>
316316
</div>
317317
</div>
@@ -324,7 +324,7 @@ describe('Expanded depth', () => {
324324
<div>
325325
<div>
326326
<div>
327-
<div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
327+
<div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
328328
<div>
329329
<div>foo</div>
330330
<span>array of objects</span>
@@ -340,7 +340,7 @@ describe('Expanded depth', () => {
340340
<div>
341341
<div>
342342
<div>
343-
<div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
343+
<div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
344344
<div>
345345
<div>bar</div>
346346
<span>object</span>
@@ -406,7 +406,7 @@ describe('Expanded depth', () => {
406406
<div>
407407
<div>
408408
<div>
409-
<div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
409+
<div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
410410
<div><span>array of objects</span></div>
411411
</div>
412412
</div>
@@ -431,7 +431,7 @@ describe('Expanded depth', () => {
431431
<div>
432432
<div>
433433
<div>
434-
<div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
434+
<div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
435435
<div><span>array of objects</span></div>
436436
</div>
437437
</div>
@@ -460,7 +460,7 @@ describe('Expanded depth', () => {
460460
<div>
461461
<div>
462462
<div>
463-
<div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
463+
<div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
464464
<div>
465465
<div>foo</div>
466466
<span>array of objects</span>
@@ -490,7 +490,7 @@ describe('Expanded depth', () => {
490490
<div>
491491
<div>
492492
<div>
493-
<div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
493+
<div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
494494
<div><span>array of objects</span></div>
495495
</div>
496496
</div>
@@ -519,7 +519,7 @@ describe('Expanded depth', () => {
519519
<div>
520520
<div>
521521
<div>
522-
<div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
522+
<div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
523523
<div>
524524
<div>foo</div>
525525
<span>array of objects</span>
@@ -629,7 +629,7 @@ describe('Expanded depth', () => {
629629
<div>
630630
<div>
631631
<div>
632-
<div style=\\"width: 20px; height: 20px; position: relative\\" role=\\"button\\"></div>
632+
<div style=\\"width: 20px; height: 20px; position: relative; left: -7px\\" role=\\"button\\"></div>
633633
<div><span>object</span></div>
634634
</div>
635635
</div>
@@ -712,7 +712,7 @@ describe('$ref resolving', () => {
712712
<div>
713713
<div>
714714
<div>
715-
<div style=\\"width: 20px; height: 20px; left: -23.5px\\" role=\\"button\\"></div>
715+
<div style=\\"width: 20px; height: 20px; left: -27px\\" role=\\"button\\"></div>
716716
<div><span>$ref(#/foo)[]</span></div>
717717
</div>
718718
</div>

‎src/components/JsonSchemaViewer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
6666
<ChildStack
6767
childNodes={jsonSchemaTreeRoot.children}
6868
currentNestingLevel={-1}
69-
className={cn(className, 'JsonSchemaViewer')}
69+
className={cn(className, 'JsonSchemaViewer', 'sl-mr-5')}
7070
/>
7171
</JSVOptionsContextProvider>
7272
</MosaicProvider>

‎src/components/SchemaRow/SchemaRow.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,16 +75,17 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
7575
...(!isBrokenRef && nestingLevel === 0
7676
? {
7777
position: 'relative',
78+
left: -1 * SCHEMA_ROW_OFFSET,
7879
}
7980
: {
80-
left: CARET_ICON_BOX_DIMENSION * -1 + SCHEMA_ROW_OFFSET / -2,
81+
left: CARET_ICON_BOX_DIMENSION * -1 - SCHEMA_ROW_OFFSET,
8182
}),
8283
}}
8384
size={CARET_ICON_SIZE}
8485
/>
8586
) : null}
8687

87-
<div className="sl-flex sl-items-center sl-text-base sl-flex-1 sl-truncate">
88+
<div className="sl-flex sl-items-center sl-text-base sl-flex-1">
8889
{schemaNode.subpath.length > 0 && shouldShowPropertyName(schemaNode) && (
8990
<div className="sl-mr-2 sl-font-mono sl-font-bold">{last(schemaNode.subpath)}</div>
9091
)}
@@ -110,7 +111,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
110111
) : null}
111112

112113
{schemaNode.subpath.length > 1 && schemaNode.subpath[0] === 'patternProperties' ? (
113-
<div className="sl-ml-2 sl-truncate sl-text-muted">(pattern property)</div>
114+
<div className="sl-ml-2 sl-text-muted">(pattern property)</div>
114115
) : null}
115116
{choices.length > 1 && (
116117
<Select
@@ -136,7 +137,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
136137
</div>
137138

138139
{typeof description === 'string' && description.length > 0 && (
139-
<div className="sl-flex sl-flex-1 sl-my-2 sl-py-px sl-truncate">
140+
<div className="sl-flex sl-flex-1 sl-my-2 sl-py-px">
140141
<Description value={description} />
141142
</div>
142143
)}

‎src/components/shared/Description.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22

33
export const Description: React.FunctionComponent<{ value: string }> = ({ value }) => (
44
// TODO (JJ): Add mosaic popover showing full description in MarkdownViewer
5-
<div className="sl-truncate sl-w-full sl-text-muted" title={value}>
5+
<div className="sl-w-full sl-text-muted" title={value}>
66
{value}
77
</div>
88
);

0 commit comments

Comments
 (0)