Skip to content

Commit

Permalink
docs: playground enhancements (#9577)
Browse files Browse the repository at this point in the history
Fixes: #9468
Fixes: #9467
  • Loading branch information
nnaydenow committed Jul 30, 2024
1 parent 9bdb1d5 commit 6ed77f3
Show file tree
Hide file tree
Showing 24 changed files with 513 additions and 55 deletions.
2 changes: 1 addition & 1 deletion packages/ai/src/Button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import ButtonCss from "./generated/themes/Button.css.js";
*
* @constructor
* @extends UI5Element
* @since 2.0
* @since 2.0.0
* @public
* @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/ai/src/ButtonState.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
* @constructor
* @extends UI5Element
* @abstract
* @since 2.0
* @since 2.0.0
* @public
* @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/CalendarDateRange.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type { ICalendarSelectedDates } from "./Calendar.js";
* @implements {ICalendarSelectedDates}
* @abstract
* @public
* @since 2.0
* @since 2.0.0
*/
@customElement("ui5-date-range")
class CalendarDateRange extends UI5Element implements ICalendarSelectedDates {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MenuSeparator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import type { IMenuItem } from "./Menu.js";
* @extends ListItemBase
* @implements {IMenuItem}
* @public
* @since 2.0
* @since 2.0.0
*/
@customElement({
tag: "ui5-menu-separator",
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MultiComboBoxItemGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import type MultiComboBoxItem from "./MultiComboBoxItem.js";
* @abstract
* @public
* @implements {IMultiComboBoxItem}
* @since 2.0
* @since 2.0.0
*/
@customElement("ui5-mcb-item-group")
class MultiComboBoxItemGroup extends UI5Element implements IMultiComboBoxItem {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ type TableRowClickEventDetail = {
*
* @constructor
* @extends UI5Element
* @since 2.0
* @since 2.0.0
* @public
* @experimental This Table web component is available since 2.0 and has been newly implemented to provide better screen reader and keyboard handling support.
* Currently, it's considered experimental as its API is subject to change.
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableCell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { LABEL_COLON } from "./generated/i18n/i18n-defaults.js";
*
* @constructor
* @extends TableCellBase
* @since 2.0
* @since 2.0.0
* @public
* @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableCellBase.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js";
* @constructor
* @abstract
* @extends UI5Element
* @since 2.0
* @since 2.0.0
* @public
*/
@customElement({
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableGrowing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import {
*
* @constructor
* @extends UI5Element
* @since 2.0
* @since 2.0.0
* @public
* @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableHeaderCell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
*
* @constructor
* @extends TableCellBase
* @since 2.0
* @since 2.0.0
* @public
* @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableHeaderRow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
*
* @constructor
* @extends TableRowBase
* @since 2.0
* @since 2.0.0
* @public
* @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableRow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import RadioButton from "./RadioButton.js";
*
* @constructor
* @extends TableRowBase
* @since 2.0
* @since 2.0.0
* @public
* @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableRowBase.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
* @constructor
* @abstract
* @extends UI5Element
* @since 2.0
* @since 2.0.0
* @public
*/
@customElement({
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TableSelection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import { isSelectionCheckbox, isHeaderSelector, findRowInPath } from "./TableUti
*
* @constructor
* @extends UI5Element
* @since 2.0
* @since 2.0.0
* @public
* @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TimePicker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ class TimePicker extends UI5Element implements IFormInputElement {
* Defines the open or closed state of the popover.
* @public
* @default false
* @since 2.0
* @since 2.0.0
*/
@property({ type: Boolean })
open = false;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -314,21 +314,12 @@ const parseComponentDeclaration = (declaration, fileContent) => {
return "";
}

let additionalInfo;

if (declaration.customElement) {
additionalInfo = `\`\<${declaration.tagName}\>\``;
fileContent = enhanceFrontMatter(fileContent, "ui5_tag_name", declaration.tagName)
}

if (declaration._ui5since) {
additionalInfo = additionalInfo ? `${additionalInfo} | <span className="badge badge--primary">Since ${declaration._ui5since}</span>`
: `<span className="badge badge--primary">Since ${declaration._ui5since}</span>`;
}

if (additionalInfo) {
fileContent = fileContent.replace("<%COMPONENT_OVERVIEW%>", `<div className="componentAdditionalInfo">${additionalInfo}</div>
<%COMPONENT_OVERVIEW%>`)
fileContent = enhanceFrontMatter(fileContent, "ui5_since", `${declaration._ui5since}`)
}

if (declaration._ui5experimental) {
Expand Down Expand Up @@ -370,18 +361,32 @@ const addExperimentalClassName = (fileContent, declaration) => {
sidebar_class_name: ${experimentalCssClass}
---
${fileContent}`
}

return enhanceFrontMatter(fileContent, "sidebar_class_name", experimentalCssClass)
}

const enhanceFrontMatter = (fileContent, front_matter_name, value) => {
const frontMatter = fileContent.match(/^---\n(?:.+\n)*---/);

if (!frontMatter) {
return `---
${front_matter_name}: ${value}
---
${fileContent}`
}

const frontMatterLines = frontMatter[0].split("\n");
const classLineIndex = frontMatterLines.findIndex(line => line.startsWith("sidebar_class_name"))
const classLineIndex = frontMatterLines.findIndex(line => line.startsWith(front_matter_name))
const classLine = classLineIndex !== -1 ? frontMatterLines[classLineIndex] : undefined;
const hasExperimentalClass = classLine?.includes(experimentalCssClass);
const hasExperimentalClass = classLine?.includes(value);

if (classLine && !hasExperimentalClass) {
frontMatterLines[classLineIndex] = `${classLine} ${experimentalCssClass}`;
frontMatterLines[classLineIndex] = `${classLine} ${value}`;
} else if (!classLine) {
frontMatterLines.splice(frontMatterLines.length - 1, 0, `sidebar_class_name: ${experimentalCssClass}`);
frontMatterLines.splice(frontMatterLines.length - 1, 0, `${front_matter_name}: ${value}`);
}

return fileContent.replace(frontMatter[0], frontMatterLines.join("\n"));
Expand Down
89 changes: 64 additions & 25 deletions packages/website/src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -57,30 +57,30 @@
}

:root {
--playground-code-background: var(--sys-color-surface);
--playground-code-keyword-color: #708;
--playground-code-atom-color: #005cc5;
--playground-code-number-color: #005cc5;
--playground-code-def-color: #00f;
--playground-code-variable-color: #6f42c1;
--playground-code-property-color: #008176;
--playground-code-operator-color: #d92f3f;
--playground-code-variable-2-color: #000000;
--playground-code-variable-3-color: #000000;
--playground-code-type-color: #005cc5;
--playground-code-comment-color: #6a737d;
--playground-code-string-color: #a11;
--playground-code-string-2-color: #a11;
--playground-code-meta-color: #000000;
--playground-code-qualifier-color: #6f42c1;
--playground-code-builtin-color: #6f42c1;
--playground-code-tag-color: #30914c;
--playground-code-attribute-color: #6f42c1;
--playground-code-callee-color: #005cc5;
--playground-highlight-color: var(--sys-color-primary);
--playground-code-gutter-background: var(--playground-code-background);
--playground-code-cursor-color: var(--sys-color-on-surface);
--playground-code-selection-background: var(--sys-color-primary-transparent);
--playground-code-background: var(--sys-color-surface);
--playground-code-keyword-color: #708;
--playground-code-atom-color: #005cc5;
--playground-code-number-color: #005cc5;
--playground-code-def-color: #00f;
--playground-code-variable-color: #6f42c1;
--playground-code-property-color: #008176;
--playground-code-operator-color: #d92f3f;
--playground-code-variable-2-color: #000000;
--playground-code-variable-3-color: #000000;
--playground-code-type-color: #005cc5;
--playground-code-comment-color: #6a737d;
--playground-code-string-color: #a11;
--playground-code-string-2-color: #a11;
--playground-code-meta-color: #000000;
--playground-code-qualifier-color: #6f42c1;
--playground-code-builtin-color: #6f42c1;
--playground-code-tag-color: #30914c;
--playground-code-attribute-color: #6f42c1;
--playground-code-callee-color: #005cc5;
--playground-highlight-color: var(--sys-color-primary);
--playground-code-gutter-background: var(--playground-code-background);
--playground-code-cursor-color: var(--sys-color-on-surface);
--playground-code-selection-background: var(--sys-color-primary-transparent);
}

[data-theme='dark'] {
Expand Down Expand Up @@ -178,7 +178,7 @@ code {
}

/* Make top level menu items bold (main,fiori,etc.) */
.theme-doc-sidebar-item-category-level-1.menu__list-item > .menu__list-item-collapsible > a[href*="\/components"] {
.theme-doc-sidebar-item-category-level-1.menu__list-item>.menu__list-item-collapsible>a[href*="\/components"] {
font-weight: bold;
}

Expand Down Expand Up @@ -245,7 +245,46 @@ code {
pointer-events: none;
}

.theme-doc-sidebar-item-category {
&.expComponentBadge:before {
inset-inline-end: 2.25rem;
}

&.newComponentBadge:after {
inset-inline-end: 2.25rem;
}

&.newComponentBadge.expComponentBadge:before {
inset-inline-end: 4.5rem;
}
}

.componentAdditionalInfo {
margin-top: calc(-1 * calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading))) !important;
margin-bottom: var(--ifm-leading);
}

.filter {
-webkit-appearance: none;
appearance: none;
background: var(--ifm-navbar-search-input-background-color);
border: none;
border-radius: 0.5rem;
color: var(--ifm-navbar-search-input-color);
cursor: text;
display: inline-block;
font-size: .9rem;
height: 2rem;
padding: 0 .5rem 0 .5rem;
width: 100%;
}

.filterNoDataText {
padding: .5rem;
text-align: center;
}

.filterWrapper {
padding-inline-end: 0.5rem;
padding-block-end: 0.5rem;
}
54 changes: 54 additions & 0 deletions packages/website/src/theme/DocItem/Content/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
import Heading from '@theme/Heading';
import MDXContent from '@theme/MDXContent';
/**
Title can be declared inside md content or declared through
front matter and added manually. To make both cases consistent,
the added title is added under the same div.markdown block
See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
We render a "synthetic title" if:
- user doesn't ask to hide it with front matter
- the markdown content does not already contain a top-level h1 heading
*/
function useSyntheticTitle() {
const {metadata, frontMatter, contentTitle} = useDoc();
const shouldRender =
!frontMatter.hide_title && typeof contentTitle === 'undefined';
if (!shouldRender) {
return null;
}
return metadata.title;
}

const renderAdditionalInfo = () => {
const {frontMatter} = useDoc();
if (frontMatter.ui5_since && frontMatter.ui5_tag_name) {
return <div className="componentAdditionalInfo"><code>{"<" + frontMatter.ui5_tag_name + ">"}</code> | <span className="badge badge--primary">Since {frontMatter.ui5_since.toString()}</span></div>
}

if (frontMatter.ui5_tag_name) {
return <div className="componentAdditionalInfo"><code>{"<" + frontMatter.ui5_tag_name + ">"}</code></div>
}
if (frontMatter.ui5_since) {
return <div className="componentAdditionalInfo"><span className="badge badge--primary">Since {`${frontMatter.ui5_since}`}</span></div>
}
}

export default function DocItemContent({children}) {
const syntheticTitle = useSyntheticTitle();
return (
<div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
{syntheticTitle && (
<header>
<Heading as="h1">{syntheticTitle}</Heading>
{renderAdditionalInfo()}
</header>
)}
<MDXContent>{children}</MDXContent>
</div>
);
}
Loading

0 comments on commit 6ed77f3

Please sign in to comment.