Merge pull request #385 from RahulBojji/rahulbojji/messagebaryamlchanges

Fluent Message bar release changes

Author: RahulBojji

.github/workflows/create-release.yml

@@ -57,6 +57,7 @@ jobs:
                 `${process.env.GITHUB_WORKSPACE}/DonutChart/DonutChart`,
                 `${process.env.GITHUB_WORKSPACE}/Elevation/Elevation`,
                 `${process.env.GITHUB_WORKSPACE}/Facepile/Facepile`,
+                `${process.env.GITHUB_WORKSPACE}/FluentMessageBar/FluentMessageBar`,
                 `${process.env.GITHUB_WORKSPACE}/GaugeChart/GaugeChart`,
                 `${process.env.GITHUB_WORKSPACE}/HorizontalBarChart/HorizontalBarChart`,
                 `${process.env.GITHUB_WORKSPACE}/Icon/Icon`,
@@ -143,6 +144,12 @@ jobs:
           npm install
           npm ci
 
+      - name: Install Dependencies in FluentMessageBar
+        run: |
+          cd ./FluentMessageBar
+          npm install
+          npm ci    
+
       - name: Install Dependencies in GaugeChart
         run: |
           cd ./GaugeChart

.github/workflows/pr_validate_all.yml

@@ -22,6 +22,7 @@ jobs:
          - "./DonutChart" 
          - "./Elevation" 
          - "./Facepile"
+         - "./FluentMessageBar"
          - "./GaugeChart"
          - "./HorizontalBarChart"
          - "./Icon"

FluentMessageBar/.eslintrc.json

@@ -26,16 +26,14 @@
     "@typescript-eslint",
     "sonarjs"
   ],
-  "ignorePatterns": ["**/generated/*.ts"],
+  "ignorePatterns": [
+    "**/generated/*.ts"
+  ],
   "rules": {
     "indent": [
       "error",
       4
     ],
-    "linebreak-style": [
-      "error",
-      "windows"
-    ],
     "quotes": [
       "error",
       "single"

FluentMessageBar/FluentMessageBar/ControlManifest.Input.xml

@@ -18,7 +18,7 @@
     <property name="URL" display-name-key="URL_Key" description-key="link that appears in the message bar." of-type="SingleLine.Text" usage="input" required="false" />
     <property name="AutoHeight" display-name-key="Messagebar_AutoHeight_Display_Key" description-key="Messagebar_AutoHeight_Display_Key" usage="output" of-type="Whole.None" />
     <property name="HideDismiss" display-name-key="Messagebar_HideDismiss_Display_Key" of-type="TwoOptions" usage="input" required="true" default-value="false" />
-    <common-property name="Width" default-value="500" />
+    <common-property name="Width" default-value="350" />
     <common-property name="Height" default-value="55" pfx-default-value="Self.AutoHeight" />
     <!-- -->
     <data-set name="Items" display-name-key="Messagebar_Toolbar_Items_Display_Key" description-key="Messagebar_Toolbar_Items_Desc_Key" pfx-default-value="Table(&#xD;&#xA;    {ItemKey: &quot;mail&quot;, ItemDisplayName: &quot;Contact&quot;, ItemIconName: &quot;Mail&quot;, ItemAppearance: &quot;&quot;, ItemIconStyle: &quot;Regular&quot;, ItemTooltip: &quot;Send mail&quot;, ItemVisible: true, ItemDisabled: false},{ItemKey: &quot;chat&quot;, ItemDisplayName: &quot;Chat&quot;, ItemIconName: &quot;Chat&quot;, ItemAppearance: &quot;&quot;, ItemIconStyle: &quot;Regular&quot;, ItemTooltip: &quot;Chat&quot;})">

FluentMessageBar/FluentMessageBar/_tests_/messagebar-lifecyle.test.ts

@@ -3,7 +3,7 @@ import { FluentMessageBar } from '..';
 import { MockContext, MockState } from '../__mocks__/mock-context';
 import { MockDataSet, MockEntityRecord } from '../__mocks__/mock-datasets';
 import { getMockParameters } from '../__mocks__/mock-parameters';
-import { IInputs, IOutputs } from '../generated/ManifestTypes';
+import { IInputs } from '../generated/ManifestTypes';
 import { ItemColumns } from '../ManifestConstant';
 
 describe('FluentMessageBar', () => {

FluentMessageBar/FluentMessageBar/components/Toolbar/ToolbarComponent.tsx

@@ -27,15 +27,24 @@ export const ToolbarComponent = React.memo((props: CustomToolbarProps) => {
             },
         };
 
-        return (
-            <Toolbar aria-label={ariaLabel} style={{ gap: 'var(--spacingHorizontalM)', padding: 0 }}>
-                <ToolbarButton {...buttonProps} className={styles.content}>
-                    <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacingHorizontalSNudge)' }}>
-                        {iconToRender}
-                        {item.name}
-                    </span>
-                </ToolbarButton>
-            </Toolbar>
+        const toolbarButton = (<Toolbar aria-label={ariaLabel} style={{ gap: 'var(--spacingHorizontalM)', padding: 0 }}>
+            <ToolbarButton {...buttonProps} className={styles.content}>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacingHorizontalSNudge)' }}>
+                    {iconToRender}
+                    {item.name}
+                </span>
+            </ToolbarButton>
+        </Toolbar>);
+
+        return (<>
+            {item.tooltip ? (
+                <Tooltip content={item.tooltip} relationship="description" withArrow>
+                    {toolbarButton}
+                </Tooltip>
+            ) : (
+                toolbarButton
+            )
+            }</>
         );
     }
 
@@ -67,7 +76,7 @@ export const ToolbarComponent = React.memo((props: CustomToolbarProps) => {
                 },
             };
 
-            const toolbarButton = (
+            const toolbarButtonProps = (
                 <ToolbarButton {...buttonProps} className={styles.content}>
                     <span
                         style={{
@@ -87,10 +96,10 @@ export const ToolbarComponent = React.memo((props: CustomToolbarProps) => {
                 <OverflowItem key={item.key} id={item.key}>
                     {item.tooltip ? (
                         <Tooltip content={item.tooltip} relationship="description" withArrow>
-                            {toolbarButton}
+                            {toolbarButtonProps}
                         </Tooltip>
                     ) : (
-                        toolbarButton
+                        toolbarButtonProps
                     )}
                 </OverflowItem>
             );