Skip to content

Commit 2cd48b5

Browse files
alexpmulealexpmule
authored
W-10704893 Add dynamic property maxHeight (#28)
* Add dynamic property css + test * Update README.md
1 parent 560b9c6 commit 2cd48b5

File tree

5 files changed

+50
-5
lines changed

5 files changed

+50
-5
lines changed

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,27 @@ npm start
8080
```sh
8181
npm test
8282
```
83+
84+
### Properties
85+
| Name | Type | Required | Default | Comment |
86+
|--------------------|-----------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
87+
| examples | object[] | yes | - | AMF model for examples. It can be Payload shape, list of Payload shapes, or any shape. |
88+
| mediaType | string | yes | - | Examples media type |
89+
| typeName | string | no | - | Type (model) name for which examples are generated for. This is used by RAML to XML examples processor to wrap the example in type name. If missing this wrapping is omitted. |
90+
| payloadId | string | no | - | Rendered payload ID (if any) to associate examples with the payload. |
91+
| _renderedExamples | Example[] | no | - | Computed in a debouncer examples to render. |
92+
| hasExamples | boolean | no | false | Computed value, true if there are examples to render. This value is reflected to attribute so the element can be hidden via CSS until examples are set. ```api-resource-example-document { display: none; } api-resource-example-document[has-examples] { display: block; } ``` |
93+
| table | boolean | no | - | If true it will display a table view instead of JSON code. `isJson` must be set to use this option. |
94+
| isJson | boolean | no | false | Computed value, true if selected media type is application/json or equivalent. |
95+
| noAuto | boolean | no | - | Configuration passed to example generator. When set the generator only returns examples that are defined in API file, without auto generating examples from object properties. |
96+
| noActions | boolean | no | false | When set the actions row (copy, switch view type) is not rendered. |
97+
| rawOnly | boolean | no | - | When set it only renders "raw" examples. To be used when media type context is unknown. This can happen if RAML type document is rendered outside method documentation (not in a request/response body when media type is known). |
98+
| compatibility | boolean | no | false | Enables Anypoint compatibility styling |
99+
| _effectiveTable | boolean | no | - | |
100+
| _hasLocalStorage | boolean | no | - | True if current environment has localStorage support. Chrome apps do not have localStorage property. |
101+
| _renderReadOnly | boolean | no | false | If enabled then the example generator will be called with this option to add read-only properties to the example |
102+
| _examplesDebouncer | boolean | no | - | |
103+
104+
105+
106+

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@api-components/api-resource-example-document",
33
"description": "A viewer for examples in a resource based on AMF model",
4-
"version": "4.3.5",
4+
"version": "4.3.6",
55
"license": "Apache-2.0",
66
"main": "index.js",
77
"module": "index.js",

‎src/styles/Document.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ export default css`
2222
font-size: 1rem;
2323
display: var(--api-example-title-display, block);
2424
min-height: 36px;
25-
padding: 0 10px 0px 10px;
25+
padding: 0 10px 0 10px;
2626
background-color: var(--api-example-title-background-color, #ff9800);
2727
color: var(--api-example-title-color, #000);
28-
border-radius: 0px 2px 0px 0px;
28+
border-radius: 0 2px 0 0;
2929
display: flex;
3030
justify-content: space-between;
3131
align-items: center;
@@ -54,7 +54,7 @@ export default css`
5454
.renderer {
5555
padding: 8px 0;
5656
display: flex;
57-
max-height: 500px;
57+
max-height: var(--api-resource-example-document-max-height, 500px);
5858
-webkit-transition: all 0.4s 0.1s ease-in-out;
5959
-moz-transition: all 0.4s 0.1s ease-in-out;
6060
-o-transition: all 0.4s 0.1s ease-in-out;

‎test/api-resource-example-document.test.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -560,6 +560,27 @@ describe('ApiResourceExampleDocument', () => {
560560
assert.isDefined(expandIconCollapsed);
561561
});
562562

563+
it('should have panel max-height when maxHeight property is settled with custom styles', async () => {
564+
const payloads = getPayload(element, amf, '/IncludedInline', 'post');
565+
element.examples = payloads;
566+
567+
await aTimeout(100);
568+
const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer'));
569+
570+
assert.equal(getComputedStyle(wrraperExample).maxHeight, '500px');
571+
});
572+
573+
it('should have panel max-height when maxHeight property is settled with custom styles variables', async () => {
574+
const payloads = getPayload(element, amf, '/IncludedInline', 'post');
575+
element.examples = payloads;
576+
element.style.setProperty('--api-resource-example-document-max-height', '100px');
577+
578+
await aTimeout(100);
579+
const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer'));
580+
581+
assert.equal(getComputedStyle(wrraperExample).maxHeight, '100px');
582+
});
583+
563584
it('should expand example panel on click ', async () => {
564585
const payloads = getPayload(element, amf, '/IncludedInline', 'post');
565586
element.examples = payloads;

0 commit comments

Comments
 (0)