diff --git a/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html b/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html index ebaf18d6e..f716bb778 100644 --- a/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html +++ b/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html @@ -25,8 +25,7 @@ *ngIf="isSourceShown" [lineNumbers]="true" [filled]="true" - [codeFiles]="this.files" - [maxHeight]="318"> + [codeFiles]="files"> diff --git a/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.ts b/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.ts index a02c256da..12f0cea87 100644 --- a/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.ts +++ b/apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.ts @@ -97,12 +97,13 @@ export class DocsLiveExampleViewer { const docsContentPath = `docs-content/examples-source/${this.exampleData.packagePath}`; const observables = this.exampleData.files.map((fileName) => { + const language = this.determineLanguage(fileName); const importPath = `${docsContentPath}/${fileName}`; return this.fetchCode(importPath).pipe( map((content) => ({ - filename: this.determineLanguage(fileName), + filename: language, content: content, - language: this.determineLanguage(fileName) + language })) ); }); @@ -114,7 +115,7 @@ export class DocsLiveExampleViewer { (a, b) => preferredExampleFileOrder.indexOf(a.language) - preferredExampleFileOrder.indexOf(b.language) ); - this.files.push(...results); + this.files.push(...this.prepareCodeFiles(results)); }, error: (error) => { console.error('Error fetching the files', error); @@ -181,4 +182,13 @@ export class DocsLiveExampleViewer { } } } + + private prepareCodeFiles(codeFiles: ExampleFileData[]) { + const filteredFiles = codeFiles.filter((file) => file.content); + if (filteredFiles.length === 1) { + /* If there is only one non-empty document in the example, then show the block without tabs */ + filteredFiles[0].filename = null; + } + return filteredFiles; + } } diff --git a/packages/docs-examples/components/card/card-overview/card-overview-example.css b/packages/docs-examples/components/card/card-overview/card-overview-example.css index 186f3f80a..049641cfb 100644 --- a/packages/docs-examples/components/card/card-overview/card-overview-example.css +++ b/packages/docs-examples/components/card/card-overview/card-overview-example.css @@ -1,5 +1,3 @@ -/** No CSS for this example */ - .kbq-card { margin-right: 1rem; margin-bottom: 0.5rem; diff --git a/packages/docs-examples/components/table/table-full-width/table-full-width-example.css b/packages/docs-examples/components/table/table-full-width/table-full-width-example.css index c93345ace..551470a9f 100644 --- a/packages/docs-examples/components/table/table-full-width/table-full-width-example.css +++ b/packages/docs-examples/components/table/table-full-width/table-full-width-example.css @@ -1,5 +1,3 @@ -/** No CSS for this example */ - .docs-table-example_full-width { width: 100%; } diff --git a/packages/docs-examples/components/table/table-with-borders/table-with-borders-example.css b/packages/docs-examples/components/table/table-with-borders/table-with-borders-example.css index e507d9a5a..eac3d1536 100644 --- a/packages/docs-examples/components/table/table-with-borders/table-with-borders-example.css +++ b/packages/docs-examples/components/table/table-with-borders/table-with-borders-example.css @@ -1,5 +1,3 @@ -/** No CSS for this example */ - .docs-table-example_full-width { width: 100%; }