diff --git a/docs/docs/components/callout.md b/docs/docs/components/callout.md index 7e1863950..11021e56f 100644 --- a/docs/docs/components/callout.md +++ b/docs/docs/components/callout.md @@ -58,6 +58,71 @@ Set the `variant` attribute to change the callout's variant. ``` +### Appearance + +Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`). + +```html {.example} + + + This accent callout is also outlined + + +
+ + + + This accent callout draws attention without an outline + + +
+ + + + This callout is both filled and outlined + + +
+ + + + This callout is only filled + + +
+ + + + Here's an outlined callout + + +
+ + + + No bells and whistles on this plain callout + +``` + +### Sizes + +Use the `size` attribute to change a callout's size. + +```html {.example} + + + This is meant to be very emphasized. + + + + Normal-sized callout. + + + + Just a small tip! + +``` + ### Without Icons Icons are optional. Simply omit the `icon` slot if you don't want them. diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md index d91e09252..6a3f4f791 100644 --- a/docs/docs/components/card.md +++ b/docs/docs/components/card.md @@ -60,7 +60,8 @@ Basic cards aren't very exciting, but they can display any content you want them ### Card with Header -Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card. +Headers can be used to display titles and more. +If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically). ```html {.example} @@ -95,7 +96,8 @@ Headers can be used to display titles and more. Use the `with-header` attribute ### Card with Footer -Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card. +Footers can be used to display actions, summaries, or other relevant content. +If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically). ```html {.example} @@ -122,7 +124,8 @@ Footers can be used to display actions, summaries, or other relevant content. Us ### Images -Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card. +Card images are displayed atop the card and will stretch to fit. +If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically). ```html {.example} diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 9377f306f..36f5db042 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -14,6 +14,7 @@ During the alpha period, things might break! We take breaking changes very serio ## Next +- Simplified the internal structure and CSS properties of ``, removed `base` part. - Fixed a bug in `` where it would not properly change its "checked" state when its property changed. - Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly - Improved performance of `` when using a large number of options @@ -147,4 +148,4 @@ Here's a list of some of the things that have changed since Shoelace v2. For que Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions) -Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/) \ No newline at end of file +Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/) diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css index efc3a76d0..c9c39b983 100644 --- a/src/components/callout/callout.css +++ b/src/components/callout/callout.css @@ -8,13 +8,17 @@ align-items: stretch; border-radius: var(--wa-panel-border-radius); background-color: var(--background-color, var(--wa-color-fill-quiet)); - border-color: var(--border-color, var(--wa-color-border-quiet)); + border-color: var(--border-color, transparent); border-style: var(--wa-panel-border-style); border-width: var(--wa-panel-border-width); color: var(--text-color, var(--wa-color-on-normal)); padding: var(--spacing); } +:host([appearance~='accent']) { + font-weight: var(--wa-font-weight-semibold); +} + [part~='icon'] { flex: 0 0 auto; display: flex; diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts index dae596097..ccbf3102e 100644 --- a/src/components/callout/callout.ts +++ b/src/components/callout/callout.ts @@ -1,6 +1,8 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; +import appearanceStyles from '../../styles/utilities/appearance.css'; +import sizeStyles from '../../styles/utilities/size.css'; import variantStyles from '../../styles/utilities/variants.css'; import styles from './callout.css'; @@ -22,11 +24,23 @@ import styles from './callout.css'; */ @customElement('wa-callout') export default class WaCallout extends WebAwesomeElement { - static shadowStyle = [variantStyles, styles]; + static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, styles]; /** The callout's theme variant. */ @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand'; + /** The callout's visual appearance. */ + @property({ reflect: true }) appearance: + | 'accent' + | 'filled' + | 'outlined' + | 'plain' + | 'outlined filled' + | 'outlined accent' = 'outlined filled'; + + /** The callout's size. */ + @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; + render() { return html`
diff --git a/src/components/card/card.css b/src/components/card/card.css index 942d9bef9..ab99e64c3 100644 --- a/src/components/card/card.css +++ b/src/components/card/card.css @@ -1,45 +1,30 @@ :host { - --background-color: var(--wa-color-surface-default); - --border-color: var(--wa-color-surface-border); - --border-radius: var(--wa-panel-border-radius); - --border-style: var(--wa-panel-border-style); - --border-width: var(--wa-panel-border-width); - --box-shadow: var(--wa-shadow-s); --spacing: var(--wa-space-xl); - display: inline-block; -} - -.card { display: flex; flex-direction: column; - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - box-shadow: var(--box-shadow); + background-color: var(--wa-color-surface-default); + border-color: var(--wa-color-surface-border); + border-radius: var(--wa-panel-border-radius); + border-style: var(--wa-panel-border-style); + border-width: var(--wa-panel-border-width); + box-shadow: var(--wa-shadow-s); color: var(--wa-color-text-normal); - font: inherit; } .image { display: flex; - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); + border-top-left-radius: inherit; + border-top-right-radius: inherit; margin: calc(-1 * var(--border-width)); overflow: hidden; -} -.image::slotted(img) { - display: block; - width: 100%; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -.card:not(.card--has-image) .image { - display: none; + &::slotted(img) { + display: block; + width: 100%; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } } .header { @@ -48,13 +33,9 @@ padding: calc(var(--spacing) / 2) var(--spacing); } -.card:not(.card--has-header) .header { - display: none; -} - -.card:not(.card--has-image) .header { - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); +:host(:not([with-image])) .header { + border-top-left-radius: inherit; + border-top-right-radius: inherit; } .body { @@ -62,14 +43,16 @@ padding: var(--spacing); } -.card--has-footer .footer { +.footer { display: block; border-top: inherit; - border-bottom-left-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; padding: var(--spacing); } -.card:not(.card--has-footer) .footer { +:host(:not([with-header])) .header, +:host(:not([with-footer])) .footer, +:host(:not([with-image])) .image { display: none; } diff --git a/src/components/card/card.test.ts b/src/components/card/card.test.ts index 943953ddf..21435f4b5 100644 --- a/src/components/card/card.test.ts +++ b/src/components/card/card.test.ts @@ -22,14 +22,6 @@ describe('', () => { `); await expect(el).to.be.accessible(); }); - - it('should contain the class card.', async () => { - const el = await fixture(html` - This is just a basic card. No image, no header, and no footer. Just your content. - `); - const card = el.shadowRoot!.querySelector('.card')!; - expect(card.classList.value.trim()).to.eq('card'); - }); }); describe('when provided an element in the slot "header" to render a header', () => { @@ -76,17 +68,6 @@ describe('', () => { expect(childNodes.length).to.eq(1); }); - - it('should contain the class card--has-header.', async () => { - const el = await fixture( - html` -
Header Title
- This card has a header. You can put all sorts of things in it! - `, - ); - const card = el.shadowRoot!.querySelector('.card')!; - expect(card.classList.value.trim()).to.eq('card card--has-header'); - }); }); describe('when provided an element in the slot "footer" to render a footer', () => { @@ -137,19 +118,6 @@ describe('', () => { expect(childNodes.length).to.eq(1); }); - - it('should contain the class card--has-footer.', async () => { - const el = await fixture( - html` - This card has a footer. You can put all sorts of things in it! - -
Footer Content
- `, - ); - - const card = el.shadowRoot!.querySelector('.card')!; - expect(card.classList.value.trim()).to.eq('card card--has-footer'); - }); }); describe('when provided an element in the slot "image" to render a image', () => { @@ -201,22 +169,6 @@ describe('', () => { expect(childNodes.length).to.eq(1); }); - - it('should contain the class card--has-image.', async () => { - const el = await fixture( - html` - A kitten walks towards camera on top of pallet. - This is a kitten, but not just any kitten. This kitten likes walking along pallets. - `, - ); - - const card = el.shadowRoot!.querySelector('.card')!; - expect(card.classList.value.trim()).to.eq('card card--has-image'); - }); }); }); } diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 48e6ca6d2..f878d991e 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -1,6 +1,5 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import styles from './card.css'; @@ -15,49 +14,32 @@ import styles from './card.css'; * @slot footer - An optional footer for the card. * @slot image - An optional image to render at the start of the card. * - * @csspart base - The component's base wrapper. * @csspart image - The container that wraps the card's image. * @csspart header - The container that wraps the card's header. * @csspart body - The container that wraps the card's main content. * @csspart footer - The container that wraps the card's footer. * - * @cssproperty --background-color - The card's background color. - * @cssproperty --border-color - The card's border color, including borders that occur inside the card. - * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. - * @cssproperty --border-style - The style of the card's borders. - * @cssproperty --border-width - The width of the card's borders. Expects a single value. - * @cssproperty --box-shadow - The shadow effects around the edges of the card. * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. */ @customElement('wa-card') export default class WaCard extends WebAwesomeElement { static shadowStyle = styles; - /** Renders the card with a header */ + /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */ @property({ attribute: 'with-header', type: Boolean }) withHeader = false; - /** Renders the card with an image */ + /** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */ @property({ attribute: 'with-image', type: Boolean }) withImage = false; - /** Renders the card with a footer */ + /** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */ @property({ attribute: 'with-footer', type: Boolean }) withFooter = false; render() { return html` -
- - - - -
+ + + + `; } } diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css index 539bb2803..54e5ca00d 100644 --- a/src/styles/utilities/appearance.css +++ b/src/styles/utilities/appearance.css @@ -39,6 +39,8 @@ .wa-plain, :host([appearance~='plain']) { --background-color: transparent; + --text-color: var(--wa-color-on-quiet); + --background-color-hover: var(--wa-color-fill-quiet); --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);