diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index d92da39c1..e8644be55 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -16,6 +16,7 @@ During the alpha period, things might break! We take breaking changes very serio
- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
- 🚨 BREAKING: Renamed `pulse` attribute in `
` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
+- 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `` and `` to align with other components and the platform [issue:674]
- Fixed a bug in `` that caused radios to uncheck when assigning a numeric value [issue:924]
## 3.0.0-alpha.13
diff --git a/src/components/divider/divider.css b/src/components/divider/divider.css
index 20499b64d..0edd71032 100644
--- a/src/components/divider/divider.css
+++ b/src/components/divider/divider.css
@@ -4,13 +4,13 @@
--spacing: var(--wa-space-m);
}
-:host(:not([vertical])) {
+:host(:not([orientation='vertical'])) {
display: block;
border-top: solid var(--width) var(--color);
margin: var(--spacing) 0;
}
-:host([vertical]) {
+:host([orientation='vertical']) {
display: inline-block;
height: 100%;
border-left: solid var(--width) var(--color);
diff --git a/src/components/divider/divider.test.ts b/src/components/divider/divider.test.ts
index c15168f8c..611ce2543 100644
--- a/src/components/divider/divider.test.ts
+++ b/src/components/divider/divider.test.ts
@@ -10,7 +10,7 @@ describe('', () => {
it('default properties', async () => {
const el = await fixture(html` `);
- expect(el.vertical).to.be.false;
+ expect(el.orientation).to.equal('horizontal');
expect(el.getAttribute('role')).to.equal('separator');
expect(el.getAttribute('aria-orientation')).to.equal('horizontal');
});
@@ -25,7 +25,7 @@ describe('', () => {
it('aria-orientation is updated', async () => {
const el = await fixture(html` `);
- el.vertical = true;
+ el.orientation = 'vertical';
await elementUpdated(el);
expect(el.getAttribute('aria-orientation')).to.equal('vertical');
diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts
index 43303c073..aa866ae5b 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -17,17 +17,17 @@ import styles from './divider.css';
export default class WaDivider extends WebAwesomeElement {
static shadowStyle = styles;
- /** Draws the divider in a vertical orientation. */
- @property({ type: Boolean, reflect: true }) vertical = false;
+ /** Sets the divider's orientation. */
+ @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'separator');
}
- @watch('vertical')
+ @watch('orientation')
handleVerticalChange() {
- this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');
+ this.setAttribute('aria-orientation', this.orientation);
}
}
diff --git a/src/components/split-panel/split-panel.css b/src/components/split-panel/split-panel.css
index 7b49ac166..f520feef3 100644
--- a/src/components/split-panel/split-panel.css
+++ b/src/components/split-panel/split-panel.css
@@ -37,11 +37,11 @@
}
/* Horizontal */
-:host(:not([vertical], [disabled])) .divider {
+:host(:not([orientation='vertical'], [disabled])) .divider {
cursor: col-resize;
}
-:host(:not([vertical])) .divider::after {
+:host(:not([orientation='vertical'])) .divider::after {
display: flex;
content: '';
position: absolute;
@@ -51,15 +51,15 @@
}
/* Vertical */
-:host([vertical]) {
+:host([orientation='vertical']) {
flex-direction: column;
}
-:host([vertical]:not([disabled])) .divider {
+:host([orientation='vertical']:not([disabled])) .divider {
cursor: row-resize;
}
-:host([vertical]) .divider::after {
+:host([orientation='vertical']) .divider::after {
content: '';
position: absolute;
width: 100%;
diff --git a/src/components/split-panel/split-panel.test.ts b/src/components/split-panel/split-panel.test.ts
index 18fd69859..c68d4803f 100644
--- a/src/components/split-panel/split-panel.test.ts
+++ b/src/components/split-panel/split-panel.test.ts
@@ -185,7 +185,7 @@ describe('', () => {
describe('panel sizing vertical', () => {
it('has two evenly sized panels by default', async () => {
const splitPanel = await fixture(
- html`
+ html`
Start
End
`,
@@ -199,7 +199,7 @@ describe('', () => {
it('changes the sizing of the panels based on the position attribute', async () => {
const splitPanel = await fixture(
- html`
+ html`
Start
End
`,
@@ -213,7 +213,7 @@ describe('', () => {
it('updates the position in pixels to the correct result', async () => {
const splitPanel = await fixture(
- html`
+ html`
Start
End
`,
@@ -228,7 +228,7 @@ describe('', () => {
it('emits the wa-reposition event on position change ', async () => {
const splitPanel = await fixture(
- html`
+ html`
Start
End
`,
@@ -241,7 +241,7 @@ describe('', () => {
it('can be resized using the mouse ', async () => {
const splitPanel = await fixture(
- html`
+ html`
Start
End
`,
@@ -259,7 +259,7 @@ describe('', () => {
it('cannot be resized if disabled', async () => {
const splitPanel = await fixture(
- html`
+ html`
Start
End
`,
@@ -277,7 +277,7 @@ describe('', () => {
it('snaps to predefined positions', async () => {
const splitPanel = await fixture(
- html`
+ html`
Start
End
`,
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index e2eab2314..951e1345e 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -55,8 +55,8 @@ export default class WaSplitPanel extends WebAwesomeElement {
/** The current position of the divider from the primary panel's edge in pixels. */
@property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;
- /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
- @property({ type: Boolean, reflect: true }) vertical = false;
+ /** Sets the split panel's orientation. */
+ @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
/** Disables resizing. Note that the position may still change as a result of resizing the host element. */
@property({ type: Boolean, reflect: true }) disabled = false;
@@ -93,7 +93,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
private detectSize() {
const { width, height } = this.getBoundingClientRect();
- this.size = this.vertical ? height : width;
+ this.size = this.orientation === 'vertical' ? height : width;
}
private percentageToPixels(value: number) {
@@ -118,7 +118,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
drag(this, {
onMove: (x, y) => {
- let newPositionInPixels = this.vertical ? y : x;
+ let newPositionInPixels = this.orientation === 'vertical' ? y : x;
// Flip for end panels
if (this.primary === 'end') {
@@ -138,7 +138,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
snapPoint = parseFloat(value);
}
- if (isRtl && !this.vertical) {
+ if (isRtl && this.orientation === 'horizontal') {
snapPoint = this.size - snapPoint;
}
@@ -168,11 +168,17 @@ export default class WaSplitPanel extends WebAwesomeElement {
event.preventDefault();
- if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {
+ if (
+ (event.key === 'ArrowLeft' && this.orientation === 'horizontal') ||
+ (event.key === 'ArrowUp' && this.orientation === 'vertical')
+ ) {
newPosition -= incr;
}
- if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {
+ if (
+ (event.key === 'ArrowRight' && this.orientation === 'horizontal') ||
+ (event.key === 'ArrowDown' && this.orientation === 'vertical')
+ ) {
newPosition += incr;
}
@@ -208,7 +214,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
private handleResize(entries: ResizeObserverEntry[]) {
const { width, height } = entries[0].contentRect;
- this.size = this.vertical ? height : width;
+ this.size = this.orientation === 'vertical' ? height : width;
// There's some weird logic that gets `this.cachedPositionInPixels = NaN` or `this.position === Infinity` when
// a split-panel goes from `display: none;` to showing.
@@ -244,8 +250,8 @@ export default class WaSplitPanel extends WebAwesomeElement {
}
render() {
- const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
- const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
+ const gridTemplate = this.orientation === 'vertical' ? 'gridTemplateRows' : 'gridTemplateColumns';
+ const gridTemplateAlt = this.orientation === 'vertical' ? 'gridTemplateColumns' : 'gridTemplateRows';
const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
const primary = `
clamp(
@@ -267,13 +273,13 @@ export default class WaSplitPanel extends WebAwesomeElement {
}
if (this.primary === 'end') {
- if (isRtl && !this.vertical) {
+ if (isRtl && this.orientation === 'horizontal') {
this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
} else {
this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
}
} else {
- if (isRtl && !this.vertical) {
+ if (isRtl && this.orientation === 'horizontal') {
this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
} else {
this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;