Skip to content

W-10704893 Add dynamic property maxHeight #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Mar 3, 2022
Merged

W-10704893 Add dynamic property maxHeight #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
88a8370
Add dynamic property minHeight + test
alexpmule Feb 25, 2022
e0adb5d
Added table in readme with definition of the dynamic properties
alexpmule Feb 25, 2022
1645ffd
Refactor changes and fix typo
alexpmule Feb 25, 2022
7b1f29d
change dynamic to maxHeight
alexpmule Feb 25, 2022
a157b24
fix test
alexpmule Feb 26, 2022
9b87795
improve test
alexpmule Feb 26, 2022
6d822ff
improve wording
alexpmule Feb 26, 2022
717628a
rename var
alexpmule Feb 26, 2022
44cbb95
4.3.6
alexpmule Feb 26, 2022
fca603f
Code review
alexpmule Mar 1, 2022
75607e5
Code review
alexpmule Mar 1, 2022
75dafc0
Use css variables
alexpmule Mar 2, 2022
d1dcfca
Use css variables
alexpmule Mar 2, 2022
b234e3b
Use css variables
alexpmule Mar 2, 2022
904ba09
Unit test
alexpmule Mar 3, 2022
dd5c008
Update README.md
alexpmule Mar 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,27 @@ npm start
```sh
npm test
```

### Properties
| Name | Type | Required | Default | Comment |
|--------------------|-----------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| examples | object[] | yes | - | AMF model for examples. It can be Payload shape, list of Payload shapes, or any shape. |
| mediaType | string | yes | - | Examples media type |
| 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. |
| payloadId | string | no | - | Rendered payload ID (if any) to associate examples with the payload. |
| _renderedExamples | Example[] | no | - | Computed in a debouncer examples to render. |
| 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; } ``` |
| table | boolean | no | - | If true it will display a table view instead of JSON code. `isJson` must be set to use this option. |
| isJson | boolean | no | false | Computed value, true if selected media type is application/json or equivalent. |
| 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. |
| noActions | boolean | no | false | When set the actions row (copy, switch view type) is not rendered. |
| 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). |
| compatibility | boolean | no | false | Enables Anypoint compatibility styling |
| _effectiveTable | boolean | no | - | |
| _hasLocalStorage | boolean | no | - | True if current environment has localStorage support. Chrome apps do not have localStorage property. |
| _renderReadOnly | boolean | no | false | If enabled then the example generator will be called with this option to add read-only properties to the example |
| _examplesDebouncer | boolean | no | - | |




2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@api-components/api-resource-example-document",
"description": "A viewer for examples in a resource based on AMF model",
"version": "4.3.5",
"version": "4.3.6",
"license": "Apache-2.0",
"main": "index.js",
"module": "index.js",
Expand Down
6 changes: 3 additions & 3 deletions src/styles/Document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export default css`
font-size: 1rem;
display: var(--api-example-title-display, block);
min-height: 36px;
padding: 0 10px 0px 10px;
padding: 0 10px 0 10px;
background-color: var(--api-example-title-background-color, #ff9800);
color: var(--api-example-title-color, #000);
border-radius: 0px 2px 0px 0px;
border-radius: 0 2px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
Expand Down Expand Up @@ -54,7 +54,7 @@ export default css`
.renderer {
padding: 8px 0;
display: flex;
max-height: 500px;
max-height: var(--api-resource-example-document-max-height, 500px);
-webkit-transition: all 0.4s 0.1s ease-in-out;
-moz-transition: all 0.4s 0.1s ease-in-out;
-o-transition: all 0.4s 0.1s ease-in-out;
Expand Down
21 changes: 21 additions & 0 deletions test/api-resource-example-document.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,27 @@ describe('ApiResourceExampleDocument', () => {
assert.isDefined(expandIconCollapsed);
});

it('should have panel max-height when maxHeight property is settled with custom styles', async () => {
const payloads = getPayload(element, amf, '/IncludedInline', 'post');
element.examples = payloads;

await aTimeout(100);
const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer'));

assert.equal(getComputedStyle(wrraperExample).maxHeight, '500px');
});

it('should have panel max-height when maxHeight property is settled with custom styles variables', async () => {
const payloads = getPayload(element, amf, '/IncludedInline', 'post');
element.examples = payloads;
element.style.setProperty('--api-resource-example-document-max-height', '100px');

await aTimeout(100);
const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer'));

assert.equal(getComputedStyle(wrraperExample).maxHeight, '100px');
});

it('should expand example panel on click ', async () => {
const payloads = getPayload(element, amf, '/IncludedInline', 'post');
element.examples = payloads;
Expand Down