experimental

Author: Lukas742

.storybook/components/DocsHeader.module.css

@@ -35,3 +35,17 @@
 .infoTable td[data-import-cell='true'] {
   padding-inline-end: 2.5rem;
 }
+
+.titleRow {
+  padding-block-end: 0.5rem;
+}
+
+.titleRow :global(.sbdocs-title) {
+  margin-bottom: 0;
+}
+
+.experimentalLabel {
+  font-size: var(--sapObjectHeader_Title_SnappedFontSize);
+  margin-inline-start: 0.25rem;
+  align-self: flex-end;
+}

.storybook/components/DocsHeader.tsx

@@ -49,6 +49,7 @@ interface InfoTableProps {
   subComponents?: string[];
   mergeSubComponents?: boolean;
   isChart?: boolean;
+  experimental?: boolean;
 }
 
 export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => {
@@ -128,11 +129,12 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
   );
 };
 
-export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart }: InfoTableProps) => {
+export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => {
   return (
     <ThemeProvider>
-      <FlexBox alignItems={FlexBoxAlignItems.Center}>
+      <FlexBox alignItems={FlexBoxAlignItems.Center} className={classes.titleRow}>
         <Title />
+        {experimental && <Label className={classes.experimentalLabel}>experimental</Label>}
         <span style={{ flexGrow: 1 }} />
         <Links />
       </FlexBox>

.storybook/manager-head.html

@@ -50,6 +50,15 @@
   input:not(:checked) ~ span:first-of-type {
     background-color: transparent !important;
   }
+
+  /*experimental components */
+  #data-display-table::after,
+  #inputs-tokenizer::after,
+  #layouts-floorplans-form::after,
+  #charts-timelinechart::after {
+    content: '(experimental)';
+    overflow: hidden;
+  }
 </style>
 
 <script data-ui5-config type="application/json">

packages/charts/src/components/TimelineChart/TimeLineChart.mdx

@@ -6,7 +6,7 @@ import { TimelineChartAnnotation } from './TimelineChartAnnotation';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader isChart since="1.10.0" />
+<DocsHeader isChart since="1.10.0" experimental />
 
 <Canvas of={ComponentStories.Default} />
 

packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx

@@ -6,7 +6,7 @@ import { TimelineChart } from './TimelineChart.js';
 import { TimelineChartAnnotation } from './TimelineChartAnnotation.js';
 
 const meta = {
-  title: 'TimelineChart (experimental)',
+  title: 'TimelineChart',
   component: TimelineChart,
   argTypes: {
     dataset: {

packages/main/src/webComponents/Form/Form.mdx

@@ -7,7 +7,7 @@ import * as ComponentStories from './Form.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader subComponents={['FormGroup', 'FormItem']} />
+<DocsHeader subComponents={['FormGroup', 'FormItem']} experimental />
 
 <br />
 

packages/main/src/webComponents/Form/Form.stories.tsx

@@ -7,7 +7,7 @@ import { FormItem } from '../FormItem/index.js';
 import { Form } from './index.js';
 
 const meta = {
-  title: 'Layouts & Floorplans / Form (experimental)',
+  title: 'Layouts & Floorplans / Form',
   component: Form,
   argTypes: {
     children: { control: { disable: true } }

packages/main/src/webComponents/Table/Table.mdx

@@ -11,7 +11,7 @@ import * as ComponentStories from './Table.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader />
+<DocsHeader experimental />
 
 <br />
 

packages/main/src/webComponents/Table/Table.stories.tsx

@@ -12,7 +12,7 @@ import { TableSelection } from '../TableSelection/index.js';
 import { Table } from './index.js';
 
 const meta = {
-  title: 'Data Display / Table (experimental)',
+  title: 'Data Display / Table',
   component: Table,
   argTypes: {
     headerRow: { control: { disable: true } },

packages/main/src/webComponents/Tokenizer/Tokenizer.mdx

@@ -8,7 +8,7 @@ import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 
 [//]: # 'todo: check why subcomponents are not displayed via CEM'
 
-<DocsHeader subComponents={['Token']} />
+<DocsHeader subComponents={['Token']} experimental />
 
 <br />