diff --git a/.changeset/breezy-turkeys-clean.md b/.changeset/breezy-turkeys-clean.md index bcd259634a..d95cd5dd6c 100644 --- a/.changeset/breezy-turkeys-clean.md +++ b/.changeset/breezy-turkeys-clean.md @@ -1,5 +1,27 @@ --- -"@rhds/elements": patch +"@rhds/elements": major --- -``: removed deprecated `global` slot, use `universal` slot +``: removed deprecated `` element and deprecated `global` slot. Use `` element and `universal` slot. + +Before: + +```html + + + + + + +``` + +After: + +```html + + + + + + +``` diff --git a/.changeset/cyan-dragons-care.md b/.changeset/cyan-dragons-care.md index d94d8bf065..1f332b2a68 100644 --- a/.changeset/cyan-dragons-care.md +++ b/.changeset/cyan-dragons-care.md @@ -1,5 +1,5 @@ --- -"@rhds/elements": patch +"@rhds/elements": major --- -``: removed deprecated read-only `cta` property; use `data-analytics` attributes instead +``: removed read-only `cta` property; use `data-analytics` attributes instead diff --git a/.changeset/legal-coins-happen.md b/.changeset/legal-coins-happen.md new file mode 100644 index 0000000000..33ce64d2d9 --- /dev/null +++ b/.changeset/legal-coins-happen.md @@ -0,0 +1,20 @@ +--- +"@rhds/elements": major +--- +``: removed deprecated `--rh-modal-video-aspect-ratio` CSS custom property + +Before: + +```css +rh-dialog.custom-dialog { + --rh-modal-video-aspect-ratio: 3/2; +} +``` + +After: + +```css +rh-dialog.custom-dialog { + --rh-dialog-video-aspect-ratio: 3/2; +} +``` diff --git a/.changeset/little-readers-fail.md b/.changeset/little-readers-fail.md new file mode 100644 index 0000000000..f81488a5fe --- /dev/null +++ b/.changeset/little-readers-fail.md @@ -0,0 +1,24 @@ +--- +"@rhds/elements": major +--- +``: removed deprecated CSS custom properties + +Before: + +```css +rh-footer.custom-footer { + --rh-color-link-inline-on-dark: cyan; + --rh-color-link-inline-hover-on-dark: cornflowerblue; + --rh-color-link-inline-focus-on-dark: cornflowerblue; + --rh-color-link-inline-visited-on-dark: cornflowerblue; +} +``` + +After: + +```css +rh-footer.custom-footer { + --rh-color-interactive-blue-lighter: cyan; + --rh-color-interactive-blue-lightest: cornflowerblue; +} +``` diff --git a/.changeset/many-foxes-invent.md b/.changeset/many-foxes-invent.md index 01f5edf04d..81ae05324d 100644 --- a/.changeset/many-foxes-invent.md +++ b/.changeset/many-foxes-invent.md @@ -1,5 +1,19 @@ --- -"@rhds/elements": patch +"@rhds/elements": major --- -``: remove deprecated color-palette property +``: remove deprecated `color-palette` attribute + +Before: + +```html + +``` + +After: + +```html + + + +``` diff --git a/.changeset/mighty-vans-skate.md b/.changeset/mighty-vans-skate.md deleted file mode 100644 index 99ab6ebdec..0000000000 --- a/.changeset/mighty-vans-skate.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@rhds/elements": major ---- -``: Deprecated `rhCta.cta` public property. This will be removed in the -next major version. diff --git a/.changeset/odd-bugs-repair.md b/.changeset/odd-bugs-repair.md index 6e10dfcf04..ef6fb2474b 100644 --- a/.changeset/odd-bugs-repair.md +++ b/.changeset/odd-bugs-repair.md @@ -1,27 +1,29 @@ --- -"@rhds/elements": minor +"@rhds/elements": major --- ``: removed deprecated toast boolean attribute - Before: - ```html - -

Default

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend - elit sed est egestas, a sollicitudin mauris tincidunt. -

-
- ``` +Before: - After: - ```html - -

Default

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend - elit sed est egestas, a sollicitudin mauris tincidunt. -

