Skip to content

Commit c3a62b7

Browse files
yanaminkovayanaminkova
authored
refactor(ui5-breadcrumbs): rename property separator-style to separators (#8600)
Renames the `separator-style` property of `ui5-breadcrumbs` to `separators`. Also the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. BREAKING CHANGE: The `separator-style` property is renamed to `separators` and the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. If you have previously used the `separator-style` property: ```html <ui5-breadcrumbs separator-style="Slash"> ``` Now use `separators` instead: ```html <ui5-breadcrumbs separators="Slash"> ``` Related to #8461, #7887
1 parent 08f7a54 commit c3a62b7

File tree

7 files changed

+38
-38
lines changed

7 files changed

+38
-38
lines changed

‎packages/main/src/Breadcrumbs.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
1818
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
1919
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
2020
import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js";
21-
import BreadcrumbsSeparatorStyle from "./types/BreadcrumbsSeparatorStyle.js";
21+
import BreadcrumbsSeparator from "./types/BreadcrumbsSeparator.js";
2222
import BreadcrumbsItem from "./BreadcrumbsItem.js";
2323
import {
2424
BREADCRUMB_ITEM_POS,
@@ -150,8 +150,8 @@ class Breadcrumbs extends UI5Element {
150150
* @default "Slash"
151151
* @public
152152
*/
153-
@property({ type: BreadcrumbsSeparatorStyle, defaultValue: BreadcrumbsSeparatorStyle.Slash })
154-
separatorStyle!: `${BreadcrumbsSeparatorStyle}`;
153+
@property({ type: BreadcrumbsSeparator, defaultValue: BreadcrumbsSeparator.Slash })
154+
separators!: `${BreadcrumbsSeparator}`;
155155

156156
/**
157157
* Holds the number of items in the overflow.

‎packages/main/src/themes/Breadcrumbs.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -76,22 +76,22 @@
7676
}
7777

7878
/* separator styles */
79-
:host([separator-style="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
79+
:host([separators="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
8080
content: "//";
8181
}
8282

83-
:host([separator-style="BackSlash"]) .ui5-breadcrumbs-separator::after {
83+
:host([separators="BackSlash"]) .ui5-breadcrumbs-separator::after {
8484
content: "\\\\";
8585
}
8686

87-
:host([separator-style="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
87+
:host([separators="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
8888
content: "\\\\\\\\";
8989
}
9090

91-
:host([separator-style="GreaterThan"]) .ui5-breadcrumbs-separator::after {
91+
:host([separators="GreaterThan"]) .ui5-breadcrumbs-separator::after {
9292
content: ">";
9393
}
9494

95-
:host([separator-style="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
95+
:host([separators="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
9696
content: ">>";
9797
}

‎packages/main/src/types/BreadcrumbsSeparatorStyle.ts ‎packages/main/src/types/BreadcrumbsSeparator.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/**
2-
* Different Breadcrumbs separator styles.
2+
* Different Breadcrumbs separators.
33
* @public
44
*/
5-
enum BreadcrumbsSeparatorStyle {
5+
enum BreadcrumbsSeparator {
66

77
/**
88
* The separator appears as "/".
@@ -41,4 +41,4 @@ enum BreadcrumbsSeparatorStyle {
4141
GreaterThan = "GreaterThan",
4242
}
4343

44-
export default BreadcrumbsSeparatorStyle;
44+
export default BreadcrumbsSeparator;

‎packages/main/test/pages/Breadcrumbs.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ <h2>Breadcrumbs with no current location</h2>
7979
<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
8080
</ui5-breadcrumbs>
8181

82-
<h2>Breadcrumbs with specific separator style</h2>
82+
<h2>Breadcrumbs with specific separators</h2>
8383
<ui5-select id="selectSeparator">
8484
<ui5-option>Slash</ui5-option>
8585
<ui5-option>BackSlash</ui5-option>
@@ -234,7 +234,7 @@ <h2>Breadcrumbs with hardcoded width</h2>
234234

235235
selectSeparator.addEventListener("ui5-change", function(e) {
236236
let separator = e.detail.selectedOption.textContent;
237-
breadcrumbs4.setAttribute("separator-style", separator);
237+
breadcrumbs4.setAttribute("separators", separator);
238238
});
239239

240240
</script>

‎packages/main/test/samples/Breadcrumbs.sample.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -47,75 +47,75 @@ <h3>Breadcrumbs with no current page</h3>
4747
<h3>Breadcrumbs with specific separator</h3>
4848
<div class="snippet">
4949
<div>
50-
<ui5-breadcrumbs separator-style="Slash">
50+
<ui5-breadcrumbs separators="Slash">
5151
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
5252
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
5353
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
5454
</ui5-breadcrumbs>
5555
</div>
5656
<div>
57-
<ui5-breadcrumbs separator-style="BackSlash">
57+
<ui5-breadcrumbs separators="BackSlash">
5858
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
5959
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
6060
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
6161
</ui5-breadcrumbs>
6262
</div>
6363
<div>
64-
<ui5-breadcrumbs separator-style="DoubleBackSlash">
64+
<ui5-breadcrumbs separators="DoubleBackSlash">
6565
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
6666
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
6767
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
6868
</ui5-breadcrumbs>
6969
</div>
7070
<div>
71-
<ui5-breadcrumbs separator-style="DoubleGreaterThan">
71+
<ui5-breadcrumbs separators="DoubleGreaterThan">
7272
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
7373
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
7474
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
7575
</ui5-breadcrumbs>
7676
</div>
7777
<div>
78-
<ui5-breadcrumbs separator-style="DoubleSlash">
78+
<ui5-breadcrumbs separators="DoubleSlash">
7979
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
8080
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
8181
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
8282
</ui5-breadcrumbs>
8383
</div>
8484
<div>
85-
<ui5-breadcrumbs separator-style="GreaterThan">
85+
<ui5-breadcrumbs separators="GreaterThan">
8686
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
8787
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
8888
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
8989
</ui5-breadcrumbs>
9090
</div>
9191
</div>
9292
<pre class="prettyprint lang-html"><xmp>
93-
<ui5-breadcrumbs separator-style="Slash">
93+
<ui5-breadcrumbs separators="Slash">
9494
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
9595
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
9696
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
9797
</ui5-breadcrumbs>
98-
<ui5-breadcrumbs separator-style="BackSlash">
98+
<ui5-breadcrumbs separators="BackSlash">
9999
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
100100
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
101101
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
102102
</ui5-breadcrumbs>
103-
<ui5-breadcrumbs separator-style="DoubleBackSlash">
103+
<ui5-breadcrumbs separators="DoubleBackSlash">
104104
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
105105
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
106106
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
107107
</ui5-breadcrumbs>
108-
<ui5-breadcrumbs separator-style="DoubleGreaterThan">
108+
<ui5-breadcrumbs separators="DoubleGreaterThan">
109109
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
110110
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
111111
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
112112
</ui5-breadcrumbs>
113-
<ui5-breadcrumbs separator-style="DoubleSlash">
113+
<ui5-breadcrumbs separators="DoubleSlash">
114114
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
115115
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
116116
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
117117
</ui5-breadcrumbs>
118-
<ui5-breadcrumbs separator-style="GreaterThan">
118+
<ui5-breadcrumbs separators="GreaterThan">
119119
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
120120
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
121121
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>

‎packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
const Template: UI5StoryArgs<Breadcrumbs, StoryArgsSlots> = (args) =>
1818
html`<ui5-breadcrumbs
1919
design="${ifDefined(args.design)}"
20-
separator-style="${ifDefined(args.separatorStyle)}"
20+
separators="${ifDefined(args.separators)}"
2121
>
2222
${unsafeHTML(args.default)}
2323
</ui5-breadcrumbs>`;
@@ -30,9 +30,9 @@ Basic.args = {
3030
`,
3131
};
3232

33-
export const SeparatorStyle: StoryFn = () => html`
33+
export const Separators: StoryFn = () => html`
3434
<div>
35-
<ui5-breadcrumbs design ="NoCurrentPage" separator-style="Slash">
35+
<ui5-breadcrumbs design ="NoCurrentPage" separators="Slash">
3636
<ui5-breadcrumbs-item href="https://www.sap.com"
3737
>Root Page
3838
</ui5-breadcrumbs-item>
@@ -43,7 +43,7 @@ export const SeparatorStyle: StoryFn = () => html`
4343
</ui5-breadcrumbs>
4444
</div>
4545
<div>
46-
<ui5-breadcrumbs separator-style="BackSlash">
46+
<ui5-breadcrumbs separators="BackSlash">
4747
<ui5-breadcrumbs-item href="https://www.sap.com"
4848
>Root Page
4949
</ui5-breadcrumbs-item>
@@ -54,7 +54,7 @@ export const SeparatorStyle: StoryFn = () => html`
5454
</ui5-breadcrumbs>
5555
</div>
5656
<div>
57-
<ui5-breadcrumbs separator-style="DoubleBackSlash">
57+
<ui5-breadcrumbs separators="DoubleBackSlash">
5858
<ui5-breadcrumbs-item href="https://www.sap.com"
5959
>Root Page
6060
</ui5-breadcrumbs-item>
@@ -65,7 +65,7 @@ export const SeparatorStyle: StoryFn = () => html`
6565
</ui5-breadcrumbs>
6666
</div>
6767
<div>
68-
<ui5-breadcrumbs separator-style="DoubleGreaterThan">
68+
<ui5-breadcrumbs separators="DoubleGreaterThan">
6969
<ui5-breadcrumbs-item href="https://www.sap.com"
7070
>Root Page
7171
</ui5-breadcrumbs-item>
@@ -76,7 +76,7 @@ export const SeparatorStyle: StoryFn = () => html`
7676
</ui5-breadcrumbs>
7777
</div>
7878
<div>
79-
<ui5-breadcrumbs separator-style="DoubleSlash">
79+
<ui5-breadcrumbs separators="DoubleSlash">
8080
<ui5-breadcrumbs-item href="https://www.sap.com"
8181
>Root Page
8282
</ui5-breadcrumbs-item>
@@ -87,7 +87,7 @@ export const SeparatorStyle: StoryFn = () => html`
8787
</ui5-breadcrumbs>
8888
</div>
8989
<div>
90-
<ui5-breadcrumbs separator-style="GreaterThan">
90+
<ui5-breadcrumbs separators="GreaterThan">
9191
<ui5-breadcrumbs-item href="https://www.sap.com"
9292
>Root Page
9393
</ui5-breadcrumbs-item>

‎packages/website/docs/_samples/main/Breadcrumbs/BreadcrumbsStyles/sample.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,39 @@
1212
<!-- playground-fold-end -->
1313

1414
<div>
15-
<ui5-breadcrumbs separator-style="BackSlash">
15+
<ui5-breadcrumbs separators="BackSlash">
1616
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
1717
</ui5-breadcrumbs-item>
1818
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
1919
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
2020
</ui5-breadcrumbs>
2121
</div>
2222
<div>
23-
<ui5-breadcrumbs separator-style="DoubleBackSlash">
23+
<ui5-breadcrumbs separators="DoubleBackSlash">
2424
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
2525
</ui5-breadcrumbs-item>
2626
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
2727
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
2828
</ui5-breadcrumbs>
2929
</div>
3030
<div>
31-
<ui5-breadcrumbs separator-style="DoubleGreaterThan">
31+
<ui5-breadcrumbs separators="DoubleGreaterThan">
3232
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
3333
</ui5-breadcrumbs-item>
3434
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
3535
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
3636
</ui5-breadcrumbs>
3737
</div>
3838
<div>
39-
<ui5-breadcrumbs separator-style="DoubleSlash">
39+
<ui5-breadcrumbs separators="DoubleSlash">
4040
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
4141
</ui5-breadcrumbs-item>
4242
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
4343
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
4444
</ui5-breadcrumbs>
4545
</div>
4646
<div>
47-
<ui5-breadcrumbs separator-style="GreaterThan">
47+
<ui5-breadcrumbs separators="GreaterThan">
4848
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
4949
</ui5-breadcrumbs-item>
5050
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>

0 commit comments

Comments
 (0)