diff --git a/change/@fluentui-web-components-330ad1cf-b85e-4b1a-9495-754afccbe2e5.json b/change/@fluentui-web-components-330ad1cf-b85e-4b1a-9495-754afccbe2e5.json new file mode 100644 index 0000000000000..cb3814ae6b737 --- /dev/null +++ b/change/@fluentui-web-components-330ad1cf-b85e-4b1a-9495-754afccbe2e5.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: add missing exports for LinkStyles and MessageBar and remove default option from DividerApperance and ImageFit", + "packageName": "@fluentui/web-components", + "email": "rupertdavid@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/src/_docs/developer/polyfilling.stories.mdx b/packages/web-components/src/_docs/developer/polyfilling.stories.mdx index d4a5758e01735..e5982105337f0 100644 --- a/packages/web-components/src/_docs/developer/polyfilling.stories.mdx +++ b/packages/web-components/src/_docs/developer/polyfilling.stories.mdx @@ -10,10 +10,29 @@ Fluent UI Web Components takes a "bring your own polyfill" approach so that proj Here's a list of features we're leveraging and their current [Baseline](https://web.dev/baseline) browser support. -| | Chrome | Edge | Firefox | Safari | -| ---------------------- | ------ | ---- | ------- | ------ | -| HTML Popover Attribute | 114 | 114 | 125 | 17 | -| CSS Anchor Positioning | 125 | 125 | ❌ | ❌ | + + + + + + + + + + + + + + + + + + + + + + +
ChromeEdgeFirefoxSafari
HTML Popover Attribute11411412517
CSS Anchor Positioning125125❌❌
## HTML Popover diff --git a/packages/web-components/src/divider/divider.options.ts b/packages/web-components/src/divider/divider.options.ts index c537eeab5b92c..e2a08593b4e67 100644 --- a/packages/web-components/src/divider/divider.options.ts +++ b/packages/web-components/src/divider/divider.options.ts @@ -59,7 +59,6 @@ export const DividerAppearance = { strong: 'strong', brand: 'brand', subtle: 'subtle', - default: 'default', } as const; /** diff --git a/packages/web-components/src/divider/divider.spec.ts b/packages/web-components/src/divider/divider.spec.ts index bd0d7ab853d02..b4e4d237f57e1 100644 --- a/packages/web-components/src/divider/divider.spec.ts +++ b/packages/web-components/src/divider/divider.spec.ts @@ -114,10 +114,10 @@ test.describe('Divider', () => { await expect(element).toHaveJSProperty('alignContent', 'end'); await element.evaluate((node: Divider) => { - node.appearance = 'default'; + node.appearance = undefined; }); - await expect(element).toHaveJSProperty('appearance', 'default'); + await expect(element).not.toHaveJSProperty('appearance', 'default'); await element.evaluate((node: Divider) => { node.appearance = 'strong'; diff --git a/packages/web-components/src/divider/divider.stories.ts b/packages/web-components/src/divider/divider.stories.ts index 925d022cbd968..b988383d002e2 100644 --- a/packages/web-components/src/divider/divider.stories.ts +++ b/packages/web-components/src/divider/divider.stories.ts @@ -49,10 +49,11 @@ export default { title: 'Components/Divider', args: { content: 'Section One', - alignContent: undefined, + alignContent: DividerAlignContent.center, appearance: undefined, inset: false, - orientation: undefined, + orientation: DividerOrientation.horizontal, + role: DividerRole.separator, }, argTypes: { content: { @@ -70,7 +71,7 @@ export default { summary: 'Fluent v9. Determines the alignment of the content within the divider.', }, defaultValue: { - summary: 'undefined', + summary: DividerAlignContent.center, }, }, options: Object.values(DividerAlignContent), @@ -88,7 +89,7 @@ export default { summary: 'undefined', }, }, - options: Object.values(DividerAppearance), + options: ['undefined', ...Object.values(DividerAppearance)], control: { type: 'select', }, @@ -100,7 +101,7 @@ export default { summary: 'Inherited from FASTDivider. Aria role for the divider.', }, defaultValue: { - summary: 'separator', + summary: DividerRole.separator, }, }, options: Object.values(DividerRole), @@ -129,7 +130,7 @@ export default { 'Inherited from FASTDivider. Layout can be horizontal or vertical. Adds aria-orientation to component.', }, defaultValue: { - summary: undefined, + summary: DividerOrientation.horizontal, }, }, options: Object.values(DividerOrientation), diff --git a/packages/web-components/src/divider/divider.ts b/packages/web-components/src/divider/divider.ts index d717c35115afe..499b59d145fce 100644 --- a/packages/web-components/src/divider/divider.ts +++ b/packages/web-components/src/divider/divider.ts @@ -140,7 +140,7 @@ export class Divider extends BaseDivider { * Adds padding to the beginning and end of the divider. */ @attr({ mode: 'boolean' }) - public inset?: boolean = false; + public inset?: boolean; /** * Handles changes to inset custom states diff --git a/packages/web-components/src/image/image.options.ts b/packages/web-components/src/image/image.options.ts index 25cb3770ac754..40c12e11e8b45 100644 --- a/packages/web-components/src/image/image.options.ts +++ b/packages/web-components/src/image/image.options.ts @@ -9,7 +9,6 @@ export const ImageFit = { center: 'center', contain: 'contain', cover: 'cover', - default: 'default', } as const; /** * Types for image fit diff --git a/packages/web-components/src/image/image.stories.ts b/packages/web-components/src/image/image.stories.ts index 5b31ad489c110..067d3d13090d1 100644 --- a/packages/web-components/src/image/image.stories.ts +++ b/packages/web-components/src/image/image.stories.ts @@ -25,7 +25,7 @@ export default { block: false, bordered: false, shadow: false, - fit: ImageFit.default, + fit: undefined, shape: ImageShape.square, }, argTypes: { @@ -62,10 +62,10 @@ export default { description: 'Determines how the image will be scaled and positioned within its parent container.', table: { defaultValue: { - summary: 'default', + summary: 'undefined', }, }, - options: Object.values(ImageFit), + options: ['undefined', ...Object.values(ImageFit)], control: 'select', }, role: { diff --git a/packages/web-components/src/image/image.ts b/packages/web-components/src/image/image.ts index 1a6ce2f803650..a561dd74c1427 100644 --- a/packages/web-components/src/image/image.ts +++ b/packages/web-components/src/image/image.ts @@ -22,7 +22,7 @@ export class Image extends FASTElement { * HTML attribute: block. */ @attr({ mode: 'boolean' }) - public block?: boolean = false; + public block?: boolean; /** * Handles changes to block custom states diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index b40f8b92eca4e..06057175845b1 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -15,7 +15,7 @@ export { accordionStyles, accordionTemplate, } from './accordion/index.js'; -export { Link, LinkAppearance, LinkDefinition, LinkTemplate, LinkTarget } from './link/index.js'; +export { Link, LinkAppearance, LinkDefinition, LinkTemplate, LinkStyles, LinkTarget } from './link/index.js'; export { Avatar, AvatarActive, @@ -127,6 +127,15 @@ export { AnchorButtonTemplate, AnchorTarget, } from './anchor-button/index.js'; +export { + MessageBar, + MessageBarDefinition, + MessageBarIntent, + MessageBarLayout, + MessageBarShape, + MessageBarStyles, + MessageBarTemplate, +} from './message-bar/index.js'; export { MenuButton, MenuButtonAppearance, diff --git a/packages/web-components/src/link/index.ts b/packages/web-components/src/link/index.ts index 1b83b25f62bc9..f0bd23be22596 100644 --- a/packages/web-components/src/link/index.ts +++ b/packages/web-components/src/link/index.ts @@ -1,4 +1,5 @@ export { definition as LinkDefinition } from './link.definition.js'; export { Link } from './link.js'; export { LinkAppearance, LinkTarget } from './link.options.js'; +export { styles as LinkStyles } from './link.styles.js'; export { template as LinkTemplate } from './link.template.js'; diff --git a/packages/web-components/src/link/link.styles.ts b/packages/web-components/src/link/link.styles.ts index 3d2b9bb6221ed..d66996dbb478c 100644 --- a/packages/web-components/src/link/link.styles.ts +++ b/packages/web-components/src/link/link.styles.ts @@ -26,10 +26,8 @@ export const styles = css` font-family: ${fontFamilyBase}; font-size: ${fontSizeBase300}; font-weight: ${fontWeightRegular}; - margin: 0; - padding: 0; overflow: inherit; - text-align: left; + text-align: start; text-decoration: none; text-decoration-thinkness: ${strokeWidthThin}; text-overflow: inherit; diff --git a/packages/web-components/src/menu/menu.ts b/packages/web-components/src/menu/menu.ts index 86f4328014a3c..0319043979905 100644 --- a/packages/web-components/src/menu/menu.ts +++ b/packages/web-components/src/menu/menu.ts @@ -49,28 +49,28 @@ export class Menu extends FASTElement { * @public */ @attr({ attribute: 'open-on-hover', mode: 'boolean' }) - public openOnHover?: boolean = false; + public openOnHover?: boolean; /** * Determines if the menu should open on right click. * @public */ @attr({ attribute: 'open-on-context', mode: 'boolean' }) - public openOnContext?: boolean = false; + public openOnContext?: boolean; /** * Determines if the menu should close on scroll. * @public */ @attr({ attribute: 'close-on-scroll', mode: 'boolean' }) - public closeOnScroll?: boolean = false; + public closeOnScroll?: boolean; /** * Determines if the menu open state should persis on click of menu item * @public */ @attr({ attribute: 'persist-on-item-click', mode: 'boolean' }) - public persistOnItemClick?: boolean = false; + public persistOnItemClick?: boolean; /** * Holds the slotted menu list.