-
- ``` \ No newline at end of file +```html + +

Default

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend + elit sed est egestas, a sollicitudin mauris tincidunt. +

+
+``` + +After: + +```html + +

Default

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend + elit sed est egestas, a sollicitudin mauris tincidunt. +

+
+``` diff --git a/.changeset/pretty-scissors-cough.md b/.changeset/pretty-scissors-cough.md index 63f20fcc8a..6835a8a684 100644 --- a/.changeset/pretty-scissors-cough.md +++ b/.changeset/pretty-scissors-cough.md @@ -1,5 +1,23 @@ --- -"@rhds/elements": patch +"@rhds/elements": major --- ``: removed deprecated CSS custom properties + +Before: + +```css +rh-table.custom-table { + --rh-table-row-background-color: crimson; + --rh-table-column-background-color: royalblue; +} +``` + +After: + +```css +rh-table.custom-table { + --rh-table-row-background-hover-color: crimson; + --rh-table-column-background-hover-color: royalblue; +} +``` diff --git a/.changeset/sixty-jokes-judge.md b/.changeset/sixty-jokes-judge.md deleted file mode 100644 index e9a768614e..0000000000 --- a/.changeset/sixty-jokes-judge.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@rhds/elements": patch ---- - -``: removed deprecated `` element, use `` diff --git a/.changeset/smooth-suns-cough.md b/.changeset/smooth-suns-cough.md new file mode 100644 index 0000000000..e6162481d5 --- /dev/null +++ b/.changeset/smooth-suns-cough.md @@ -0,0 +1,8 @@ +--- +"@rhds/elements": major +--- +``: removed `box` and `vertical` attributes from ``. Set them +on `` instead. + +In most cases, you shouldn't need to update your templates, as long as `` +has the right attributes diff --git a/.changeset/tiny-melons-help.md b/.changeset/tiny-melons-help.md index 5fe0f80384..517ad2d177 100644 --- a/.changeset/tiny-melons-help.md +++ b/.changeset/tiny-melons-help.md @@ -2,4 +2,4 @@ "@rhds/elements": patch --- -Fixed the headline, title, body text, and footer font-sizes to match the Tile specs for both the default and compact variants +``: Fixed the headline, title, body text, and footer font-sizes to match the Tile specs for both the default and compact variants diff --git a/.changeset/wild-steaks-play.md b/.changeset/wild-steaks-play.md index 2664ff1593..1447923cc3 100644 --- a/.changeset/wild-steaks-play.md +++ b/.changeset/wild-steaks-play.md @@ -6,7 +6,7 @@ A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting. -html``` +```html diff --git a/elements/rh-dialog/rh-dialog.css b/elements/rh-dialog/rh-dialog.css index e0da95e105..07fd42b523 100644 --- a/elements/rh-dialog/rh-dialog.css +++ b/elements/rh-dialog/rh-dialog.css @@ -169,9 +169,7 @@ footer { } :host([type="video"][open]) [part="dialog"] { - /* TODO remove --rh-modal-video-aspect-ratio for v2 */ - /* stylelint-disable-next-line */ - --_aspect-ratio: var(--rh-dialog-video-aspect-ratio, var(--rh-modal-video-aspect-ratio, 16/9)); + --_aspect-ratio: var(--rh-dialog-video-aspect-ratio, 16/9); aspect-ratio: var(--_aspect-ratio); max-width: min(90%, calc(90vh * var(--_aspect-ratio) + var(--offset-top))); @@ -186,9 +184,7 @@ footer { :host([type="video"]) #container, :host([type="video"]) [part="content"], :host([type="video"]) ::slotted(:not([slot])) { - /* TODO remove --rh-modal-video-aspect-ratio for v2 */ - /* stylelint-disable-next-line */ - aspect-ratio: var(--rh-dialog-video-aspect-ratio, var(--rh-modal-video-aspect-ratio, 16/9)); + aspect-ratio: var(--rh-dialog-video-aspect-ratio, 16/9); /* account for a 1px descrepency between dialog and container aspect ratio */ width: calc(100% + 1px); diff --git a/elements/rh-footer/rh-footer-lightdom.css b/elements/rh-footer/rh-footer-lightdom.css index 498408f176..2e082fe4c0 100644 --- a/elements/rh-footer/rh-footer-lightdom.css +++ b/elements/rh-footer/rh-footer-lightdom.css @@ -1,28 +1,20 @@ :is(rh-footer, rh-footer-universal) a { - /* TODO remove --rh-color-link-inline-on-dark for v2 */ - /* stylelint-disable-next-line */ - color: var(--rh-color-link-inline-on-dark, var(--rh-color-interactive-blue-lighter, #92c5f9)); + color: var(--rh-color-interactive-blue-lighter, #92c5f9); text-decoration: none; } :is(rh-footer, rh-footer-universal) a:hover { - /* TODO remove --rh-color-link-inline-hover-on-dark for v2 */ - /* stylelint-disable-next-line */ - color: var(--rh-color-link-inline-hover-on-dark, var(--rh-color-interactive-blue-lightest, #b9dafc)); + color: var(--rh-color-interactive-blue-lightest, #b9dafc); text-decoration: underline; } :is(rh-footer, rh-footer-universal) a:is(:focus, :focus-within) { - /* TODO remove --rh-color-link-inline-focus-on-dark for v2 */ - /* stylelint-disable-next-line */ - color: var(--rh-color-link-inline-focus-on-dark, var(--rh-color-interactive-blue-lightest, #b9dafc)); + color: var(--rh-color-interactive-blue-lightest, #b9dafc); text-decoration: underline; } :is(rh-footer, rh-footer-universal) a:visited { - /* TODO remove --rh-color-link-inline-visited-on-dark for v2 */ - /* stylelint-disable-next-line */ - color: var(--rh-color-link-inline-visited-on-dark, var(--rh-color-interactive-blue-lightest, #b9dafc)); + color: var(--rh-color-interactive-blue-lightest, #b9dafc); text-decoration: none; } diff --git a/elements/rh-tabs/rh-tab.css b/elements/rh-tabs/rh-tab.css index 0778fb8345..94a2f199a0 100644 --- a/elements/rh-tabs/rh-tab.css +++ b/elements/rh-tabs/rh-tab.css @@ -1,6 +1,3 @@ -/* TODO(bennypowers): remove vertical, box, and theme attributes, as well as the `first` and `last` - * lightdom classes in next major */ - :host { display: flex; flex: none; @@ -19,7 +16,7 @@ var(--_context-background-color, var(--rh-color-white, #ffffff)); } -:host([vertical]) [part="text"] { +.vertical [part="text"] { max-width: 100%; overflow-wrap: break-word; } @@ -156,12 +153,10 @@ slot[name="icon"] { margin-inline-end: var(--rh-space-md, 8px); } -/* [active]:not([box]) */ #button.active:not(.box, .vertical):after { border-block-end: var(--_active-tab-border); } -/* [box][active]) */ #button.active.box:before { border-inline-color: var(--_border-color); border-inline-start-width: var(--rh-border-width-sm, 1px); @@ -172,7 +167,6 @@ slot[name="icon"] { border-block-end: var(--_active-tab-border-open); } -/* [box]:not([active]) */ #button.box:not(.active) { background-color: var(--_inactive-tab-background-color); } @@ -186,43 +180,36 @@ slot[name="icon"] { border-block-end-color: var(--_border-color); } -/* .first[box][active]) */ #button.box.active.first:before { border-inline-start-color: var(--_border-color); border-inline-start-width: var(--rh-border-width-sm, 1px); } -/* .first[box]:not([active]) */ #button.first.box:not(.active):before { border-inline-color: transparent; } -/* .last[box][active] */ #button.last.box.active:before { border-inline-end-color: var(--_border-color); border-inline-end-width: var(--rh-border-width-sm, 1px); } @media screen and (min-width: 768px) { - /* [vertical]:not([box]) */ #button.vertical:not(.box) { padding-block: var(--rh-tabs-link-padding-block-start, var(--rh-space-md, 8px)) var(--rh-tabs-link-padding-block-start, var(--rh-space-md, 8px)); } - /* [vertical][active] */ #button.vertical.active:after { border-block-end: transparent; } - /* [box]:not([vertical], [active]) */ #button.box:not(.vertical, .active):before { border-inline-color: var(--_border-color); border-inline-start-width: var(--rh-border-width-sm, 1px); } - /* [box][vertical]:not([active]) */ #button.box.vertical:not(.active):before { border-inline-start-color: transparent; border-inline-end: @@ -235,12 +222,10 @@ slot[name="icon"] { var(--_border-color); } - /* [box]:not([active], [vertical]) */ #button.box:not(.active, .vertical):after { border-block-end-color: var(--_border-color); } - /* [active][box][vertical] */ #button.active.box.vertical:after { border-block-start: var(--rh-border-width-sm, 1px) @@ -252,73 +237,60 @@ slot[name="icon"] { border-block-end-color: transparent; } - /* .first[vertical][box] */ #button.vertical.box.first { margin-block-start: var(--rh-space-2xl, 32px); } - /* .last[vertical][box] */ #button.vertical.box.last { margin-block-end: var(--rh-space-2xl, 32px); } - /* .first[vertical]:not([box]) */ #button.first.vertical:not(.box) { margin-block-start: var(--rh-space-xl, 24px); } - /* .last[vertical]:not([box]) */ #button.last.vertical:not(.box) { margin-block-end: var(--rh-space-xl, 24px); } - /* [box][active]:not([vertical]) */ #button.active.box:not(.vertical):after { border-block-start: var(--_active-tab-border); border-block-end: var(--_active-tab-border-open); } - /* .first[box][vertical][active] */ #button.first.box.vertical.active:after { border-block-start-color: var(--_border-color); border-block-start-width: var(--rh-border-width-sm, 1px); } - /* [box][vertical][active] */ #button.box.vertical.active:before { border-inline-start: var(--_active-tab-border); border-inline-end: var(--_active-tab-border-open); } - /* [active][vertical]:not([box]) */ #button.vertical.active:not(.box):before { border-inline-start: var(--_active-tab-border); } - /* .first[vertical][box]:not([active]) */ #button.first.vertical.box:not(.active):before { border-block-start-color: transparent; } - /* .first[box][active]:not([vertical]) */ #button.first.box.active:not(.vertical):before { border-inline-start-color: var(--_border-color); border-inline-start-width: var(--rh-border-width-sm, 1px); } - /* .last[box][active]:not[vertical] */ #button.last.box.active:not(.vertical):before { border-inline-end-color: var(--_border-color); border-inline-end-width: var(--rh-border-width-sm, 1px); } - /* .last[box][vertical][active] */ #button.last.box.vertical.active:before { border-block-end-color: var(--_border-color); border-block-end-width: var(--rh-border-width-sm, 1px); } - /* .last[box][vertical]:not([active]) */ #button.last.box.vertical:not(.active):after { border-block-end: none; } diff --git a/elements/rh-tabs/rh-tab.ts b/elements/rh-tabs/rh-tab.ts index ee359dcefe..8da740d321 100644 --- a/elements/rh-tabs/rh-tab.ts +++ b/elements/rh-tabs/rh-tab.ts @@ -58,9 +58,7 @@ export class RhTab extends LitElement { @property({ attribute: false }) private ctx?: RhTabsContext; - /** - * Sets color theme based on parent context - */ + /** Sets color theme based on parent context */ @colorContextConsumer() private on?: ColorTheme; @queryAssignedElements({ slot: 'icon', flatten: true }) private icons!: HTMLElement[]; diff --git a/elements/rh-tabs/rh-tabs.ts b/elements/rh-tabs/rh-tabs.ts index c7f3793509..1a03bfbcfd 100644 --- a/elements/rh-tabs/rh-tabs.ts +++ b/elements/rh-tabs/rh-tabs.ts @@ -27,8 +27,6 @@ import styles from './rh-tabs.css'; export { RhTab }; -/* TODO: Remove attrs in JSDoc below when updated use TabsController after PFE 3.0 release */ - /** * Tabs are used to organize and navigate between sections of content. * They feature a horizontal or a vertical list of section text labels