Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: moved btp button examples into the BTP subfolder #4925

Merged
merged 4 commits into from
Oct 27, 2023
Merged

chore: moved btp button examples into the BTP subfolder #4925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f6fd853
fix: moved btp button elements into the btp sub-section and added btp…
g-cheishvili Oct 25, 2023
b53100f
fix: excessive CSS overrides [ci visual]
g-cheishvili Oct 25, 2023
710f715
fix: fixed incorrect usage of the badged buttons in tool-header[ci vi…
g-cheishvili Oct 25, 2023
5048e95
fix: fall back to the main version of the button[ci visual]
g-cheishvili Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/styles/src/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,9 @@ $fd-button-badge-spacing: 0.25rem;
border-radius: 100%;
background: var(--sapContent_BadgeBackground);
border: 0.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color);
color: var(--sapContent_BadgeBackground);
padding: 0;
overflow: hidden;
}
}

Expand Down
2 changes: 2 additions & 0 deletions packages/styles/stories/BTP/button/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
BTP button is an over-style over the Button(Horizon) and is intended to be used within the controls and patterns for the BTP area.
BTP over-styling adds wo additional button types: `tool header` and `nested`
34 changes: 34 additions & 0 deletions packages/styles/stories/BTP/button/button.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import toolHeaderButtonExampleHtml from './tool-header.example.html?raw';
import nestedButtonExampleHtml from './nested.example.html?raw';
import description from './button.md?raw';

import '../../../src/icon.scss';
import '../../../src/button.scss';

export default {
title: 'BTP/Button',
parameters: {
description,
tags: ['a11y', 'btp', 'horizon-only']
}
};

export const ToolHeaderButton = () => toolHeaderButtonExampleHtml;
ToolHeaderButton.parameters = {
docs: {
description: {
story: `The Tool Header button is based on the Button (Horizon) Transparent/LiteButton, but has over-styling of the shape, size and interaction states. It is intended to be used within the controls and patterns for the <b>BTP</b> area. Use the <code>.fd-button--tool-header</code> modifier class for this type of button.
`
}
}
};

export const NestedButton = () => nestedButtonExampleHtml;
NestedButton.parameters = {
docs: {
description: {
story: `The Nested button is also intended to be used within the controls and patterns for the <b>BTP</b> area. Use the <code>.fd-button--nested</code> modifier class with the <code>.fd-button</code> base class for this type of button.
`
}
}
};
0 ...ies/Components/button/nested.example.html → ...es/stories/BTP/button/nested.example.html
View file
Open in desktop
File renamed without changes.
0 ...omponents/button/tool-header.example.html → ...ories/BTP/button/tool-header.example.html
View file
Open in desktop
File renamed without changes.
28 changes: 14 additions & 14 deletions packages/styles/stories/BTP/tool-header/desktop.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ <h4>Without Menu Button (default)</h4>
tabindex="0"
/>
</div>

<div class="fd-tool-header__element">
<div class="fd-tool-header__product-name">Product Name</div>
</div>

<div class="fd-tool-header__element">
<div class="fd-tool-header__second-title">Second Title</div>
</div>
Expand Down Expand Up @@ -77,13 +77,13 @@ <h4>Without Menu Button (default)</h4>
<div class="fd-tool-header__element">
<span class="fd-tool-header__separator"></span>
</div>

<div class="fd-tool-header__element">
<button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
<i class="sap-icon--action-settings" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element">
<button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
<i class="sap-icon--bell" role="presentation"></i>
Expand All @@ -102,11 +102,11 @@ <h4>Without Menu Button (default)</h4>
<i class="sap-icon--microphone" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element">
<span class="fd-tool-header__separator"></span>
</div>

<div class="fd-tool-header__element">
<span
class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
Expand All @@ -116,7 +116,7 @@ <h4>Without Menu Button (default)</h4>
title="John Doe"
aria-label="John Doe"
></span>
</div>
</div>
</div>
</div>

Expand Down Expand Up @@ -153,11 +153,11 @@ <h4>With Menu Button</h4>
tabindex="0"
/>
</div>

