js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

rename part

Browse Source
This commit is contained in:
Cory LaViska
2024-12-17 11:34:18 -05:00
parent 1855d1b809
commit ad36ba5569
4 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/resources/changelog.md
View File

@@ -15,10 +15,12 @@ During the alpha period, things might break! We take breaking changes very serio
## Next
- Added `checked` and `disabled` custom states to `<wa-checkbox>` and `<wa-radio>`
scroll-button-end
- Removed stateful CSS parts in favor of custom states
- `<wa-checkbox>`: `control--checked`, `control--indeterminate`
- `<wa-radio>`: `control--checked`
- `<wa-tree-item>`: `item--disabled`, `item--expanded`, `item--indeterminate`, `item--selected`
- Renamed the `scroll-button--start` and `scroll-button--end` parts to `scroll-button-start` and `scroll-button-end` in `<wa-tab-group>`
## 3.0.0-alpha.5

8
src/components/tab-group/tab-group.css
View File

@@ -40,20 +40,20 @@
width: var(--wa-space-xl);
}
.tab-group__scroll-button--start {
.tab-group__scroll-button-start {
left: 0;
}
.tab-group__scroll-button--end {
.tab-group__scroll-button-end {
right: 0;
}
.tab-group--rtl .tab-group__scroll-button--start {
.tab-group--rtl .tab-group__scroll-button-start {
left: auto;
right: 0;
}
.tab-group--rtl .tab-group__scroll-button--end {
.tab-group--rtl .tab-group__scroll-button-end {
left: 0;
right: auto;
}

2
src/components/tab-group/tab-group.test.ts
View File

@@ -303,7 +303,7 @@ describe('<wa-tab-group>', () => {
expect(isElementVisibleFromOverflow(tabGroup, firstTab!)).to.be.true;
expect(isElementVisibleFromOverflow(tabGroup, lastTab!)).to.be.false;
const scrollToRightButton = tabGroup.shadowRoot?.querySelector('wa-icon-button[part*="scroll-button--end"]');
const scrollToRightButton = tabGroup.shadowRoot?.querySelector('wa-icon-button[part*="scroll-button-end"]');
expect(scrollToRightButton).not.to.be.null;
await clickOnElement(scrollToRightButton!);

12
src/components/tab-group/tab-group.ts
View File

@@ -36,8 +36,8 @@ import styles from './tab-group.css';
* @csspart tabs - The container that wraps the tabs.
* @csspart body - The tab group's body where tab panels are slotted in.
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<wa-icon-button>`.
* @csspart scroll-button--start - The starting scroll button.
* @csspart scroll-button--end - The ending scroll button.
* @csspart scroll-button-start - The starting scroll button.
* @csspart scroll-button-end - The ending scroll button.
* @csspart scroll-button__base - The scroll button's exported `base` part.
*
* @cssproperty --indicator-color - The color of the active tab indicator.
@@ -392,9 +392,9 @@ export default class WaTabGroup extends WebAwesomeElement {
${this.hasScrollControls
? html`
<wa-icon-button
part="scroll-button scroll-button--start"
part="scroll-button scroll-button-start"
exportparts="base:scroll-button__base"
class="tab-group__scroll-button tab-group__scroll-button--start"
class="tab-group__scroll-button tab-group__scroll-button-start"
name=${isRtl ? 'chevron-right' : 'chevron-left'}
library="system"
variant="solid"
@@ -414,9 +414,9 @@ export default class WaTabGroup extends WebAwesomeElement {
${this.hasScrollControls
? html`
<wa-icon-button
part="scroll-button scroll-button--end"
part="scroll-button scroll-button-end"
exportparts="base:scroll-button__base"
class="tab-group__scroll-button tab-group__scroll-button--end"
class="tab-group__scroll-button tab-group__scroll-button-end"
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"