feat(tile): accented tile CSS pattern demo #1721
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Size Change: 0 B Total Size: 266 kB ℹ️ View Unchanged
|
zeroedin
reviewed
Jul 18, 2024
zeroedin
reviewed
Jul 18, 2024
zeroedin
reviewed
Jul 18, 2024
marionnegp
approved these changes
Jul 18, 2024
|
@marionnegp apologies for making you look at this again. @zeroedin suggested we make this a Pattern, so I added an Tile pattern page that shows the CSS and links off to the demo. Can you and @hellogreg proofread the content on Tile pattern page? |
zeroedin
approved these changes
Jul 18, 2024
marionnegp
reviewed
Jul 18, 2024
|
|
||
| ## Overview | ||
|
|
||
| Tiles are flexible layouts with clickable and contained surfaces. |
There was a problem hiding this comment.
Maybe link "Tile" to the Title element page or add a CTA to it
| </rh-code-block> | ||
| <rh-cta><a href="/elements/tile/demos/#demo-accented-tiles">View accented tile demo</a></rh-cta> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Is there a way to get the bottom of the code block (or the CTA) and image container to line up when they're next to each other?
There was a problem hiding this comment.
Maybe consider moving the CTA out of the grid
There was a problem hiding this comment.
@zeroedin I was thinking about this exact thing last night. Will do.
There was a problem hiding this comment.
Also, prefer the <rh-cta href=
|
In that case, #1188 needs to be resolved first |
|
@bennypowers ok. I'll wait to merge until I can pull in #1188 and use a similar |
hellogreg
approved these changes
Jul 19, 2024
bennypowers
added a commit
that referenced
this pull request
Aug 26, 2024
* docs(cta): icons * fix(tag): update green border color (#1537) * Updating rh-tag green border color * docs: changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(cta): add lightdom css (#1495) * docs: draft release notes * fix(tabs): improve long tab content with container queries (#1411) * fix(tabs): improve long tab content with container queries * chore(tabs): add changeset * docs(tabs): update long tab content * docs: update .changeset/silver-hornets-cry.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(cta): add lightdom css * chore(cta): add changeset * fix(cta): lint * chore: remove unexpected changeset * fix(cta): include `-shim` extension to denote optional file * chore(cta): lint * chore(call-to-action): update changeset --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(pagination): add dark theme support (#1552) * feat(pagination): add support for dark theme * chore(pagination): lint CSS * docs(pagination): fix changeset color palette terminology Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * refactor(pagination): organize CSS variables Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * feat(pagination): add support for dark theme * chore(pagination): lint CSS * docs(pagination): fix changeset color palette terminology Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * refactor(pagination): organize CSS variables Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(pagination): make border color a token * fix(pagination): set font-size and family to numbers * fix(pagination): update dark theme focus border color * fix(pagination): numeric link focus outline color * refactor(pagination): rename numeric variables * fix(pagination): fix dark theme numeric focus color * fix(pagination): focus state --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(cta): change focus styles (#1538) * fix(cta): change focus styles WIP * fix(cta): increase specificity for focus state * docs(cta): add/update variable docs in `.ts` file. * chore(cta): add changeset * fix(cta): fix icons in color context demo * fix(cta): explicitly set focus color declaration * docs(cta): play icon * fix(cta): update focus font colors * fix(cta): no inner border for CTA secondary on focus * feat: update images with updated focus and active styles and slight color changes * feat(docs): fix focus style image size --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: marionnegp <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * perf(cta): lazy-load icon dependency (#1634) * feat(cta)!: href (#1608) * feat(cta): href attr Closes #1607 * fix(cta): lint lit-a11y linter had some issues with the comment node I was using to format the template, hence the changes in render * docs(cta): make href pattern preferred * feat(cta): link attrs * docs(cta): update main demo * docs(cta): more analytics demo * docs(cta): demos * fix(cta): restore deleted lazy load feature * feat(health-index): Adding `rh-health-index` element (#1549) * Adding rh-health-index element * fix(health-index): lint, change prop to grade * fix(health-index): eslint * fix(health-index): correct class name * fix(health-index): correct class name * fix(health-index) code docs and screenshot * docs(health-index): add overview * Update elements/rh-health-index/demo/color-context.html Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(health-index): added changeset, a11y test, changed template, readme, css refactor * fix(health-index): Adding/fixing a11y tests * chore(health-index): linting * chore(health-index): linting again * refactor(health-index): fix colors, refactor CSS vars * perf(health-index): reduce bundle and DOM size * fix(health-index): colours and linting * feat(health-index): meter role * fix(health-index): voiceover * docs(health-index): format demos * fix(health-index): screen readers * fix(health-index): role * docs(health-index): sr demos * perf: remove superfluous attribute prop * docs: update .changeset/calm-fireants-kneel.md * docs(health-index): correct shortcodes for code page * docs(health-index): adding images * chore: remove errant commite files * docs(health-index): adding repoStatus, relateItems, and style docs * feat(health-index): adding and updating docs pages, adding a11y guideline partial * docs(health-index): role info --------- Co-authored-by: Adam Johnson <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Steven Spriggs <[email protected]> * docs(health-index): swapping PNGs with SVGs (#1659) * Adding rh-health-index element * fix(health-index): lint, change prop to grade * fix(health-index): eslint * fix(health-index): correct class name * fix(health-index): correct class name * fix(health-index) code docs and screenshot * docs(health-index): add overview * Update elements/rh-health-index/demo/color-context.html Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(health-index): added changeset, a11y test, changed template, readme, css refactor * fix(health-index): Adding/fixing a11y tests * chore(health-index): linting * chore(health-index): linting again * refactor(health-index): fix colors, refactor CSS vars * perf(health-index): reduce bundle and DOM size * fix(health-index): colours and linting * feat(health-index): meter role * fix(health-index): voiceover * docs(health-index): format demos * fix(health-index): screen readers * fix(health-index): role * docs(health-index): sr demos * perf: remove superfluous attribute prop * docs: update .changeset/calm-fireants-kneel.md * docs(health-index): correct shortcodes for code page * docs(health-index): adding images * chore: remove errant commite files * docs(health-index): adding repoStatus, relateItems, and style docs * feat(health-index): adding and updating docs pages, adding a11y guideline partial * docs(health-index): swapping PNGs for SVGs --------- Co-authored-by: Adam Johnson <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Steven Spriggs <[email protected]> * docs(support): adding Support page (#1642) * docs(support): adding Support page * docs(support): added Get Support page and added top margin on backpage headings * docs(support): fix links for design system help section * docs(support): moved heading margin to flow CSS layer, reordered support tiles, and sentence cased the title --------- Co-authored-by: Steven Spriggs <[email protected]> * bug(docs): fix Side Nav overflow scroll (#1661) * docs: load lightdom css on demo pages (#1654) * docs: load lightdom css on demo pages * docs(cta): shim * docs(cta): improve no cta demo --------- Co-authored-by: Steven Spriggs <[email protected]> * docs(health-index): remove playground from overview * docs: demo lightdom the input path for the fullscreen demos changed in #1648, however I failed to update the path here * docs: fix lightdom for demos * fix(tile): tile headline size (#1692) * fix(tile) headline, title, body and footer font-sizes * fix(tile): setting headline to heading-xs token * chore(tile): adding changeset * fix(tile): slot attributes in color demo * fix(tile) headline weight --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]> * fix(tile): css custom properties (#1685) * fix(rh-tile): css custom properties * style(rh-tile): linting * fix(tile): text-decoration custom prop --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * chore: add changeset (#1709) * chore(tile): adding changeset * docs: update .changeset/eighty-peas-joke.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * feat(switch): add `<rh-switch>` (#1513) * docs: draft release notes * fix(tabs): improve long tab content with container queries (#1411) * fix(tabs): improve long tab content with container queries * chore(tabs): add changeset * docs(tabs): update long tab content * docs: update .changeset/silver-hornets-cry.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * feat(switch): add rh-switch element * chore(switch): delete pf-switch.css * chore(switch): lint * fix(switch): remove box-shadow per design * docs(switch): add color-context demo * docs(switch): remove unneeded element internals polyfill import * fix(switch): rename css props and document * docs(switch): update readme * docus(switch): update docs stubs * chore(switch): add changeset * docs(switch): remove unused reverse boolean attr * chore(switch): remove unused demo.css * chore(switch): update changeset * fix(switch): add color context consumer * docs(switch): remove unused styles * docs(switch): correct disabled background color * docs(switch): revert the last commit * docs(switch): correct label color * fix(switch): update dark mode colors * fix(switch): correct light theme label color * docs(switch): update repoStatus shortcodes * feat(skip-link): add `<rh-skip-link>` (#1515) * feat(skip-link): add `<rh-skip-link>` * chore(skip-link): add changeset * docs(skip-link): add appropriate screenshot * fix: added lightdom-shim.css to export * chore: add Adam Johnson to contributors list * chore(skip-link): update readme * fix(skip-link): implement lightdom-shim * docs(skip-link): added JSDoc * docs(skip-link): enlarge screenshot * test(skip-link): add tests * chore(skip-link): lint tests * fix(skip-link): remove empty demo files * fix(skip-link): create container and move styles * fix(skip-link): reformat `.changeset` * fix(skip-link): add important to every CSS property * docs(skip-link): reformat `.changeset`. * fix(skip-link): Remove `!important` from lightdom shim. * fix(skip-link): set `font-size` * refactor(skip-link): change container `id` name * test(skip-link): refactor tests * feat: add more skip links docs content Note: There are a few images that still need to be added. * feat: add images to accessibility page * feat: add static image of skip link to Overview subpage * docs(skip-link): add sample element * feat: add deprecation alert to skip navigation page * test(skip-link): use `aTimeout` for focus test * feat: make the best practices more clear * docs(skip-link): add repoStatus * docs(skip-links): remove extraneous repoStatus shortcodes --------- Co-authored-by: marionnegp <[email protected]> Co-authored-by: Steven Spriggs <[email protected]> * feat(back-to-top): add `<rh-back-to-top>` (#1517) * feat(back-to-top): add `<rh-back-to-top>` * chore(back-to-top): lint * fix(back-to-top): support dev server and docs demo * fix(back-to-top): suggestion for focus ring when on differnt backgrounds * docs(back-to-top): update readme * test(back-to-top): add tests * chore(back-to-top): add changeset * docs(back-to-top): remove comment * chore(back-to-top): update changeset with example * chore(back-to-top): remove unused demo.css * docs(back-to-top): improve screenshot * docs(back-to-top): attempt fix for playground view * fix(back-to-top): change attribute to visible="always" * docs(back-to-top): add back to top to repo status * docs: fix bug when component isnt yet in the repoStatus.yml * docs(back-to-top): update shortcodes for repoStatus --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix!: context types (#1518) * fix(lib)!: context types webcomponents-cg/community-protocols#59 made a breaking change to the way the context protocol works. This commit brings our types in line with the new types on the protocol * fix(context)!: adapt our contexts to new types see lit/lit#4614 and https://github.com/webcomponents-cg/community-protocols/pull/59/files * docs: create changeset --------- Co-authored-by: Steven Spriggs <[email protected]> * feat(code-block): actions and line numbers (#1496) * feat(code-block): wip extensions * feat(code-block): wrap * feat(code-block): show more * perf(code-block): don't clone to compute lines thanks @nikkimk! * feat(code-block): line numbers * feat(code-block): icons still tbd: switching text of toggle button from "toggle wrap" to "toggle overflow" - probably should be a pattern thing * fix(code-block): toggle slots for actions * fix(code-block): style adjustments * fix(code-block): classic css whoopsie * fix(code-block): gradient this was fun to debug. the key insight is that pseudo elements of a grid are *also* grid items * docs(code-block): changesets * docs(code-block): jsdoc * fix(code-block): review notes * docs(code-block): remove expandable demo it was decided (cc @coreyvickery) that expandable would automatically determined * docs(code-block): remove card with tabs demo should be revisited after PFE3/TabsAriaController * fix(code-block): refactor in anticipation of rh-fab * fix(code-block): polish up actions * fix(code-block): wrap fab state * fix(code-block): badge, not tag * fix: 🦄 * fix(code-block): remove actions slot * fix(code-block): expand button styles * fix(code-block): tooltip state in wrap * feat: update code for action buttons in color context demo --------- Co-authored-by: marionnegp <[email protected]> * chore: update to @patternfly/pfe-core version 3.0 (#1508) * chore: update patternfly/elements dep to 3.0 * chore: update lit and typescript deps * chore: update typescript config and declaration * fix(tile): update internals controller instantiation * fix(button): update internals controller instantiation * fix(accordion): update rti api for setting active item * fix(menu): update rti api for setting active item * fix(navigation-secondary): update rti api for setting active item * fix(subnav): update rti api for setting active item * fix(tabs): update rti api for setting active item * chore: remove pfe elements from dep to a devDep add pfe-core as dep * docs(dialog): remove unneeded imports from demo * chore: lint * chore: update deps * test(tile): tile group a11y spec * chore: node version * docs: remove cases of band shortcode * docs: uxdot-search a11y tweaks * docs: 11ty plugins * docs: import package * fix(button): lint a11y in template * fix(audio-player): label dialog from it's opening button * chore: add playwright browser install to test workflow * fix(tooltip): a11y template linting * fix(tabs): use context instead of lightdom classes * docs: add @lit/context to importMap * style(tabs): lint css * fix(tabs) revert use context instead of lightdom classes * fix(tabs): Reverts 4b27d24 * chore: update lit/context to 1.1.1 * fix(menu): implement updated RTIC api * test(menu): remove pageup and pagedown tests reserved for scrolling page * refactor: no side effects in getters * test(footer): deflake tests * test(tooltip): assert on ax tree instead of shadow root * fix(tooltip): invert css to hide content until open / initialized * fix(tabs): use aria-tabs-controller * fix(tabs): refactor using pfe-core 3 * fix(tabs): tab context * fix(tabs): box context --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(switch): use updated InternalsController api * fix(switch): fix accessibility of labels * fix(switch): remove usage of as type * chore: eslint 9 (#1523) * chore: update linters * style: lint everything * chore: add optional dependency for rollup-darwin-x64 * style: lint line length and autofixes * chore: add .cache files to eslint ignore * style(tile): lint line length * style: more linting * fix(tile): replace mistakenly deleted expression * fix(navigation-secondary): query for all nav links update RTIC usage * fix(navigation-secondary): update items on slotchange * test(skip-link): visibility assertion --------- Co-authored-by: Steven Spriggs <[email protected]> * feat(site-status): add `<rh-site-status>` (#1507) * feat(site-status): add site-status * fix(site-status): add missing export * chore(site-stutus): fix comment * fix(site-status): lint * fix(site-status): add color-context * test(site-staus): fix missing semi colon * fix(site-status): remove errant import * fix(site-status): allow endpoint to be overridden * docs(site-status): add incorrect endpoint demo * docs(site-status): correct auto generated template for demo * test(site-status): improve tests * fix(site-status): lint * fix(site-status): lint * fix(site-status): ugh lint... * fix(site-status): revert customizable endpoint, add href to status page link * test(site-status): improve tests * docs(site-status): add status demos * docs(site-status): stub docs * docs(site-status): add jsdoc * docs: add site-status to related items * fix(site-status): add type guard for api response * docs(site-status): update readme * docs(site-status): imporove jsdoc * docs(site-status): add docs pages and images * chore(site-status): add changeset * chore(site-status): update changeset to include example * chore(site-status): remove unused demo files * fix(site-status): remove unused part * style(site-status): reorder type * fix(site-status): make #isApiStatus static * fix(site-status): class decorators cant be use with static private identifier * fix(site-status): move getStatus to firstUpdated, remove extraneous throw * fix(site-status): handle capitalization in css * fix(site-status): correct first letter uppercase style * fix(site-status): revert response error removal * fix(site-status): remove status as statusText includes the 404 text. * fix(site-status): correct viewbox attr * docs(site-status): add repoStatus * test(site-status): use sinon for fetch stub * test(site-status): remove unused aTimeout * fix(site-status): switch api call to a try catch * fix(site-status): remove contextProvider not used in design spec * fix(site-status): use block instead of display contents on host * fix(site-status): move restore of fetch to top describes * fix(site-status): implement loading-text slot for translations and accessibility with aria-polite and aria-busy * docs(site-status): improve demos with loading state demo * fix(site-status): add focus and hover states * docs(site-status): add if status is still loading to accessibility * fix(site-status): readding color context provider * chore(site-status): lint * fix(site-status): remove context provider add dark styles * docs(site-status): readding arg check to fetch override * chore(site-status): lint * chore: bad merge on deps * chore(switch): lint * fix(back-to-top): bad merge, duplicate docs pages * fix(switch): make state css props private * test(switch): update tests to match new switch refactor * docs(switch): update demos to new format * fix(switch): return when no messages are slotted * test(switch): fix test to include space in wrapping label * docs(switch): remove reversed attribute from demo * fix(switch): style messages inline * fix(switch): ensure updating of labels when checked property changes * fix(switch): add reversed, and native RTL support * fix(switch): add dark background when checked * chore(switch): lint * docs(switch): improve color context demo * fix(switch): fix focus ring on dark * docs(switch): improve demo layouts * docs(switch): improve demo, removed label * docs(switch): fix describedby associations * fix(switch): update message color for contexts * docs(switch): update color context demo * fix(switch): support dark color-palette * feat(docs): add content to switch docs * feat(docs): change "text label" to "status message" * feat(docs): comment out empty image shortcodes to avoid DP/npm error * feat(docs): comment out more empty image shortcodes to avoid DP/npm error * feat(docs): add images and alt text * feat(docs): update sample element and add info about status messages and form labels * docs(switch): update to newer format * chore: remove responsive from repo status for switch * docs(switch): update image sizes in examples * docs(switch): remove playground from overview * chore: remove changesets added by bad merge * refactor: use slots for messages, prefer attrs * docs(switch): simplify demos * fix(switch): ariaMixin polyfill * fix(switch): remove extra dom in favor of pseudo elements * test(switch): update test to newer slotted api * test(switch): add tests for attribute based messages * fix(switch): set disabled colors * fix(switch): improve calc for position * docs(switch): add color-palette * docs(switch): center best practice images * Change message's text color for dark, disabled switches --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Adam Johnson <[email protected]> Co-authored-by: marionnegp <[email protected]> * feat(card): heading typography (#1701) * feat(card): heading typography props * style: lint * fix(card): force the heading size in body * style: lint * fix(card): header typography * fix(card): heading line height * docs: various demo fixes (#1678) * docs: fix card heading sizes * docs: juggle selectors * docs: more selector juggling * docs: a different approach * fix: context demo height * docs: reorder demo DOM * docs: icons from node_modules * docs: icon import map * docs: accordion demo height * docs(accordion): accents * feat(breadcrumb): add `<rh-breadcrumb>` (#1535) * feat(breadcrumb): add `<rh-breadcrumb>` * fix(breadcrumb): add breadcrumbs to elements nav * fix(breadcrumb): rearrange dark selector in CSS * feat(breadcrumb): add new no link demo * chore(breadcrumb): lint `00-overview.md` list * docs(breadcrumb): fix sample element in docs * feat(breadcrumb): add visited styling * test(breadcrumb): add tests * test(breadcrumb): add more tests * fix(breadcrumb): remove last `<li>` truncation * fix(breadcrumb): update breadcrumb demo html * feat(breadcrumb): add subtle variant + dark theme * fix(breadcrumb): increase breadcrumb space on mobile * fix(breadcrumb): fix dark current page text color * fix(breadcrumb): change `href` value to `#`. * fix(breadcrumb): use logical properties * fix(breadcrumb): remove more old truncation CSS * fix(breadcrumb): semantically rename vars * docs(breadcrumb): document @cssprops * fix(breadcrumb): link hover/focus/active color * style(breadcrumb): alphabetize css properties * refactor(breadcrumb): rename last no link demo * fix(breadcrumb): add subtle variant to non-interactive last item demo * fix(breadcrumb): remove interactivity of current page * fix(breadcrumbs): move vars to shadow host selector * chore(breadcrumb): resolve typescript warning * feat(breadcrumb): add optional accessible label prop * docs(breadcrumbs): add content to overview, style, guidelines, and accessibility subpages * docs(breadcrumb): update keyboard interactions * docs(breadcrumb): fix remaining shortcodes and repostatus data * docs(breadcrumbs): update Style subpage with image and image sizes * docs: add space between alerts and grids * docs(breadcrumbs): add content and images to Guidelines and Accessibility subpages * docs(breadcrumbs): add missing keyboard interaction column text * fix(breadcrumb): remove unused `items` prop * docs(breadcrumb): remove playground demo from overview * docs(breadcrumb): update anatomy to use figure * docs(breadcrumbs): decrease docs CSS specificity --------- Co-authored-by: marionnegp <[email protected]> Co-authored-by: Steven Spriggs <[email protected]> * chore: chatty test runner * fix: various element and docs fixes (#1713) * fix(site-status): remove unused testing-only escape hatch don't say we didn't warn you * fix(site-status): inline-block layout * fix(audio-player): import package deps by package * fix(audio-player): enforce typography * fix(audio-player): text color in context * feat(context-demo): controls slot * docs: rationalize demo layouts * docs(audio-player): fix demo css * chore: dev server layout * docs: repo status shortcode data (#1714) * docs: wip repoStatus shortcode data flow * docs: update reposStatusChecklist call point * docs: update repoStatus data with tagName key * docs: upate renderCodeDocs to pull from doc object for docsPage * docs: update repoStatusChecklist to pull from docs object for tagName * docs(popover): add repoStatusChecklist shortcode * docs: put computed data for elements back into frontmatter, permalink not calculating * docs: lint renderCodeDocs * docs(popover): add code tab * docs(progess-stops): add code tab * docs: update repoStatus with progres steps * docs: rename webRH to RH Shared Libs * docs: add getPrettyName filter which loads from tagName instead of docs * docs: change filter name to getPrettyElementName Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * docs: update docs/_plugins/rhds.cjs * docs: fix merge * docs(breadcrumb): add repoStatus data to shortcodes --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(card): adding important to margin unset for headings (#1728) * fix(card): adding important to margin unset for headings * chore(card): adding changeset * Update .changeset/breezy-bears-judge.md Co-authored-by: Steven Spriggs <[email protected]> --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(button): center play icon in circle (#1731) * fix(button): center play icon in circle * chore(button): add changeset * fix(button): update play icon Icon is https://github.com/RedHat-UX/red-hat-icons/blob/main/src/ui/play-fill.svg * feat(card): promo variant (#1569) * fix(card): make `.empty` work * fix(card): even `#body` spacing when footer is `.empty` * feat(card): add inline promo demo * chore(card): add changeset for inline promo * docs(card): rename variants demo to patterns * fix(card): hide empty slots when there's no content * feat(card): make inline promo a WC variant * fix(card): remove inline promo comment * fix(card): svg title text * docs(card): update changeset * docs(card): change `patterns.html` back to `variants.html` * fix(card): move inline-promo margin to demo styles * fix(card): remove inline promo full width padding * fix(card): rename slot `inline-promo` to `image` * fix(card): remove `one-col` and `reverse` attrs Change them to classes and moved styles into the demo. Now styled using CSS Shadow Parts. * fix(card): remove `full-width` attr, convert to class + `part` selector * fix(card): move `standard` styles to demo * docs(card): change attr docs to reference `class` * docs(card): inline promo inline docs layout tweaks * fix(card): update inline promo CSS attr selector The `~` searches for the word `inline-promo` in a space separated list. Pre-optimization just in case more variants are added in the future. * fix(card): nix outdated `full-width` prop and var docs * docs(card): update changeset * fix(card): style header when image is present * docs(card): implement asset and image patterns * docs(card): logo pattern * docs(card): quote pattern * docs(card): image pattern * docs(card): icon pattern * docs(card): asset pattern * docs: remove unused images * docs: rename inline promo pattern file * docs(card): sticky pattern * docs(card): title pattern * docs(card): video pattern * fix(card): merge updates from base * docs(card): pattern fixes * fix(card): has-body shadow class, header margin h/t @OneEightyFirst * fix(card): remove `isServer`, it's not in use * fix(card): inline promo heading and paragraph spacing docs PR surfaced that we need more robust heading and paragraph spacing in Inline Promo. CSS Custom Properties added for users if needed. * fix(card): inline promo tweaks * fix(card): promo tweaks * fix(card): promo tweaks * refactor(card): class names * fix(card): private vars * fix(card): remove unused private var * docs(card): inline-promo * fix(card): rename inline promo to promo * fix(card): imageless promo layout * docs(card): align image when reversed * fix(card): remove 1px spacing around promo image * fix(card): unify promo demo sample SVG attr values * refactor(card): alphabetize promo container css * fix(card): touch up promo spacing * fix(card): add appropriate promo standard typography * fix(card): increase promo standard desktop padding * fix(card): fix spacing with standard promo * fix(card): promo layouts * docs(card): promo demos * fix(card): improve standard promo spacing * docs(card): add promo standard demo gutters * fix(card): role `img` * feat(card): add `full-width` attribute to promo `<rh-card variant="promo" full-width>` * docs(card): layout tweaks for promo demo * docs(card): change one promo narrow card Remove standard. Add Promo sans image. * feat(card): make public vars work with promo variant * docs(card): improve wording around promo changes * fix(card): match promo border mockup to code * fix(card): update promo standard bkg color * docs(card): add dark examples to promo + full width demos * fix(card): style `.reverse` on container grid, not image/body * fix(card): increase promo image width --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Steven Spriggs <[email protected]> * Merge branch 'main' into staging/charmander * feat(tile): accented tile CSS pattern demo (#1721) * feat(tile): add accented tile CSS pattern demo * feat(tile): add accented tile CSS pattern demo * feat(tile) unnesting CSS * feat(tile) adding border-width token to accented tile demo * feat(tile) removing nested CSS on custom props demo * docs(tile): adding accented tile pattern docs * feat(tile) moving accent tile pattern cta --------- Co-authored-by: Steven Spriggs <[email protected]> * feat(tile): include grid layout in `rh-tile-group` element (#1729) * fix(tile): move tile group grid CSS to included stylesheet * docs(tile): improve layout of color context demo * docs(tile): add space to bottom of checkable tiles demo * docs(tile): remove tile group from custom props demo * chore(tile): add changeset about `rh-tile-group` * chore(tile): update changeset verbiage * docs(tile): remove tile layout demo * docs(tile): demos show correct height --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(cta): move component level css props to private vars (#1330) * fix(cta): move componenent level css props to private vars * chore(cta): lint long lines * fix(cta): fix typos * fix(cta): incorrectly fixed conflict from merge * docs(cta): add desaturated demo * docs(cta): remove desatruated demo * chore(cta): add changeset * feat!: generate entrypoint module (#1630) * feat!: generate entrypoint module removes `rhds.min.js` from the npm tarbal in favour of `elements.js` * chore: docs * chore: lint --------- Co-authored-by: Steven Spriggs <[email protected]> * fix!(navigation-secondary): remove deprecations (#1745) * fix(navigation-secondary): remove deprecations * chore(navigation-secondary): add changeset * chore(navigation-secondary): lint * feat(video-embed): add rh-video-embed (#1514) * feat(video): init video * docs(accessibility): added multimedia section * docs(accessibility): added resources page * docs(accessibility): fixed audio-video styles * docs(accessibility): fixed link inside blockquote * feat(video): added demos * feat(video): a11y refactor * feat(video): updated cookie consent feature * feat(video): updated styles * docs(video): init docs * feat(video): updated dark and light themes * docs(video): updated demos * docs(video): added accessibility docs * test(video): finished tests * docs(video): removed repo status from overview temporarily * chore(video): add changeset * docs(video): use Red Hat OpenShift video for embed * test(video): fix cookie consent tests * chore(video): lint typescript * fix(video): caption text color and margin * fix(video): fix typescript compilation error * fix(video): fix SVG displaying overtop of button * fix(video): remove double slash from fakeimg.pl URL * feat(video): make `rh-video` responsive * fix(video): update consent spacing * docs(video): make demos larger (900px by 499px) * feat(video): add CSS Shadow Parts * feat(video): add alignment demo * fix(video): remove bottom margin from container * feat(video): add card + video demo * fix(video): use logical styling properties * docs(video): remove old shortcodes and placeholders * fix(video): remove prose from demos * docs(video): update RH homepage URL to use https * docs(video): add content to readme * docs(video): stub out accessibility page * fix(video): change consent prop to past tense * feat(video): add class to `iframe` embed * feat(video): don't show related videos on pause/end * docs(video): fix shortcode build error Fixes build issue `unknown block tag: playground (via Template render error)` https://redhat-internal.slack.com/archives/C05GTN4E82G/p1719597819699459 * fix(video): remove `dark.html`, add color context demo * fix(video): use `rh-button` for play button * fix(video): use token values for dark play btn opacity * docs(video): improve event and attr descriptions * docs(video): fix warning about bracketed type * docs(video): add docs content and images WIPish, have to add a few links + fix a few images * docs(video): add links to guidelines and a11y pages * docs(video): add missing guidelines images * docs(video): add play icon to overview preview image * fix(video): enforce caption font size * fix(video): harden caption spacing * docs(video): add installation instructions to README * docs(video): remove play button from sample element thumbnail * fix(video): align video and caption in alignment demo * fix(video): remove a few play button icon styles These styles are handled in #1731. * fix(video): update event name to `request-play` * refactor(video-embed): rename `video` to `video-embed` --------- Co-authored-by: Steven Spriggs <[email protected]> Co-authored-by: Adam Johnson <[email protected]> Co-authored-by: Adam Johnson <[email protected]> * fix: Underline links - breadcrumb + navigation-secondary (#1743) * fix(breadcrumb): properly link lightdom CSS * docs(breadcrumb): use token value for margin in demos * docs(breadcrumb): non interactive last item demo layout * fix(breadcrumb): underline links * fix(navigation-secondary): correctly link lightdom CSS in base demo * fix(breadcrumb): dont remove underline on interactive states * fix(navigation-secondary): underline links in dropdown menus * fix(breadcrumb): lightdom path for build * fix(navigation-secondary): lightdom path for build * chore: add changeset * docs(breadcrumb): include underlines in screenshot.png * chore: update changeset content Co-authored-by: Steven Spriggs <[email protected]> * fix(navigation-secondary): underline logo --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(toast): remove boolean toast attribute (#1761) * fix(alert): removed deprecated toast property * chore(alert): add changeset * chore(alert): update changeset * fix(tabs): removed deprecated `.isTab()` and `.isPanel` static class methods (#1762) * fix(tabs): remove deprecated static class methods * chore(tabs): add changeset * docs: fullscreen for demos (#1765) * chore: integrate pfe 4 (#1763) * chore: integrate pfe 4 * fix(navigation-secondary): rti query selector * docs: import map plugin * docs: pfe-4 into docs elements * docs: better fullscreen playground * fix: observes decorator * docs: jsdoc defaults syntax * fix(table)!: remove deprecated css props * chore: delete untracked file * docs: fixes for pfe4 * chore: dependencies * chore: patches * chore: stylelint deps * chore: lint * fix(tabs): align tabs with rti/atfocus controller implementation * docs(tabs): add manual activation demo * test(tabs): improve tests, adding manual activation tests * fix(stat): correct :not selector style * test(dialog): improve readabilty * chore(tabs): lint * fix(dialog): manage closing state * chore: wireit cache action version * test(dialog): refactor tests --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(footer): remove deprecated `<rh-footer-global>` element (#1771) * fix(footer): remove deprecated global footer element * chore(footer): add changeset * fix(footer): remove global footer import * fix(footer): remove global footer from styles * docs: changeset --------- Co-authored-by: Benny Powers <[email protected]> * fix(footer): remove deprecated global slot (#1770) * fix(footer): remove deprecated global slot * chore(footer): add changeset * chore(footer): update changeset * fix(spinner): remove deprecated `color-palette` (#1769) * fix(spinner): remove deprecated color-palette property * chore(spinner): add changeset * chore(spinner): lint * fix(cta): remove deprecated public getter (#1767) * fix(cta): remove deprecated public getter * chore(cta): add changeset * refactor(cta): remove private getter * docs: changesset --------- Co-authored-by: Benny Powers <[email protected]> * fix(accordion): remove deprecated icon property from header (#1760) * fix(accordion): remove deprecated icon property * chore(accordion): add changeset * docs: changeset --------- Co-authored-by: Benny Powers <[email protected]> * fix(table): removed deprecated css properties (#1768) * fix(table): remove deprecated css properties * chore(table): add changeset * chore(table): lint --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(footer): linting errors in footer lightdom CSS file (#1777) style(footer): fix linting errors * feat(icon): add `<rh-icon>` (#1732) * chore: add red-hat-icon package * feat(icon): add rh-icon * docs(icon): remove size css property * docs(icon): add icon to repostatus data * fix(icon): set default set to standard * test(icon): add fallback test * chore(icon): lint * fix(icon): add rh-icon-size css prop for icon size modification * fix(icon): update standard size * docs(icons): add docs * chore: remove errant changes * chore: remove errant changes take 2 * docs(icon): improve readme add loading info to code tab * docs(icon): add loading info to readme * chore(icon): add changeset * fix(icon): add accessible-label property * docs(icon): improve demos * docs: remove conflicting styles from demo template * feat(icon): updated Overview and Style subpages, added a default size to microns * docs(icon): update Style and Guidelines subpages * docs(icon): update Accessibility subpage and subpage footer * docs(icon): add thumbnail and update content * docs(icon): improve default demo * docs(icon): use accessible-label on sample element on overview * docs(icon): update accessibility content and theme section * fix(icon): remove setting presentational role * docs(icons): use built in two column grid * docs(icon): update accessibility tab * docs(icon): add doc icons * docs: improve back to top styles * docs(icon): remove extra return whitespace * docs(icons): update guidelines, remove alignment to other elements content * chore(icon): improve changeset * docs(icon): reduce default demo content * docs(icon): improve readme * docs(icon): update overview content * style(icon): adjust render template format * fix(icon): update for icons 1.1 * chore: icon dep * fix: remove pf-icon dependency (wip) * chore: package lock * chore: add optional esbuild darwin dep * fix: patch pfe-tools demo css * docs: update icons path in eleventy importmap * docs: update icons path in dev server importmap * docs(icon): update sets demo * docs(icon): improve set demo * chore(icon): lint set demo * docs: add base icon path to importmap * docs(icon): remove comment * docs(icon): lazy loading is default * fix(subnav): replace correct icon names and remove size attr * chore: move @patternfly/icons to devDependencies * fix(icon): fix lazy loading * fix(icon): remove intersect options just just using defaults * fix(icon): remove display contents from container * fix(footer): update footer social icons to use rh-icon * fix(cta): update cta icons to use rh-icon * test(navigation-secondary): remove unecessary icons * fix(back-to-top): update to use rh-icon * fix(statistic): update to use rh-icon * docs(statistic): remove incorrect cssprop jsdoc * fix(tabs): update to use rh-icon * fix(tag): update to use rh-icon * fix(statistic): remove unused ifDefined * fix(tile): update to use rh-icon * fix(tile): missed pf-icon styles convert to rh-icon * chore(footer): lint lightdom styles * fix(icon): make load a private method * fix(cta): remove static import of icon dynamically imported later * fix(cta): update remaining pf-icon styles to rh-icon * test(footer): remove x icon from fixture throwing false positive * fix(stat): remove setting size attr on icon, rh-icon doesnt suppport * test(stat): correct icon size for large stat, remove check for size attr on rh-icon * test(tag): skip slotted rh-icon test upstream issue * docs: toast * docs(icon): sets * docs(icon): sets * feat(alert): toast * docs: patch eleventy-plugin-lit * docs: changeset * docs: environment * fix(alert): toast * fix(alert): toast animation * chore: build * fix(icon): hide content from at --------- Co-authored-by: marionnegp <[email protected]> Co-authored-by: Benny Powers <[email protected]> * fix(alert): toast * fix(icon): fallback content available to at * feat(pagination): add open, small, and compact variants (#1587) * feat(pagination): add `size="sm"` variant * feat(pagination): add "Open" variant * feat(pagination): add "Compact" variant * docs(pagination): add changeset * fix(pagination): move `#numeric` to private `fn` * fix(pagination): fix bkg color on light(er) + dark(er) palettes NOTE: To see the color change, you must click from light to dark. Eg: lightest to light will NOT work. You must traverse light(est/er) to dark(est/er) to see the updates. * fix(pagination): set explicit `#numeric` font size * fix(pagination): update `go-to-page` slot text * docs(pagination): add space to demo text * feat(pagination): add `open-compact` variant * feat(pagination): integrate compact layout This integrates the "compact" layout into pagination by default. When a users screen is between 344px and 767px, the compact layout is shown. * docs(pagination): make bespoke open/compact demos * fix(pagination): compact dark stepper hover bg color * fix(pagination): remove mobile hover/focus bg color The border on hover is in the design spec. AFAICT, the background color change on hover is not. * refactor(pagination): move link tag above script tag * fix(pagination): compact demo lightdom path * fix(pagination): fix link to lightdom css in rh-pagination base demo * fix(pagination): stepper arrow color * fix(pagination): increase numeric input padding * fix(pagination): decrease `sm` variant numbers font size * docs(pagination): add docs for numeric shadow parts * feat(pagination): add shadow part to container * fix(pagination): remove `flex` from `#numeric` Setting this property caused issues if someone wanted to right align `rh-pagination`. * fix(pagination): lightdom css path for build * fix(pagination): dark-alt + darker background color fix * fix(pagination): use vars for size, decrease sm to 32px * fix(pagination): don't adjust input padding on focus Prevents weird jump / jank. * docs(pagination): update for new sizes and variants * style(pagination): fix linting CSS error * fix(pagination): remove dark/darker/light/lighter extra color palettes * style(pagination): remove `{color}` from cssprop docs * docs(pagination): remove top padding on compact vs mobile guideline images * style(footer): lint css --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]> * docs(logo-wall): added docs and patterns for logo wall (#1772) * (docs): adds logo wall patterns and docs * remove unused logo files * updated styles to custom-element approach * adds lightdom css file for logo wall pattern * moved lightdom css to logo-wall directory * fixes container query * docs: add redhat mono font (#1775) * docs: fix missed font path (#1776) docs: fix missed path * updates custom-element approach to classitis approach * updates svgs for hover and focus dark interaction states * remove rh prefix from lightdom css file name * docs(color-accessibility): updated color guidance (#1747) * docs(color-accessibility): updated color guidance * Docs (color): Made edits --------- Co-authored-by: Marionne Patel <[email protected]> * style(logo-wall): code formatting * fix(logo-wall): use root vars * docs(logo-wall): isolated patterns * docs(logo-wall): css links * docs(logo-wall): grady review * docs: pattern ordering --------- Co-authored-by: Steven Spriggs <[email protected]> Co-authored-by: gradymcgee <[email protected]> Co-authored-by: Marionne Patel <[email protected]> Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(accordion)!: heading tags (#1715) * fix(accordion): heading tags also improves perf * fix(accordion): composed text content in header * fix(accordion): ssrable * fix(accordion): handle headings around tabs * docs: changesets * fix(accordion): tests and lint * fix(header): restore context * style: lint footer css * fix(accordion): heading styles * fix(accordion): aria, styles * fix(accordion): font-size, a11y * style: lint * test(accordion): a11y tests * fix(accordion): header level * perf(accordion): large in context * fix(accordion)!: remove unused `bordered` attribute * fix(accordion): context --------- Co-authored-by: Steven Spriggs <[email protected]> * docs: repo status dupes (#1783) * docs(repoStatus): updating new statuses and removing dupes * docs(repoStatus): remove unneeded changes * docs(repoStatus): fixing typos in yaml * docs(repoStatus): fixing more typos and status for jump links * docs: ssr'd sidenav, use rh-icons --------- Co-authored-by: Mark Caron <[email protected]> Co-authored-by: Steven Spriggs <[email protected]> Co-authored-by: Adam Johnson <[email protected]> Co-authored-by: marionnegp <[email protected]> Co-authored-by: Adam Johnson <[email protected]> Co-authored-by: Nikki Massaro <[email protected]> Co-authored-by: Diwanshi Gadgil <[email protected]> Co-authored-by: gradymcgee <[email protected]> Co-authored-by: Marionne Patel <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What I did
Accented tilesCSS pattern demo based on Benny's ideaTesting Instructions