Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(alert): dpo tokens #1905

Merged
merged 13 commits into from
Sep 26, 2024
Merged

Conversation

bennypowers
Copy link
Member

What I did

  1. use DPO tokens in alert
  2. deprecate info, default, and error

Testing Instructions

  1. check out the DP, make sure colours are all as expected

Copy link

changeset-bot bot commented Sep 22, 2024

🦋 Changeset detected

Latest commit: 9137494

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rhds/elements Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Sep 22, 2024

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit 9137494
🔍 Latest deploy log https://app.netlify.com/sites/red-hat-design-system/deploys/66f549e535a37f00086ea1e0
😎 Deploy Preview https://deploy-preview-1905--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

github-actions bot commented Sep 22, 2024

Size Change: +385 B (+0.21%)

Total Size: 184 kB

Filename Size Change
./elements/rh-alert/rh-alert.js 4.34 kB +385 B (+9.73%) ⚠️
ℹ️ View Unchanged
Filename Size
./elements.js 473 B
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.77 kB
./elements/rh-accordion/rh-accordion-panel.js 1.37 kB
./elements/rh-accordion/rh-accordion.js 3.21 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.53 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.43 kB
./elements/rh-audio-player/rh-audio-player.js 13.2 kB
./elements/rh-audio-player/rh-cue.js 2 kB
./elements/rh-audio-player/rh-transcript.js 2.75 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.9 kB
./elements/rh-back-to-top/rh-back-to-top.js 2.1 kB
./elements/rh-badge/rh-badge.js 1.11 kB
./elements/rh-blockquote/rh-blockquote.js 1.4 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.5 kB
./elements/rh-button/rh-button.js 4.24 kB
./elements/rh-card/rh-card.js 3.57 kB
./elements/rh-code-block/prism.css.js 822 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-code-block/rh-code-block.js 7.24 kB
./elements/rh-cta/rh-cta.js 3.89 kB
./elements/rh-dialog/rh-dialog.js 4.78 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-footer/rh-footer-block.js 766 B
./elements/rh-footer/rh-footer-copyright.js 362 B
./elements/rh-footer/rh-footer-links.js 1.17 kB
./elements/rh-footer/rh-footer-social-link.js 964 B
./elements/rh-footer/rh-footer-universal.js 4.05 kB
./elements/rh-footer/rh-footer.js 5.01 kB
./elements/rh-health-index/rh-health-index.js 2.35 kB
./elements/rh-icon/rh-icon.js 2.36 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-menu/rh-menu.js 1.29 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.27 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.46 kB
./elements/rh-site-status/rh-site-status.js 2.5 kB
./elements/rh-skip-link/rh-skip-link.js 1.24 kB
./elements/rh-spinner/rh-spinner.js 1.43 kB
./elements/rh-stat/rh-stat.js 2.2 kB
./elements/rh-subnav/rh-subnav.js 2.7 kB
./elements/rh-surface/rh-surface.js 1.11 kB
./elements/rh-surface/test/elements.js 423 B
./elements/rh-switch/rh-switch.js 2.93 kB
./elements/rh-table/rh-sort-button.js 1.49 kB
./elements/rh-table/rh-table.js 3.47 kB
./elements/rh-tabs/context.js 160 B
./elements/rh-tabs/rh-tab-panel.js 1.04 kB
./elements/rh-tabs/rh-tab.js 3.01 kB
./elements/rh-tabs/rh-tabs.js 3.77 kB
./elements/rh-tag/rh-tag.js 2.84 kB
./elements/rh-tile/rh-tile-group.js 1.81 kB
./elements/rh-tile/rh-tile.js 5.15 kB
./elements/rh-timestamp/rh-timestamp.js 983 B
./elements/rh-tooltip/rh-tooltip.js 2.24 kB
./elements/rh-video-embed/rh-video-embed.js 4.6 kB
./lib/context/color/consumer.js 1.23 kB
./lib/context/color/controller.js 947 B
./lib/context/color/provider.js 2.08 kB
./lib/context/event.js 593 B
./lib/context/headings/consumer.js 722 B
./lib/context/headings/controller.js 1.12 kB
./lib/context/headings/provider.js 1.24 kB
./lib/DirController.js 565 B
./lib/elements/rh-context-demo/rh-context-demo.js 1.28 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.21 kB
./lib/environment.js 4.09 kB
./lib/functions.js 175 B
./lib/I18nController.js 1.38 kB
./lib/ScreenSizeController.js 849 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 215 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 207 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 202 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 185 B
./react/rh-table/rh-sort-button.js 213 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 194 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B