<div class="fd-tool-header__element">
<div class="fd-tool-header__product-name">Product Name</div>
</div>

<div class="fd-tool-header__element">
<div class="fd-tool-header__second-title">Second Title</div>
</div>
Expand Down Expand Up @@ -207,13 +207,13 @@ <h4>With Menu Button</h4>
<div class="fd-tool-header__element">
<span class="fd-tool-header__separator"></span>
</div>

<div class="fd-tool-header__element">
<button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
<i class="sap-icon--action-settings" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element">
<button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
<i class="sap-icon--bell" role="presentation"></i>
Expand All @@ -232,11 +232,11 @@ <h4>With Menu Button</h4>
<i class="sap-icon--microphone" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element">
<span class="fd-tool-header__separator"></span>
</div>

<div class="fd-tool-header__element">
<span
class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
Expand All @@ -246,6 +246,6 @@ <h4>With Menu Button</h4>
title="John Doe"
aria-label="John Doe"
></span>
</div>
</div>
</div>
</div>
30 changes: 15 additions & 15 deletions packages/styles/stories/BTP/tool-header/mobile.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h4>Phone</h4>
<i class="sap-icon--slim-arrow-left" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element">
<img
class="fd-tool-header__logo"
Expand All @@ -31,11 +31,11 @@ <h4>Phone</h4>
tabindex="0"
/>
</div>

<div class="fd-tool-header__element fd-tool-header__element--hidden">
<div class="fd-tool-header__product-name">Product Name</div>
</div>

<div class="fd-tool-header__element fd-tool-header__element--hidden">
<div class="fd-tool-header__second-title">Second Title</div>
</div>
Expand Down Expand Up @@ -85,13 +85,13 @@ <h4>Phone</h4>
<div class="fd-tool-header__element fd-tool-header__element--hidden">
<span class="fd-tool-header__separator"></span>
</div>

<div class="fd-tool-header__element fd-tool-header__element--hidden">
<button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
<i class="sap-icon--action-settings" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element">
<button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
<i class="sap-icon--bell" role="presentation"></i>
Expand All @@ -110,11 +110,11 @@ <h4>Phone</h4>
<i class="sap-icon--microphone" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element">
<span class="fd-tool-header__separator"></span>
</div>

<div class="fd-tool-header__element">
<span
class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
Expand Down Expand Up @@ -161,11 +161,11 @@ <h4>Phone (Expanded Search)</h4>
tabindex="0"
/>
</div>

<div class="fd-tool-header__element fd-tool-header__element--hidden">
<div class="fd-tool-header__product-name">Product Name</div>
</div>

<div class="fd-tool-header__elemen fd-tool-header__element--hidden">
<div class="fd-tool-header__second-title">Second Title</div>
</div>
Expand Down Expand Up @@ -215,13 +215,13 @@ <h4>Phone (Expanded Search)</h4>
<div class="fd-tool-header__element fd-tool-header__element--hidden">
<span class="fd-tool-header__separator"></span>
</div>

<div class="fd-tool-header__element fd-tool-header__element--hidden">
<button class="fd-button fd-button--tool-header" aria-label="Action 3" title="Action 3">
<i class="sap-icon--action-settings" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element fd-tool-header__element--hidden">
<button class="fd-button fd-button--tool-header" aria-label="Action 4" title="Action 4">
<i class="sap-icon--bell" role="presentation"></i>
Expand All @@ -240,12 +240,12 @@ <h4>Phone (Expanded Search)</h4>
<i class="sap-icon--microphone" role="presentation"></i>
</button>
</div>

<div class="fd-tool-header__element fd-tool-header__element--hidden">
<span class="fd-tool-header__separator"></span>
</div>


<div class="fd-tool-header__element fd-tool-header__element--hidden">
<span
class="fd-avatar fd-avatar--40 fd-avatar--circle fd-avatar--thumbnail"
Expand All @@ -256,6 +256,6 @@ <h4>Phone (Expanded Search)</h4>
aria-label="John Doe"
></span>
</div>

</div>
</div>
Loading
Loading