From 1fde05fafe62886030e86679e204927c793c1de5 Mon Sep 17 00:00:00 2001 From: Levent Anil Ozen Date: Fri, 19 Aug 2022 10:09:27 +0300 Subject: [PATCH] docs: add note for using inline styling at storybook components (#200) Co-authored-by: Levent Anil Ozen --- src/components/badge/bl-badge.stories.mdx | 2 ++ src/components/button/bl-button.stories.mdx | 2 ++ src/components/icon/bl-icon.stories.mdx | 2 +- src/components/input/bl-input.stories.mdx | 2 ++ .../progress-indicator/bl-progress-indicator.stories.mdx | 1 + src/components/tab-group/bl-tab-group.stories.mdx | 2 ++ src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx | 2 ++ src/components/tab-group/tab/bl-tab.stories.mdx | 2 ++ src/components/tooltip/bl-tooltip.stories.mdx | 2 ++ 9 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/badge/bl-badge.stories.mdx b/src/components/badge/bl-badge.stories.mdx index bf65bbb4..afb3dbc5 100644 --- a/src/components/badge/bl-badge.stories.mdx +++ b/src/components/badge/bl-badge.stories.mdx @@ -52,6 +52,8 @@ ${BadgeTemplate({ content:'In Progress', size:'large', ...args })} # Badge Badge component can be used for highlighting a status or labeling an item. +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* + ## Badge Variants There are no specific variants for the badge but we suggest using our color palette for badge colors. If you need else colors you can change color by using `--bl-badge-bg-color` and `--bl-badge-color` variables. You dont have to give style parameter you can change color by giving css class like this: diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx index 39ed1e2c..b7ccd4ef 100644 --- a/src/components/button/bl-button.stories.mdx +++ b/src/components/button/bl-button.stories.mdx @@ -85,6 +85,8 @@ ${SingleButtonTemplate({kind: 'text', ...args})}`; Buttons allow users to take actions, and make choices with a single tap. +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* + ### Usage * A button should contain at least one text, icon or both (text + icon). diff --git a/src/components/icon/bl-icon.stories.mdx b/src/components/icon/bl-icon.stories.mdx index 6ea99ac0..94ae662c 100644 --- a/src/components/icon/bl-icon.stories.mdx +++ b/src/components/icon/bl-icon.stories.mdx @@ -71,7 +71,7 @@ export const AllIcons = (args) => html`
**Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* ## Showing Icons diff --git a/src/components/input/bl-input.stories.mdx b/src/components/input/bl-input.stories.mdx index c091d9e8..ea5e6155 100644 --- a/src/components/input/bl-input.stories.mdx +++ b/src/components/input/bl-input.stories.mdx @@ -99,6 +99,8 @@ export const LabelStylesTemplate = args => html` Input component is the component for taking text input from user. +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* + ## Basic Usage Currently, input component supports `text` and `number` types, which default is `text`. diff --git a/src/components/progress-indicator/bl-progress-indicator.stories.mdx b/src/components/progress-indicator/bl-progress-indicator.stories.mdx index 203bccf9..7e6b7d73 100644 --- a/src/components/progress-indicator/bl-progress-indicator.stories.mdx +++ b/src/components/progress-indicator/bl-progress-indicator.stories.mdx @@ -52,6 +52,7 @@ A progress indicator provides feedback about the duration and progression of a p Progress indicator component used for a long operation or a process that can take a considerable or unknown amount of time. It visually shows the progression of a system operation such as downloading, uploading, loading data, submitting a form, or saving updates. +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* ## Basic Usage diff --git a/src/components/tab-group/bl-tab-group.stories.mdx b/src/components/tab-group/bl-tab-group.stories.mdx index 21715707..ad9ac96b 100644 --- a/src/components/tab-group/bl-tab-group.stories.mdx +++ b/src/components/tab-group/bl-tab-group.stories.mdx @@ -68,6 +68,8 @@ export const TabGroup = (args) => html` # Tab Group Tab groups organizes the content in a way that each of Tab groups displays a section at a time. +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* + {TabGroup.bind({})} diff --git a/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx b/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx index 8fefd7e5..1decc0f8 100644 --- a/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx +++ b/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx @@ -28,6 +28,8 @@ export const TabGroup = (args) => html` # Tab Panel Tab panels are utilized inside tab groups to show tabbed content +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* + {TabGroup.bind({})} diff --git a/src/components/tab-group/tab/bl-tab.stories.mdx b/src/components/tab-group/tab/bl-tab.stories.mdx index 8f6af980..89af036f 100644 --- a/src/components/tab-group/tab/bl-tab.stories.mdx +++ b/src/components/tab-group/tab/bl-tab.stories.mdx @@ -58,6 +58,8 @@ export const SelectedDisabledTogetherTemplate = (args) => html` # Tab Within tab groups, tabs are used to represent and activate tab panels. A tab can be disabled by setting the disabled prop and can be selected by selected prop. +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* + {TabsTemplate.bind({})} diff --git a/src/components/tooltip/bl-tooltip.stories.mdx b/src/components/tooltip/bl-tooltip.stories.mdx index 7a6f3c4b..98744a1c 100644 --- a/src/components/tooltip/bl-tooltip.stories.mdx +++ b/src/components/tooltip/bl-tooltip.stories.mdx @@ -47,6 +47,8 @@ export const PlacementTemplate = (args) => html` Tooltips display informative text when users hover over an element. +> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.* + ## Basic Usage Tooltip can be used with any trigger such as button, icon, text, etc.