compressed-size-action

@brianferry
Copy link
Collaborator

On both the demos tab and the individual demo page for the deprecated states I am seeing them all just being shown as default styles though the state does look correct in the markup.

On the demos tab I am seeing the first two examples with headers but not the third example.

image

On the individual demo page I am seeing all three but for some reason the header slot isn't showing. (Actually, it looks like this is the case for every individual demo page?)

image

It appears that perhaps after the state has been updated the component needs to be rerendered to get the updated styles?

@brianferry
Copy link
Collaborator

I think this line

<header ?hidden="${this.#slots.isEmpty('header')}"> in rh-alert.ts might need to be <header ?hidden="${this.#slots.hasSlotted('header')}"> ? wdyt?

@bennypowers
Copy link
Member Author

bennypowers commented Sep 25, 2024

On the demos tab I am seeing the first two examples with headers but not the third example.

image

This is expected - at the moment, the playgrounds can only get the most recent published version - they can't access the local builds.

On the individual demo page I am seeing all three but for some reason the header slot isn't showing. (Actually, it looks like this is the case for every individual demo page?)

image

It appears that perhaps after the state has been updated the component needs to be rerendered to get the updated styles?

There are some SSR shenanigans here which can hopefully be resolved by importing dependencies.
PTAL: https://deploy-preview-1905--red-hat-design-system.netlify.app/elements/alert/demo/deprecated-states/

Copy link
Collaborator

@brianferry brianferry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bennypowers That makes sense to me, code looks good, great job!

Copy link
Collaborator

@marionnegp marionnegp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Neutral alerts should be using grays.
    Screenshot 2024-09-25 at 11 24 40 AM
    (screenshot is from this Figma file)

  • Most alert headings need to use crayon colors for now. I didn't add status tokens for typography because using non-gray colors for alert headings is something that we might want to phase out in a later release. For now, here are the colors for each state:
  • Danger: --rh-color-red-orange-70
  • Warning: --rh-color-yellow-70
  • Caution: --rh-color-orange-70
  • Neutral: --rh-color-text-primary-on-light
  • Info: --rh-color-purple-70
  • Success: --rh-color-green-70

These would apply for both light and dark theme and to headings for inline and toast alerts.


Notes but not requested changes:

  • The teal color scheme currently using can be used when there's no state attached to an alert to avoid breaking anything. (I think that's how alert is already styled, so this is just FYI!)

  • I'm seeing the same style for both danger and error in toast alerts. I think this is fine if we're going to remove the error state in a future release. (I'm not sure how the two would be used differently, and we don't show an error state in our alert severity guidelines.)
    Screenshot 2024-09-25 at 11 21 53 AM

@bennypowers bennypowers linked an issue Sep 26, 2024 that may be closed by this pull request
@bennypowers
Copy link
Member Author

@marionnegp OK i made your changes so this is ready to merge. Please consider using relative-color-in-oklch for the headings, either from the border tokens or from the surface tokens, then we could easily apply color palettes and theming

@bennypowers bennypowers merged commit bc0225b into staging/clefairy Sep 26, 2024
8 checks passed
@bennypowers bennypowers deleted the fix/alerts/dpo-status-tokens branch September 26, 2024 15:50
zeroedin added a commit that referenced this pull request Sep 30, 2024
* style: remove extra line from `.gitattributes` file

* docs(tokens): remove copy button from value col

