Skip to content

Commit

Permalink
docs: enhance storybook samples (#7454)
Browse files Browse the repository at this point in the history 
*Bar
Cleared the JSDoc enums;
Changed the story name to -> Basic
*Button
Cleared JSDoc enums;
Remove redunant Storybook samples;
*DatePicker
Cleared JSDoc enums;
*DynamicSideContent
Added custom styling to the native HTML tags as changing the themes wasn't updating the content. For example on Dark themes like Evening Horizon, both the background and the text would appear dark, which led to poor user experience;
*FileUploader
Cleared JSDoc enums
Moved the Custom FileUploader sample to lower position, because we do not encourage using non-focusable elements;
*Menu
Fixed wrong property name headerText -> header-text because it wasnt showing on Mobile Devices;
Changed sample name -> Basic with Header Text -> Basic
*SplitButton
Cleared JSDoc enums;
Remove redunant Storybook samples;
*StepInput
Cleared JSDoc enums;
Wrapped the main story component in the Storybook in a div with max-width: 13rem, due to component being stretched to the whole page, causing poor user experience;
Simplified and removed redunant Storybook samples;
*Switch
Remove redunant Storybook samples;
Reduced the Textual Switch samples because we do not encourage using Text in our switch component;
*ToggleButton
Enhance samples;
  • Loading branch information
@hinzzx
hinzzx authored Sep 14, 2023
1 parent b4dea67 commit acf5c66
Show file tree
Hide file tree
Showing 19 changed files with 115 additions and 268 deletions.
16 changes: 3 additions & 13 deletions packages/fiori/src/Bar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,6 @@ class Bar extends UI5Element {
/**
* Defines the component's design.
*
* <br><br>
* <b>Note:</b>
* Available options are:
* <ul>
* <li><code>Header</code></li>
* <li><code>Subheader</code></li>
* <li><code>Footer</code></li>
* <li><code>FloatingFooter</code></li>
* </ul>
*
* @type {sap.ui.webc.fiori.types.BarDesign}
* @name sap.ui.webc.fiori.Bar.prototype.design
* @defaultvalue "Header"
Expand All @@ -90,7 +80,7 @@ class Bar extends UI5Element {
design!: `${BarDesign}`

/**
* Defines the content at the start of the bar
* Defines the content at the start of the bar.
* @type {HTMLElement[]}
* @name sap.ui.webc.fiori.Bar.prototype.startContent
* @slot
Expand All @@ -100,7 +90,7 @@ class Bar extends UI5Element {
startContent!: Array<HTMLElement>;

/**
* Defines the content in the middle of the bar
* Defines the content in the middle of the bar.
* @type {HTMLElement[]}
* @name sap.ui.webc.fiori.Bar.prototype.default
* @slot middleContent
Expand All @@ -110,7 +100,7 @@ class Bar extends UI5Element {
middleContent!: Array<HTMLElement>

/**
* Defines the content at the end of the bar
* Defines the content at the end of the bar.
* @type {HTMLElement[]}
* @name sap.ui.webc.fiori.Bar.prototype.endContent
* @slot
Expand Down
21 changes: 0 additions & 21 deletions packages/main/src/Button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,18 +105,6 @@ class Button extends UI5Element implements IFormElement {
/**
* Defines the component design.
*
* <br><br>
* <b>The available values are:</b>
*
* <ul>
* <li><code>Default</code></li>
* <li><code>Emphasized</code></li>
* <li><code>Positive</code></li>
* <li><code>Negative</code></li>
* <li><code>Transparent</code></li>
* <li><code>Attention</code></li>
* </ul>
*
* @type {sap.ui.webc.main.types.ButtonDesign}
* @name sap.ui.webc.main.Button.prototype.design
* @defaultvalue "Default"
Expand Down Expand Up @@ -254,15 +242,6 @@ class Button extends UI5Element implements IFormElement {
* Defines whether the button has special form-related functionality.
*
* <br><br>
* <b>The available values are:</b>
*
* <ul>
* <li><code>Button</code></li>
* <li><code>Submit</code></li>
* <li><code>Reset</code></li>
* </ul>
*
* <br><br>
* <b>Note:</b> For the <code>type</code> property to have effect, you must add the following import to your project:
* <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
*
Expand Down
9 changes: 0 additions & 9 deletions packages/main/src/DatePicker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,15 +226,6 @@ class DatePicker extends DateComponentBase implements IFormElement {

/**
* Defines the value state of the component.
* <br><br>
* Available options are:
* <ul>
* <li><code>None</code></li>
* <li><code>Error</code></li>
* <li><code>Warning</code></li>
* <li><code>Success</code></li>
* <li><code>Information</code></li>
* </ul>
*
* @type {sap.ui.webc.base.types.ValueState}
* @name sap.ui.webc.main.DatePicker.prototype.valueState
Expand Down
10 changes: 0 additions & 10 deletions packages/main/src/FileUploader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,16 +183,6 @@ class FileUploader extends UI5Element implements IFormElement {

/**
* Defines the value state of the component.
* <br><br>
* Available options are:
* <ul>
* <li><code>None</code></li>
* <li><code>Error</code></li>
* <li><code>Warning</code></li>
* <li><code>Success</code></li>
* <li><code>Information</code></li>
* </ul>
*
* @type {sap.ui.webc.base.types.ValueState}
* @name sap.ui.webc.main.FileUploader.prototype.valueState
* @defaultvalue "None"
Expand Down
12 changes: 0 additions & 12 deletions packages/main/src/SplitButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,18 +135,6 @@ class SplitButton extends UI5Element {
/**
* Defines the component design.
*
* <br><br>
* <b>The available values are:</b>
*
* <ul>
* <li><code>Default</code></li>
* <li><code>Emphasized</code></li>
* <li><code>Positive</code></li>
* <li><code>Negative</code></li>
* <li><code>Transparent</code></li>
* <li><code>Attention</code></li>
* </ul>
*
* @type {sap.ui.webc.main.types.ButtonDesign}
* @name sap.ui.webc.main.SplitButton.prototype.design
* @defaultvalue "Default"
Expand Down
9 changes: 0 additions & 9 deletions packages/main/src/StepInput.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,15 +155,6 @@ class StepInput extends UI5Element implements IFormElement {

/**
* Defines the value state of the component.
* <br><br>
* Available options are:
* <ul>
* <li><code>None</code></li>
* <li><code>Error</code></li>
* <li><code>Warning</code></li>
* <li><code>Success</code></li>
* <li><code>Information</code></li>
* </ul>
*
* @name sap.ui.webc.main.StepInput.prototype.valueState
* @type {sap.ui.webc.base.types.ValueState}
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/_stories/fiori/Bar/Bar.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const Template: UI5StoryArgs<Bar, StoryArgsSlots> = (args) => html`<ui5-bar
</ui5-bar>`;

export const Basic = Template.bind({});
Basic.storyName = "With Content and Design";
Basic.storyName = "Basic";
Basic.args = {
design: BarDesign.Header,
startContent: `<ui5-button icon="home" tooltip="Go home" design="Transparent" slot="startContent"></ui5-button>`,
Expand Down
38 changes: 19 additions & 19 deletions packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,20 @@ export default {
argTypes,
} as Meta<DynamicSideContent>;

const Template: UI5StoryArgs<DynamicSideContent, StoryArgsSlots> = (args) => html`<ui5-dynamic-side-content
const Template: UI5StoryArgs<DynamicSideContent, StoryArgsSlots> = (args) => html`
<style>
.text {
display: inline-block;
font-size: var(--sapFontSize);
font-family: var(--sapFontFamily);
color: var(--sapTextColor);
line-height: normal;
white-space: pre-line;
word-wrap: break-word;
cursor: text;
}
</style>
<ui5-dynamic-side-content
?equal-split="${ifDefined(args.equalSplit)}"
?hide-main-content="${ifDefined(args.hideMainContent)}"
?hide-side-content="${ifDefined(args.hideSideContent)}"
Expand All @@ -42,25 +55,12 @@ const Template: UI5StoryArgs<DynamicSideContent, StoryArgsSlots> = (args) => htm
export const Basic = Template.bind({});
Basic.args = {
default: `<div>
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.</p>
<ui5-title level="h1">Main Content</ui5-title>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.</p>
</div>`,
sideContent: `<div slot="sideContent">
<h1>Side Content</h1>
<p>Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.</p>
<ui5-title level="h1">Side Content</ui5-title>
<p class="text">Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.</p>
</div>`,
sideContentVisibility: SideContentVisibility.AlwaysShow,
};

export const Position = Template.bind({});
Position.storyName = "Side Content Position";
Position.args = {
sideContentPosition: SideContentPosition.Start,
default: `<div>
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.</p>
</div>`,
sideContent: `<div slot="sideContent">
<h1>Side Content</h1>
<p>Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.</p>
</div>`,
};
52 changes: 18 additions & 34 deletions packages/playground/_stories/main/Button/Button.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,39 +40,23 @@ const Template: UI5StoryArgs<Button, StoryArgsSlots> = (args) => html`<ui5-butto

export const Basic = Template.bind({});
Basic.args = {
default: "Button",
default: "Button Text",
accessibleName: "Button with Accessible Name",
};

export const Disabled = Template.bind({});
Disabled.args = {
default: "Disabled",
disabled: true,
};

export const WithIconAndDesign = Template.bind({});
WithIconAndDesign.args = {
default: "Warning",
design: ButtonDesign.Attention,
icon: "message-warning",
};

export const WithEndIcon = Template.bind({});
WithEndIcon.args = {
default: "Download",
icon: "download",
iconEnd: true,
};

export const IconOnly = Template.bind({});
IconOnly.storyName = "Icon-only Button";
IconOnly.args = {
design: ButtonDesign.Negative,
icon: "cancel",
accessibleName: "Cancel",
accessibleNameRef: "lblCancel",
tooltip: "Cancel",
};
IconOnly.decorators = [
(story) => html`<ui5-label style="display:none;" id="lblCancel" aria-hidden="true">Cancel</ui5-label>
${story()}`,
];
export const DifferentDesigns: StoryFn = () => html`
<ui5-button design="${ButtonDesign.Emphasized}"> Emphasized </ui5-button>
<ui5-button design="${ButtonDesign.Attention}"> Attention </ui5-button>
<ui5-button design="${ButtonDesign.Positive}"> Positive </ui5-button>
<ui5-button design="${ButtonDesign.Negative}"> Negative </ui5-button>
<ui5-button design="${ButtonDesign.Transparent}"> Transparent </ui5-button>
`;

export const IconOnlyButtons: StoryFn = () => html`
<ui5-button design="${ButtonDesign.Emphasized}" icon="business-suite/icon-target"></ui5-button>
<ui5-button design="${ButtonDesign.Attention}" icon="message-warning" tooltip="Warning Button"></ui5-button>
<ui5-button design="${ButtonDesign.Positive}" icon="business-suite/icon-completed" tooltip="Positive Button"></ui5-button>
<ui5-button design="${ButtonDesign.Negative}" icon="cancel" tooltip="Negative Button"></ui5-button>
<ui5-button design="${ButtonDesign.Transparent}" icon="account" tooltip="Transparent Button"></ui5-button>
`;
IconOnlyButtons.storyName = "Icon-Only Buttons";
2 changes: 1 addition & 1 deletion packages/playground/_stories/main/Calendar/Calendar.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const Template: UI5StoryArgs<Calendar, StoryArgsSlots> = (args) => html`<ui5-cal
export const Basic = Template.bind({});

export const Bounds = Template.bind({});
Bounds.storyName = "Min/Max Dates and Format Pattern";
Bounds.storyName = "Formatted Date Range";
Bounds.args = {
minDate: "7/10/2020",
maxDate: "20/10/2020",
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/_stories/main/DatePicker/DatePicker.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ State.args = {
};

export const MinMax = Template.bind({});
MinMax.storyName = "Min/Max Dates and Format Pattern";
MinMax.storyName = "Formatted Date Range";
MinMax.args = {
minDate: "1/1/2020",
maxDate: "4/5/2020",
Expand Down
4 changes: 2 additions & 2 deletions packages/playground/_stories/main/DateRangePicker/DateRangePicker.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@ const Template: UI5StoryArgs<DateRangePicker, StoryArgsSlots> = (args) => html`<
export const Basic = Template.bind({});

export const MinMax = Template.bind({});
MinMax.storyName = "Min/Max Dates and Format Pattern";
MinMax.storyName = "Formatted Date Range";
MinMax.args = {
minDate: "1/1/2020",
maxDate: "4/5/2020",
formatPattern: "dd/MM/yyyy",
};

export const LongFormat = Template.bind({});
LongFormat.storyName = "Value, Format Pattern, and Delimiter";
LongFormat.storyName = "Formatted Value and Delimiter";
LongFormat.args = {
value: "March 31, 2023 ~ April 9, 2023",
delimiter: "~",
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/_stories/main/DateTimePicker/DateTimePicker.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ FormatPattern.args = {
};

export const MinMax = Template.bind({});
MinMax.storyName = "Min/Max Dates and Format Pattern";
MinMax.storyName = "Formatted Date Range";
MinMax.args = {
value: "Jan 11, 2020, 11:11:11 AM",
minDate: "Jan 11, 2020, 00:00:00 AM",
Expand Down
9 changes: 1 addition & 8 deletions packages/playground/_stories/main/FileUploader/FileUploader.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,6 @@ Basic.decorators = [
${story()}`,
];

export const Custom = Template.bind({});
Custom.storyName = "With Custom Design ";
Custom.args = {
hideInput: true,
default: `<ui5-badge>Upload File</ui5-badge>`,
};

export const Advanced = Template.bind({});
Advanced.storyName = "Image Uploader";
Advanced.args = {
Expand All @@ -69,7 +62,7 @@ Advanced.decorators = [
<div id="result"></div>
<script>
var fileUploader = document.querySelector("#fileuploader"),
resultDiv = document.querySelector("#result");
resultDiv = document.querySelector("#result");
fileUploader.addEventListener("change", function(event) {
var files = event.target.files;
if (!files.length) {
Expand Down
4 changes: 2 additions & 2 deletions packages/playground/_stories/main/Menu/Menu.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
} as Meta<Menu>;

const Template: UI5StoryArgs<Menu, StoryArgsSlots> = (args) => html`<ui5-menu
headerText="${ifDefined(args.headerText)}"
header-text="${ifDefined(args.headerText)}"
opener="${ifDefined(args.opener)}"
?open="${ifDefined(args.open)}"
id="${ifDefined(args.id)}"
Expand All @@ -35,7 +35,7 @@ const Template: UI5StoryArgs<Menu, StoryArgsSlots> = (args) => html`<ui5-menu
</ui5-menu>`;

export const Basic = Template.bind({});
Basic.storyName = "Basic Menu with Header Text";
Basic.storyName = "Basic";
Basic.args = {
id: "menuBasic",
headerText: "Basic Menu with Items",
Expand Down
Loading

0 comments on commit acf5c66

Please sign in to comment.