chore(web-components): add missing exports and cleanup options (#32405)

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"
+}

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  | ❌      | ❌     |
+<table>
+  <tr>
+    <th></th>
+    <th>Chrome</th>
+    <th>Edge</th>
+    <th>Firefox</th>
+    <th>Safari</th>
+  </tr>
+  <tr>
+    <td>HTML Popover Attribute</td>
+    <td>114</td>
+    <td>114</td>
+    <td>125</td>
+    <td>17</td>
+  </tr>
+  <tr>
+    <td>CSS Anchor Positioning</td>
+    <td>125</td>
+    <td>125</td>
+    <td>❌</td>
+    <td>❌</td>
+  </tr>
+</table>
 
 ## HTML Popover
 

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;
 
 /**

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';

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),

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

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

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: {

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

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,

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';

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;

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.