Skip to content

Commit 5525b2b

Browse files
ilhan007ilhan007
committed
docs: add new pattern
1 parent 9786504 commit 5525b2b

5 files changed

Lines changed: 149 additions & 0 deletions

File tree

‎packages/website/docs/_samples/patterns/FilterBar/Basic.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import css from '!!raw-loader!./main.css';
3+
import js from '!!raw-loader!./main.js';
4+
5+
<Editor html={html} js={js} css={css} />

‎packages/website/docs/_samples/patterns/FilterBar/main.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/* Container styles */
2+
.filter-bar {
3+
display: flex;
4+
flex-direction: column;
5+
gap: 0.75rem;
6+
padding: 1rem;
7+
}
8+
9+
.filter-input-container {
10+
display: flex;
11+
gap: 0.5rem;
12+
align-items: center;
13+
}
14+
15+
.filter-input-container ui5-input {
16+
flex: 1;
17+
}
18+
19+
.filter-tags {
20+
display: flex;
21+
flex-wrap: wrap;
22+
gap: 0.5rem;
23+
align-items: center;
24+
}
25+
26+
/* Customization of Suggestions */
27+
.suggestion-item {
28+
display: flex;
29+
align-items: center;
30+
gap: 0.5rem;
31+
padding: 0.25rem 0;
32+
width: 100%;
33+
}
34+
35+
.suggestion-item span {
36+
flex: 1;
37+
}
38+
39+
.suggestion-item ui5-icon {
40+
color: var(--sapLinkColor);
41+
}
42+
43+
.suggestion-item-group::part(header) {
44+
background: #e8e8e8
45+
}
46+
47+
/* Customization of Tag component */
48+
.tag-key {
49+
color: var(--sapLinkColor);
50+
font-weight: 600;
51+
}
52+
53+
.tag-value {
54+
color: var(--sapContent_LabelColor);
55+
font-weight: normal;
56+
}

‎packages/website/docs/_samples/patterns/FilterBar/main.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import "@ui5/webcomponents/dist/Button.js";
2+
import "@ui5/webcomponents/dist/Input.js";
3+
import "@ui5/webcomponents/dist/features/InputSuggestions.js";
4+
import "@ui5/webcomponents/dist/SuggestionItemCustom.js";
5+
import "@ui5/webcomponents/dist/SuggestionItemGroup.js";
6+
import "@ui5/webcomponents/dist/Tag.js";
7+
import "@ui5/webcomponents/dist/Text.js";
8+
import "@ui5/webcomponents/dist/Icon.js";
9+
import "@ui5/webcomponents-icons/dist/ai.js";
10+
import "@ui5/webcomponents-icons/dist/favorite.js";
11+
import "@ui5/webcomponents-icons/dist/add-favorite.js";
12+
import "@ui5/webcomponents-icons/dist/decline.js";
13+

‎packages/website/docs/_samples/patterns/FilterBar/sample.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!-- playground-fold -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="./main.css">
9+
<title>Sample</title>
10+
</head>
11+
12+
<body style="background-color: var(--sapBackgroundColor); height: 400px;">
13+
<!-- playground-fold-end -->
14+
15+
<div class="filter-bar">
16+
<div class="filter-input-container">
17+
<ui5-input show-suggestions placeholder="Filter...">
18+
19+
<ui5-suggestion-item-group class="suggestion-item-group" header-text="Favorite Queries">
20+
<ui5-suggestion-item-custom text="Favorite Queries">
21+
<div class="suggestion-item">
22+
<span>Overal status open and net value > 3000 EUR</span>
23+
<ui5-icon name="favorite"></ui5-icon>
24+
</div>
25+
</ui5-suggestion-item-custom>
26+
</ui5-suggestion-item-group>
27+
28+
<ui5-suggestion-item-group class="suggestion-item-group" header-text="Last Used Queries">
29+
<ui5-suggestion-item-custom text="Last Used Queries">
30+
<div class="suggestion-item">
31+
<span>Overal status open and net value > 3000 EUR</span>
32+
<ui5-button icon="add-favorite"></ui5-button>
33+
<ui5-icon name="decline"></ui5-icon>
34+
</div>
35+
</ui5-suggestion-item-custom>
36+
</ui5-suggestion-item-group>
37+
</ui5-input>
38+
39+
<ui5-button icon="ai" design="Emphasized">Go</ui5-button>
40+
</div>
41+
42+
<div class="filter-tags">
43+
<ui5-icon style="color: var(--sapLinkColor)" name="ai"></ui5-icon>
44+
<ui5-text style="color: var(--sapLinkColor)">Filters were created by AI:</ui5-text>
45+
<ui5-tag hide-state-icon>
46+
<span class="tag-key">Delivery Status:</span>
47+
<span class="tag-value">Blocked</span>
48+
</ui5-tag>
49+
<ui5-tag hide-state-icon>
50+
<span class="tag-key">Over Status:</span>
51+
<span class="tag-value">Open</span>
52+
</ui5-tag>
53+
<ui5-tag hide-state-icon>
54+
<span class="tag-key">Net value:></span>
55+
<span class="tag-value">3000 Eur</span>
56+
</ui5-tag>
57+
</div>
58+
</div>
59+
60+
<!-- playground-fold -->
61+
<script type="module" src="main.js"></script>
62+
63+
</body>
64+
65+
</html>
66+
<!-- playground-fold-end -->

‎packages/website/docs/components/patterns/FilterBar.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
sidebar_class_name: newComponentBadge
3+
---
4+
5+
import Basic from "../../_samples/patterns/FilterBar/Basic.md";
6+
7+
# Filter Bar
8+
9+
<Basic />

0 commit comments

Comments
 (0)