* feat(skip-link): href attr (#1813)

* feat(skip-link): href attr

* docs: skip-link no-anchor

* docs: update elements/rh-skip-link/demo/href-attribute.html

Co-authored-by: Adam Johnson <[email protected]>

---------

Co-authored-by: Adam Johnson <[email protected]>

* fix: remove rti from navigations (#1821)

* docs: remove RTI from sidenav

* fix(subnav): remove rti, add accessible-label attr

* fix(navigation-secondary): remove rti, add accessible-label attr

* chore: add changesets

* chore(subnav): update changeset

* chore(navigation-secondary): remove orphaned code

* docs: readd rti to sidenav taken care of in seperate docs pr

* docs(navigation-secondary): add accessible-label documentation

* docs(subnav): add accessible-label documentation

* chore(subnav): remove unused ifDefined import

* fix(navigation-secondary): remvoe preventDefault to allow tab to move to next tabstop

* fix(accordion): remove rti

* chore(navigation-secondary): update changeset

* chore(accordion): add changeet

* docs: update changesets

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(accordion): bold accordion headers (#1806)

* fix(accordion): bold `rh-accordion-header` text

* fix(accordion): appease nanocss

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* feat: theme properties (#1792)

* docs: theming

WIP, picking up where #1298 left off

* docs: pattern shortcode splits out css

* docs: pattern showcase element layout

* feat(card): header background theme props

* docs(card): asset patterns

* docs: pattern elements in typescript

* feat: themable surfaces

adds:
- `--rh-color-surface`
- `--rh-color-text-primary`
- `--rh-color-border-subtle`
- `--rh-color-border-strong`
- `--rh-color-border-interactive`

* docs(card): patterns with themable properties

* style(card): template

* docs(card): use themable properties

* fix(context): more themable props

* style: sort props

* feat: add --rh-color-theme-inverse

* chore: dev server layouts

* refactor(accordion): themable tokens

* chore: minor perf improvement for dev server

we still have a major problem of trace performance in
generator.htmlInject to work through

* feat: link colours

* docs: port uxdot-installation-tabs to typescript

* chore: wireit dependencies

* fix: update tokens stuff

* chore: deps

* chore: stylelint rules

* chore: temporarily patch tokens

* fix: port element styles

* fix(lib): port element styles

* docs: port tokens

* chore: update temporary patch

* style: lint css

* refactor(pagination): css

* chore: use tokens prerelease

* chore: use prerelease tokens

* docs: load rhds packages locally

* docs: handle theme tokens

* fix(context): use new tokens repo

* docs: load tokens from node_modules

* chore: tokens deps

* chore: update tokens prerelease

* chore: update prerelease tokens

* chore: update prerelease tokens

* style: config

* chore: update deps

* fix: lint css files

* chore: prerelease tokens

* fix(context-picker): dont swallow event

* fix(surface): make it a consumer

* docs: token theme swatches

* docs: tokens toc, alt-card for themes

* docs: ssr the lightness of token swatches

* docs: fix tokens page

* docs: fancier tags

* style: lint

* docs: demo dsd fix

* docs: icon color themables

* fix(surface): act as a pseudo-consumer

don't swallow the context-request event, but still propate your own
color values

* chore: docs server perf

* docs: icon,border,etc

* perf: remove unused decorator

* docs: tokens tables

* docs: typography tokens

* docs: bodge up token tables

these files are due for a serious refactor, but like... another day

* docs: themable tokens changeset

* docs: update theming prose

* test(surface): typescript nudges

* test(surface): fix tests

* test: console logs

* docs: tokens demo

* docs: fix tokens

* docs: nicer ids

* docs: refactor tokens table code

* fix(table): theme tokens

* docs: refactor token collection

* docs: refactor patterns, move links and scripts to head

* fix(subnav): use theme tokens

* fix(tile): use theme tokens

* docs: header, tile patterns

* fix(card): host display block

* docs: tile patterns and theming

* fix(card): surface tokens

* fix(tile): surface tokens

* fix(subnav): force color palette per guidelines

* fix(tile): use theme tokens

* feat(context-picker): pass an element ref

* docs(tile): theming patterns

* style: lint

* test: more sleep

* style: lint

* test: fix audio player tests

* docs: element pattern in color palette docs

* fix(cta): primary color

* fix(tabs): color context

* fix(context-demo): import specifier

* fix(tile): override surface colors

* docs: copy styles over

* docs: theming prose

* chore: simplify dev server config

* docs: footnotes

* docs: lint styles

* style: lint element css

* style: lint css comments

* docs: lint css

* fix(cta): context css

* chore: workaround in dev server for jspm limitation

* style: lint

* docs: tile lightdom

* docs: pullquote margins

* docs: bodge for audio-player layouts

see also #1264

* docs: fix import map?

* docs: remove url filter

* docs: theme collage

* docs: theming patterns

* docs: theming bordeaux example

* fix(card): color palettes and layouts

* docs(card): color palettes

* docs: more theming prose

* docs: more theming

* docs: bordeaux

* fix(code-block): styles

* fix(context-demo): context

* fix(blockquote): theme tokens

---------

Co-authored-by: Mark Caron <[email protected]>

* perf(audio-player): easier to ssr

* feat(code-block): client-side highlighting (#1837)

* feat(code-block): wip client-side highlighting

* style: type linting

* chore: appease typescript for the sake of prism

see microsoft/TypeScript#20595

* docs: prism in 11ty

* fix(code-block): prism css module

* docs: eleventy prism import map

* docs: more import map shenanigans

* fix(code-block): highlighted line numbers

* docs: changeset

* docs(code-block): documentation for new attrs

* fix(code-block): disclosure aria

* fix(code-block): comment colors

* fix(code-block): tabindex

* fix: update elements/rh-code-block/rh-code-block.ts

* style: lint

* chore: lit css nesting (#1845)

chore: lit-css ts transform

allow css nesting syntax in shadow css. it will be unrolled with postcss

* fix: theming for elements (#1853)

* docs: picker targets

* fix(surface): set but don't inherit surface colors

* docs(card): bar pattern

* fix(accordion): style guidelines

* fix(alert): theme tokens

* fix(badge): context, styles

doesn't implement status tokens, yet

* fix(button): disabled on dark

does not add semantic tokens

* fix(blockquote): border style

* fix(health-index): border colors

* fix(tabs): context in panel

* docs(tabs): links in demo

* fix(icon): container size

* fix(badge): tests and backgrounds

* docs(card): links

* docs(theming): backgrounds

* docs(theming): stub for developer

* docs: deps

* docs: more prose

* feat(tag): context, compact, href, desaturated

Closes #1843

* docs: tag

* fix(tag): spacing

* fix(tag): spacing

* docs(tag): live samples

* test(tag): tests pass

* fix(blockquote): on

* docs(tag): slotted icon

* fix(blockquote): on

* fix(accordion): drop shadow

also refactors expand/collapse code

* fix(alert): use rh-icon

* fix(tabs): always on

* fix(tile): font-weight

* docs: copy demo assets

* docs: demo assets

* fix(alert): missing id

* docs(accordion): disclosure link trailing slash

* perf: use node-native glob

* perf: replace cheerio with parse5

* feat(button): icon set (#1859)

* fix(button): use rh-icon

* fix(button): narrow type of icon and set

* fix(footer): document accepted icons in social links

* chore: max out netlify's card

* perf(button): lazy-load icon

* fix(button): icon layouts

* fix(button): fancy icon layouts, etc

* docs(button): icon usage

* perf(button): shadow classes

* feat(tile): link styles (#1860)

* feat(tile): private link

Closes #1470

* fix(tile): private icon

* feat(tile): link="external"

* docs: icon sets (#1844)

* docs: stubbed icons page

* docs: icons prose

* chore: tslib

* docs: max out the card

* docs: icon page layout

* docs: tokens on color page (#1866)

* docs: tokens on color page

Closes #1757

* docs(color): swatch styles

* docs(color): swatch styles

* docs(tokens): duplicate IDs

Closes #1742

* chore: align style use between docs and demo (#1862)

* chore: align style use between docs and demo/dev-server use cases

* chore: add tokens layer to layer cascade

* chore: organize demo/dev-server styles

* chore: correct stylesheet name

* chore: call individiual layers instead of styles.css as a whole

* chore: remove demo layer forgot to remove last commit

* fix: ignore tokens loaded from node_modules in litcssOptions

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* docs: remove prism css from dev-server.css (#1868)

docs: remove prism css from dev-server

* fix(audio-player) corrected focused on menu button after escape pressed (#1869)

* fix(audio-player): return focus to menu button when escape is pressed on menu

* chore(audio-player): add changeset

* chore(audio-player): changeset typo

* fix(audio-player): theming, icon, playback rate (#1854)

* fix(audio-player): theme tokens

* fix(audio-player): make menu buttons inert when closed

Fixes #1764

* refactor(audio-player): shadow classes and nesting

* docs(audio-player): customization demo styles

* feat(audio-player): mini player rate stepper

* fix(audio-player): use rh-icon

* docs: changesets

* fix: play button icon color

* fix: audio player tokens

* fix: keyboard access to steppers in menu

* fix: remove errant log

* test(audio-player): update tests

* fix(audio-player): restore custom icons

Closes #1871

* fix(switch): reversed

removes anonymous slot (no longer used now that we have message slots)

* fix(switch): remove unused label prop

* fix(switch): refactor css, document props

* fix(button): apply color context

* fix(site-status): apply color context

* fix(switch): checked styles on dark

* docs(card): demo whitespace

* style: lint css

* test(switch): use rh-icon

* docs(alert): toast method

* fix(cta): restore color and spacing (#1879)

* docs: icon design update (#1880)

* docs: icon design update

* docs: move icons to foundations

* docs(icon): feedback footer

* docs(icon): list styles

* docs(icon): fix a whoopsie

* docs(icon): layouts

* docs: copy assets

* docs(icons): fix permalink

* docs(icon): copy

* docs: icons feedback

* docs: change title of page and update section heading case

* docs: iconography order

* docs: align buttons

---------

Co-authored-by: marionnegp <[email protected]>

* docs(audio-player): more demos

* style(card): minor refactors

* docs(context): jsdoc

* fix(context): claim events

* docs(audio-player): context demo

* fix(context-picker): weird layout science

* docs(pattern): always use an allowed pattern

* docs: simplify installation tabs (#1690)

* docs: simplify installation tabs

* docs: fix import map on installation page

* docs: jspm import maps

* docs: no pfe version

* docs: install tabs

* chore: patch prism-esm see if that lets build complete

see KonnorRogers/prism-esm#3

* docs: fail more gracefully when JSPM can't cope

* chore: lint nonsense

* docs: link to install info

* docs: installation tabs styles

* feat(table): adding automatic data-labels on col-scoped tables (#1804)

* feat: adding automatic data-labels on col-scoped tables

* Update elements/rh-table/rh-table.ts

Co-authored-by: Adam Johnson <[email protected]>

* style(rh-table): linting error on extra curly brace

* Update elements/rh-table/rh-table.ts

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* Update elements/rh-table/rh-table.ts

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* feat(table): responsive attr, plus some style linting

* docs(table): updating prop definition

* refactor: prefer optional chaining to ternary

* refactor(table): use hammer operator and dataset to reduce footprint

* docs(table): adding responsive table instructions

* feat(table): making responsive layout default. Adjusting docs to reflect this.

* chore(table): adding changeset

* docs: update .changeset/khaki-rings-confess.md

* fix(table): mo

---------

Co-authored-by: Adam Johnson <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* fix(table): add container query support (#1881)

* fix(table): container query, css nesting, logical properties

* chore(table): add changeset

* chore(table): lint

* docs(table): revise prose around container sizes

* docs: add edit this page link (#1882)

* docs: add edit this page link

* docs: add edit this page to pattern template

* docs: edit this page trim leading dot

* fix(back-to-top): reconfigure pointer events to be on the trigger not host

* docs: disambiguate variable names in TOC template

* docs(card): update Style subpage (#1664)

* docs(card): update Color section

* docs: add margin between rh-card in a figure and the caption

* docs(card): update copy for Theme sections and update Theme images

* docs(card): update dark theme card image

* docs(card): fix incorrect black color in dark theme image

* docs(card): fix thumbnail bg color in light theme card image

* docs(card): add color-palette attribute to parent element for card examples

* docs(card): change one dark color palette to use dark alt surface color

* Revert "docs(card): change one dark color palette to use dark alt surface color"

This reverts commit 0e3654c.

* docs(card): Fix copy under white card example

* docs(card): move styles to card page

* docs(card): remove url filters

---------

Co-authored-by: Benny Powers <[email protected]>

* feat(table): adding fail-safe for complex tables and updating docs (#1891)

feat(table): adding fail-safe for complex tables and updating docs to reflect

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(card): slotted link colours

this doesn't cover *every* scenario, but it's a nice safety net

Fixes #1717

* docs: changeset

* docs: purple planned tags

Closes #1736

* fix(site-status): use rh-icon (#1889)

Closes #1615

* style: lint table

* docs: include attribute name in table on elements code pages (#1893)

Co-authored-by: Steven Spriggs <[email protected]>

* fix(accordion): regression for initially-expanded headers

* docs: axe xd (#1890)

* docs: axe xd

Closes #1883

* docs: spacing

* Revert "docs: spacing"

This reverts commit d13ce5e.

* docs: spacing tables

* style: lint

* style: lint

* docs: correct jsdoc syntax

Fixes #1548

* fix(alert): hide empty header (#1895)

Fixes #1530

* docs: background picker in dev server (#1887)

* docs: move demo template into file

it's not used elsewhere

* fix(context-picker): restoring state, types

* chore: update deps, types

* docs: dev server context picker, styles

* chore: ts lib

* chore: config niceties

* chore: tsconfig

---------

Co-authored-by: Steven Spriggs <[email protected]>

* chore: update prism-esm dep

* chore: update icons

* chore: remove prism-esm patch, fixed with version update

* docs: fix duplicate `summary` IDREF  (#1898)

docs: fix duplicate `summary` IDREF's for "On this page" nav

* docs: fix 11ty demo styles

* docs: lightdomcss install shortcode (#1902)

* docs: adding lightdom CSS installation render shortcode

* docs: adding missing path-to

* docs: adding SLA to the lightdom css shim

* docs: lightdom css shim typo

* docs: reorder SLA alert

* chore: struggle with web-dev-server import map generator

* docs: adding screen reader testing page (#1798)

* Initial general content

* Updated screen reader section with new link

* Updated page title

* Updated meta data and links

* Added computer and macOS sections

* Added NVDA section

* Added JAWS section

* Added Narrator section

* Added Orca section

* Added mobile sr section

* Added VoiceOver section

* Added TalkBack section

* Updated link on assistive tech page

* Trimmed modifier key text

* Got rid of a rogue parenthesis

* Changed page title and minor text  updates

* VoiceOver section cleanup

* Text updates and reworked heading structure

* Text and punctuation cleanup

* Minor text fixes

* Broke a ton of paragraphs into ULs and OLs

* Changed errant ULs to OLs.

* And switching some OLs back to ULs

* Detypoing typos

* VoiceOver text cleanup

* Text updates in browser pairing section

* Typo and grammar fixes

* Typo fix

* chore: revert merge conflict

---------

Co-authored-by: Benny Powers <[email protected]>

* chore: itty bitty dev server config refactor

* feat(code-block): prism prerendered highlighting (#1906)

* fix(code-block): client-side line numbers

* feat(code-block): server-side prerendered prism

* fix(code-block): badge padding

* fix: change prism-prerendered to prerendered

* docs: fix design code status table

* docs: fix whitespace and markdown rendering in tables (#1915)

* fix(table): improve color contrast of hover state (#1896)

* fix(table): change row hover background colors for light color palettes

* fix: use relative color

* fix: use relative color

* fix(table): move vars to shadow

* fix(table): cross root closest

it's a hack and we should get rid of it

* docs(table): add link in contrast demo

* feat(table): change gray hover color for light theme tables

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* fix(tabs): interaction states, css refactor/nesting (#1904)

* fix(tabs): fix interaction states, css nesting and cleanup

* chore(tabs): add changetset

* fix(tabs): add non box vertical hover styles

* test(tabs): update selectors that were changed

* fix(tabs): clean up styles at overflow and breakpoints with vertical

* docs(tabs): add icons size to tabs icon style to text and icons demo

* fix(tabs): correct padding when panel is inset and not vertical

* fix(tabs): correct padding when panel is inset and not vertical (again)

* style(tab): refactor shadow ids

* docs: remove changeset

since the bug was introduced on clefairy branch, we don't need a
changeset for the fix

* chore(tabs): add changeset (container queries)

* docs: update large-geese-suffer.md

* fix(tabs): move padding to panel host

* fix(tabs): fix margin when overflowed and inset

* fix(tabs): inset padding shoudl only shift on overflow

* fix(tabs): correct box/inset inactive tab background color on dark

* fix(tabs): correct inline padding for tab buttons in vertical orientation

* fix(tabs): correct disabled overflow icon color value

* style: lint css

* chore: update deps

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(subnav): ssr compat

Closes #1668

* docs: remove unused file

* docs: remove unused shortcode

* docs: refactor elements.njk

* docs: fix getElementDescription filter (#1920)

* fix(tabs): add display contents to panel container (#1918)

* fix(tabs): add display contents to container, remove ctx

* chore(tabs): add changeset

* docs: `uxdot-repo-status-list` missing border (#1922)

docs: repos-status-list border fix

* docs: fix header element causing horizontal scroll bars (#1924)

* docs: fix header element causing horizontal scroll bars

* docs: uxdot-header remove h1 margin

* docs: remove url filters (#1925)

* docs: remove url filters

* docs: catch url in lightdom files links regex didnt catch

* docs: update tags docs  (#1930)

* docs: update tags docs

* docs: ninjar some css fixes in, duplicate styles, incorrect placement

* docs: ssr compatible 11ty demos

* docs(tag): review notes

---------

Co-authored-by: Benny Powers <[email protected]>

* docs: elaborate on developer theming (#1897)

* docs: take 1 at elaborating on dev themeing

* docs: update developers, fix typos

* docs: revisions, formatting

* docs(theming): develoeprs

* docs(theming): wrastle with 11ty templating

* docs(theming): stubs for other sections

* docs: add example of themeable container, expand on color-palette attribute

* style: lint examples

* docs(theming): prerendered code blocks, tabs

* docs: elaborate more on theming

* docs: swap patterns and theming sidenav items

* docs: themeable, theming

* docs(theming): elaborate yet more

* docs(release-notes): md tables

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>

* fix(tile): remove `display: block` on image slot (#1928)

* fix(tile): remove display rule on image slotted element

* chore(tile): add changeset

* docs: expand on a11y features of devtools, add CI/CD intro (#1903)

* docs: expand on a11y features of devtools

* docs: add intro to Chai A11y aXe and `a11ySnapshot`

* docs: update `a11ySnapshot` example to include Chai a11y helpers

* docs: use branded annotation numbers for accessibility pane image

* docs: add max width to a11y devtools screenshots

* docs: restructure / add pages to a11y docs

* docs: improve layout of images and blockquotes in a11y docs

* docs: add lighthouse image to a11y tools page

* docs: sidenav capitalization for abbrs

* docs(accessibility): code blocks

---------

Co-authored-by: Benny Powers <[email protected]>

* docs: rhcodeblock fenced gfm block

* docs: code-block ssr

* docs(color): change minimum column width of color token swatches (#1901)

* docs(color): change minimum column width of color token swatches

* fix: improve how columns resize at different container widths

* docs(color): update status color table (#1929)

* docs(color): update info in status tokens table to match tokens

* docs(color): add note about deprecated status name

* docs(color): remove "error" as a status name

* docs: color table

* chore: patch core for ssr

see patternfly/patternfly-elements#2859

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* docs: update "About the design system" page (#1914)

* docs(about): update content on "About the design system" page

* docs(about): delete "How we build" page

* docs: update about page

* docs: whitespace

* docs: icon size

* docs: card contents

* docs: whitespace, ref links

---------

Co-authored-by: Benny Powers <[email protected]>

* docs: fix all patterns page

* docs: patterns page data

exclude index, use correct title

* feat(alert): dpo tokens (#1905)

* feat(alert): dpo tokens

* fix: handle deprecated statuses

* fix: recombobulate status names

* docs: update jsdoc

* docs: ssr compatible 11ty demos

* fix(alert): ssr compat

* fix(alert): neutral grays

* fix(alert): crayons for headings

* fix(alert): typo in css

* docs: theming dev header style fix (#1936)

docs: scope rh-surface band example css, reduce card text

* docs: a11y dev

* fix(badge): dpo tokens (#1912)

* fix(badge): dpo tokens

* test(badge): update test cases for DPO tokens

* chore: update deps

* test(badge): update specs for DPO tokens

* fix(badge) status states for docs and changeset update

* docs(badge): align variant names on the Guidelines page and update `state` attributes on Overview page

* docs(badge): update changeset + improve formatting

* fix(badge): update deprecated aliases per guidance

* docs(badge): make `deprecated` visible for legacy `critical` state

* docs(badge): update images that had old badge colors

* feat(badge): add back the minimum width

* fix(badge): corrected states in caution badge demo

* fix(badge): corrected states in color-context demo

---------

Co-authored-by: Mark Caron <[email protected]>
Co-authored-by: marionnegp <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>

* Updated Theming Overview page and images (#1938)

* docs(theming): updating overview page and adding graphics

* doc(theming): removing overview h2

* docs: developer theming wording, grammar, typo fixes (#1937)

* docs: developer theming wording, grammar, typo fixes

* docs: make list in dev theme docs

* docs: reword dev theming docs about consumer and provider

* docs: punctuation and grammar for theming docs

* docs: dev theming grammar and colon

* docs: dev theming add colon

* docs: dev theming spell themeable correctly

* docs: dev theming add comma

* docs: dev theming SVG to SVGs

* docs: dev theming tense changes

* docs: dev theming parentheticals and grammar

* docs: dev theming pluralize proper noun

* docs: dev theming clarify sentence

* docs: moar dev theming grammar and wording

* docs: write out `underscore` in dev theming docs

---------

Co-authored-by: Steven Spriggs <[email protected]>

* docs: fix styles on pattern,element pages

* docs(alert): revert #1857

* docs: revert some backpage.css changes

These to be reviewed and reimplemented after release

* chore: update tokens package

* style(tile): refactor css, remove --_text-color

* docs(surface): specify that surface interjects context

* docs: fix uxdotPattern shortcode

* docs(theming): fix up examples

* docs(tile): fix pattern docs

* docs(logo-wall): fix art direction

* docs: Clefairy release notes (#1942)

* docs(release-notes): adding 2.1.0 release notes

* docs(release-notes): taking advantage of the compact tag in the tables

* docs(release-notes): fixing typos and adding periods

* docs(release-notes): rewording container query descriptions

* docs: adjust changesets to align language around container query support (#1944)

* fix(card): computed context (#1943)

* fix(card): compute context

* fix(card): refactor computedContext to a getter

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Steven Spriggs <[email protected]>
Co-authored-by: Mark Caron <[email protected]>
Co-authored-by: marionnegp <[email protected]>
Co-authored-by: Marionne Patel <[email protected]>
Co-authored-by: Greg Gibson <[email protected]>
Co-authored-by: Mark Caron <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feat] <rh-alert> Use DPO status tokens
3 participants