diff --git a/.azure-devops/build-demo.yml b/.azure-devops/build-demo.yml index 1b33c34d00..e537047b9a 100644 --- a/.azure-devops/build-demo.yml +++ b/.azure-devops/build-demo.yml @@ -18,6 +18,24 @@ variables: **/FluentUI.Demo.Client.csproj steps: + - powershell: | + $builds = "$(Build.BuildNumber)".Split('.') + $stage = "$(VersionStage)" + $stageId = "$(VersionStageId)" + + if ("$stageId" -eq "") + { + $package = "$($builds[0]).$($builds[1]).$($builds[2]).$($builds[3]).$($builds[4])" + } + else + { + $package = "$($builds[0]).$($builds[1]).$($builds[2])-$($stage).$($stageId).$($builds[3]).$($builds[4])" + } + + # Set the output variable for use in other tasks. + Write-Host "##vso[task.setvariable variable=VersionPackage]${package}" + displayName: Compute VersionPackage + - task: NuGetToolInstaller@1 displayName: Install NuGet tools @@ -26,7 +44,7 @@ steps: inputs: version: 8.0.x includePreviewVersions: true - + # Set version number - task: Assembly-Info-NetCore@3 displayName: 'Versioning $(Build.BuildNumber)' @@ -39,7 +57,7 @@ steps: VersionNumber: '$(Build.BuildNumber)' FileVersionNumber: '$(Build.BuildNumber)' InformationalVersion: '$(Build.BuildNumber)' - PackageVersion: '$(Build.BuildNumber)' + PackageVersion: '$(VersionPackage)' LogLevel: 'verbose' FailOnWarning: false DisableTelemetry: false diff --git a/Directory.Build.props b/Directory.Build.props index bb68dc7fe3..37c032747d 100644 --- a/Directory.Build.props +++ b/Directory.Build.props @@ -12,8 +12,8 @@ $(MSBuildThisFileDirectory) - 3.1.1 - 3.1.1 + 3.2.0 + 3.2.0 $(VersionFile) diff --git a/Microsoft.Fast.sln b/Microsoft.Fast.sln index a4da3df1e6..cdb8f89153 100644 --- a/Microsoft.Fast.sln +++ b/Microsoft.Fast.sln @@ -45,6 +45,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution ProjectSection(SolutionItems) = preProject CODE_OF_CONDUCT.md = CODE_OF_CONDUCT.md CONTRIBUTING.md = CONTRIBUTING.md + Directory.Build.props = Directory.Build.props LICENSE = LICENSE README.md = README.md SECURITY.md = SECURITY.md diff --git a/README.md b/README.md index f88bb44720..8dd1003c80 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ ## Introduction The `Microsoft.Fast.Components.FluentUI` package provides a set of [Blazor](https://blazor.net) components which you can use to build applications that have -the look and feel or modern Microsoft applications. Some of the componets are wrappers around Microsoft's official FluentUI Web Components. Others are components +the look and feel or modern Microsoft applications. Some of the components are wrappers around Microsoft's official FluentUI Web Components. Others are components that leverage the Fluent UI design system or make it easier to work with Fluent UI. To get up and running with the library, see the 'Getting Started' section below. The source for the library is hosted in the [fluentui-blazor](https://github.com/microsoft/fluentui-blazor) repository at GitHub. Documentation on the components is available at the [demo site](https://www.fluentui-blazor.net) and at [docs.microsoft.com](https://docs.microsoft.com/en-us/fluent-ui/web-components/). @@ -41,7 +41,7 @@ unpredictable results. > **If you are upgrading from an earlier version please remove the script from your `index.html` or `_Layout.cshtml` file.** -The script is added to the application automatically. This way we can safeguard that the you are always using the best matching script version. +The script is added to the application automatically. This way we can safeguard that you are always using the best matching script version. ### Styles @@ -73,14 +73,13 @@ to your `index.html` or `_Layout.cshtml` file in the `` section like this: The file contains a number of CSS variables that are required to be defined for the components to work correctly. -### Project file -if you want to use icons and/or emoji, starting with version 2.1 you need add a `` to your project file. Within this group you can specify which icons and emoji are made available for usage and publication. Please refer to the [project setup](https://www.fluentui-blazor.net/ProjectSetup) document for more information. - - ### Code Please refer to the [code setup](https://www.fluentui-blazor.net/CodeSetup) document to learn what needs to be included in your `Program.cs` file so that all necessary services are available and setup in the correct way. +## Working with Icons and Emoji +We have additional packages available that include the complete Fluent UI System icons and Fluent UI Emoji collections. +Please refer to the [Icons and Emoji](https://www.fluentui-blazor.net/IconsAndEmoji) page for more information. ## Getting started by using project templates To make it easier to start a project that uses the Fluent UI Blazor components out of the box, we have created the diff --git a/WHATSNEW.md b/WHATSNEW.md index 5db09c21ea..e448f05585 100644 --- a/WHATSNEW.md +++ b/WHATSNEW.md @@ -1,4 +1,21 @@ -## V3.1.1 +## V3.2.0 +- New NavMenu, NavGroup and NavLink components. **Breaking change** - See the [Upgrade guide](https://www.fluentui-blazor.net/UpgradeGuide) for details. See [NavMenu](https://www.fluentui-blazor.net/NavMenu) page for examples. +- New FluentInputLabel component. +- FluentCard: Add AreaRestricted parameter to allow content to break out of card area. +- Provide error message when FluentDialogProvider missing +- It is now possible to add a tooltip to DataGridColumns + +Fix [#796](https://github.com/microsoft/fluentui-blazor/pull/796): Fix IconColor doc page +Fix [#797](https://github.com/microsoft/fluentui-blazor/pull/797): Fix MessageBar issues +Fix [#805](https://github.com/microsoft/fluentui-blazor/pull/805): InlineStyleBuilder on .NET6 +Fix [#810](https://github.com/microsoft/fluentui-blazor/pull/810): FluentDataGrid error if page is quickly exited +Fix [#815](https://github.com/microsoft/fluentui-blazor/pull/815): Manual upload on iOS +Fix [#828](https://github.com/microsoft/fluentui-blazor/pull/828): FluentSelect: Fix ValueChanged fired twice +Fix [#801](https://github.com/microsoft/fluentui-blazor/pull/801): Remove direct call to Items.Count() +Fix [#834](https://github.com/microsoft/fluentui-blazor/pull/834): Chinese abbreviated day name in FluentCalendar +Fix [#836](https://github.com/microsoft/fluentui-blazor/pull/836): Setting SelectedOptions does not update FluentSelct + +## V3.1.1 - Fix [#776](https://github.com/microsoft/fluentui-blazor/issues/776): Icon throws exception when deployed to Azure - Fix [#755](https://github.com/microsoft/fluentui-blazor/issues/755): Icon throws exception when deployed to Azure - Fix [#789](https://github.com/microsoft/fluentui-blazor/issues/789): Navigation to "/" crashes with FluentNavMenu diff --git a/examples/Demo/Server/Pages/_Layout.cshtml b/examples/Demo/Server/Pages/_Layout.cshtml index 0718c20fdf..39209e4684 100644 --- a/examples/Demo/Server/Pages/_Layout.cshtml +++ b/examples/Demo/Server/Pages/_Layout.cshtml @@ -25,7 +25,7 @@ } - + @RenderBody()
@@ -41,6 +41,8 @@ + + diff --git a/examples/Demo/Server/wwwroot/js/site.js b/examples/Demo/Server/wwwroot/js/site.js new file mode 100644 index 0000000000..dafb9da65c --- /dev/null +++ b/examples/Demo/Server/wwwroot/js/site.js @@ -0,0 +1,12 @@ +// To avoid Flash of Unstyled Content, the body is hidden by default with +// the before-started CSS class. Here we'll find the first web component +// and wait for it to be upgraded. When it is, we'll remove that class +// from the body. +console.log('site.js'); +const firstUndefinedElement = document.body.querySelector(":not(:defined)"); + +if (firstUndefinedElement) { + customElements.whenDefined(firstUndefinedElement.localName).then(() => { + document.body.classList.remove("before-started"); + }); +} \ No newline at end of file diff --git a/examples/Demo/Shared/Components/DemoSection.razor.cs b/examples/Demo/Shared/Components/DemoSection.razor.cs index 310710da25..6d559a69d0 100644 --- a/examples/Demo/Shared/Components/DemoSection.razor.cs +++ b/examples/Demo/Shared/Components/DemoSection.razor.cs @@ -30,7 +30,7 @@ public partial class DemoSection : ComponentBase public RenderFragment? Description { get; set; } /// - /// The component for wich the example will be shown. Enter the type (typeof(...)) _name + /// The component for which the example will be shown. Enter the type (typeof(...)) _name /// [Parameter, EditorRequired] public Type Component { get; set; } = default!; diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml index f4c2fffcbc..b255119c53 100644 --- a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml +++ b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml @@ -209,16 +209,6 @@ Defaults to - - - displayed at the start of anchor content. - - - - - displayed at the end of anchor content. - - Gets or sets the content to be rendered inside the component. @@ -258,37 +248,6 @@ Gets or sets the content to be rendered inside the component. - - - Gets or sets the width of the component. - - - - - Gets or sets the height of the component. - - - - - Gets or sets the tooltip to display when hovering over the icon. - - - - - Gets or sets the icon to be displayed when the badge is cancellable. - By default, a small cross icon is displayed. - - - - - Event callback for when the badge is clicked. - - - - - Event callback for when the badge icon is clicked. - - The associated web component. @@ -639,30 +598,14 @@ Defaults to - - - Background color of this button (overrides the property). - Set the value "rgba(0, 0, 0, 0)" to display a transparent button. - - - - - Color of the font (overrides the property). - - - - - Display a progress ring and disable the button. - - - displayed at the start of button content. + displayed to the left of button content. - displayed at the end of button content. + displayed to the right of button content. @@ -680,11 +623,6 @@ Command executed when the user clicks on the button. - - - Constructs an instance of . - - @@ -704,7 +642,7 @@ - + @@ -848,22 +786,11 @@ for this column. - - - An optional CSS style specification. If specified, this is included in the style attribute of header and grid cells - for this column. - - If specified, controls the justification of header and grid cells for this column. - - - If true, generate a title attribute for the cell contents - - An optional template for this column's header cell. If not specified, the default header template @@ -920,12 +847,6 @@ The current . The data for the row being rendered. - - - Overridden by derived components to provide the raw content for the column's cells. - - The data for the row being rendered. - Gets or sets a that will be rendered for this column's header cell. @@ -1172,16 +1093,6 @@ Optionally defines a class to be applied to a rendered row. - - - Optionally defines a style to be applied to a rendered row. - - - - - If specified, grids render this fragment when there is no content. - - Constructs an instance of . @@ -1215,11 +1126,6 @@ - - - Gets or sets the reference to the item that holds this cell's values - - Gets or sets the cell type. See @@ -1242,20 +1148,14 @@ Gets or sets the owning component - - - Gets or sets the reference to the item that holds this row's values - - Gets or sets the index of this row - When FluentDataGrid is virtualized, this value is not used - String that gets applied to the css gridTemplateColumns attribute for the row + String that gets applied to the the css gridTemplateColumns attribute for the row @@ -1605,7 +1505,7 @@ - Type style for the day (numeric or 2-digits). + Format style for the day (numeric or 2-digits). @@ -1799,20 +1699,6 @@ - - - - - - - - - - - - Prevents scrolling outside of the dialog while it is shown. - - Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal @@ -1824,11 +1710,6 @@ Gets or sets if the dialog is hidden - - - The event callback invoked when change. - - Indicates that the dialog should trap focus. @@ -1856,7 +1737,7 @@ - Used when not calling the to show a dialog. + Used when not calling the to show a dialog @@ -1864,159 +1745,12 @@ The event callback invoked to return the dialog result. - - - - - - - - - Shows the dialog - - - - - Hides the dialog - - - - - Toggle the primary action button - - - - - - Toggle the secondary action button - - - - - - Closes the dialog with a cancel result. - - - - - - Closes the dialog with a cancel result. - - - - - - - Closes the dialog with a OK result. - - - - - - Closes the dialog with a OK result. - - - - Closes the dialog - - - - - - - - - - - - - - - - - - - - - - - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - When true, the footer is visible. - Default is True. - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - - - - - - - - - - - - - When true, the header is visible. - Default is True. - - - - - When true, shows the dismiss button in the header. - If defined, this value will replace the one defined in the . - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - + Constructs an instance of . @@ -2036,42 +1770,22 @@ Determines if the dialog is modal. Defaults to true. - Obscures the area around the dialog. - - - - - Determines if a modal dialog is dismissible by clicking - outside the dialog. Defaults to false. + When true, clicking outside the dialog will dismiss the dialog. - - - Prevents scrolling outside of the dialog while it is shown. - to use - - Indicates if dialog should trap focus. - Defaults to true. + Indicates that the dialog should trap focus. - Show the title in the header. - Defaults to true. + When true, shows the title in the header. - Show the dismiss button in the header. - Defaults to true. - - - - - Title of the dismiss button, display in a tooltip. - Defaults to "Close". + When true, shows the dismiss button in the header. @@ -2079,21 +1793,11 @@ Text to display for the primary action. - - - When true, primary action's button is enabled. - - Text to display for the secondary action. - - - When true, secondary action's button is enabled. - - Width of the dialog. Must be a valid CSS width value like "600px" or "3em" @@ -2125,11 +1829,6 @@ The value that labels an interactive element. - - - The type of dialog. - - Gets whether the primary button is displayed or not. Depends on PrimaryAction having a value. @@ -2234,50 +1933,35 @@ - - - - - - - - - - - /> - - - - - - - - - - - - - - - - - - - - - - - - + + + A event that will be invoked when showing a dialog with a custom component + - - + + + Shows the standard with the given parameters."/> + + The componente that receives the callback + Name of the callback function + that holds the content to display - - + + + Shows a custom splash screen dialog with the given parameters."/> + + The componente that receives the callback + Name of the callback function + that holds the content to display - - + + + Shows a splash screen of the given type with the given parameters."/> + + The type of the component to show + The componente that receives the callback + Name of the callback function + that holds the content to display @@ -2326,204 +2010,46 @@ Parameters to pass to component being displayed. - + - Shows a success message box. Does not have a callback function. + Shows a panel with the dialog component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Parameters to pass to component being displayed. - + - Shows a warning message box. Does not have a callback function. + Shows a panel with the dialog component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Type of component to display. + Parameters to pass to component being displayed. - + - Shows an error message box. Does not have a callback function. + Shows a dialog with the component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Parameters to pass to component being displayed. - + - Shows an information message box. Does not have a callback function. + Shows a dialog with the component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Type of component to display. + Content to pass to component being displayed. + Parameters to configure the dialog component. - + - Shows a confirmation message box. Has a callback function which returns boolean - (true=PrimaryAction clicked, false=SecondaryAction clicked). - - The component that receives the callback function. - The callback function. - The message to display. - The text to display on the primary button. - The text to display on the secondary button. - The title to display on the dialog. - - - - Shows a confirmation message box. Has no callback function - (true=PrimaryAction clicked, false=SecondaryAction clicked). - - The message to display. - The text to display on the primary button. - The text to display on the secondary button. - The title to display on the dialog. - - - - Shows a custom message box. Has a callback function which returns boolean - (true=PrimaryAction clicked, false=SecondaryAction clicked). - - Parameters to pass to component being displayed. - - - - Shows the standard with the given parameters. - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a custom splash screen dialog with the given parameters. - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a splash screen of the given type with the given parameters. - - The type of the component to show - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows the standard with the given parameters. - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows the standard with the given parameters. - - that holds the content to display - - - - Shows a custom splash screen dialog with the given parameters."/> - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a custom splash screen dialog with the given parameters. - - that holds the content to display - - - - Shows a splash screen of the given type with the given parameters. - - The type of the component to show - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a splash screen of the given type with the given parameters. - - The type of the component to show - that holds the content to display - - - - Convenience method to create a for a dialog result. - You can also call EventCallback.Factory.Create directly. + Convenience method to create a for a dialog result. + You can also call EventCallback.Factory.Create directly. - - - A event that will be invoked when showing a dialog with a custom component - - - - - Shows a dialog with the component type as the body, - passing the specified - - Type of content to pass to component being displayed. - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a dialog with the component type as the body, - passing the specified - - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a dialog with the component type as the body. - - Type of component to display. - Parameters to configure the dialog component. - - - - Updates a dialog. - - Type of content to pass to component being displayed. - Id of the dialog to update. - Parameters to configure the dialog component. - - - - Shows a panel with the dialog component type as the body - - Type of content to pass to component being displayed. - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a panel with the dialog component type as the body - - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a panel with the dialog component type as the body - - Type of component to display. - Parameters to configure the dialog component. - A event that will be invoked when showing a dialog with a custom component @@ -2687,14 +2213,8 @@ - FluentUI Emoji content. - - - - - Please use the constructor including parameters. + FluentUI Icon content. - @@ -2913,11 +2433,6 @@ List of delimiters chars. Example: " ,;". - - - If true, highlights the text until the next regex boundary - - Description: Scroll speed in pixels per second @@ -3015,12 +2530,6 @@ FluentUI Icon content. - - - Please use the constructor including parameters. - - - Initializes a new instance of the class. @@ -3350,128 +2859,6 @@ Gets or sets the content to be rendered inside the component. - - - Initializes a new instance of the class. - - - - - - - - - - - Sets the placeholder value of the element, generally used to provide a hint to the user. - - - - - For , this property must be True. - Set the property to 1 to select just one item. - - - - - Gets or sets the visual appearance. See - - - - - Filter the list of options (items), using the text encoded by the user. - - - - - Gets or sets the style applied to all of the component. - - - - - Gets or sets the css class applied to all of the component. - - - - - Gets or sets the number of maximum options (items) returned by . - Default value is 9. - - - - - Gets or sets the maximum number of options (items) selected. - Exceeding this value, the user must delete some elements in order to select new ones. - See the . - - - - - Gets or sets the message displayed when the is reached. - - - - - Template for the items. - - - - - Template for the items. - - - - - Footer content, placed at the top of the popup panel. - - - - - Footer content, placed at the bottom of the popup panel. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Gets or sets if the element is auto completes. See @@ -3498,14 +2885,21 @@ Gets or sets the visual appearance. See + + + Width style + + + + + Height style + + The maximum number of options that should be visible in the listbox scroll area. - - - Gets or sets if the element is disabled @@ -3539,75 +2933,6 @@ - - - People picker option component. - - - - - - - - - - - Gets or sets the initials to display if no image is provided. - Byt default, the first letters of the is used. - - - - - Gets or sets the name to display. - - - - - Gets or sets the content to display under the . - - - - - Gets or sets the image to display, in replacement of the initials. - - - - - Gets or sets the size of the image. - - - - - / The status to show. See for options. - - - - - The title to show on hover. If not provided, the status will be used. - - - - - Gets or sets the size to use. - Default is ExtraSmall. - - - - - Gets or sets the event raised when the user clicks on the dismiss button. - - - - - Gets or sets the title of the dismiss button. - - - - - - - - The open attribute. @@ -3651,16 +2976,6 @@ - - - Width of the component. - - - - - Height of the component or of the popup panel. - - Text used on aria-label attribute. @@ -3684,8 +2999,7 @@ - Function used to determine which value to return for the selected item. - Only for and components. + Function used to determine which text to return for the selected item. @@ -3763,7 +3077,7 @@ - + @@ -3775,600 +3089,169 @@ - - - - - - - - - uses this event to return the list of items to display. - - - - - - Text to search. - - - - - List of items to display. - - - - - Gets or sets the header content. - - - - - Gets or sets the subheader content. - - - - - Gets or sets the height of the header (in pixels). - - - - - Gets or set the tite of the navigation menu - - - - - Gets or sets the content of the navigation menu - - - - - Gets or sets the content of the body - - - - - Gets or sets the height of the header (in pixels). - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - Identifier of the source component clickable by the end user. - - - - - Gets or sets the automatic trigger. See - Possible values are None (default), Left, Middle, Right, Back, Forward - - - - - Gets or sets the Menu status. - - - - - Gets or sets the content to be rendered inside the component. - - - - - Menu position (left or right). - - - - - Width of this menu. - - - - - Raised when the property changed. - - - - - Draw the menu below the component clicked (true) or - using the mouse coordinates (false). - - - - - - - - Close the menu. - - - - - - Method called from JavaScript to get the current mouse ccordinates. - - - - - - - - Dispose this menu. - - - - - Gets or sets the owning FluentMenu. - - - - - Gets or sets the menu item label. - - - - - Gets or sets if the element is disabled. - - - - - The expanded state of the element. - - - - - The role of the element. - - - - - Gets or sets if the element is checked. - - - - - Gets or sets the content to be rendered inside the component. - - - - - List of sub-menu items. - - - - - Event raised when the user click on this item. - - - - - - - - - - - - - - - - - The type of message bar. Default is MessageType.MessageBar. See for more details. - - - - - The actual message instance shown in the message bar. - - - - - The message to be shown whennot using the MessageService methods - - - - - Intent of the message bar. Default is MessageIntent.Info. See for more details. - - - - - Icon to show in the message bar based on the intent of the message. See for more details. - - - - - Visibility of the message bar. Default is true. - - - - - Most important info to be shown in the message bar. - - - - - Time on which the message was created. Default is DateTime.Now. Onlu used when MessageType is Notification. - - - - - The color of the icon. Only applied when intent is MessageBarIntent.Custom - Default is Color.Accent - - - - - A link can be shown after the message. - - - - - Button to show as primary action. - - - - - Button to show as secondary action. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Display only messages for this section. - - - - - Displays messages as a single line (with the message only) - or as a card (with the detailed message). - - - - - Maximum number of messages displayed. Rest is stored in memory to be displayed when an shown message is closed. - Default value is 5 - Set a value equal to or less than zero, to display all messages for this (or all categories if not set). - - - - - Display the newest messages on top (true) or on bottom (false). - - - - - Clear all (shown and stored) messages when the user navigates to a new page. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Intent of the message bar. Default is MessageIntent.Info. - See for more details. - - - - - Indication of in which message bar the message needs to be shown. Default is null. - - - - - Most important info to be shown in the message bar. - - - - - Message to be shown in the message bar. - - - - - Link to be shown in the message bar (after the body). - - - - - Close the message bar. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - Identification of the the message belongs to. + Gets or sets the header content. - + - The timestamp of the message. + Gets or sets the subheader content. - + - Icon to show in the message bar based on the intent of the message. See for more details. + Gets or sets the height of the header (in pixels). - + - Most important info to be shown in the message bar. + Gets or set the tite of the navigation menu - + - Message to be shown in the message bar after the title. + Gets or sets the content of the navigation menu - + - Link to be shown in the message bar after the title/message. + Gets or sets the content of the body - + - Action to be executed when the message bar is closed. + Gets or sets the height of the header (in pixels). - + - Action to be executed for the primary button. + Gets or sets the content to be rendered inside the component. - + + + + + + + + + + - Action to be executed for the secondary button. + Identifier of the source component clickable by the end user. - + - Intent of the message bar. Default is MessageIntent.Info. + Gets or sets the automatic trigger. See + Possible values are None (default), Left, Middle, Right, Back, Forward - + - Remove the message bar after navigation. + Gets or sets the Menu status. - + - Timeout in seconds after which the message bar is removed. Default is null. + Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - - - - - - - - - + - Gets all messages. + Menu position (left or right). - + - Retrieve messages to show in the message bar. + Width of this menu. - Number of messages to get (defaults to 5) - Optional section to retrieve messages for - - + - Show a message based on the provided parameters in a message bar. + Raised when the property changed. - Main info - - + - Show a message based on the provided parameters in a message bar. + Draw the menu below the component clicked (true) or + using the mouse coordinates (false). - Main info - Intent of the message - - + + + + - Show a message based on the provided parameters in a message bar. + Close the menu. - Main info - Intent of the message - Section to show the messagebar in - + - Show a message based on the provided options in a message bar. + Method called from JavaScript to get the current mouse ccordinates. - Message options + + - + - Show a message based on the provided parameters in a message bar. + Dispose this menu. - Main info - - + - Show a message based on the provided parameters in a message bar. + Gets or sets the owning FluentMenu. - Main info - Intent of the message - - + - Show a message based on the provided parameters in a message bar. + Gets or sets the menu item label. - Main info - Intent of the message - Section to show the messagebar in - - + - Show a message based on the provided message options in a message bar. + Gets or sets if the element is disabled. - Message options - - + - Clear all messages (per section, if provided) from the message bar. + The expanded state of the element. - Optional section - + - Remove a message from the message bar. + The role of the element. - Message to remove - - + + + Gets or sets if the element is checked. + - - + + + Gets or sets the content to be rendered inside the component. + - + - Remove all messages (per section, if provided) from the message bar. + List of sub-menu items. - Optional section - + - Count the number of messages (per section, if provided) in the message bar . + Event raised when the user click on this item. - Optional section - int + + + @@ -4746,9 +3629,6 @@ - - - @@ -4888,12 +3768,6 @@ Gets or sets the id of the component the popover is positioned relative to - - - The default horizontal position of the region relative to the anchor element - Default is unset. See - - Gets or sets popover opened state @@ -4935,20 +3809,22 @@ Child content of component, the content that the badge will be applied to. - + - The title to show on hover the component. - If not provided, the will be used. + The status to show. See for options. + Default is Available - + - The status to show. See for options. + Left position of the badge (percentage as number). + Default value is 50. - + - The title to show on hover the status. If not provided, the status will be used. + Bottom position of the badge (percentage as number). + Default value is -10. @@ -4959,7 +3835,7 @@ - Gets or sets the size to use. + Gets or sets the to use. Default is Small. @@ -5096,12 +3972,6 @@ - - - - - - Allows associating a datalist to the element by id. @@ -5162,21 +4032,6 @@ Gets or sets if the skeleton is shimmered - - - Gets or sets the width of the skeleton - - - - - Gets or sets the height of the skeleton - - - - - Gets or sets whether the skeleton is visible - - Gets or sets the content to be rendered inside the component. @@ -5393,11 +4248,6 @@ True to let the user edit the property. - - - Render the tab content only when the tab is selected. - - Customized content of this tab panel. @@ -5415,7 +4265,7 @@ - If this tab is outside of vistible tab panel area. + Gets if this component is out of panel. @@ -5581,12 +4431,6 @@ Gets or sets the content to be rendered inside the component. - - - - - - Gets or sets the text filed type. See @@ -5632,12 +4476,6 @@ Gets or sets the content to be rendered inside the component. - - - Specifies whether a form or an input field should have autocomplete "on" or "off" or another value. - An Id value must be set to use this property. - - Closes the toast @@ -6002,263 +4840,55 @@ - Gets or sets the content to be rendered inside the component. - - - - - Gets or sets a reference to the list of registered services. - - - https://github.com/dotnet/aspnetcore/issues/24193 - - - - - Gets a reference to the tooltip service (if registered). - - - - - Gets the default tooltip options. - - - - - Use ITooltipService to create the tooltip, if this service was injected. - If the is dynamic, set this to false. - Default, true. - - - - - Gets or sets if the tooltip is visible - - - - - Required. Gets or sets the control identifier associated with the tooltip. - - - - - Gets or sets the delay (in milliseconds). Default is 300. - - - - - Gets or sets the tooltip's position. See . - Don't set this if you want the tooltip to use the best position. - - - - - Gets or sets the maximum width of tooltip panel. - - - - - Controls when the tooltip updates its position, default is anchor which only updates when - the anchor is resized. auto will update on scroll/resize events. - Corresponds to anchored-region auto-update-mode. - - - - - Gets or sets whether the horizontal viewport is locked - - - - - Gets or sets whether the vertical viewport is locked - - - - - Gets or sets the content to be rendered inside the component. - - - - - Callback for when the tooltip is dismissed - - - - - - - - - - - - - - - - - - - - Service for managing tooltips. - - - - - Action that is invoked when the tooltip list is updated. - - - - - Gets the list of tooltips currently registered with the service. - - - - - Gets the global options for tooltips. - - - - - Adds a tooltip to the service. - - - - - - clears all tooltips from the service. - - - - - removes a tooltip from the service. - - Identifier of the tooltip - - - - Global options for tooltips. - - - - - Default delay (in milliseconds). - - - - - Gets or sets the delay (in milliseconds). Default is 300. - - - - - Gets or sets the default tooltip's position. - See - - - - - Gets or sets the default maximum width of tooltip panel. - Default is 500px. - - - - - Gets or sets whether the horizontal viewport is locked - - - - - Gets or sets whether the vertical viewport is locked - - - - - Options for a tooltip. - - - - - Gets or sets the unique identifier of the tooltip. - - - - - Gets or sets the anchor identifier of the tooltip. + Gets or sets the content to be rendered inside the component. - + - Gets or sets the tooltip content. + Gets or sets if the tooltip is visible - + - Gets or sets the tooltip panel width. + Gets or sets the anchor - + - Gets or sets the delay (in milliseconds). Default is 300. + Gets or sets the delay (in miliseconds) - + Gets or sets the tooltip's position. See - - - Callback for when the tooltip is dismissed - - - + - Gets or sets if the tooltip is visible + Controls when the tooltip updates its position, default is anchor which only updates when + the anchor is resized. auto will update on scroll/resize events. + Corresponds to anchored-region auto-update-mode. - - - - + - Initializes a new instance of the class. + Gets or sets wether the horizontal viewport is locked - + - Initializes a new instance of the class. + Gets or sets wether the vertical viewport is locked - Default global options - - - - - - - - - - - - - - - - - - - - - - + - Clears all tooltips from the service. + Gets or sets the content to be rendered inside the component. - - + + + Callback for when the tooltip is dismissed + @@ -9385,31 +8015,6 @@ A sticky header row. - - - The type of . - - - - - A normal dialog. - - - - - A dialog shown as a message box. - - - - - A dialog shown as a panel. - - - - - A dialog shown as a splash screen. - - Defines the role of the divider. @@ -9697,32 +8302,27 @@ - No positions set. + The anchored region position is unset. - Position at the start of the anchor. + The anchored region is positioned at the start of the anchor. - Position at the end of the anchor. + The anchored region is positioned at the end of the anchor. - Position on the left of the anchor. + The anchored region is positioned in the left of the anchor. - Position on the right of the anchor. - - - - - Position at the center of the anchor. + The anchored region is positioned in the right of the anchor. @@ -9929,37 +8529,6 @@ Informs about a custom event or operation. - - - - - - - - - - - - - - - - - - - - - - - - To be displayed in a at the top of screen, dialog or card. - - - - - To be displayed in a notification center. - - Defines the possible options for mouse buttons. @@ -10008,18 +8577,12 @@ - - - - - - @@ -10029,24 +8592,15 @@ - - - - - - - - - @@ -10056,9 +8610,6 @@ - - - @@ -10068,9 +8619,6 @@ - - - @@ -10495,22 +9043,17 @@ - No position set. + No positioning set - Position at the top. + Position at the top - Position at the bottom. - - - - - Position at the center. + Position at the bottom @@ -10526,6 +9069,30 @@ true if both sets render the same attributes; otherwise, false. + + + Used to convert a CssBuilder into a null when it is empty. + Usage: class=null causes the attribute to be excluded when rendered. + + + string + + + + Used to convert a StyleBuilder into a null when it is empty. + Usage: style=null causes the attribute to be excluded when rendered. + + + string + + + + Used to convert a string.IsNullOrEmpty into a null when it is empty. + Usage: attribute=null causes the attribute to be excluded when rendered. + + + string + Extension methods for . @@ -10615,36 +9182,6 @@ - - - The text to show for the button - - - - - The function to call when the link is clicked - - - - - The text to show for the link - - - - - The address to navigate to when the link is clicked - - - - - The target window or frame to open the link in - - - - - The function to call when the link is clicked - - Represents an event that you may subscribe to. This differs from normal C# events in that the handlers @@ -10681,12 +9218,6 @@ Defines the global Fluent UI Blazor component library services configuration - - - Gets or sets a value indicating whether the library should use the TooltipServiceProvider. - If set to true, add the FluentTooltipProvider component at end of the MainLayout.razor page. - - A strongly-typed resource class, for looking up localized strings, etc. @@ -10799,16 +9330,32 @@ Looks up a localized string similar to {0} years ago. - + - Initializes a new instance of the class. + Creates a CssBuilder used to define conditional CSS classes used in a component. + Call Build() to return the completed CSS Classes as a string. + + + + + + Creates an Empty CssBuilder used to define conditional CSS classes used in a component. + Call Build() to return the completed CSS Classes as a string. - Initializes a new instance of the class. + Creates a CssBuilder used to define conditional CSS classes used in a component. + Call Build() to return the completed CSS Classes as a string. + + + + + + Adds a raw string to the builder that will be concatenated with the next class or value added to the builder. - The user classes to include at the end. + + CssBuilder @@ -10825,88 +9372,68 @@ Condition in which the CSS Class is added. CssBuilder - + Adds a conditional CSS Class to the builder with space separator. CSS Class to conditionally add. - Condition in which the CSS Class is added. + Nullable condition in which the CSS Class is added. CssBuilder - - - Finalize the completed CSS Classes as a string. - - string - - - - ToString should only and always call Build to finalize the rendered string. - - - - + - Adds a raw string to the builder that will be concatenated with the next classes or value added to the builder. + Adds a conditional CSS Class to the builder with space separator. - - StyleBuilder + CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Initializes a new instance of the class. + Adds a conditional CSS Class to the builder with space separator. + Function that returns a CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Adds a conditional in-line style to the builder with space separator and closing semicolon.. + Adds a conditional CSS Class to the builder with space separator. - - - Style to add - StyleBuilder + Function that returns a CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Adds a conditional in-line style to the builder with space separator and closing semicolon.. + Adds a conditional nested CssBuilder to the builder with space separator. - - - Style to conditionally add. - Condition in which the style is added. - StyleBuilder + CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Adds a conditional in-line style to the builder with space separator and closing semicolon.. + Adds a conditional CSS Class to the builder with space separator. - - - Style to conditionally add. - Condition in which the style is added. - StyleBuilder + CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Finalize the completed Style as a string. + Adds a conditional CSS Class when it exists in a dictionary to the builder with space separator. + Null safe operation. - string + Additional Attribute splat parameters + CssBuilder - + - Finalize the completed Style as a string. + Finalize the completed CSS Classes as a string. string - - - Adds a raw string to the builder that will be concatenated with the next style or value added to the builder. - - - - - StyleBuilder - Flags for a member that is JSON (de)serialized. @@ -10933,7 +9460,7 @@ Inspired from https://github.com/MudBlazor - + Splits the text into fragments, according to the text to be highlighted @@ -10942,19 +9469,32 @@ The texts to be highlighted Regex expression that was used to split fragments. Whether it's case sensitive or not - If true, splits until the next regex boundary - + + + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. + + + + + + + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. + + + + - Initializes a new instance of the class. + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. - + - Initializes a new instance of the class. + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. - The user styles to include at the end. + + @@ -10962,6 +9502,13 @@ + + + Adds a raw string to the builder that will be concatenated with the next style or value added to the builder. + + + StyleBuilder + Adds a conditional in-line style to the builder with space separator and closing semicolon.. @@ -10979,6 +9526,15 @@ Condition in which the style is added. StyleBuilder + + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. + + + Style to conditionally add. + Condition in which the style is added. + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. @@ -10988,25 +9544,69 @@ Condition in which the style is added. StyleBuilder - + - Finalize the completed Style as a string. + Adds a conditional in-line style to the builder with space separator and closing semicolon.. - string + + Style to conditionally add. + Condition in which the style is added. + StyleBuilder - + - ToString should only and always call Build to finalize the rendered string. + Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon. - + Style Builder to conditionally add. + StyleBuilder - + - Adds a raw string to the builder that will be concatenated with the next style or value added to the builder. + Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon. - + Style Builder to conditionally add. + Condition in which the style is added. + StyleBuilder + + + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. + + Style Builder to conditionally add. + Condition in which the styles are added. + StyleBuilder + + + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. + A ValueBuilder action defines a complex set of values for the property. + + + + + + + + Adds a conditional in-line style when it exists in a dictionary to the builder with separator. + Null safe operation. + + Additional Attribute splat parameters StyleBuilder + + + Finalize the completed Style as a string. + + string + + + + Adds a space separated conditional value to a property. + + + + + Custom -derived type for the CheckRGBString method. diff --git a/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor b/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor index dc9f854b04..38df5625b0 100644 --- a/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor +++ b/examples/Demo/Shared/Pages/Autocomplete/Examples/AutocompleteCustomized.razor @@ -1,6 +1,5 @@ @inject DataSource Data - + + Select a person + + + @* Template used with each Selected items *@ Select a country -The <FluentCard> component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.

<FluentCard> wraps the <fluent-card> element, a web component implementation of a card leveraging the Fluent UI design system.

- +

Examples

- + + + + +

+ By default a card restricts it's content to the card area. This means, for exmple, that if you have a select list with a lot of items, the list will be cut off at the bottom of the card. + You can override this behavior by setting the AreaRestricted property to false. +

+ + + + + +

API Documentation

+ \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor b/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor new file mode 100644 index 0000000000..0be60cd908 --- /dev/null +++ b/examples/Demo/Shared/Pages/Card/Examples/CardAreaRestricted.razor @@ -0,0 +1,35 @@ +@inject DataSource Data + + + +

This card's content is restricted to it's area. Open the select list below to see the result

+ + + + + +

This card's content is not restricted to it's area. Open the select list below to see the result

+ + + + + +@code +{ + Person? SelectedPersonART, SelectedPersonARF; + string? SelectedValueART, SelectedValueARF; +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor index c5e8b35b11..89b641d537 100644 --- a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor +++ b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor @@ -1,88 +1 @@ -
- Custom size using CSS - - - -
-

Dark

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Tinted neutral-palette-source, dark container

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Tinted neutral-palette-source, dark

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Tinted neutral-palette-source, dark

- Accent - Stealth - Outline - Lightweight -
- -
-

Tinted neutral-palette-source, nested, dark

- Accent - Stealth - Outline - Lightweight -
- - - - - -
-

Custom card-fill-color

- Accent - Stealth - Outline - Lightweight -

- Note the stealth buttons have a slight fill, which is because the card-fill-color is explicit, but the stealth - recipe gets its value from the neutral palette which has been created based on the card-fill-color, but does not - contain that exact color. -

-
- - - - -
-

Accent and neutral color by DSP

- Accent - Neutral - Stealth - Outline - Lightweight -
- - -
\ No newline at end of file +Custom size (400x400) using CSS \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css new file mode 100644 index 0000000000..53ce1c9fca --- /dev/null +++ b/examples/Demo/Shared/Pages/Card/Examples/CardDefault.razor.css @@ -0,0 +1,4 @@ +my-custom-styling { + width: 400px; + height: 400px; +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor b/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor new file mode 100644 index 0000000000..4c551632c1 --- /dev/null +++ b/examples/Demo/Shared/Pages/Card/Examples/CardStyling.razor @@ -0,0 +1,84 @@ + + +
+

Dark

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Tinted neutral-palette-source, dark container

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Tinted neutral-palette-source, dark

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Tinted neutral-palette-source, dark

+ Accent + Stealth + Outline + Lightweight +
+ +
+

Tinted neutral-palette-source, nested, dark

+ Accent + Stealth + Outline + Lightweight +
+ + + + + +
+

Custom card-fill-color

+ Accent + Stealth + Outline + Lightweight +

+ Note the stealth buttons have a slight fill, which is because the card-fill-color is explicit, but the stealth + recipe gets its value from the neutral palette which has been created based on the card-fill-color, but does not + contain that exact color. +

+
+ + + + +
+

Accent and neutral color by FluentDesignSystemProvider

+ Accent + Neutral + Stealth + Outline + Lightweight +
+ + \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Checkbox/CheckboxPage.razor b/examples/Demo/Shared/Pages/Checkbox/CheckboxPage.razor index ec2973b285..58bba633ed 100644 --- a/examples/Demo/Shared/Pages/Checkbox/CheckboxPage.razor +++ b/examples/Demo/Shared/Pages/Checkbox/CheckboxPage.razor @@ -15,5 +15,3 @@ - - diff --git a/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxAria.razor b/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxAria.razor deleted file mode 100644 index 4f7f083f2c..0000000000 --- a/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxAria.razor +++ /dev/null @@ -1,6 +0,0 @@ - - Visible label - -@code { - bool value; -} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxDefault.razor b/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxDefault.razor index 420db0eae4..d63ae34d3f 100644 --- a/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxDefault.razor +++ b/examples/Demo/Shared/Pages/Checkbox/Examples/CheckboxDefault.razor @@ -3,7 +3,7 @@

With a label:

-label +

Checked

diff --git a/examples/Demo/Shared/Pages/Combobox/Examples/ComboboxDefault.razor b/examples/Demo/Shared/Pages/Combobox/Examples/ComboboxDefault.razor index 7913030db9..14ffb5eb4c 100644 --- a/examples/Demo/Shared/Pages/Combobox/Examples/ComboboxDefault.razor +++ b/examples/Demo/Shared/Pages/Combobox/Examples/ComboboxDefault.razor @@ -1,13 +1,13 @@ @inject DataSource Data

Select the best song from the list or type your own

- +

Selected hit: @hit

Pre-selected option

- +

Selected name: @name

diff --git a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor index bf2891f622..fa51f4d95e 100644 --- a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor +++ b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor @@ -54,7 +54,19 @@ - Here is an example of a data grid that uses in-memory data and enables features including pagination, sorting, filtering, column options, row highlighting and column resizing. +

+ Here is an example of a data grid that uses in-memory data and enables features including pagination, sorting, filtering, column options, row highlighting and column resizing. +

+

+ All columns, except 'Bronze', have a Tooltip parameter value of true.
+ When using this for a TemplateColumn (like 'Rank' here), you need to also supply a value for the TooltipText parameter. No value given equals no tooltip shown.
+ When using this for a PropertyColumn, a value for the TooltipText is not required. By default, the value given for Property + will be re-used for the tooltip. If you do supply a value for TooltipText it's outcome will be used instead. +
+
+ TooltipText is a lambda function that takes the current item as input and returns the text to show in the tooltip (and aria-label). + Look at the Razor tab to see how this is done and how it can be customized. +

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor index 6f2b39d8ad..b5e6e20664 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor @@ -2,7 +2,7 @@ - + Flag of @(context.Code) @@ -12,10 +12,10 @@
- - + + - + diff --git a/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor b/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor index 7320bd5047..ee10f27363 100644 --- a/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor +++ b/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor @@ -1,5 +1,5 @@ - - + +

Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd"))

@code { diff --git a/examples/Demo/Shared/Pages/DateTimes/Examples/TimePickerDefault.razor b/examples/Demo/Shared/Pages/DateTimes/Examples/TimePickerDefault.razor index 6ce654d7bd..0a386ba15e 100644 --- a/examples/Demo/Shared/Pages/DateTimes/Examples/TimePickerDefault.razor +++ b/examples/Demo/Shared/Pages/DateTimes/Examples/TimePickerDefault.razor @@ -1,4 +1,4 @@ - +

Selected Time: @(SelectedValue?.ToString("HH:mm"))

@code diff --git a/examples/Demo/Shared/Pages/Dialog/DialogPage.razor b/examples/Demo/Shared/Pages/Dialog/DialogPage.razor index d013c5a9f5..0416053836 100644 --- a/examples/Demo/Shared/Pages/Dialog/DialogPage.razor +++ b/examples/Demo/Shared/Pages/Dialog/DialogPage.razor @@ -90,7 +90,7 @@ footer and body by leveraging the FluentDialogHeader, FluentDialogFooter and FluentDialogBody parameters.

- The dialog can nott be dismissed by clicking on the overlay. This is achieved by setting the dialog parameter PreventDismissOnOverlayClick to true. + The dialog can not be dismissed by clicking on the overlay. This is achieved by setting the dialog parameter PreventDismissOnOverlayClick to true.

diff --git a/examples/Demo/Shared/Pages/Dialog/Examples/SimpleCustomizedDialog.razor b/examples/Demo/Shared/Pages/Dialog/Examples/SimpleCustomizedDialog.razor index d978fd2234..43248ba7e7 100644 --- a/examples/Demo/Shared/Pages/Dialog/Examples/SimpleCustomizedDialog.razor +++ b/examples/Demo/Shared/Pages/Dialog/Examples/SimpleCustomizedDialog.razor @@ -1,8 +1,25 @@ @implements IDialogContentComponent - - -hello +@* Header *@ + + + + + @Dialog.Instance.Parameters.Title + + + + +@* Footer *@ + + Close + + +@* Body *@ + + FirstName: + Age: + @code { [Parameter] diff --git a/examples/Demo/Shared/Pages/Icon/Examples/IconColors.razor b/examples/Demo/Shared/Pages/Icon/Examples/IconColors.razor index 60e3b9e7dc..f1330507cc 100644 --- a/examples/Demo/Shared/Pages/Icon/Examples/IconColors.razor +++ b/examples/Demo/Shared/Pages/Icon/Examples/IconColors.razor @@ -3,17 +3,17 @@ const string CustomColor = "#570078"; // like Purple color } - Color Enum - CSS variable - Theme - Examples + Color Enum + CSS variable (*) + Theme + Examples @foreach (var color in Enum.GetValues(typeof(Color)).Cast()) { var name = Enum.GetName(color); var css = color == Color.Custom ? CustomColor : color.ToAttributeValue(); - + @name @@ -53,16 +53,14 @@ + Title="@($"Button with an IconStart colorized using .WithColor(\"{css}\")")"> OK + Appearance="Appearance.Accent"> OK @@ -70,6 +68,21 @@ + +

With Color.Custom, supply your own color value through the CustomColor parameter.
Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) or a CSS variable (var(--...)). @@ -80,5 +93,3 @@ use Reboot, please add the variables.css file to your index.html or _Layout.cshtml file like this: (the color values will not be aplied if the CSS variables are not defined): <link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" /> -
-(**): Background color has been set through inline style, otherwise icon would be (nearly) invisible. \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Icon/IconPage.razor b/examples/Demo/Shared/Pages/Icon/IconPage.razor index 8a3ec59555..f53c5a5090 100644 --- a/examples/Demo/Shared/Pages/Icon/IconPage.razor +++ b/examples/Demo/Shared/Pages/Icon/IconPage.razor @@ -55,7 +55,8 @@ Icons can be drawn and filled with a color through the Color parameter which takes a Color enumeration value.

-    <FluentIcon Icon="@@Icons.Filled.Size48.Alert" Color="{···}" /> +    <FluentIcon Value="@@(new Icons.Filled.Size48.Alert())" Color="{···}" />
+    <FluentIcon Value="@@(new Icons.Filled.Size48.Alert().WithColor({···})" />

With the code above you can use the following options at the {···}: diff --git a/examples/Demo/Shared/Pages/Index/Index.razor b/examples/Demo/Shared/Pages/Index/Index.razor index ed2bc810c8..717e1dfe65 100644 --- a/examples/Demo/Shared/Pages/Index/Index.razor +++ b/examples/Demo/Shared/Pages/Index/Index.razor @@ -6,10 +6,10 @@

Welcome to the Fluent UI Blazor components library

-

This is the demo and documentation site for the next version (3.1.1) of the library

+

This is the demo and documentation site for the next version (3.2.0) of the library


- The previous demos and documentation site (2.4.3) is also still available. + The version 2 demos and documentation site is also still available.

diff --git a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileBufferMode.razor b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileBufferMode.razor index 8033d2fe53..1cfdab02f1 100644 --- a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileBufferMode.razor +++ b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileBufferMode.razor @@ -1,4 +1,5 @@  - + Upload files diff --git a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor index 2d0774273d..c4823f8915 100644 --- a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor +++ b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor @@ -1,22 +1,22 @@ - + @progressTitle - + Upload files diff --git a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileStream.razor b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileStream.razor index af2a8c740b..2ae91a9969 100644 --- a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileStream.razor +++ b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileStream.razor @@ -1,19 +1,19 @@  + AnchorId="MyUploadStream" + DragDropZoneVisible="false" + Mode="InputFileMode.Stream" + Multiple="true" + MaximumFileSize="@(20 * 1024 * 1024)" + Accept=".mp4, .mov, .avi" + OnFileUploaded="@OnFileUploadedAsync" + OnCompleted="@OnCompleted" /> @progressTitle - + Upload files diff --git a/examples/Demo/Shared/Pages/Lab/LabOverviewPage.razor b/examples/Demo/Shared/Pages/Lab/LabOverviewPage.razor index aa82e1720f..0ef12a94ea 100644 --- a/examples/Demo/Shared/Pages/Lab/LabOverviewPage.razor +++ b/examples/Demo/Shared/Pages/Lab/LabOverviewPage.razor @@ -1,7 +1,13 @@ @page "/Lab/Overview" +@page "/Lab/Overview/{*routeparameters}" +@inject NavigationManager NavigationManager +

Incubation Lab Overview

+ +

Route: @RouteParameters

+

The incubation lab is were we test things out. Some of the expirements might make it into the library, others are offered here to copy them to your project in an easy way. Some might even end up in the trashcan. @@ -38,4 +44,18 @@

- \ No newline at end of file +

Route testing

+ + 123 + 123/456 + + +

Note that when clicking these button, the 'Incubation lab' navigation menu item stays selected.

+ + + +@code { + [Parameter] + public string? RouteParameters { get; set; } + +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Listbox/Examples/ListboxDefault.razor b/examples/Demo/Shared/Pages/Listbox/Examples/ListboxDefault.razor index 5fe111f48b..d6b0885506 100644 --- a/examples/Demo/Shared/Pages/Listbox/Examples/ListboxDefault.razor +++ b/examples/Demo/Shared/Pages/Listbox/Examples/ListboxDefault.razor @@ -1,7 +1,7 @@ @inject DataSource Data -
- ()[counter % 4]; - MessageService.ShowMessageBar(message, type, App.MESSAGES_TOP); + MessageService.ShowMessageBarAsync(message, type, App.MESSAGES_TOP); } void AddInNotificationCenter() diff --git a/examples/Demo/Shared/Pages/MessageBar/Examples/MessageBarDetailed.razor b/examples/Demo/Shared/Pages/MessageBar/Examples/MessageBarDetailed.razor index dfc523ef8a..a597c9e9fc 100644 --- a/examples/Demo/Shared/Pages/MessageBar/Examples/MessageBarDetailed.razor +++ b/examples/Demo/Shared/Pages/MessageBar/Examples/MessageBarDetailed.razor @@ -32,13 +32,13 @@ MessageService.ShowMessageBar(options => { options.Section = App.MESSAGES_TOP; - options.Title = $"This is the important stuff (#{counter})."; + options.Title = counter % 2 == 0 ? $"This is the important stuff (#{counter})." : null; options.Body = "The extra information should be kept at roughly 100 characters (which is about this long maximal)."; options.Intent = Enum.GetValues()[counter % 4]; options.Icon = new Icons.Regular.Size24.PersonCircle(); options.ClearAfterNavigation = true; options.OnClose = (e) => { DemoLogger.WriteLine($"Message {e.Intent} dismissed"); return Task.CompletedTask; }; - options.Link = link; + options.Link = counter % 2 != 1 ? link : null; options.PrimaryAction = counter % 3 != 1 ? action1 : null; options.SecondaryAction = counter % 3 != 2 ? action2 : null; diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor index 306e13565b..533d9e5514 100644 --- a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor +++ b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor @@ -1,17 +1,15 @@ -@namespace FluentUI.Demo.Shared - -

Collapsible Navigation Example

+

Collapsible Navigation Example

- - - - - - - + Item 1 + Item 2 + + Item 3.1 + Item 3.2 + + Item 4
diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor index 66dca1cd85..076c6a1666 100644 --- a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor +++ b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor @@ -1,20 +1,16 @@ -@namespace FluentUI.Demo.Shared - -@inject ILogger logger; - -

Navigation Examples

+

Navigation Examples

- - - - - - - - + + Item 1.1 + Item 1.2 + + + Item 2.1 + Item 2.2 + @@ -29,19 +25,7 @@ Item 2 -

Selected elements

- - Item 1.1 - - - Item 1.2 - - - Item 2.1 - - - Item 2.2 - + @@ -50,11 +34,6 @@ bool MenuExpanded = true; bool Item1Expanded = true; bool Item2Expanded = true; - - bool Item1Point1Selected = false; - bool Item1Point2Selected = false; - bool Item2Point1Selected = false; - bool Item2Point2Selected = false; } diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDefault.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDefault.razor index ab90b10a44..8ac20860d8 100644 --- a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDefault.razor +++ b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDefault.razor @@ -1,71 +1,65 @@ -@namespace FluentUI.Demo.Shared - -@inject ILogger logger; - -

Navigation Examples

+

Navigation Examples

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + Home + Item 2 + +

Item 3

 + + Item 3.1 + Item 3.2 + + + Item 4 + Item 5 + + Item 6.1 + Item 6.2 + + Item 6.3.1 Item 6.3.1 Item 6.3.1 + Item 6.3.2 + + Item 6.3.3.1 + Item 6.3.3.2 + + Item 6.3.3.3.1 + Item 6.3.3.3.2 + + + + + +
+ + @code + { + bool expanded = true; + } - - - - + Item 1 + Item 2 + Item 3 + Item 4 - - - - + Item 1 + Item 2 + Item 3 + Item 4 @code { - void OnClick(MouseEventArgs e) { - logger.LogInformation("Item Clicked"); - } - - protected override void OnAfterRender(bool firstRender) { - if (firstRender) - { - - } - base.OnAfterRender(firstRender); + DemoLogger.WriteLine("NavMenu item clicked"); } } diff --git a/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor b/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor index 91ccf6a257..b162346cbf 100644 --- a/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor +++ b/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor @@ -1,29 +1,48 @@ @page "/NavMenu" +@using FluentUI.Demo.Shared.Pages.NavMenu.Examples + +

NavMenu, NavGroup and NavLink

+ +
+ IMPORTANT +

+ With version 3.2 a new, much improved, set of components to build side-bar menus has been added. +

+

+ + If you DO NOT want to upgrade to these new menu components, you can continue to use the pre-version 3.2 components. The only thing + you need to do is to change the name of the FluentNavMenu component in your application to FluentNavMenuTree. + +

+

+ Everything works exactely as before by changing the name of this FluentNavMenu component in your application. (This probably needs to be done + in one place only). The FluentNavMenuGroup and FluentNavMenuLink components have not been changed and do not need to be altered. +

+

+ We consider the FluentNavMenuTree, FluentNavMenuGroup and FluentNavMenuLink components as deprecated and will remove them in a future version. +

+

+ If you wish to upgrade to the new menu components, please refer to the Upgrade guide for more information. +

+
-

NavMenu, NavMenuGroup and NavMenuLink

- The FluentNavMenuGroup, FluentNavMenuLink and FluentNavMenu components can be used to build - hierarchical, collapsible and expandable menus. They can range from simple 1-level deep lists to complex multi-level menu - structures. + The FluentNavMenu, FluentNavGroup and FluentNavLink components can be used to build + hierarchical, collapsible and expandable side-bar menus. They can range from simple 1-level deep lists to complex multi-level menu + structures (with a max of 5 levels).

None of these components are particulary useful when used stand-alone.

- - - - - -

Examples

- This demo shows 3 different versions of a NavMenu (with FluentNavMenuGoups and FluentNavMenuLinks). + This demo shows 3 different versions of a NavMenu (with FluentNavGroups and FluentNavLink)s. From left to right:
    -
  • Menu with several sub-menus, icons, etc
    • +
  • Menu with several sub-menus, icons, etc. The first group (Item 3) uses both the Title as the TitleTemplate parameters
  • Menu without sub-menus but with icons
  • Menu with just text links
@@ -38,12 +57,13 @@ - An example data binding the Expanded parameter. + An example of binding to the Expanded parameter. - - - An example of intercepting menu actions to provide custom behavior. - - +

API Documentation

+ + + + + diff --git a/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeCollapsible.razor b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeCollapsible.razor new file mode 100644 index 0000000000..660d5f57ee --- /dev/null +++ b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeCollapsible.razor @@ -0,0 +1,33 @@ +

Collapsible Navigation Example

+ + +
+ + + + + + + + + +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem lacus. + Ut id leo non enim feugiat ultrices. Proin vulputate volutpat urna nec iaculis. + Integer dui lacus, fermentum sit amet aliquet in, scelerisque vitae dui. + Nulla fringilla sagittis orci eu consectetur. Fusce eget dolor non lectus placerat + tincidunt. Pellentesque aliquam non odio ac porttitor. Nam finibus mattis sagittis. + Ut hendrerit porttitor massa in aliquam. Duis laoreet fringilla feugiat. + Sed maximus, urna in fringilla posuere, enim urna bibendum justo, vel molestie nibh orci nec lectus. + Etiam a varius justo. Aenean nisl ante, interdum eget vulputate eget, iaculis ut massa. + Suspendisse maximus sed purus id molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +
+ + +@code +{ + bool Expanded = true; +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCustomActions.razor b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeCustomActions.razor similarity index 96% rename from examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCustomActions.razor rename to examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeCustomActions.razor index 1afe53dca6..ba11d8a38c 100644 --- a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCustomActions.razor +++ b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeCustomActions.razor @@ -1,11 +1,10 @@ @using System.Text; -@namespace FluentUI.Demo.Shared

Custom Actions Example

- + @* This item is handled by the MenuLevelHandler, which intercepts all items but will only handle ones with Id ending with _HandleAtMenuLevel @@ -48,7 +47,7 @@ - +

Log

diff --git a/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeDataBound.razor b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeDataBound.razor new file mode 100644 index 0000000000..891f81ac0a --- /dev/null +++ b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeDataBound.razor @@ -0,0 +1,56 @@ +

Navigation Examples

+ + + + + + + + + + + + + + + +

Expanded elements

+ + Menu + + + Item 1 + + + Item 2 + + +

Selected elements

+ + Item 1.1 + + + Item 1.2 + + + Item 2.1 + + + Item 2.2 + + + + + +@code { + bool MenuExpanded = true; + bool Item1Expanded = true; + bool Item2Expanded = true; + + bool Item1Point1Selected = false; + bool Item1Point2Selected = false; + bool Item2Point1Selected = false; + bool Item2Point2Selected = false; +} + + diff --git a/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeDefault.razor b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeDefault.razor new file mode 100644 index 0000000000..c36cccbce2 --- /dev/null +++ b/examples/Demo/Shared/Pages/NavMenuTree/Examples/NavMenuTreeDefault.razor @@ -0,0 +1,68 @@ +

Navigation Examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code +{ + + void OnClick(MouseEventArgs e) + { + DemoLogger.WriteLine("NavMenuTree item clicked"); + } + + protected override void OnAfterRender(bool firstRender) { + if (firstRender) + { + + } + base.OnAfterRender(firstRender); + } +} + + diff --git a/examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor b/examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor new file mode 100644 index 0000000000..4b4def70de --- /dev/null +++ b/examples/Demo/Shared/Pages/NavMenuTree/NavMenuTreePage.razor @@ -0,0 +1,76 @@ +@page "/NavMenuTree" + +@using FluentUI.Demo.Shared.Pages.NavMenuTree.Examples + +

NavMenuTree, NavMenuGroup and NavMenuLink

+ +
+ IMPORTANT +

+ With version 3.2 a new, much improved, set of components to build side-bar menus has been added. The demos shown here are using + components which are marked obsolete and will be removed in a future version. +

+

+ + If you DO NOT want to upgrade to these new menu components, you can continue to use the pre-version 3.2 components. The only thing + you need to do is to change the name of the FluentNavMenu component in your application to FluentNavMenuTree. + +

+

+ Everything works exactely as before by changing the name of this FluentNavMenu component in your application. (This probably needs to be done + in one place only). The FluentNavMenuGroup and FluentNavMenuLink components have not been changed and do not need to be altered. +

+

+ We consider the FluentNavMenuTree, FluentNavMenuGroup and FluentNavMenuLink components as deprecated and will remove them in a future version. +

+

+ If you wish to upgrade to the new menu components, please refer to the Upgrade guide for more information. +

+
+

+ The FluentNavMenuGroup, FluentNavMenuLink and FluentNavMenu components can be used to build + hierarchical, collapsible and expandable menus. They can range from simple 1-level deep lists to complex multi-level menu + structures. +

+

+ None of these components are particulary useful when used stand-alone. +

+ +

Examples

+ + + + This demo shows 3 different versions of a NavMenu (with FluentNavMenuGoups and FluentNavMenuLinks). + From left to right: +
    +
  • Menu with several sub-menus, icons, etc
    • +
  • Menu without sub-menus but with icons
    • +
  • Menu with just text links
    • +
+ + + + + + More complete example which show how menu works with together with a text section when it collapses. + + + + + + An example data binding the Expanded parameter. + + + + + + An example of intercepting menu actions to provide custom behavior. + + + +

API Documentation

+ + + + + \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldAria.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldAria.razor deleted file mode 100644 index 11550d3285..0000000000 --- a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldAria.razor +++ /dev/null @@ -1,15 +0,0 @@ -

Visual vs audio label

- - Visible label - - -

Audio label only

- - - - -

With aria-label

- -@code { - int? value1, value2, value3; -} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDefault.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDefault.razor index 4ebe9a9c47..b2e366dd00 100644 --- a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDefault.razor +++ b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDefault.razor @@ -1,12 +1,12 @@ 

- Integer +
Example int: @exampleInt
Minimum value: @(int.MinValue); Maximum value: @(int.MaxValue)

- Nullable integer +
Example nullable int: @exampleNullableInt
@@ -15,14 +15,20 @@

Same as above but bound to oninput event
- Integer +
Example int: @exampleInt2

Nullable int bound to oninput event
- Nullable integer +
Example nullable int: @exampleNullableInt2

diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDisplays.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDisplays.razor index 3661a31e87..e3109fc158 100644 --- a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDisplays.razor +++ b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldDisplays.razor @@ -12,12 +12,12 @@

Disabled

-label +

Read only

-label + @code { int? value1, value2, value3, value4, value5, value6, value7, value8=1, value9=2; diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldFilled.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldFilled.razor index ebcfcaa1cf..fc375d28c6 100644 --- a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldFilled.razor +++ b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldFilled.razor @@ -1,6 +1,6 @@ 

Default

-label +

Placeholder

@@ -12,13 +12,13 @@

Disabled

-label +

Read only

-label + @code { int? value1, value2, value3, value4, value5, value6, value7, value8=3, value9=4; diff --git a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldIcons.razor b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldIcons.razor index b56e814091..9bd1509604 100644 --- a/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldIcons.razor +++ b/examples/Demo/Shared/Pages/NumberField/Examples/NumberFieldIcons.razor @@ -1,11 +1,11 @@ -

With start

- +

Icons

+ + -

With end

- + diff --git a/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor b/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor index 7eff4059da..8c496ad4ad 100644 --- a/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor +++ b/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor @@ -40,5 +40,3 @@ - - diff --git a/examples/Demo/Shared/Pages/Panel/PanelPage.razor b/examples/Demo/Shared/Pages/Panel/PanelPage.razor index ff84405791..992e0f0cbe 100644 --- a/examples/Demo/Shared/Pages/Panel/PanelPage.razor +++ b/examples/Demo/Shared/Pages/Panel/PanelPage.razor @@ -1,12 +1,8 @@ @page "/Panel" -@page "/Panel/{*panelroute}" - @using FluentUI.Demo.Shared.Pages.Panel.Examples;

Panel

-

Route: @PanelRoute

-

A panel is a dialog that is anchored to the either left or right side of the screen. By implementing IDialogContentComponent<T>, a component can be used as the content of a panel. The appearance of the panel can be altered by using the DialogParameters class. @@ -17,7 +13,6 @@ or by using an EventCallback.

-

A panel can be shown by calling one of following methods on the DialogService:

    @@ -50,10 +45,4 @@

    API Documentation

    - - -@code { - [Parameter] - public string? PanelRoute { get; set; } - -} \ No newline at end of file + \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Radio/Examples/RadioAria.razor b/examples/Demo/Shared/Pages/Radio/Examples/RadioAria.razor index 9b4518f751..2a78e5343c 100644 --- a/examples/Demo/Shared/Pages/Radio/Examples/RadioAria.razor +++ b/examples/Demo/Shared/Pages/Radio/Examples/RadioAria.razor @@ -1,14 +1,11 @@ 

    Visual vs audio label

    - - Visible label - +
    - - - + +
    @code { diff --git a/examples/Demo/Shared/Pages/Radio/Examples/RadioDefault.razor b/examples/Demo/Shared/Pages/Radio/Examples/RadioDefault.razor index d28bf8204a..085d096eee 100644 --- a/examples/Demo/Shared/Pages/Radio/Examples/RadioDefault.razor +++ b/examples/Demo/Shared/Pages/Radio/Examples/RadioDefault.razor @@ -1,5 +1,5 @@ -

    Without a label:

    -

    With a label: label

    +

    Without a label:

    +

    With a label:

    @code { string? value1,value2; diff --git a/examples/Demo/Shared/Pages/Radio/Examples/RadioState.razor b/examples/Demo/Shared/Pages/Radio/Examples/RadioState.razor index b22f90c5ff..b233b73588 100644 --- a/examples/Demo/Shared/Pages/Radio/Examples/RadioState.razor +++ b/examples/Demo/Shared/Pages/Radio/Examples/RadioState.razor @@ -1,18 +1,18 @@ 

    Checked

    - +

    Required

    - +

    Disabled

    - - label - checked + + + @code { string? v1, v2, v3; diff --git a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupDefault.razor b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupDefault.razor index 40eab1360a..d0887cca54 100644 --- a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupDefault.razor +++ b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupDefault.razor @@ -1,8 +1,5 @@ 
    - - + One Two @@ -10,10 +7,7 @@

    Single radio

    - - + Michael Jordan
    diff --git a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupPreset.razor b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupPreset.razor index 3a3164abf7..2f29fa92a1 100644 --- a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupPreset.razor +++ b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupPreset.razor @@ -1,6 +1,5 @@ 

    Preset value

    - - + Ice Man Maverick Viper diff --git a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupStates.razor b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupStates.razor index 57a3c30b92..3db7c2a6d7 100644 --- a/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupStates.razor +++ b/examples/Demo/Shared/Pages/RadioGroup/Examples/RadioGroupStates.razor @@ -1,18 +1,16 @@ 

    Readonly

    - - - Word - Excel + + +

    Disabled

    - - - Lamborghini - Ferari + + +
    @code { diff --git a/examples/Demo/Shared/Pages/Search/Examples/SearchAria.razor b/examples/Demo/Shared/Pages/Search/Examples/SearchAria.razor deleted file mode 100644 index 011a61f541..0000000000 --- a/examples/Demo/Shared/Pages/Search/Examples/SearchAria.razor +++ /dev/null @@ -1,15 +0,0 @@ -

    With aria-label

    - - -

    Visual vs audio label

    - - Visible label - - -

    Audio label only

    - - - -@code { - string? value; -} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Search/Examples/SearchDefault.razor b/examples/Demo/Shared/Pages/Search/Examples/SearchDefault.razor index 7e25363e03..29c1fb6061 100644 --- a/examples/Demo/Shared/Pages/Search/Examples/SearchDefault.razor +++ b/examples/Demo/Shared/Pages/Search/Examples/SearchDefault.razor @@ -1,8 +1,8 @@ -
    - Without a label: +
    + Without a label:
    -
    - With a label: Label +
    +
    @code { string? value; diff --git a/examples/Demo/Shared/Pages/Search/SearchPage.razor b/examples/Demo/Shared/Pages/Search/SearchPage.razor index 14a3aad101..bf28e912d9 100644 --- a/examples/Demo/Shared/Pages/Search/SearchPage.razor +++ b/examples/Demo/Shared/Pages/Search/SearchPage.razor @@ -32,6 +32,4 @@ - - diff --git a/examples/Demo/Shared/Pages/Select/Examples/SelectDefault.razor b/examples/Demo/Shared/Pages/Select/Examples/SelectDefault.razor index 0143e75d0c..74ebf4f3cd 100644 --- a/examples/Demo/Shared/Pages/Select/Examples/SelectDefault.razor +++ b/examples/Demo/Shared/Pages/Select/Examples/SelectDefault.razor @@ -1,6 +1,6 @@ @inject DataSource Data - - !!Experimental!!

    All people whose first name starts with a "J" are initialy selected through the OptionSelected (Func delegate) parameter.

    All people with a birth year greater than 1990 are disabled through the OptionDisabled (Func delegate) parameter.

    - Selected value: @SelectedValue
    Reflects the value of the first selected option
    + + This value is not always accurate as a user can potentially deselect all enabled options. A browser will not return the value + of a disabled item so the last selected non-disabled value will be returned even if it is not selected anymore! + +

    Selected options: @(SelectedOptions != null ? String.Join(", ", SelectedOptions.Select(i => i.FirstName)) : "")
    diff --git a/examples/Demo/Shared/Pages/Select/SelectPage.razor b/examples/Demo/Shared/Pages/Select/SelectPage.razor index 31dbc08141..10bef06bf2 100644 --- a/examples/Demo/Shared/Pages/Select/SelectPage.razor +++ b/examples/Demo/Shared/Pages/Select/SelectPage.razor @@ -11,9 +11,6 @@ Fluent UI design system.

    - - -

    Examples

    @@ -32,4 +29,7 @@ - \ No newline at end of file + + +

    API Documentation

    + \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Slider/Examples/SliderToggle.razor b/examples/Demo/Shared/Pages/Slider/Examples/SliderToggle.razor index 5413a0ead0..59abd008b1 100644 --- a/examples/Demo/Shared/Pages/Slider/Examples/SliderToggle.razor +++ b/examples/Demo/Shared/Pages/Slider/Examples/SliderToggle.razor @@ -1,6 +1,6 @@ 
    Toggle orientation - + 0℃ 10℃ 90℃ diff --git a/examples/Demo/Shared/Pages/Switch/Examples/SwitchDefault.razor b/examples/Demo/Shared/Pages/Switch/Examples/SwitchDefault.razor index 2dbc083bb3..f6f9b2462d 100644 --- a/examples/Demo/Shared/Pages/Switch/Examples/SwitchDefault.razor +++ b/examples/Demo/Shared/Pages/Switch/Examples/SwitchDefault.razor @@ -1,15 +1,11 @@ 
    - - - Dark Mode - - - New Feature + + + On Off - - Theme + Dark Light diff --git a/examples/Demo/Shared/Pages/TextArea/Examples/TextAreaAria.razor b/examples/Demo/Shared/Pages/TextArea/Examples/TextAreaAria.razor deleted file mode 100644 index d350d4ea6e..0000000000 --- a/examples/Demo/Shared/Pages/TextArea/Examples/TextAreaAria.razor +++ /dev/null @@ -1,16 +0,0 @@ -

    Visual vs audio label

    - - Visible label - - -

    Audio label only

    - - - - -

    With aria-label

    - -@code { - string? value1, value2, value3; -} - diff --git a/examples/Demo/Shared/Pages/TextArea/Examples/TextAreaDefault.razor b/examples/Demo/Shared/Pages/TextArea/Examples/TextAreaDefault.razor index 0daf787299..ce8e37d4ed 100644 --- a/examples/Demo/Shared/Pages/TextArea/Examples/TextAreaDefault.razor +++ b/examples/Demo/Shared/Pages/TextArea/Examples/TextAreaDefault.razor @@ -1,8 +1,6 @@ -

    Without label:

    +

    Without label:

    - With label: - label - +

    @code { string? value1, value2; diff --git a/examples/Demo/Shared/Pages/TextArea/TextAreaPage.razor b/examples/Demo/Shared/Pages/TextArea/TextAreaPage.razor index b853cb586c..3c1aeeedfa 100644 --- a/examples/Demo/Shared/Pages/TextArea/TextAreaPage.razor +++ b/examples/Demo/Shared/Pages/TextArea/TextAreaPage.razor @@ -28,5 +28,3 @@ - - \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/TextField/Examples/TextFieldAria.razor b/examples/Demo/Shared/Pages/TextField/Examples/TextFieldAria.razor deleted file mode 100644 index 3af3bad22b..0000000000 --- a/examples/Demo/Shared/Pages/TextField/Examples/TextFieldAria.razor +++ /dev/null @@ -1,16 +0,0 @@ -

    Visual vs audio label

    - - Visible label - - -

    Audio label only

    - - - - -

    With aria-label

    - - -@code { - string? value1, value2, value3; -} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/TextField/Examples/TextFieldDefault.razor b/examples/Demo/Shared/Pages/TextField/Examples/TextFieldDefault.razor index 8f76ebc2a9..48dcee5cbc 100644 --- a/examples/Demo/Shared/Pages/TextField/Examples/TextFieldDefault.razor +++ b/examples/Demo/Shared/Pages/TextField/Examples/TextFieldDefault.razor @@ -1,17 +1,17 @@ 

    Without label:

    - +

    You entered: @value1

    With label:

    -Label +

    You entered: @value2

    Minlength

    -Minlength +

    You entered: @value3

    Maxlength

    -Maxlength +

    You entered: @value4

    @code { diff --git a/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor b/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor index baedf7e497..8638650c3d 100644 --- a/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor +++ b/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor @@ -28,5 +28,3 @@ - - \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Tooltip/Examples/TooltipDefault.razor b/examples/Demo/Shared/Pages/Tooltip/Examples/TooltipDefault.razor index 10d97166d6..9571388a92 100644 --- a/examples/Demo/Shared/Pages/Tooltip/Examples/TooltipDefault.razor +++ b/examples/Demo/Shared/Pages/Tooltip/Examples/TooltipDefault.razor @@ -1,8 +1,6 @@ -@inject ILogger logger; + - - - + Hello World
    It is a small tootip.     @@ -10,6 +8,6 @@ @code { private void OnDismiss() { - logger.LogInformation("Tooltip dismissed!"); + DemoLogger.WriteLine("Tooltip dismissed!"); } } \ No newline at end of file diff --git a/examples/Demo/Shared/SampleData/DataSource.cs b/examples/Demo/Shared/SampleData/DataSource.cs index 8f6c46067d..f0cb2d6807 100644 --- a/examples/Demo/Shared/SampleData/DataSource.cs +++ b/examples/Demo/Shared/SampleData/DataSource.cs @@ -71,15 +71,15 @@ public Task GetCountriesAsync() private readonly static Person[] _people = new[] { - new Person ( PersonId: 1, FirstName : "Jean", LastName : "Martin", CountryCode : "fr", BirthDate : new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ), - new Person ( PersonId : 2, FirstName : "António", LastName : "Langa", CountryCode : "mz", BirthDate : new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ), - new Person ( PersonId : 3, FirstName : "Julie", LastName : "Smith", CountryCode : "au", BirthDate : new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ), - new Person ( PersonId : 4, FirstName : "Nur", LastName : "Sari", CountryCode : "id", BirthDate : new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ), - new Person ( PersonId : 5, FirstName : "Jose", LastName : "Hernandez", CountryCode : "mx", BirthDate : new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ), - new Person ( PersonId : 6, FirstName : "Bert", LastName : "de Vries", CountryCode : "nl", BirthDate : new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ), - new Person ( PersonId : 7, FirstName : "Jaques", LastName : "Martin", CountryCode : "fr", BirthDate : new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ), - new Person ( PersonId : 8, FirstName : "Elizabeth", LastName : "Johnson", CountryCode : "gb", BirthDate : new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ), - new Person ( PersonId : 9, FirstName : "Jakob", LastName : "Berger", CountryCode : "de", BirthDate : new DateOnly(1971, 4, 21), Picture: string.Empty ) + new Person ( PersonId: 1, FirstName: "Jean", LastName: "Martin", CountryCode: "FR", BirthDate: new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ), + new Person ( PersonId: 2, FirstName: "António", LastName: "Langa", CountryCode: "MZ", BirthDate: new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ), + new Person ( PersonId: 3, FirstName: "Julie", LastName: "Smith", CountryCode: "AU", BirthDate: new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ), + new Person ( PersonId: 4, FirstName: "Nur", LastName: "Sari", CountryCode: "ID", BirthDate: new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ), + new Person ( PersonId: 5, FirstName: "Jose", LastName: "Hernandez", CountryCode: "MX", BirthDate: new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ), + new Person ( PersonId: 6, FirstName: "Bert", LastName: "de Vries", CountryCode: "NL", BirthDate: new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ), + new Person ( PersonId: 7, FirstName: "Jaques", LastName: "Martin", CountryCode: "BE", BirthDate: new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ), + new Person ( PersonId: 8, FirstName: "Elizabeth", LastName: "Johnson", CountryCode: "GB", BirthDate: new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ), + new Person ( PersonId: 9, FirstName: "Jakob", LastName: "Berger", CountryCode: "DE", BirthDate: new DateOnly(1971, 4, 21), Picture: string.Empty ) }; public class MonthItem diff --git a/examples/Demo/Shared/SampleData/Person.cs b/examples/Demo/Shared/SampleData/Person.cs index 16cc827fe4..3fc98eba15 100644 --- a/examples/Demo/Shared/SampleData/Person.cs +++ b/examples/Demo/Shared/SampleData/Person.cs @@ -1,6 +1,9 @@ namespace FluentUI.Demo.Shared.SampleData; -public record Person(int PersonId, string CountryCode, string FirstName, string LastName, DateOnly BirthDate, string Picture); +public record Person(int PersonId, string CountryCode, string FirstName, string LastName, DateOnly BirthDate, string Picture) +{ + public override string ToString() => $"{FirstName} {LastName} ({BirthDate}, {CountryCode})"; +} public class SimplePerson { diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor index 221bcb0a05..fbd73a253f 100644 --- a/examples/Demo/Shared/Shared/DemoMainLayout.razor +++ b/examples/Demo/Shared/Shared/DemoMainLayout.razor @@ -53,7 +53,7 @@
    diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor b/examples/Demo/Shared/Shared/DemoNavMenu.razor new file mode 100644 index 0000000000..d32edddab8 --- /dev/null +++ b/examples/Demo/Shared/Shared/DemoNavMenu.razor @@ -0,0 +1,106 @@ +
    + + +

    Home

    +     + + + What's new + Upgrade guide + @* Project setup *@ + Code setup + Design tokens + Reboot + Icons and Emoji + DialogService + MessageService + ToastService + Project templates + Fluent UI Form + Blazor Form + + + + FluentComponentBase + FluentInputBase + Clear cache + + + + Header + Footer + BodyContent + Grid + Layout + MainLayout + Spacer + Splitter + Stack + + + + Accordion + Anchor + Anchored Region + + Badge + CounterBadge + PresenceBadge + + Autocomplete + Breadcrumb + Button + Card + Checkbox + CodeEditor + Combobox + Data grid + Date & Time + Dialog + Divider + Drag and Drop + Emoji + Flipper + Highlighter + Horizontal Scroll + Icon + InputFile + Label + Listbox + Menu + MenuButton + MessageBar + MessageBox + NavMenu + NavMenuTree + Number Field + Option + Overflow + Overlay + Panel + Popover + Progress + Progress Ring + Radio + Radio Group + Search + Select + Skeleton + Slider + SplashScreen + Switch + Tabs + TextArea + Text Field + Toast + Toolbar + Tooltip + Tree View + + + + MarkdownSection + TableOfContents + +     +
    \ No newline at end of file diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css new file mode 100644 index 0000000000..7348dbe7be --- /dev/null +++ b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css @@ -0,0 +1,3 @@ +::deep fluent-tree-item { + margin: 5px 0; +} diff --git a/examples/Demo/Shared/Shared/DemoNavMenuList.razor b/examples/Demo/Shared/Shared/DemoNavMenuList.razor index eef71058e5..3bc9f8b523 100644 --- a/examples/Demo/Shared/Shared/DemoNavMenuList.razor +++ b/examples/Demo/Shared/Shared/DemoNavMenuList.razor @@ -8,9 +8,9 @@
  • What's new?
    • -
  • + @*
  • Project setup -
    • + *@
  • Code setup
    • diff --git a/examples/Demo/Shared/Shared/DemoNavMenuTree.razor b/examples/Demo/Shared/Shared/DemoNavMenuTree.razor index d46512630d..90b9a7da01 100644 --- a/examples/Demo/Shared/Shared/DemoNavMenuTree.razor +++ b/examples/Demo/Shared/Shared/DemoNavMenuTree.razor @@ -1,5 +1,5 @@
    - +

    Home

     @@ -8,7 +8,7 @@

    More information

    - + @* *@ @@ -110,5 +110,5 @@ -     +
    \ No newline at end of file diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index 0a7a72e104..210deb47a8 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -1,4 +1,9 @@ -@import '/_content/Microsoft.Fast.Components.FluentUI/css/reboot.css'; +@import '/_content/Microsoft.Fast.Components.FluentUI/css/reboot.css'; + +/* Hide any web components that haven't been started */ +:not(:defined), .before-started { + visibility: hidden; +} body { height: 100%; diff --git a/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md b/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md index 30a35b068c..7a4251fe5e 100644 --- a/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md +++ b/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md @@ -1,3 +1,5 @@ +>**If you are upgrading from a previous version of the library and you were alreasy using icons and/or emoji, please see the [Upgrade Guide](https://www.fluentui-blazor.net/UpgradeGuide) for more information.** + Starting with v3, the assets for the icons and emoji are removed from the library package and are provided through additional (separate) packages for both the icon and emoji resources. The components, and icons that are used by the library itself, are still part of the package. Adding the [Microsoft.Fast.Components.FluentUI.Icons package](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons) and/or [Microsoft.Fast.Components.FluentUI.Emojis package](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Emojis) @@ -5,16 +7,24 @@ is enough to make the resources available to your code. We use the [.NET trimming capabilities](https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/configure-trimmer) to publish only those assests that are actually being used in your program. Usually this results in some very small DLL's that only contain the resources that are actually being used in your application. -We still have support for both the **complete** [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) and the [Fluent Emoji](https://github.com/microsoft/fluentui-emoji) libraries. +We support the **complete** [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) and [Fluent Emoji](https://github.com/microsoft/fluentui-emoji) collections. ## Getting Started -To use the **Fluent UI System Icons** in your application, you will need to install the [Microsoft.Fast.Components.FluentUI.Icons](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons/) NuGet package in the project are using the main library. +To use the **Fluent UI System Icons** in your application, you will need to install the [Microsoft.Fast.Components.FluentUI.Icons](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons/) NuGet package in the project which is using the main library. + +```shell +dotnet add package Microsoft.Fast.Components.FluentUI.Icons +``` +To use the **Fluent UI Emoji** in your application, you need to install the [Microsoft.Fast.Components.FluentUI.Emojis](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Emojis/) NuGet package in the project which is using the main library. + +```shell +dotnet add package Microsoft.Fast.Components.FluentUI.Emojis +``` -To use the **Fluent UI Emoji** in your application, you need to install the [Microsoft.Fast.Components.FluentUI.Emojis](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Emojis/) NuGet package in the project are using the main library. -#### `FluentIcon` component +#### Using the `FluentIcon` component To use the icons, you add a `FluentIcon` component in your code like this: @@ -58,7 +68,7 @@ After adding the class, you can start using this custom icon like a "normal" Flu ``` -#### `FluentEmoji` component +#### Using the `FluentEmoji` component To use the emoji, you add a `FleuntEmoji` component in your code like this: diff --git a/examples/Demo/Shared/wwwroot/docs/UpgradeGuide.md b/examples/Demo/Shared/wwwroot/docs/UpgradeGuide.md index 740734e98d..45225821c1 100644 --- a/examples/Demo/Shared/wwwroot/docs/UpgradeGuide.md +++ b/examples/Demo/Shared/wwwroot/docs/UpgradeGuide.md @@ -1,10 +1,29 @@ -## Breaking changes - The `FluentDataGrid` component is, as you may know, a `QuickGrid` in disguise. We - aligned the underlying code even more to the productized version that will ship with - .NET 8. Where we previously aligned parameter names to the `fluent-datagrid` Web - Component, we will now align to the `QuickGrid` naming. This should make - integrating/copying `QuickGrid` component examples in your own environment easier and - will make it easier for us to keep the code up-to-date. Changes that need to be made in parameter names from v2 are: +## Breaking changes v3.2.0 + +### The pre-v3.2 `FluentNavMenu` has been renamed to `FluentNavMenuTree` +A new `FluentNavMenu` component has been added. + +If you want to **upgrade** your previous menu code, the following changes need to be made: + +* Change all occurrences of `` to `` +* Change `FluentNavMenuLink` from a self-closing tag to a tag with a closing tag +* Move the `FluentNavMenuLink` `Text` parameter content to in between the opening and closing tag +* Change any `@onclick` occurrences to `OnClick` + +* Change all occurrences of `FluentNavMenuGroup` to `FluentNavGroup' +* Replace the `Text` parameter with `Title` + +If you want to **keep** your previous menu code, the following change needs to be made: +* Rename `FluentNavMenu` to `FluentNavMenuTree` + + +## Breaking changes v3.0.0 +The `FluentDataGrid` component is, as you may know, a `QuickGrid` in disguise. We +aligned the underlying code even more to the productized version that will ship with +.NET 8. Where we previously aligned parameter names to the `fluent-datagrid` Web +Component, we will now align to the `QuickGrid` naming. This should make +integrating/copying `QuickGrid` component examples in your own environment easier and +will make it easier for us to keep the code up-to-date. Changes that need to be made in parameter names from v2 are: * RowsData -> Items * RowsDataProvider -> ItemsProvider * RowsDataSize -> ItemSize diff --git a/examples/Demo/Shared/wwwroot/docs/WhatsNew.md b/examples/Demo/Shared/wwwroot/docs/WhatsNew.md index 6b84563f29..ab47d3e1c2 100644 --- a/examples/Demo/Shared/wwwroot/docs/WhatsNew.md +++ b/examples/Demo/Shared/wwwroot/docs/WhatsNew.md @@ -1,4 +1,21 @@ -## V3.1.1 +## V3.2.0 +- New NavMenu, NavGroup and NavLink components. **Breaking change** - See the [Upgrade guide](https://www.fluentui-blazor.net/UpgradeGuide) for details. See [NavMenu](https://www.fluentui-blazor.net/NavMenu) page for examples. +- New FluentInputLabel component. +- FluentCard: Add AreaRestricted parameter to allow content to break out of card area. +- Provide error message when FluentDialogProvider missing +- It is now possible to add a tooltip to DataGridColumns +- +- Fix [#796](https://github.com/microsoft/fluentui-blazor/pull/796): Fix IconColor doc page +- Fix [#797](https://github.com/microsoft/fluentui-blazor/pull/797): Fix MessageBar issues +- Fix [#805](https://github.com/microsoft/fluentui-blazor/pull/805): InlineStyleBuilder on .NET6 +- Fix [#810](https://github.com/microsoft/fluentui-blazor/pull/810): FluentDataGrid error if page is quickly exited +- Fix [#815](https://github.com/microsoft/fluentui-blazor/pull/815): Manual upload on iOS +- Fix [#828](https://github.com/microsoft/fluentui-blazor/pull/828): FluentSelect: Fix ValueChanged fired twice +- Fix [#801](https://github.com/microsoft/fluentui-blazor/pull/801): Remove direct call to Items.Count() +- Fix [#834](https://github.com/microsoft/fluentui-blazor/pull/834): Chinese abbreviated day name in FluentCalendar +- Fix [#836](https://github.com/microsoft/fluentui-blazor/pull/836): Setting SelectedOptions does not update FluentSelct + +## V3.1.1 - Fix [#776](https://github.com/microsoft/fluentui-blazor/issues/776): Icon throws exception when deployed to Azure - Fix [#755](https://github.com/microsoft/fluentui-blazor/issues/755): Icon throws exception when deployed to Azure - Fix [#789](https://github.com/microsoft/fluentui-blazor/issues/789): Navigation to "/" crashes with FluentNavMenu diff --git a/nuget.config b/nuget.config index dd227d717d..954f718944 100644 --- a/nuget.config +++ b/nuget.config @@ -9,8 +9,5 @@ - - - \ No newline at end of file diff --git a/src/Assets/FluentUI.Icons/Icons/Filled12.cs b/src/Assets/FluentUI.Icons/Icons/Filled12.cs index 7b46bd79a5..451bb85db1 100644 --- a/src/Assets/FluentUI.Icons/Icons/Filled12.cs +++ b/src/Assets/FluentUI.Icons/Icons/Filled12.cs @@ -140,11 +140,13 @@ public class Ribbon : Icon { public Ribbon() : base("Ribbon", IconVariant.Filled public class RibbonOff : Icon { public RibbonOff() : base("RibbonOff", IconVariant.Filled, IconSize.Size12, "") { } } public class ScanDash : Icon { public ScanDash() : base("ScanDash", IconVariant.Filled, IconSize.Size12, "") { } } public class Search : Icon { public Search() : base("Search", IconVariant.Filled, IconSize.Size12, "") { } } + public class Server : Icon { public Server() : base("Server", IconVariant.Filled, IconSize.Size12, "") { } } public class Shield : Icon { public Shield() : base("Shield", IconVariant.Filled, IconSize.Size12, "") { } } public class SlashForward : Icon { public SlashForward() : base("SlashForward", IconVariant.Filled, IconSize.Size12, "") { } } public class SplitHorizontal : Icon { public SplitHorizontal() : base("SplitHorizontal", IconVariant.Filled, IconSize.Size12, "") { } } public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical", IconVariant.Filled, IconSize.Size12, "") { } } public class Square : Icon { public Square() : base("Square", IconVariant.Filled, IconSize.Size12, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Filled, IconSize.Size12, "") { } } public class SquareShadow : Icon { public SquareShadow() : base("SquareShadow", IconVariant.Filled, IconSize.Size12, "") { } } public class Star : Icon { public Star() : base("Star", IconVariant.Filled, IconSize.Size12, "") { } } public class StarHalf : Icon { public StarHalf() : base("StarHalf", IconVariant.Filled, IconSize.Size12, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Filled16.cs b/src/Assets/FluentUI.Icons/Icons/Filled16.cs index 2ca008ba26..59e6f45098 100644 --- a/src/Assets/FluentUI.Icons/Icons/Filled16.cs +++ b/src/Assets/FluentUI.Icons/Icons/Filled16.cs @@ -493,9 +493,9 @@ public class Dumbbell : Icon { public Dumbbell() : base("Dumbbell", IconVariant. public class Earth : Icon { public Earth() : base("Earth", IconVariant.Filled, IconSize.Size16, "") { } } public class EarthLeaf : Icon { public EarthLeaf() : base("EarthLeaf", IconVariant.Filled, IconSize.Size16, "") { } } public class Edit : Icon { public Edit() : base("Edit", IconVariant.Filled, IconSize.Size16, "") { } } - public class EditArrowBack : Icon { public EditArrowBack() : base("EditArrowBack", IconVariant.Filled, IconSize.Size16, "") { } } - public class EditOff : Icon { public EditOff() : base("EditOff", IconVariant.Filled, IconSize.Size16, "") { } } - public class EditProhibited : Icon { public EditProhibited() : base("EditProhibited", IconVariant.Filled, IconSize.Size16, "") { } } + public class EditArrowBack : Icon { public EditArrowBack() : base("EditArrowBack", IconVariant.Filled, IconSize.Size16, "") { } } + public class EditOff : Icon { public EditOff() : base("EditOff", IconVariant.Filled, IconSize.Size16, "") { } } + public class EditProhibited : Icon { public EditProhibited() : base("EditProhibited", IconVariant.Filled, IconSize.Size16, "") { } } public class Emoji : Icon { public Emoji() : base("Emoji", IconVariant.Filled, IconSize.Size16, "") { } } public class EmojiAdd : Icon { public EmojiAdd() : base("EmojiAdd", IconVariant.Filled, IconSize.Size16, "") { } } public class EmojiAngry : Icon { public EmojiAngry() : base("EmojiAngry", IconVariant.Filled, IconSize.Size16, "") { } } @@ -762,11 +762,16 @@ public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Fil public class NotepadEdit : Icon { public NotepadEdit() : base("NotepadEdit", IconVariant.Filled, IconSize.Size16, "") { } } public class NotepadPerson : Icon { public NotepadPerson() : base("NotepadPerson", IconVariant.Filled, IconSize.Size16, "") { } } public class NotePin : Icon { public NotePin() : base("NotePin", IconVariant.Filled, IconSize.Size16, "") { } } - public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Filled, IconSize.Size16, "") { } } - public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Filled, IconSize.Size16, "") { } } - public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Filled, IconSize.Size16, "") { } } - public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Filled, IconSize.Size16, "") { } } - public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Filled, IconSize.Size16, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Filled, IconSize.Size16, "") { } } public class NumberRow : Icon { public NumberRow() : base("NumberRow", IconVariant.Filled, IconSize.Size16, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Filled, IconSize.Size16, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Filled, IconSize.Size16, "") { } } @@ -997,8 +1002,9 @@ public class Square : Icon { public Square() : base("Square", IconVariant.Filled public class SquareAdd : Icon { public SquareAdd() : base("SquareAdd", IconVariant.Filled, IconSize.Size16, "") { } } public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Filled, IconSize.Size16, "") { } } public class SquareDismiss : Icon { public SquareDismiss() : base("SquareDismiss", IconVariant.Filled, IconSize.Size16, "") { } } - public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Filled, IconSize.Size16, "") { } } - public class SquareHintArrowBack : Icon { public SquareHintArrowBack() : base("SquareHintArrowBack", IconVariant.Filled, IconSize.Size16, "") { } } + public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Filled, IconSize.Size16, "") { } } + public class SquareHintArrowBack : Icon { public SquareHintArrowBack() : base("SquareHintArrowBack", IconVariant.Filled, IconSize.Size16, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Filled, IconSize.Size16, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Filled, IconSize.Size16, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Filled, IconSize.Size16, "") { } } public class Stack : Icon { public Stack() : base("Stack", IconVariant.Filled, IconSize.Size16, "") { } } @@ -1034,6 +1040,8 @@ public class TabDesktop : Icon { public TabDesktop() : base("TabDesktop", IconVa public class TabDesktopArrowClockwise : Icon { public TabDesktopArrowClockwise() : base("TabDesktopArrowClockwise", IconVariant.Filled, IconSize.Size16, "") { } } public class TabDesktopImage : Icon { public TabDesktopImage() : base("TabDesktopImage", IconVariant.Filled, IconSize.Size16, "") { } } public class TabDesktopLink : Icon { public TabDesktopLink() : base("TabDesktopLink", IconVariant.Filled, IconSize.Size16, "") { } } + public class TabDesktopMultiple : Icon { public TabDesktopMultiple() : base("TabDesktopMultiple", IconVariant.Filled, IconSize.Size16, "") { } } + public class TabDesktopMultipleAdd : Icon { public TabDesktopMultipleAdd() : base("TabDesktopMultipleAdd", IconVariant.Filled, IconSize.Size16, "") { } } public class TabInPrivate : Icon { public TabInPrivate() : base("TabInPrivate", IconVariant.Filled, IconSize.Size16, "") { } } public class Table : Icon { public Table() : base("Table", IconVariant.Filled, IconSize.Size16, "") { } } public class TableAdd : Icon { public TableAdd() : base("TableAdd", IconVariant.Filled, IconSize.Size16, "") { } } @@ -1157,6 +1165,12 @@ public class TextFontInfo : Icon { public TextFontInfo() : base("TextFontInfo", public class TextFontSize : Icon { public TextFontSize() : base("TextFontSize", IconVariant.Filled, IconSize.Size16, "") { } } public class TextGrammarLightning : Icon { public TextGrammarLightning() : base("TextGrammarLightning", IconVariant.Filled, IconSize.Size16, "") { } } public class TextGrammarWand : Icon { public TextGrammarWand() : base("TextGrammarWand", IconVariant.Filled, IconSize.Size16, "") { } } + public class TextHeader1Lines : Icon { public TextHeader1Lines() : base("TextHeader1Lines", IconVariant.Filled, IconSize.Size16, "") { } } + public class TextHeader1LinesCaret : Icon { public TextHeader1LinesCaret() : base("TextHeader1LinesCaret", IconVariant.Filled, IconSize.Size16, "") { } } + public class TextHeader2Lines : Icon { public TextHeader2Lines() : base("TextHeader2Lines", IconVariant.Filled, IconSize.Size16, "") { } } + public class TextHeader2LinesCaret : Icon { public TextHeader2LinesCaret() : base("TextHeader2LinesCaret", IconVariant.Filled, IconSize.Size16, "") { } } + public class TextHeader3Lines : Icon { public TextHeader3Lines() : base("TextHeader3Lines", IconVariant.Filled, IconSize.Size16, "") { } } + public class TextHeader3LinesCaret : Icon { public TextHeader3LinesCaret() : base("TextHeader3LinesCaret", IconVariant.Filled, IconSize.Size16, "") { } } public class TextIndentDecrease : Icon { public TextIndentDecrease() : base("TextIndentDecrease", IconVariant.Filled, IconSize.Size16, "") { } } public class TextIndentDecreaseLtr : Icon { public TextIndentDecreaseLtr() : base("TextIndentDecreaseLtr", IconVariant.Filled, IconSize.Size16, "") { } } public class TextIndentDecreaseRtl : Icon { public TextIndentDecreaseRtl() : base("TextIndentDecreaseRtl", IconVariant.Filled, IconSize.Size16, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Filled20.cs b/src/Assets/FluentUI.Icons/Icons/Filled20.cs index 9d09616ef5..8db507e192 100644 --- a/src/Assets/FluentUI.Icons/Icons/Filled20.cs +++ b/src/Assets/FluentUI.Icons/Icons/Filled20.cs @@ -237,7 +237,9 @@ public class BatteryCheckmark : Icon { public BatteryCheckmark() : base("Battery public class BatterySaver : Icon { public BatterySaver() : base("BatterySaver", IconVariant.Filled, IconSize.Size20, "") { } } public class BatteryWarning : Icon { public BatteryWarning() : base("BatteryWarning", IconVariant.Filled, IconSize.Size20, "") { } } public class Beach : Icon { public Beach() : base("Beach", IconVariant.Filled, IconSize.Size20, "") { } } - public class Beaker : Icon { public Beaker() : base("Beaker", IconVariant.Filled, IconSize.Size20, "") { } } + public class Beaker : Icon { public Beaker() : base("Beaker", IconVariant.Filled, IconSize.Size20, "") { } } + public class BeakerAdd : Icon { public BeakerAdd() : base("BeakerAdd", IconVariant.Filled, IconSize.Size20, "") { } } + public class BeakerDismiss : Icon { public BeakerDismiss() : base("BeakerDismiss", IconVariant.Filled, IconSize.Size20, "") { } } public class BeakerEdit : Icon { public BeakerEdit() : base("BeakerEdit", IconVariant.Filled, IconSize.Size20, "") { } } public class BeakerOff : Icon { public BeakerOff() : base("BeakerOff", IconVariant.Filled, IconSize.Size20, "") { } } public class BeakerSettings : Icon { public BeakerSettings() : base("BeakerSettings", IconVariant.Filled, IconSize.Size20, "") { } } @@ -729,8 +731,8 @@ public class DesktopKeyboard : Icon { public DesktopKeyboard() : base("DesktopKe public class DesktopMac : Icon { public DesktopMac() : base("DesktopMac", IconVariant.Filled, IconSize.Size20, "") { } } public class DesktopPulse : Icon { public DesktopPulse() : base("DesktopPulse", IconVariant.Filled, IconSize.Size20, "") { } } public class DesktopSignal : Icon { public DesktopSignal() : base("DesktopSignal", IconVariant.Filled, IconSize.Size20, "") { } } - public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Filled, IconSize.Size20, "") { } } - public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Filled, IconSize.Size20, "") { } } + public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Filled, IconSize.Size20, "") { } } + public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Filled, IconSize.Size20, "") { } } public class DesktopSync : Icon { public DesktopSync() : base("DesktopSync", IconVariant.Filled, IconSize.Size20, "") { } } public class DesktopToolbox : Icon { public DesktopToolbox() : base("DesktopToolbox", IconVariant.Filled, IconSize.Size20, "") { } } public class DesktopTower : Icon { public DesktopTower() : base("DesktopTower", IconVariant.Filled, IconSize.Size20, "") { } } @@ -778,6 +780,7 @@ public class DocumentCheckmark : Icon { public DocumentCheckmark() : base("Docum public class DocumentChevronDouble : Icon { public DocumentChevronDouble() : base("DocumentChevronDouble", IconVariant.Filled, IconSize.Size20, "") { } } public class DocumentCopy : Icon { public DocumentCopy() : base("DocumentCopy", IconVariant.Filled, IconSize.Size20, "") { } } public class DocumentCss : Icon { public DocumentCss() : base("DocumentCss", IconVariant.Filled, IconSize.Size20, "") { } } + public class DocumentCube : Icon { public DocumentCube() : base("DocumentCube", IconVariant.Filled, IconSize.Size20, "") { } } public class DocumentData : Icon { public DocumentData() : base("DocumentData", IconVariant.Filled, IconSize.Size20, "") { } } public class DocumentDatabase : Icon { public DocumentDatabase() : base("DocumentDatabase", IconVariant.Filled, IconSize.Size20, "") { } } public class DocumentDataLink : Icon { public DocumentDataLink() : base("DocumentDataLink", IconVariant.Filled, IconSize.Size20, "") { } } @@ -869,6 +872,7 @@ public class DoubleTapSwipeDown : Icon { public DoubleTapSwipeDown() : base("Dou public class DoubleTapSwipeUp : Icon { public DoubleTapSwipeUp() : base("DoubleTapSwipeUp", IconVariant.Filled, IconSize.Size20, "") { } } public class Drafts : Icon { public Drafts() : base("Drafts", IconVariant.Filled, IconSize.Size20, "") { } } public class Drag : Icon { public Drag() : base("Drag", IconVariant.Filled, IconSize.Size20, "") { } } + public class Drawer : Icon { public Drawer() : base("Drawer", IconVariant.Filled, IconSize.Size20, "") { } } public class DrawerAdd : Icon { public DrawerAdd() : base("DrawerAdd", IconVariant.Filled, IconSize.Size20, "") { } } public class DrawerArrowDownload : Icon { public DrawerArrowDownload() : base("DrawerArrowDownload", IconVariant.Filled, IconSize.Size20, "") { } } public class DrawerDismiss : Icon { public DrawerDismiss() : base("DrawerDismiss", IconVariant.Filled, IconSize.Size20, "") { } } @@ -956,6 +960,7 @@ public class FastForward : Icon { public FastForward() : base("FastForward", Ico public class Fax : Icon { public Fax() : base("Fax", IconVariant.Filled, IconSize.Size20, "") { } } public class Feed : Icon { public Feed() : base("Feed", IconVariant.Filled, IconSize.Size20, "") { } } public class Filmstrip : Icon { public Filmstrip() : base("Filmstrip", IconVariant.Filled, IconSize.Size20, "") { } } + public class FilmstripImage : Icon { public FilmstripImage() : base("FilmstripImage", IconVariant.Filled, IconSize.Size20, "") { } } public class FilmstripPlay : Icon { public FilmstripPlay() : base("FilmstripPlay", IconVariant.Filled, IconSize.Size20, "") { } } public class FilmstripSplit : Icon { public FilmstripSplit() : base("FilmstripSplit", IconVariant.Filled, IconSize.Size20, "") { } } public class Filter : Icon { public Filter() : base("Filter", IconVariant.Filled, IconSize.Size20, "") { } } @@ -1375,11 +1380,16 @@ public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Fil public class NotepadEdit : Icon { public NotepadEdit() : base("NotepadEdit", IconVariant.Filled, IconSize.Size20, "") { } } public class NotepadPerson : Icon { public NotepadPerson() : base("NotepadPerson", IconVariant.Filled, IconSize.Size20, "") { } } public class NotePin : Icon { public NotePin() : base("NotePin", IconVariant.Filled, IconSize.Size20, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Filled, IconSize.Size20, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Filled, IconSize.Size20, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Filled, IconSize.Size20, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Filled, IconSize.Size20, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberRow : Icon { public NumberRow() : base("NumberRow", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Filled, IconSize.Size20, "") { } } public class NumberSymbolDismiss : Icon { public NumberSymbolDismiss() : base("NumberSymbolDismiss", IconVariant.Filled, IconSize.Size20, "") { } } @@ -1837,6 +1847,7 @@ public class SquareEraser : Icon { public SquareEraser() : base("SquareEraser", public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Filled, IconSize.Size20, "") { } } public class SquareHintApps : Icon { public SquareHintApps() : base("SquareHintApps", IconVariant.Filled, IconSize.Size20, "") { } } public class SquareHintArrowBack : Icon { public SquareHintArrowBack() : base("SquareHintArrowBack", IconVariant.Filled, IconSize.Size20, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Filled, IconSize.Size20, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Filled, IconSize.Size20, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Filled, IconSize.Size20, "") { } } public class SquareShadow : Icon { public SquareShadow() : base("SquareShadow", IconVariant.Filled, IconSize.Size20, "") { } } @@ -1979,7 +1990,9 @@ public class TagSearch : Icon { public TagSearch() : base("TagSearch", IconVaria public class TapDouble : Icon { public TapDouble() : base("TapDouble", IconVariant.Filled, IconSize.Size20, "") { } } public class TapSingle : Icon { public TapSingle() : base("TapSingle", IconVariant.Filled, IconSize.Size20, "") { } } public class Target : Icon { public Target() : base("Target", IconVariant.Filled, IconSize.Size20, "") { } } + public class TargetAdd : Icon { public TargetAdd() : base("TargetAdd", IconVariant.Filled, IconSize.Size20, "") { } } public class TargetArrow : Icon { public TargetArrow() : base("TargetArrow", IconVariant.Filled, IconSize.Size20, "") { } } + public class TargetDismiss : Icon { public TargetDismiss() : base("TargetDismiss", IconVariant.Filled, IconSize.Size20, "") { } } public class TargetEdit : Icon { public TargetEdit() : base("TargetEdit", IconVariant.Filled, IconSize.Size20, "") { } } public class TaskListAdd : Icon { public TaskListAdd() : base("TaskListAdd", IconVariant.Filled, IconSize.Size20, "") { } } public class TaskListLtr : Icon { public TaskListLtr() : base("TaskListLtr", IconVariant.Filled, IconSize.Size20, "") { } } @@ -2164,8 +2177,14 @@ public class TextGrammarSettings : Icon { public TextGrammarSettings() : base("T public class TextGrammarWand : Icon { public TextGrammarWand() : base("TextGrammarWand", IconVariant.Filled, IconSize.Size20, "") { } } public class TextHanging : Icon { public TextHanging() : base("TextHanging", IconVariant.Filled, IconSize.Size20, "") { } } public class TextHeader1 : Icon { public TextHeader1() : base("TextHeader1", IconVariant.Filled, IconSize.Size20, "") { } } + public class TextHeader1Lines : Icon { public TextHeader1Lines() : base("TextHeader1Lines", IconVariant.Filled, IconSize.Size20, "") { } } + public class TextHeader1LinesCaret : Icon { public TextHeader1LinesCaret() : base("TextHeader1LinesCaret", IconVariant.Filled, IconSize.Size20, "") { } } public class TextHeader2 : Icon { public TextHeader2() : base("TextHeader2", IconVariant.Filled, IconSize.Size20, "") { } } + public class TextHeader2Lines : Icon { public TextHeader2Lines() : base("TextHeader2Lines", IconVariant.Filled, IconSize.Size20, "") { } } + public class TextHeader2LinesCaret : Icon { public TextHeader2LinesCaret() : base("TextHeader2LinesCaret", IconVariant.Filled, IconSize.Size20, "") { } } public class TextHeader3 : Icon { public TextHeader3() : base("TextHeader3", IconVariant.Filled, IconSize.Size20, "") { } } + public class TextHeader3Lines : Icon { public TextHeader3Lines() : base("TextHeader3Lines", IconVariant.Filled, IconSize.Size20, "") { } } + public class TextHeader3LinesCaret : Icon { public TextHeader3LinesCaret() : base("TextHeader3LinesCaret", IconVariant.Filled, IconSize.Size20, "") { } } public class TextIndentDecrease : Icon { public TextIndentDecrease() : base("TextIndentDecrease", IconVariant.Filled, IconSize.Size20, "") { } } public class TextIndentDecreaseLtr : Icon { public TextIndentDecreaseLtr() : base("TextIndentDecreaseLtr", IconVariant.Filled, IconSize.Size20, "") { } } public class TextIndentDecreaseLtr90 : Icon { public TextIndentDecreaseLtr90() : base("TextIndentDecreaseLtr90", IconVariant.Filled, IconSize.Size20, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Filled24.cs b/src/Assets/FluentUI.Icons/Icons/Filled24.cs index a686bc7ceb..bdb63ee518 100644 --- a/src/Assets/FluentUI.Icons/Icons/Filled24.cs +++ b/src/Assets/FluentUI.Icons/Icons/Filled24.cs @@ -199,6 +199,8 @@ public class BatterySaver : Icon { public BatterySaver() : base("BatterySaver", public class BatteryWarning : Icon { public BatteryWarning() : base("BatteryWarning", IconVariant.Filled, IconSize.Size24, "") { } } public class Beach : Icon { public Beach() : base("Beach", IconVariant.Filled, IconSize.Size24, "") { } } public class Beaker : Icon { public Beaker() : base("Beaker", IconVariant.Filled, IconSize.Size24, "") { } } + public class BeakerAdd : Icon { public BeakerAdd() : base("BeakerAdd", IconVariant.Filled, IconSize.Size24, "") { } } + public class BeakerDismiss : Icon { public BeakerDismiss() : base("BeakerDismiss", IconVariant.Filled, IconSize.Size24, "") { } } public class BeakerEdit : Icon { public BeakerEdit() : base("BeakerEdit", IconVariant.Filled, IconSize.Size24, "") { } } public class Bed : Icon { public Bed() : base("Bed", IconVariant.Filled, IconSize.Size24, "") { } } public class BinderTriangle : Icon { public BinderTriangle() : base("BinderTriangle", IconVariant.Filled, IconSize.Size24, "") { } } @@ -623,8 +625,8 @@ public class DesktopKeyboard : Icon { public DesktopKeyboard() : base("DesktopKe public class DesktopMac : Icon { public DesktopMac() : base("DesktopMac", IconVariant.Filled, IconSize.Size24, "") { } } public class DesktopPulse : Icon { public DesktopPulse() : base("DesktopPulse", IconVariant.Filled, IconSize.Size24, "") { } } public class DesktopSignal : Icon { public DesktopSignal() : base("DesktopSignal", IconVariant.Filled, IconSize.Size24, "") { } } - public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Filled, IconSize.Size24, "") { } } - public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Filled, IconSize.Size24, "") { } } + public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Filled, IconSize.Size24, "") { } } + public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Filled, IconSize.Size24, "") { } } public class DesktopSync : Icon { public DesktopSync() : base("DesktopSync", IconVariant.Filled, IconSize.Size24, "") { } } public class DesktopToolbox : Icon { public DesktopToolbox() : base("DesktopToolbox", IconVariant.Filled, IconSize.Size24, "") { } } public class DesktopTower : Icon { public DesktopTower() : base("DesktopTower", IconVariant.Filled, IconSize.Size24, "") { } } @@ -667,6 +669,7 @@ public class DocumentCheckmark : Icon { public DocumentCheckmark() : base("Docum public class DocumentChevronDouble : Icon { public DocumentChevronDouble() : base("DocumentChevronDouble", IconVariant.Filled, IconSize.Size24, "") { } } public class DocumentCopy : Icon { public DocumentCopy() : base("DocumentCopy", IconVariant.Filled, IconSize.Size24, "") { } } public class DocumentCss : Icon { public DocumentCss() : base("DocumentCss", IconVariant.Filled, IconSize.Size24, "") { } } + public class DocumentCube : Icon { public DocumentCube() : base("DocumentCube", IconVariant.Filled, IconSize.Size24, "") { } } public class DocumentData : Icon { public DocumentData() : base("DocumentData", IconVariant.Filled, IconSize.Size24, "") { } } public class DocumentDatabase : Icon { public DocumentDatabase() : base("DocumentDatabase", IconVariant.Filled, IconSize.Size24, "") { } } public class DocumentDataLink : Icon { public DocumentDataLink() : base("DocumentDataLink", IconVariant.Filled, IconSize.Size24, "") { } } @@ -748,6 +751,7 @@ public class DoubleTapSwipeDown : Icon { public DoubleTapSwipeDown() : base("Dou public class DoubleTapSwipeUp : Icon { public DoubleTapSwipeUp() : base("DoubleTapSwipeUp", IconVariant.Filled, IconSize.Size24, "") { } } public class Drafts : Icon { public Drafts() : base("Drafts", IconVariant.Filled, IconSize.Size24, "") { } } public class Drag : Icon { public Drag() : base("Drag", IconVariant.Filled, IconSize.Size24, "") { } } + public class Drawer : Icon { public Drawer() : base("Drawer", IconVariant.Filled, IconSize.Size24, "") { } } public class DrawerAdd : Icon { public DrawerAdd() : base("DrawerAdd", IconVariant.Filled, IconSize.Size24, "") { } } public class DrawerArrowDownload : Icon { public DrawerArrowDownload() : base("DrawerArrowDownload", IconVariant.Filled, IconSize.Size24, "") { } } public class DrawerDismiss : Icon { public DrawerDismiss() : base("DrawerDismiss", IconVariant.Filled, IconSize.Size24, "") { } } @@ -831,6 +835,7 @@ public class FastAcceleration : Icon { public FastAcceleration() : base("FastAcc public class FastForward : Icon { public FastForward() : base("FastForward", IconVariant.Filled, IconSize.Size24, "") { } } public class Feed : Icon { public Feed() : base("Feed", IconVariant.Filled, IconSize.Size24, "") { } } public class Filmstrip : Icon { public Filmstrip() : base("Filmstrip", IconVariant.Filled, IconSize.Size24, "") { } } + public class FilmstripImage : Icon { public FilmstripImage() : base("FilmstripImage", IconVariant.Filled, IconSize.Size24, "") { } } public class FilmstripPlay : Icon { public FilmstripPlay() : base("FilmstripPlay", IconVariant.Filled, IconSize.Size24, "") { } } public class FilmstripSplit : Icon { public FilmstripSplit() : base("FilmstripSplit", IconVariant.Filled, IconSize.Size24, "") { } } public class Filter : Icon { public Filter() : base("Filter", IconVariant.Filled, IconSize.Size24, "") { } } @@ -1195,11 +1200,16 @@ public class NotebookSync : Icon { public NotebookSync() : base("NotebookSync", public class NoteEdit : Icon { public NoteEdit() : base("NoteEdit", IconVariant.Filled, IconSize.Size24, "") { } } public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Filled, IconSize.Size24, "") { } } public class NotepadPerson : Icon { public NotepadPerson() : base("NotepadPerson", IconVariant.Filled, IconSize.Size24, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Filled, IconSize.Size24, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Filled, IconSize.Size24, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Filled, IconSize.Size24, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Filled, IconSize.Size24, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberRow : Icon { public NumberRow() : base("NumberRow", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Filled, IconSize.Size24, "") { } } public class NumberSymbolDismiss : Icon { public NumberSymbolDismiss() : base("NumberSymbolDismiss", IconVariant.Filled, IconSize.Size24, "") { } } @@ -1601,6 +1611,7 @@ public class Square : Icon { public Square() : base("Square", IconVariant.Filled public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Filled, IconSize.Size24, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Filled, IconSize.Size24, "") { } } public class SquareHintApps : Icon { public SquareHintApps() : base("SquareHintApps", IconVariant.Filled, IconSize.Size24, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Filled, IconSize.Size24, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Filled, IconSize.Size24, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Filled, IconSize.Size24, "") { } } public class Stack : Icon { public Stack() : base("Stack", IconVariant.Filled, IconSize.Size24, "") { } } @@ -1720,7 +1731,9 @@ public class TagSearch : Icon { public TagSearch() : base("TagSearch", IconVaria public class TapDouble : Icon { public TapDouble() : base("TapDouble", IconVariant.Filled, IconSize.Size24, "") { } } public class TapSingle : Icon { public TapSingle() : base("TapSingle", IconVariant.Filled, IconSize.Size24, "") { } } public class Target : Icon { public Target() : base("Target", IconVariant.Filled, IconSize.Size24, "") { } } + public class TargetAdd : Icon { public TargetAdd() : base("TargetAdd", IconVariant.Filled, IconSize.Size24, "") { } } public class TargetArrow : Icon { public TargetArrow() : base("TargetArrow", IconVariant.Filled, IconSize.Size24, "") { } } + public class TargetDismiss : Icon { public TargetDismiss() : base("TargetDismiss", IconVariant.Filled, IconSize.Size24, "") { } } public class TargetEdit : Icon { public TargetEdit() : base("TargetEdit", IconVariant.Filled, IconSize.Size24, "") { } } public class TaskListAdd : Icon { public TaskListAdd() : base("TaskListAdd", IconVariant.Filled, IconSize.Size24, "") { } } public class TaskListLtr : Icon { public TaskListLtr() : base("TaskListLtr", IconVariant.Filled, IconSize.Size24, "") { } } @@ -1892,8 +1905,14 @@ public class TextGrammarSettings : Icon { public TextGrammarSettings() : base("T public class TextGrammarWand : Icon { public TextGrammarWand() : base("TextGrammarWand", IconVariant.Filled, IconSize.Size24, "") { } } public class TextHanging : Icon { public TextHanging() : base("TextHanging", IconVariant.Filled, IconSize.Size24, "") { } } public class TextHeader1 : Icon { public TextHeader1() : base("TextHeader1", IconVariant.Filled, IconSize.Size24, "") { } } + public class TextHeader1Lines : Icon { public TextHeader1Lines() : base("TextHeader1Lines", IconVariant.Filled, IconSize.Size24, "") { } } + public class TextHeader1LinesCaret : Icon { public TextHeader1LinesCaret() : base("TextHeader1LinesCaret", IconVariant.Filled, IconSize.Size24, "") { } } public class TextHeader2 : Icon { public TextHeader2() : base("TextHeader2", IconVariant.Filled, IconSize.Size24, "") { } } + public class TextHeader2Lines : Icon { public TextHeader2Lines() : base("TextHeader2Lines", IconVariant.Filled, IconSize.Size24, "") { } } + public class TextHeader2LinesCaret : Icon { public TextHeader2LinesCaret() : base("TextHeader2LinesCaret", IconVariant.Filled, IconSize.Size24, "") { } } public class TextHeader3 : Icon { public TextHeader3() : base("TextHeader3", IconVariant.Filled, IconSize.Size24, "") { } } + public class TextHeader3Lines : Icon { public TextHeader3Lines() : base("TextHeader3Lines", IconVariant.Filled, IconSize.Size24, "") { } } + public class TextHeader3LinesCaret : Icon { public TextHeader3LinesCaret() : base("TextHeader3LinesCaret", IconVariant.Filled, IconSize.Size24, "") { } } public class TextIndentDecrease : Icon { public TextIndentDecrease() : base("TextIndentDecrease", IconVariant.Filled, IconSize.Size24, "") { } } public class TextIndentDecreaseLtr : Icon { public TextIndentDecreaseLtr() : base("TextIndentDecreaseLtr", IconVariant.Filled, IconSize.Size24, "") { } } public class TextIndentDecreaseLtr90 : Icon { public TextIndentDecreaseLtr90() : base("TextIndentDecreaseLtr90", IconVariant.Filled, IconSize.Size24, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Filled28.cs b/src/Assets/FluentUI.Icons/Icons/Filled28.cs index 10ece9fa0e..56129de562 100644 --- a/src/Assets/FluentUI.Icons/Icons/Filled28.cs +++ b/src/Assets/FluentUI.Icons/Icons/Filled28.cs @@ -371,11 +371,16 @@ public class Next : Icon { public Next() : base("Next", IconVariant.Filled, Icon public class Note : Icon { public Note() : base("Note", IconVariant.Filled, IconSize.Size28, "") { } } public class NoteAdd : Icon { public NoteAdd() : base("NoteAdd", IconVariant.Filled, IconSize.Size28, "") { } } public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Filled, IconSize.Size28, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Filled, IconSize.Size28, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Filled, IconSize.Size28, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Filled, IconSize.Size28, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Filled, IconSize.Size28, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Filled, IconSize.Size28, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Filled, IconSize.Size28, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Filled, IconSize.Size28, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Filled, IconSize.Size28, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Filled, IconSize.Size28, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Filled, IconSize.Size28, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Filled, IconSize.Size28, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Filled, IconSize.Size28, "") { } } public class OpenFolder : Icon { public OpenFolder() : base("OpenFolder", IconVariant.Filled, IconSize.Size28, "") { } } @@ -517,6 +522,7 @@ public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical public class Square : Icon { public Square() : base("Square", IconVariant.Filled, IconSize.Size28, "") { } } public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Filled, IconSize.Size28, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Filled, IconSize.Size28, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Filled, IconSize.Size28, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Filled, IconSize.Size28, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Filled, IconSize.Size28, "") { } } public class Star : Icon { public Star() : base("Star", IconVariant.Filled, IconSize.Size28, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Filled32.cs b/src/Assets/FluentUI.Icons/Icons/Filled32.cs index a1dd651dd2..c0e2a6d099 100644 --- a/src/Assets/FluentUI.Icons/Icons/Filled32.cs +++ b/src/Assets/FluentUI.Icons/Icons/Filled32.cs @@ -289,11 +289,16 @@ public class Multiplier5x : Icon { public Multiplier5x() : base("Multiplier5x", public class Next : Icon { public Next() : base("Next", IconVariant.Filled, IconSize.Size32, "") { } } public class Notebook : Icon { public Notebook() : base("Notebook", IconVariant.Filled, IconSize.Size32, "") { } } public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Filled, IconSize.Size32, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Filled, IconSize.Size32, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Filled, IconSize.Size32, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Filled, IconSize.Size32, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Filled, IconSize.Size32, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Filled, IconSize.Size32, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Filled, IconSize.Size32, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Filled, IconSize.Size32, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Filled, IconSize.Size32, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Filled, IconSize.Size32, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Filled, IconSize.Size32, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Filled, IconSize.Size32, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Filled, IconSize.Size32, "") { } } public class Organization : Icon { public Organization() : base("Organization", IconVariant.Filled, IconSize.Size32, "") { } } @@ -393,6 +398,7 @@ public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical public class Square : Icon { public Square() : base("Square", IconVariant.Filled, IconSize.Size32, "") { } } public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Filled, IconSize.Size32, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Filled, IconSize.Size32, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Filled, IconSize.Size32, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Filled, IconSize.Size32, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Filled, IconSize.Size32, "") { } } public class Stack : Icon { public Stack() : base("Stack", IconVariant.Filled, IconSize.Size32, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Filled48.cs b/src/Assets/FluentUI.Icons/Icons/Filled48.cs index 59468f7d4f..9bd97ebe46 100644 --- a/src/Assets/FluentUI.Icons/Icons/Filled48.cs +++ b/src/Assets/FluentUI.Icons/Icons/Filled48.cs @@ -295,11 +295,16 @@ public class Multiplier5x : Icon { public Multiplier5x() : base("Multiplier5x", public class Next : Icon { public Next() : base("Next", IconVariant.Filled, IconSize.Size48, "") { } } public class Note : Icon { public Note() : base("Note", IconVariant.Filled, IconSize.Size48, "") { } } public class NoteAdd : Icon { public NoteAdd() : base("NoteAdd", IconVariant.Filled, IconSize.Size48, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Filled, IconSize.Size48, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Filled, IconSize.Size48, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Filled, IconSize.Size48, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Filled, IconSize.Size48, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Filled, IconSize.Size48, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Filled, IconSize.Size48, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Filled, IconSize.Size48, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Filled, IconSize.Size48, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Filled, IconSize.Size48, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Filled, IconSize.Size48, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Filled, IconSize.Size48, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Filled, IconSize.Size48, "") { } } public class OpenFolder : Icon { public OpenFolder() : base("OpenFolder", IconVariant.Filled, IconSize.Size48, "") { } } @@ -397,6 +402,7 @@ public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical public class Square : Icon { public Square() : base("Square", IconVariant.Filled, IconSize.Size48, "") { } } public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Filled, IconSize.Size48, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Filled, IconSize.Size48, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Filled, IconSize.Size48, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Filled, IconSize.Size48, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Filled, IconSize.Size48, "") { } } public class Star : Icon { public Star() : base("Star", IconVariant.Filled, IconSize.Size48, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Regular12.cs b/src/Assets/FluentUI.Icons/Icons/Regular12.cs index eb5f449b5b..2765886242 100644 --- a/src/Assets/FluentUI.Icons/Icons/Regular12.cs +++ b/src/Assets/FluentUI.Icons/Icons/Regular12.cs @@ -143,11 +143,13 @@ public class Ribbon : Icon { public Ribbon() : base("Ribbon", IconVariant.Regula public class RibbonOff : Icon { public RibbonOff() : base("RibbonOff", IconVariant.Regular, IconSize.Size12, "") { } } public class ScanDash : Icon { public ScanDash() : base("ScanDash", IconVariant.Regular, IconSize.Size12, "") { } } public class Search : Icon { public Search() : base("Search", IconVariant.Regular, IconSize.Size12, "") { } } + public class Server : Icon { public Server() : base("Server", IconVariant.Regular, IconSize.Size12, "") { } } public class Shield : Icon { public Shield() : base("Shield", IconVariant.Regular, IconSize.Size12, "") { } } public class SlashForward : Icon { public SlashForward() : base("SlashForward", IconVariant.Regular, IconSize.Size12, "") { } } public class SplitHorizontal : Icon { public SplitHorizontal() : base("SplitHorizontal", IconVariant.Regular, IconSize.Size12, "") { } } public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical", IconVariant.Regular, IconSize.Size12, "") { } } public class Square : Icon { public Square() : base("Square", IconVariant.Regular, IconSize.Size12, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Regular, IconSize.Size12, "") { } } public class SquareShadow : Icon { public SquareShadow() : base("SquareShadow", IconVariant.Regular, IconSize.Size12, "") { } } public class Star : Icon { public Star() : base("Star", IconVariant.Regular, IconSize.Size12, "") { } } public class StarHalf : Icon { public StarHalf() : base("StarHalf", IconVariant.Regular, IconSize.Size12, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Regular16.cs b/src/Assets/FluentUI.Icons/Icons/Regular16.cs index 5b67919a8e..f14053222f 100644 --- a/src/Assets/FluentUI.Icons/Icons/Regular16.cs +++ b/src/Assets/FluentUI.Icons/Icons/Regular16.cs @@ -495,9 +495,9 @@ public class Dumbbell : Icon { public Dumbbell() : base("Dumbbell", IconVariant. public class Earth : Icon { public Earth() : base("Earth", IconVariant.Regular, IconSize.Size16, "") { } } public class EarthLeaf : Icon { public EarthLeaf() : base("EarthLeaf", IconVariant.Regular, IconSize.Size16, "") { } } public class Edit : Icon { public Edit() : base("Edit", IconVariant.Regular, IconSize.Size16, "") { } } - public class EditArrowBack : Icon { public EditArrowBack() : base("EditArrowBack", IconVariant.Regular, IconSize.Size16, "") { } } - public class EditOff : Icon { public EditOff() : base("EditOff", IconVariant.Regular, IconSize.Size16, "") { } } - public class EditProhibited : Icon { public EditProhibited() : base("EditProhibited", IconVariant.Regular, IconSize.Size16, "") { } } + public class EditArrowBack : Icon { public EditArrowBack() : base("EditArrowBack", IconVariant.Regular, IconSize.Size16, "") { } } + public class EditOff : Icon { public EditOff() : base("EditOff", IconVariant.Regular, IconSize.Size16, "") { } } + public class EditProhibited : Icon { public EditProhibited() : base("EditProhibited", IconVariant.Regular, IconSize.Size16, "") { } } public class Emoji : Icon { public Emoji() : base("Emoji", IconVariant.Regular, IconSize.Size16, "") { } } public class EmojiAdd : Icon { public EmojiAdd() : base("EmojiAdd", IconVariant.Regular, IconSize.Size16, "") { } } public class EmojiAngry : Icon { public EmojiAngry() : base("EmojiAngry", IconVariant.Regular, IconSize.Size16, "") { } } @@ -758,11 +758,16 @@ public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Reg public class NotepadEdit : Icon { public NotepadEdit() : base("NotepadEdit", IconVariant.Regular, IconSize.Size16, "") { } } public class NotepadPerson : Icon { public NotepadPerson() : base("NotepadPerson", IconVariant.Regular, IconSize.Size16, "") { } } public class NotePin : Icon { public NotePin() : base("NotePin", IconVariant.Regular, IconSize.Size16, "") { } } - public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Regular, IconSize.Size16, "") { } } - public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Regular, IconSize.Size16, "") { } } - public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Regular, IconSize.Size16, "") { } } - public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Regular, IconSize.Size16, "") { } } - public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Regular, IconSize.Size16, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Regular, IconSize.Size16, "") { } } public class NumberRow : Icon { public NumberRow() : base("NumberRow", IconVariant.Regular, IconSize.Size16, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Regular, IconSize.Size16, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Regular, IconSize.Size16, "") { } } @@ -997,6 +1002,7 @@ public class SquareArrowForward : Icon { public SquareArrowForward() : base("Squ public class SquareDismiss : Icon { public SquareDismiss() : base("SquareDismiss", IconVariant.Regular, IconSize.Size16, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Regular, IconSize.Size16, "") { } } public class SquareHintArrowBack : Icon { public SquareHintArrowBack() : base("SquareHintArrowBack", IconVariant.Regular, IconSize.Size16, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Regular, IconSize.Size16, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Regular, IconSize.Size16, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Regular, IconSize.Size16, "") { } } public class Stack : Icon { public Stack() : base("Stack", IconVariant.Regular, IconSize.Size16, "") { } } @@ -1032,6 +1038,8 @@ public class TabDesktop : Icon { public TabDesktop() : base("TabDesktop", IconVa public class TabDesktopArrowClockwise : Icon { public TabDesktopArrowClockwise() : base("TabDesktopArrowClockwise", IconVariant.Regular, IconSize.Size16, "") { } } public class TabDesktopImage : Icon { public TabDesktopImage() : base("TabDesktopImage", IconVariant.Regular, IconSize.Size16, "") { } } public class TabDesktopLink : Icon { public TabDesktopLink() : base("TabDesktopLink", IconVariant.Regular, IconSize.Size16, "") { } } + public class TabDesktopMultiple : Icon { public TabDesktopMultiple() : base("TabDesktopMultiple", IconVariant.Regular, IconSize.Size16, "") { } } + public class TabDesktopMultipleAdd : Icon { public TabDesktopMultipleAdd() : base("TabDesktopMultipleAdd", IconVariant.Regular, IconSize.Size16, "") { } } public class TabInPrivate : Icon { public TabInPrivate() : base("TabInPrivate", IconVariant.Regular, IconSize.Size16, "") { } } public class Table : Icon { public Table() : base("Table", IconVariant.Regular, IconSize.Size16, "") { } } public class TableAdd : Icon { public TableAdd() : base("TableAdd", IconVariant.Regular, IconSize.Size16, "") { } } @@ -1153,6 +1161,12 @@ public class TextFontInfo : Icon { public TextFontInfo() : base("TextFontInfo", public class TextFontSize : Icon { public TextFontSize() : base("TextFontSize", IconVariant.Regular, IconSize.Size16, "") { } } public class TextGrammarLightning : Icon { public TextGrammarLightning() : base("TextGrammarLightning", IconVariant.Regular, IconSize.Size16, "") { } } public class TextGrammarWand : Icon { public TextGrammarWand() : base("TextGrammarWand", IconVariant.Regular, IconSize.Size16, "") { } } + public class TextHeader1Lines : Icon { public TextHeader1Lines() : base("TextHeader1Lines", IconVariant.Regular, IconSize.Size16, "") { } } + public class TextHeader1LinesCaret : Icon { public TextHeader1LinesCaret() : base("TextHeader1LinesCaret", IconVariant.Regular, IconSize.Size16, "") { } } + public class TextHeader2Lines : Icon { public TextHeader2Lines() : base("TextHeader2Lines", IconVariant.Regular, IconSize.Size16, "") { } } + public class TextHeader2LinesCaret : Icon { public TextHeader2LinesCaret() : base("TextHeader2LinesCaret", IconVariant.Regular, IconSize.Size16, "") { } } + public class TextHeader3Lines : Icon { public TextHeader3Lines() : base("TextHeader3Lines", IconVariant.Regular, IconSize.Size16, "") { } } + public class TextHeader3LinesCaret : Icon { public TextHeader3LinesCaret() : base("TextHeader3LinesCaret", IconVariant.Regular, IconSize.Size16, "") { } } public class TextIndentDecrease : Icon { public TextIndentDecrease() : base("TextIndentDecrease", IconVariant.Regular, IconSize.Size16, "") { } } public class TextIndentDecreaseLtr : Icon { public TextIndentDecreaseLtr() : base("TextIndentDecreaseLtr", IconVariant.Regular, IconSize.Size16, "") { } } public class TextIndentDecreaseRtl : Icon { public TextIndentDecreaseRtl() : base("TextIndentDecreaseRtl", IconVariant.Regular, IconSize.Size16, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Regular20.cs b/src/Assets/FluentUI.Icons/Icons/Regular20.cs index 578f49aa96..ef9c52dfcb 100644 --- a/src/Assets/FluentUI.Icons/Icons/Regular20.cs +++ b/src/Assets/FluentUI.Icons/Icons/Regular20.cs @@ -237,7 +237,9 @@ public class BatteryCheckmark : Icon { public BatteryCheckmark() : base("Battery public class BatterySaver : Icon { public BatterySaver() : base("BatterySaver", IconVariant.Regular, IconSize.Size20, "") { } } public class BatteryWarning : Icon { public BatteryWarning() : base("BatteryWarning", IconVariant.Regular, IconSize.Size20, "") { } } public class Beach : Icon { public Beach() : base("Beach", IconVariant.Regular, IconSize.Size20, "") { } } - public class Beaker : Icon { public Beaker() : base("Beaker", IconVariant.Regular, IconSize.Size20, "") { } } + public class Beaker : Icon { public Beaker() : base("Beaker", IconVariant.Regular, IconSize.Size20, "") { } } + public class BeakerAdd : Icon { public BeakerAdd() : base("BeakerAdd", IconVariant.Regular, IconSize.Size20, "") { } } + public class BeakerDismiss : Icon { public BeakerDismiss() : base("BeakerDismiss", IconVariant.Regular, IconSize.Size20, "") { } } public class BeakerEdit : Icon { public BeakerEdit() : base("BeakerEdit", IconVariant.Regular, IconSize.Size20, "") { } } public class BeakerOff : Icon { public BeakerOff() : base("BeakerOff", IconVariant.Regular, IconSize.Size20, "") { } } public class BeakerSettings : Icon { public BeakerSettings() : base("BeakerSettings", IconVariant.Regular, IconSize.Size20, "") { } } @@ -731,8 +733,8 @@ public class DesktopKeyboard : Icon { public DesktopKeyboard() : base("DesktopKe public class DesktopMac : Icon { public DesktopMac() : base("DesktopMac", IconVariant.Regular, IconSize.Size20, "") { } } public class DesktopPulse : Icon { public DesktopPulse() : base("DesktopPulse", IconVariant.Regular, IconSize.Size20, "") { } } public class DesktopSignal : Icon { public DesktopSignal() : base("DesktopSignal", IconVariant.Regular, IconSize.Size20, "") { } } - public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Regular, IconSize.Size20, "") { } } - public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Regular, IconSize.Size20, "") { } } + public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Regular, IconSize.Size20, "") { } } + public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Regular, IconSize.Size20, "") { } } public class DesktopSync : Icon { public DesktopSync() : base("DesktopSync", IconVariant.Regular, IconSize.Size20, "") { } } public class DesktopToolbox : Icon { public DesktopToolbox() : base("DesktopToolbox", IconVariant.Regular, IconSize.Size20, "") { } } public class DesktopTower : Icon { public DesktopTower() : base("DesktopTower", IconVariant.Regular, IconSize.Size20, "") { } } @@ -780,6 +782,7 @@ public class DocumentCheckmark : Icon { public DocumentCheckmark() : base("Docum public class DocumentChevronDouble : Icon { public DocumentChevronDouble() : base("DocumentChevronDouble", IconVariant.Regular, IconSize.Size20, "") { } } public class DocumentCopy : Icon { public DocumentCopy() : base("DocumentCopy", IconVariant.Regular, IconSize.Size20, "") { } } public class DocumentCss : Icon { public DocumentCss() : base("DocumentCss", IconVariant.Regular, IconSize.Size20, "") { } } + public class DocumentCube : Icon { public DocumentCube() : base("DocumentCube", IconVariant.Regular, IconSize.Size20, "") { } } public class DocumentData : Icon { public DocumentData() : base("DocumentData", IconVariant.Regular, IconSize.Size20, "") { } } public class DocumentDatabase : Icon { public DocumentDatabase() : base("DocumentDatabase", IconVariant.Regular, IconSize.Size20, "") { } } public class DocumentDataLink : Icon { public DocumentDataLink() : base("DocumentDataLink", IconVariant.Regular, IconSize.Size20, "") { } } @@ -871,6 +874,7 @@ public class DoubleTapSwipeDown : Icon { public DoubleTapSwipeDown() : base("Dou public class DoubleTapSwipeUp : Icon { public DoubleTapSwipeUp() : base("DoubleTapSwipeUp", IconVariant.Regular, IconSize.Size20, "") { } } public class Drafts : Icon { public Drafts() : base("Drafts", IconVariant.Regular, IconSize.Size20, "") { } } public class Drag : Icon { public Drag() : base("Drag", IconVariant.Regular, IconSize.Size20, "") { } } + public class Drawer : Icon { public Drawer() : base("Drawer", IconVariant.Regular, IconSize.Size20, "") { } } public class DrawerAdd : Icon { public DrawerAdd() : base("DrawerAdd", IconVariant.Regular, IconSize.Size20, "") { } } public class DrawerArrowDownload : Icon { public DrawerArrowDownload() : base("DrawerArrowDownload", IconVariant.Regular, IconSize.Size20, "") { } } public class DrawerDismiss : Icon { public DrawerDismiss() : base("DrawerDismiss", IconVariant.Regular, IconSize.Size20, "") { } } @@ -958,6 +962,7 @@ public class FastForward : Icon { public FastForward() : base("FastForward", Ico public class Fax : Icon { public Fax() : base("Fax", IconVariant.Regular, IconSize.Size20, "") { } } public class Feed : Icon { public Feed() : base("Feed", IconVariant.Regular, IconSize.Size20, "") { } } public class Filmstrip : Icon { public Filmstrip() : base("Filmstrip", IconVariant.Regular, IconSize.Size20, "") { } } + public class FilmstripImage : Icon { public FilmstripImage() : base("FilmstripImage", IconVariant.Regular, IconSize.Size20, "") { } } public class FilmstripPlay : Icon { public FilmstripPlay() : base("FilmstripPlay", IconVariant.Regular, IconSize.Size20, "") { } } public class FilmstripSplit : Icon { public FilmstripSplit() : base("FilmstripSplit", IconVariant.Regular, IconSize.Size20, "") { } } public class Filter : Icon { public Filter() : base("Filter", IconVariant.Regular, IconSize.Size20, "") { } } @@ -1371,11 +1376,16 @@ public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Reg public class NotepadEdit : Icon { public NotepadEdit() : base("NotepadEdit", IconVariant.Regular, IconSize.Size20, "") { } } public class NotepadPerson : Icon { public NotepadPerson() : base("NotepadPerson", IconVariant.Regular, IconSize.Size20, "") { } } public class NotePin : Icon { public NotePin() : base("NotePin", IconVariant.Regular, IconSize.Size20, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Regular, IconSize.Size20, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Regular, IconSize.Size20, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Regular, IconSize.Size20, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Regular, IconSize.Size20, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberRow : Icon { public NumberRow() : base("NumberRow", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Regular, IconSize.Size20, "") { } } public class NumberSymbolDismiss : Icon { public NumberSymbolDismiss() : base("NumberSymbolDismiss", IconVariant.Regular, IconSize.Size20, "") { } } @@ -1835,6 +1845,7 @@ public class SquareEraser : Icon { public SquareEraser() : base("SquareEraser", public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Regular, IconSize.Size20, "") { } } public class SquareHintApps : Icon { public SquareHintApps() : base("SquareHintApps", IconVariant.Regular, IconSize.Size20, "") { } } public class SquareHintArrowBack : Icon { public SquareHintArrowBack() : base("SquareHintArrowBack", IconVariant.Regular, IconSize.Size20, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Regular, IconSize.Size20, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Regular, IconSize.Size20, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Regular, IconSize.Size20, "") { } } public class SquareShadow : Icon { public SquareShadow() : base("SquareShadow", IconVariant.Regular, IconSize.Size20, "") { } } @@ -1976,7 +1987,9 @@ public class TagSearch : Icon { public TagSearch() : base("TagSearch", IconVaria public class TapDouble : Icon { public TapDouble() : base("TapDouble", IconVariant.Regular, IconSize.Size20, "") { } } public class TapSingle : Icon { public TapSingle() : base("TapSingle", IconVariant.Regular, IconSize.Size20, "") { } } public class Target : Icon { public Target() : base("Target", IconVariant.Regular, IconSize.Size20, "") { } } + public class TargetAdd : Icon { public TargetAdd() : base("TargetAdd", IconVariant.Regular, IconSize.Size20, "") { } } public class TargetArrow : Icon { public TargetArrow() : base("TargetArrow", IconVariant.Regular, IconSize.Size20, "") { } } + public class TargetDismiss : Icon { public TargetDismiss() : base("TargetDismiss", IconVariant.Regular, IconSize.Size20, "") { } } public class TargetEdit : Icon { public TargetEdit() : base("TargetEdit", IconVariant.Regular, IconSize.Size20, "") { } } public class TaskListAdd : Icon { public TaskListAdd() : base("TaskListAdd", IconVariant.Regular, IconSize.Size20, "") { } } public class TaskListLtr : Icon { public TaskListLtr() : base("TaskListLtr", IconVariant.Regular, IconSize.Size20, "") { } } @@ -2160,8 +2173,14 @@ public class TextGrammarSettings : Icon { public TextGrammarSettings() : base("T public class TextGrammarWand : Icon { public TextGrammarWand() : base("TextGrammarWand", IconVariant.Regular, IconSize.Size20, "") { } } public class TextHanging : Icon { public TextHanging() : base("TextHanging", IconVariant.Regular, IconSize.Size20, "") { } } public class TextHeader1 : Icon { public TextHeader1() : base("TextHeader1", IconVariant.Regular, IconSize.Size20, "") { } } + public class TextHeader1Lines : Icon { public TextHeader1Lines() : base("TextHeader1Lines", IconVariant.Regular, IconSize.Size20, "") { } } + public class TextHeader1LinesCaret : Icon { public TextHeader1LinesCaret() : base("TextHeader1LinesCaret", IconVariant.Regular, IconSize.Size20, "") { } } public class TextHeader2 : Icon { public TextHeader2() : base("TextHeader2", IconVariant.Regular, IconSize.Size20, "") { } } + public class TextHeader2Lines : Icon { public TextHeader2Lines() : base("TextHeader2Lines", IconVariant.Regular, IconSize.Size20, "") { } } + public class TextHeader2LinesCaret : Icon { public TextHeader2LinesCaret() : base("TextHeader2LinesCaret", IconVariant.Regular, IconSize.Size20, "") { } } public class TextHeader3 : Icon { public TextHeader3() : base("TextHeader3", IconVariant.Regular, IconSize.Size20, "") { } } + public class TextHeader3Lines : Icon { public TextHeader3Lines() : base("TextHeader3Lines", IconVariant.Regular, IconSize.Size20, "") { } } + public class TextHeader3LinesCaret : Icon { public TextHeader3LinesCaret() : base("TextHeader3LinesCaret", IconVariant.Regular, IconSize.Size20, "") { } } public class TextIndentDecrease : Icon { public TextIndentDecrease() : base("TextIndentDecrease", IconVariant.Regular, IconSize.Size20, "") { } } public class TextIndentDecreaseLtr : Icon { public TextIndentDecreaseLtr() : base("TextIndentDecreaseLtr", IconVariant.Regular, IconSize.Size20, "") { } } public class TextIndentDecreaseLtr90 : Icon { public TextIndentDecreaseLtr90() : base("TextIndentDecreaseLtr90", IconVariant.Regular, IconSize.Size20, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Regular24.cs b/src/Assets/FluentUI.Icons/Icons/Regular24.cs index ce1c8a6712..abd6e7e596 100644 --- a/src/Assets/FluentUI.Icons/Icons/Regular24.cs +++ b/src/Assets/FluentUI.Icons/Icons/Regular24.cs @@ -199,6 +199,8 @@ public class BatterySaver : Icon { public BatterySaver() : base("BatterySaver", public class BatteryWarning : Icon { public BatteryWarning() : base("BatteryWarning", IconVariant.Regular, IconSize.Size24, "") { } } public class Beach : Icon { public Beach() : base("Beach", IconVariant.Regular, IconSize.Size24, "") { } } public class Beaker : Icon { public Beaker() : base("Beaker", IconVariant.Regular, IconSize.Size24, "") { } } + public class BeakerAdd : Icon { public BeakerAdd() : base("BeakerAdd", IconVariant.Regular, IconSize.Size24, "") { } } + public class BeakerDismiss : Icon { public BeakerDismiss() : base("BeakerDismiss", IconVariant.Regular, IconSize.Size24, "") { } } public class BeakerEdit : Icon { public BeakerEdit() : base("BeakerEdit", IconVariant.Regular, IconSize.Size24, "") { } } public class Bed : Icon { public Bed() : base("Bed", IconVariant.Regular, IconSize.Size24, "") { } } public class BinderTriangle : Icon { public BinderTriangle() : base("BinderTriangle", IconVariant.Regular, IconSize.Size24, "") { } } @@ -626,8 +628,8 @@ public class DesktopKeyboard : Icon { public DesktopKeyboard() : base("DesktopKe public class DesktopMac : Icon { public DesktopMac() : base("DesktopMac", IconVariant.Regular, IconSize.Size24, "") { } } public class DesktopPulse : Icon { public DesktopPulse() : base("DesktopPulse", IconVariant.Regular, IconSize.Size24, "") { } } public class DesktopSignal : Icon { public DesktopSignal() : base("DesktopSignal", IconVariant.Regular, IconSize.Size24, "") { } } - public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Regular, IconSize.Size24, "") { } } - public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Regular, IconSize.Size24, "") { } } + public class DesktopSpeaker : Icon { public DesktopSpeaker() : base("DesktopSpeaker", IconVariant.Regular, IconSize.Size24, "") { } } + public class DesktopSpeakerOff : Icon { public DesktopSpeakerOff() : base("DesktopSpeakerOff", IconVariant.Regular, IconSize.Size24, "") { } } public class DesktopSync : Icon { public DesktopSync() : base("DesktopSync", IconVariant.Regular, IconSize.Size24, "") { } } public class DesktopToolbox : Icon { public DesktopToolbox() : base("DesktopToolbox", IconVariant.Regular, IconSize.Size24, "") { } } public class DesktopTower : Icon { public DesktopTower() : base("DesktopTower", IconVariant.Regular, IconSize.Size24, "") { } } @@ -670,6 +672,7 @@ public class DocumentCheckmark : Icon { public DocumentCheckmark() : base("Docum public class DocumentChevronDouble : Icon { public DocumentChevronDouble() : base("DocumentChevronDouble", IconVariant.Regular, IconSize.Size24, "") { } } public class DocumentCopy : Icon { public DocumentCopy() : base("DocumentCopy", IconVariant.Regular, IconSize.Size24, "") { } } public class DocumentCss : Icon { public DocumentCss() : base("DocumentCss", IconVariant.Regular, IconSize.Size24, "") { } } + public class DocumentCube : Icon { public DocumentCube() : base("DocumentCube", IconVariant.Regular, IconSize.Size24, "") { } } public class DocumentData : Icon { public DocumentData() : base("DocumentData", IconVariant.Regular, IconSize.Size24, "") { } } public class DocumentDatabase : Icon { public DocumentDatabase() : base("DocumentDatabase", IconVariant.Regular, IconSize.Size24, "") { } } public class DocumentDataLink : Icon { public DocumentDataLink() : base("DocumentDataLink", IconVariant.Regular, IconSize.Size24, "") { } } @@ -751,6 +754,7 @@ public class DoubleTapSwipeDown : Icon { public DoubleTapSwipeDown() : base("Dou public class DoubleTapSwipeUp : Icon { public DoubleTapSwipeUp() : base("DoubleTapSwipeUp", IconVariant.Regular, IconSize.Size24, "") { } } public class Drafts : Icon { public Drafts() : base("Drafts", IconVariant.Regular, IconSize.Size24, "") { } } public class Drag : Icon { public Drag() : base("Drag", IconVariant.Regular, IconSize.Size24, "") { } } + public class Drawer : Icon { public Drawer() : base("Drawer", IconVariant.Regular, IconSize.Size24, "") { } } public class DrawerAdd : Icon { public DrawerAdd() : base("DrawerAdd", IconVariant.Regular, IconSize.Size24, "") { } } public class DrawerArrowDownload : Icon { public DrawerArrowDownload() : base("DrawerArrowDownload", IconVariant.Regular, IconSize.Size24, "") { } } public class DrawerDismiss : Icon { public DrawerDismiss() : base("DrawerDismiss", IconVariant.Regular, IconSize.Size24, "") { } } @@ -834,6 +838,7 @@ public class FastAcceleration : Icon { public FastAcceleration() : base("FastAcc public class FastForward : Icon { public FastForward() : base("FastForward", IconVariant.Regular, IconSize.Size24, "") { } } public class Feed : Icon { public Feed() : base("Feed", IconVariant.Regular, IconSize.Size24, "") { } } public class Filmstrip : Icon { public Filmstrip() : base("Filmstrip", IconVariant.Regular, IconSize.Size24, "") { } } + public class FilmstripImage : Icon { public FilmstripImage() : base("FilmstripImage", IconVariant.Regular, IconSize.Size24, "") { } } public class FilmstripPlay : Icon { public FilmstripPlay() : base("FilmstripPlay", IconVariant.Regular, IconSize.Size24, "") { } } public class FilmstripSplit : Icon { public FilmstripSplit() : base("FilmstripSplit", IconVariant.Regular, IconSize.Size24, "") { } } public class Filter : Icon { public Filter() : base("Filter", IconVariant.Regular, IconSize.Size24, "") { } } @@ -1192,11 +1197,16 @@ public class NotebookSync : Icon { public NotebookSync() : base("NotebookSync", public class NoteEdit : Icon { public NoteEdit() : base("NoteEdit", IconVariant.Regular, IconSize.Size24, "") { } } public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Regular, IconSize.Size24, "") { } } public class NotepadPerson : Icon { public NotepadPerson() : base("NotepadPerson", IconVariant.Regular, IconSize.Size24, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Regular, IconSize.Size24, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Regular, IconSize.Size24, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Regular, IconSize.Size24, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Regular, IconSize.Size24, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberRow : Icon { public NumberRow() : base("NumberRow", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Regular, IconSize.Size24, "") { } } public class NumberSymbolDismiss : Icon { public NumberSymbolDismiss() : base("NumberSymbolDismiss", IconVariant.Regular, IconSize.Size24, "") { } } @@ -1600,6 +1610,7 @@ public class Square : Icon { public Square() : base("Square", IconVariant.Regula public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Regular, IconSize.Size24, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Regular, IconSize.Size24, "") { } } public class SquareHintApps : Icon { public SquareHintApps() : base("SquareHintApps", IconVariant.Regular, IconSize.Size24, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Regular, IconSize.Size24, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Regular, IconSize.Size24, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Regular, IconSize.Size24, "") { } } public class Stack : Icon { public Stack() : base("Stack", IconVariant.Regular, IconSize.Size24, "") { } } @@ -1718,7 +1729,9 @@ public class TagSearch : Icon { public TagSearch() : base("TagSearch", IconVaria public class TapDouble : Icon { public TapDouble() : base("TapDouble", IconVariant.Regular, IconSize.Size24, "") { } } public class TapSingle : Icon { public TapSingle() : base("TapSingle", IconVariant.Regular, IconSize.Size24, "") { } } public class Target : Icon { public Target() : base("Target", IconVariant.Regular, IconSize.Size24, "") { } } + public class TargetAdd : Icon { public TargetAdd() : base("TargetAdd", IconVariant.Regular, IconSize.Size24, "") { } } public class TargetArrow : Icon { public TargetArrow() : base("TargetArrow", IconVariant.Regular, IconSize.Size24, "") { } } + public class TargetDismiss : Icon { public TargetDismiss() : base("TargetDismiss", IconVariant.Regular, IconSize.Size24, "") { } } public class TargetEdit : Icon { public TargetEdit() : base("TargetEdit", IconVariant.Regular, IconSize.Size24, "") { } } public class TaskListAdd : Icon { public TaskListAdd() : base("TaskListAdd", IconVariant.Regular, IconSize.Size24, "") { } } public class TaskListLtr : Icon { public TaskListLtr() : base("TaskListLtr", IconVariant.Regular, IconSize.Size24, "") { } } @@ -1889,8 +1902,14 @@ public class TextGrammarSettings : Icon { public TextGrammarSettings() : base("T public class TextGrammarWand : Icon { public TextGrammarWand() : base("TextGrammarWand", IconVariant.Regular, IconSize.Size24, "") { } } public class TextHanging : Icon { public TextHanging() : base("TextHanging", IconVariant.Regular, IconSize.Size24, "") { } } public class TextHeader1 : Icon { public TextHeader1() : base("TextHeader1", IconVariant.Regular, IconSize.Size24, "") { } } + public class TextHeader1Lines : Icon { public TextHeader1Lines() : base("TextHeader1Lines", IconVariant.Regular, IconSize.Size24, "") { } } + public class TextHeader1LinesCaret : Icon { public TextHeader1LinesCaret() : base("TextHeader1LinesCaret", IconVariant.Regular, IconSize.Size24, "") { } } public class TextHeader2 : Icon { public TextHeader2() : base("TextHeader2", IconVariant.Regular, IconSize.Size24, "") { } } + public class TextHeader2Lines : Icon { public TextHeader2Lines() : base("TextHeader2Lines", IconVariant.Regular, IconSize.Size24, "") { } } + public class TextHeader2LinesCaret : Icon { public TextHeader2LinesCaret() : base("TextHeader2LinesCaret", IconVariant.Regular, IconSize.Size24, "") { } } public class TextHeader3 : Icon { public TextHeader3() : base("TextHeader3", IconVariant.Regular, IconSize.Size24, "") { } } + public class TextHeader3Lines : Icon { public TextHeader3Lines() : base("TextHeader3Lines", IconVariant.Regular, IconSize.Size24, "") { } } + public class TextHeader3LinesCaret : Icon { public TextHeader3LinesCaret() : base("TextHeader3LinesCaret", IconVariant.Regular, IconSize.Size24, "") { } } public class TextIndentDecrease : Icon { public TextIndentDecrease() : base("TextIndentDecrease", IconVariant.Regular, IconSize.Size24, "") { } } public class TextIndentDecreaseLtr : Icon { public TextIndentDecreaseLtr() : base("TextIndentDecreaseLtr", IconVariant.Regular, IconSize.Size24, "") { } } public class TextIndentDecreaseLtr90 : Icon { public TextIndentDecreaseLtr90() : base("TextIndentDecreaseLtr90", IconVariant.Regular, IconSize.Size24, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Regular28.cs b/src/Assets/FluentUI.Icons/Icons/Regular28.cs index 8b0b8539be..6e0ed2d3da 100644 --- a/src/Assets/FluentUI.Icons/Icons/Regular28.cs +++ b/src/Assets/FluentUI.Icons/Icons/Regular28.cs @@ -368,11 +368,16 @@ public class Next : Icon { public Next() : base("Next", IconVariant.Regular, Ico public class Note : Icon { public Note() : base("Note", IconVariant.Regular, IconSize.Size28, "") { } } public class NoteAdd : Icon { public NoteAdd() : base("NoteAdd", IconVariant.Regular, IconSize.Size28, "") { } } public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Regular, IconSize.Size28, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Regular, IconSize.Size28, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Regular, IconSize.Size28, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Regular, IconSize.Size28, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Regular, IconSize.Size28, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Regular, IconSize.Size28, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Regular, IconSize.Size28, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Regular, IconSize.Size28, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Regular, IconSize.Size28, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Regular, IconSize.Size28, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Regular, IconSize.Size28, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Regular, IconSize.Size28, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Regular, IconSize.Size28, "") { } } public class OpenFolder : Icon { public OpenFolder() : base("OpenFolder", IconVariant.Regular, IconSize.Size28, "") { } } @@ -513,6 +518,7 @@ public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical public class Square : Icon { public Square() : base("Square", IconVariant.Regular, IconSize.Size28, "") { } } public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Regular, IconSize.Size28, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Regular, IconSize.Size28, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Regular, IconSize.Size28, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Regular, IconSize.Size28, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Regular, IconSize.Size28, "") { } } public class Star : Icon { public Star() : base("Star", IconVariant.Regular, IconSize.Size28, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Regular32.cs b/src/Assets/FluentUI.Icons/Icons/Regular32.cs index cf92f28d7b..2ae3e8eaac 100644 --- a/src/Assets/FluentUI.Icons/Icons/Regular32.cs +++ b/src/Assets/FluentUI.Icons/Icons/Regular32.cs @@ -284,11 +284,16 @@ public class Multiplier5x : Icon { public Multiplier5x() : base("Multiplier5x", public class Next : Icon { public Next() : base("Next", IconVariant.Regular, IconSize.Size32, "") { } } public class Notebook : Icon { public Notebook() : base("Notebook", IconVariant.Regular, IconSize.Size32, "") { } } public class Notepad : Icon { public Notepad() : base("Notepad", IconVariant.Regular, IconSize.Size32, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Regular, IconSize.Size32, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Regular, IconSize.Size32, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Regular, IconSize.Size32, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Regular, IconSize.Size32, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Regular, IconSize.Size32, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Regular, IconSize.Size32, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Regular, IconSize.Size32, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Regular, IconSize.Size32, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Regular, IconSize.Size32, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Regular, IconSize.Size32, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Regular, IconSize.Size32, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Regular, IconSize.Size32, "") { } } public class Organization : Icon { public Organization() : base("Organization", IconVariant.Regular, IconSize.Size32, "") { } } @@ -388,6 +393,7 @@ public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical public class Square : Icon { public Square() : base("Square", IconVariant.Regular, IconSize.Size32, "") { } } public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Regular, IconSize.Size32, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Regular, IconSize.Size32, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Regular, IconSize.Size32, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Regular, IconSize.Size32, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Regular, IconSize.Size32, "") { } } public class Stack : Icon { public Stack() : base("Stack", IconVariant.Regular, IconSize.Size32, "") { } } diff --git a/src/Assets/FluentUI.Icons/Icons/Regular48.cs b/src/Assets/FluentUI.Icons/Icons/Regular48.cs index befc88a675..bfdafdc598 100644 --- a/src/Assets/FluentUI.Icons/Icons/Regular48.cs +++ b/src/Assets/FluentUI.Icons/Icons/Regular48.cs @@ -291,11 +291,16 @@ public class Multiplier5x : Icon { public Multiplier5x() : base("Multiplier5x", public class Next : Icon { public Next() : base("Next", IconVariant.Regular, IconSize.Size48, "") { } } public class Note : Icon { public Note() : base("Note", IconVariant.Regular, IconSize.Size48, "") { } } public class NoteAdd : Icon { public NoteAdd() : base("NoteAdd", IconVariant.Regular, IconSize.Size48, "") { } } + public class NumberCircle0 : Icon { public NumberCircle0() : base("NumberCircle0", IconVariant.Regular, IconSize.Size48, "") { } } public class NumberCircle1 : Icon { public NumberCircle1() : base("NumberCircle1", IconVariant.Regular, IconSize.Size48, "") { } } public class NumberCircle2 : Icon { public NumberCircle2() : base("NumberCircle2", IconVariant.Regular, IconSize.Size48, "") { } } public class NumberCircle3 : Icon { public NumberCircle3() : base("NumberCircle3", IconVariant.Regular, IconSize.Size48, "") { } } public class NumberCircle4 : Icon { public NumberCircle4() : base("NumberCircle4", IconVariant.Regular, IconSize.Size48, "") { } } public class NumberCircle5 : Icon { public NumberCircle5() : base("NumberCircle5", IconVariant.Regular, IconSize.Size48, "") { } } + public class NumberCircle6 : Icon { public NumberCircle6() : base("NumberCircle6", IconVariant.Regular, IconSize.Size48, "") { } } + public class NumberCircle7 : Icon { public NumberCircle7() : base("NumberCircle7", IconVariant.Regular, IconSize.Size48, "") { } } + public class NumberCircle8 : Icon { public NumberCircle8() : base("NumberCircle8", IconVariant.Regular, IconSize.Size48, "") { } } + public class NumberCircle9 : Icon { public NumberCircle9() : base("NumberCircle9", IconVariant.Regular, IconSize.Size48, "") { } } public class NumberSymbol : Icon { public NumberSymbol() : base("NumberSymbol", IconVariant.Regular, IconSize.Size48, "") { } } public class Open : Icon { public Open() : base("Open", IconVariant.Regular, IconSize.Size48, "") { } } public class OpenFolder : Icon { public OpenFolder() : base("OpenFolder", IconVariant.Regular, IconSize.Size48, "") { } } @@ -393,6 +398,7 @@ public class SplitVertical : Icon { public SplitVertical() : base("SplitVertical public class Square : Icon { public Square() : base("Square", IconVariant.Regular, IconSize.Size48, "") { } } public class SquareArrowForward : Icon { public SquareArrowForward() : base("SquareArrowForward", IconVariant.Regular, IconSize.Size48, "") { } } public class SquareHint : Icon { public SquareHint() : base("SquareHint", IconVariant.Regular, IconSize.Size48, "") { } } + public class SquareHintHexagon : Icon { public SquareHintHexagon() : base("SquareHintHexagon", IconVariant.Regular, IconSize.Size48, "") { } } public class SquareHintSparkles : Icon { public SquareHintSparkles() : base("SquareHintSparkles", IconVariant.Regular, IconSize.Size48, "") { } } public class SquareMultiple : Icon { public SquareMultiple() : base("SquareMultiple", IconVariant.Regular, IconSize.Size48, "") { } } public class Star : Icon { public Star() : base("Star", IconVariant.Regular, IconSize.Size48, "") { } } diff --git a/src/Assets/FluentUI.Icons/WHATSNEW.md b/src/Assets/FluentUI.Icons/WHATSNEW.md new file mode 100644 index 0000000000..b0141d0425 --- /dev/null +++ b/src/Assets/FluentUI.Icons/WHATSNEW.md @@ -0,0 +1,367 @@ +## 3.1.1 - Fluent UI System Icons 1.1.218 +**What's new (Name / Size(s) / Variant(s))** +- Beaker Add / 20, 24 / Filled & Regular +- Beaker Dismiss / 20, 24 / Filled & Regular +- Document Cube / 20, 24 / Filled & Regular +- Drawer / 20, 24 / Filled & Regular +- Filmstrip Image / 20, 24 / Filled & Regular +- Number Circle 0 / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Number Circle 6 / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Number Circle 7 / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Number Circle 8 / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Number Circle 9 / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Server / 12 / Filled & Regular +- Square Hint Hexagon / 12, 16, 20, 24, 28, 32, 48 / Filled & Regular +- Tab Desktop Multiple Add / 16 / Filled & Regular +- Tab Desktop Multiple / 16 / Filled & Regular +- Target Add / 20, 24 / Filled & Regular +- Target Dismiss / 20, 24 / Filled & Regular +- Text Header 1 Lines Caret / 16, 20, 24 / Filled & Regular +- Text Header 1 Lines / 16, 20, 24 / Filled & Regular +- Text Header 2 Lines Caret / 16, 20, 24 / Filled & Regular +- Text Header 2 Lines / 16, 20, 24 / Filled & Regular +- Text Header 3 Lines Caret / 16, 20, 24 / Filled & Regular +- Text Header 3 Lines / 16, 20, 24 / Filled & Regular + +**What's updated (Name / Size(s) / Variant(s))** +- Beaker / 20 / Filled & Regular +- Desktop Speaker Off / 20, 24 / Filled & Regular +- Desktop Speaker / 20, 24 / Filled & Regular +- Edit Arrow Back / 16 / Filled & Regular +- Edit Off / 16 / Filled & Regular +- Edit Prohibited / 16 / Filled & Regular +- Number Circle 1 / 16 / Filled & Regular +- Number Circle 2 / 16 / Filled & Regular +- Number Circle 3 / 16 / Filled & Regular +- Number Circle 4 / 16 / Filled & Regular +- Number Circle 5 / 16 / Filled & Regular +- Square Hint Arrow Back / 16 / Filled +- Square Hint / 16 / Filled + +## 3.1.0 - Fluent UI System Icons 1.1.217 +**What's new (Name / Size(s) / Variant(s))** + +- Chevron Down / 32 / Filled & Regular +- Chevron Left / 32 / Filled & Regular +- Chevron Right / 32 / Filled & Regular +- Chevron Up / 32 / Filled & Regular +- Document Lightning / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Edit / 12 / Filled & Regular +- Server Link / 16, 20 / Filled & Regular +- Step / 20, 24 / Filled & Regular +- Tab Desktop Multiple Add / 20 / Filled & Regular +- Text Description / 16, 28, 32 / Filled & Regular +- Text Grammar Lightning / 16, 20, 24, 28, 32 / Filled & Regular + +**What's updated (Name / Size(s) / Variant(s))** + +- Edit / 16 / Filled & Regular +- Server Link / 24 / Filled & Regular + +## 3.0.0 - Fluent UI System Icons 1.1.212 + +**What's new (Name / Size(s) / Variant(s))** +- Call End / 12, 32, 48 / Filled & Regular +- Content View Gallery Lightning / 16, 20, 24, 28 / Filled & Regular +- Content View Gallery / 16 / Filled & Regular +- Globe Arrow Forward / 16, 20, 24, 32 / Filled & Regular +- Hard Drive Call / 24, 32 / Filled & Regular +- Hard Drive / 24, 32 / Filled & Regular +- Mail Rewind / 16, 20, 24 / Filled & Regular +- Panel Right Gallery / 16, 20, 24, 28 / Filled & Regular +- Panel Top Gallery / 16, 20, 24, 28 / Filled & Regular +- Rectangle Landscape Sparkle / 16, 20, 24, 28, 32 / Filled & Regular +- Scan Person / 16, 20, 24, 28, 48 / Filled & Regular +- Voicemail Shield / 16 / Filled & Regular + +# Before Microsoft.Fast.Components.FluentUI.Icons 3.0 +## 1.1.211 +**What's new (Name / Size(s) / Variant(s))** +- Add Square Multiple / 24 / Filled & Regular +- Arrow Bidirectional Left Right / 16, 20, 24, 28 / Filled & Regular +- Arrow Outline Down Left / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Arrow Step In Diagonal Down Left / 16, 20, 24, 28 / Filled & Regular +- Arrow Swap / 16, 28 / Filled & Regular +- Arrow Up Square Settings / 24 / Filled & Regular +- Braces Variable / 48 / Filled & Regular +- Briefcase Person / 24 / Filled & Regular +- Building Cloud / 24 / Filled & Regular +- Building Mosque / 12, 16, 20, 24, 28, 32, 48 / Filled & Regular +- Calendar Eye / 20 / Filled & Regular +- Checkmark Circle Square / 16, 20, 24 / Filled & Regular +- Cube / 48 / Filled & Regular +- Desk / 16, 28, 32, 48 / Filled & Regular +- Folder Add / 32 / Filled & Regular +- Folder Arrow Left / 48 / Filled & Regular +- Folder Arrow Right / 32 / Filled & Regular +- Folder Arrow Up / 32 / Filled & Regular +- Folder Link / 16, 32 / Filled & Regular +- Folder Open Vertical / 24 / Filled & Regular +- Folder Prohibited / 32 / Filled & Regular +- Globe / 48 / Filled & Regular +- Globe Shield / 48 / Filled & Regular +- Hand Right Off / 16, 24, 28 / Filled & Regular +- Hat Graduation Sparkle / 16 / Filled & Regular +- Hat Graduation Sparkle / 20, 24, 28 / Filled & Regular +- Heart Off / 16, 20, 24 / Filled & Regular +- Hexagon / 16, 20 / Filled & Regular +- Hexagon Three / 16, 20 / Filled & Regular +- Key Multiple / 16, 24 / Filled & Regular +- Kiosk / 24 / Filled & Regular +- Laptop Multiple / 24 / Filled & Regular +- Line Horizontal 1 / 16, 24, 28 / Filled & Regular +- Line Horizontal 1 Dashes / 16, 20, 24, 28 / Filled & Regular +- Line Horizontal 2 Dashes Solid / 16, 20, 24, 28 / Filled & Regular +- Link Add / 24 / Filled & Regular +- Link Multiple / 16, 20, 24 / Filled & Regular +- Link Settings / 24 / Filled & Regular +- Lock Closed / 28, 48 / Filled & Regular +- Lock Open / 12, 32, 48 / Filled & Regular +- Mail Off / 16 / Filled & Regular +- Mic Record / 20, 24, 28 / Filled & Regular +- Open / 12 / Filled & Regular +- Pen Sparkle / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Person Edit / 48 / Filled & Regular +- Person Phone / 24 / Filled & Regular +- Phone Briefcase / 24 / Filled & Regular +- Phone Multiple / 24 / Filled & Regular +- Phone Multiple Settings / 24 / Filled & Regular +- Phone Person / 24 / Filled & Regular +- Phone Subtract / 24 / Filled & Regular +- Plug Disconnected / 48 / Filled & Regular +- Rectangle Landscape Hint Copy / 16, 20, 24 / Filled & Regular +- Remix Add / 16, 20, 24, 32 / Filled & Regular +- Script / 20, 24, 32 / Filled & Regular +- Server Link / 24 / Filled & Regular +- Stream / 48 / Filled & Regular +- Tab Desktop / 28 / Filled & Regular +- Tab Desktop Link / 16, 20, 24, 28 / Filled & Regular +- Table Arrow Up / 20, 24 / Filled & Regular +- Tablet Laptop / 24 / Filled & Regular +- Text Bullet List Square / 48 / Filled & Regular +- Text Bullet List Square Shield / 48 / Filled & Regular +- Video Person Sparkle Off / 20, 24 / Filled & Regular +- Warning / 32 / Filled & Regular +- Window Database / 32 / Filled & Regular + + +**What's updated (Name / Size(s) / Variant(s))** +- Add Square Multiple / 24 / Filled & Regular +- Arrow Outline Up Right / 32 / Filled & Regular +- Braces Variable / 48 / Filled & Regular +- Cast Multiple / 20, 24, 28 / Filled & Regular +- Circle Hint Half Vertical / 16, 20, 24 / Filled & Regular +- Cube / 48 / Filled & Regular +- Desk / 16, 28, 32, 48 / Filled & Regular +- Document Data / 16, 20, 24, 32 / Filled & Regular +- Document Data Link / 16, 20, 24, 32 / Filled & Regular +- Document Link / 20 / Filled & Regular +- Flash Sparkle / 20, 24 / Filled & Regular +- Folder Add / 16, 20, 24, 28, 48 / Filled & Regular +- Folder Arrow Left / 16, 20, 24, 28, 32 / Filled & Regular +- Folder Arrow Right / 16, 20, 24, 28, 48 / Filled & Regular +- Folder Arrow Up / 16, 20, 24, 28, 48 / Filled & Regular +- Folder Briefcase / 20 / Filled & Regular +- Folder Globe / 16, 20 / Filled & Regular +- Folder Lightning / 16, 20, 24 / Filled & Regular +- Folder Link / 20, 24, 28, 48 / Filled & Regular +- Folder List / 16, 20 / Filled & Regular +- Folder Mail / 16, 20, 24, 28 / Filled & Regular +- Folder Multiple / 16 / Filled & Regular +- Folder Open / 16, 20, 24 / Filled & Regular +- Folder Open / 16, 20, 24 / Filled & Regular +- Folder Open Vertical / 16, 20 / Filled & Regular +- Folder Open Vertical / 16, 20 / Filled & Regular +- Folder Open Vertical / 24 / Filled & Regular +- Folder People / 20, 24 / Filled & Regular +- Folder Person / 16, 20 / Filled & Regular +- Folder Prohibited / 16, 20, 24, 28, 48 / Filled & Regular +- Folder Swap / 16, 20, 24 / Filled & Regular +- Folder Sync / 16, 20, 24 / Filled & Regular +- Folder Zip / 16, 20, 24 / Filled & Regular +- Globe / 48 / Filled & Regular +- Globe Shield / 48 / Filled & Regular +- Hand Right Off / 16, 24, 28 / Filled & Regular +- Hat Graduation Sparkle / 16 / Filled & Regular +- Hexagon / 12, 24 / Filled & Regular +- Hexagon Three / 12, 24 / Filled & Regular +- Key Multiple / 16, 24 / Filled & Regular +- Line Style / 24 / Filled & Regular +- Link Multiple / 16, 20, 24 / Filled & Regular +- Lock Closed / 12, 16, 20, 24, 32 / Filled & Regular +- Lock Open / 16, 20, 24, 28 / Filled & Regular +- Mail Off / 16 / Filled & Regular +- Next Frame / 20, 24 / Filled & Regular +- Open / 24 / Filled +- Open Off / 24 / Filled +- Person Edit / 48 / Filled & Regular +- Plug Disconnected / 48 / Filled & Regular +- Previous Frame / 20, 24 / Filled & Regular +- Stream / 48 / Filled & Regular +- Text Bullet List Square / 48 / Filled & Regular +- Text Bullet List Square Shield / 48 / Filled & Regular +- TextBox / 16 / Filled & Regular +- TextBox Align Bottom / 20, 24 / Filled & Regular +- TextBox Align Bottom Center / 16, 20, 24 / Filled & Regular +- TextBox Align Bottom Left / 16, 20, 24 / Filled & Regular +- TextBox Align Bottom Right / 16, 20, 24 / Filled & Regular +- TextBox Align Bottom Rotate 90 / 20, 24 / Filled & Regular +- TextBox Align Center / 16 / Filled & Regular +- TextBox Align Center / 24 / Filled & Regular +- TextBox Align Middle / 20, 24 / Filled +- TextBox Align Middle Left / 16, 20, 24 / Filled & Regular +- TextBox Align Middle Right / 16, 20, 24 / Filled & Regular +- TextBox Align Middle Rotate 90 / 20, 24 / Filled & Regular +- TextBox Align Top / 20, 24 / Filled +- TextBox Align Top Center / 16, 20, 24 / Filled & Regular +- TextBox Align Top Left / 16, 20, 24 / Filled & Regular +- TextBox Align Top Right / 16, 20, 24 / Filled & Regular +- TextBox Align Top Rotate 90 / 20, 24 / Filled & Regular +- Triangle Down / 24 / Filled & Regular +- What’s updated +- Window Arrow Up / 16, 20, 24 / Filled & Regular + +🏳️‍🌈 Happy Pride 🏳️‍🌈 +Note we've revamped our Flag Pride icon to reflect the Traditional Pride Flag, +and added other umbrella flags: + +- Flag Pride / 32 / Filled +- Flag Pride Philadelphia / 16, 20, 24, 28, 32, 48 / Filled +- Flag Pride Progress / 16, 20, 24, 28, 32, 48 / Filled +- Flag Pride Intersex Inclusive Progress / 16, 20, 24, 28, 32, 48 / Filled + +## 1.1.204 +**What's new (Name / Size(s) / Variant(s))** +- Clipboard Paste / 32 / Filled & Regular +- Cloud Bidirectional / 20, 24 / Filled & Regular +- Comment Edit / 16 / Filled & Regular +- Crown Subtract / 24 / Filled & Regular +- Crown / 24 / Filled & Regular +- Pause Circle / 32, 48 / Filled & Regular +- Person Subtract / 24 / Filled & Regular +- Plug Connected Settings / 20, 24 / Filled & Regular +- Signature / 32 / Filled & Regular +- Speaker Mute / 32 / Filled & Regular +- Thumb Like Dislike / 16, 20, 24 / Filled & Regular + +**What's updated (Name / Size(s) / Variant(s))** +- Folder / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Paint Brush / 16, 32 / Filled & Regular + +## 1.1.202 + +**What's new (Name / Size(s) / Variant(s))** +- Airplane Landing / 16, 20, 24 / Filled & Regular +- Align Space Evenly Horizontal / 24 / Filled & Regular +- Align Space Evenly Vertical / 24 / Filled & Regular +- Arrow Flow Diagonal Up Right / 16, 20, 24, 32 / Filled & Regular +- Arrow Flow Up Right / 16, 32 / Filled & Regular +- Arrow Square Up Right / 20, 24 / Filled & Regular +- Bin Recycle Full / 20, 24 / Filled & Regular +- Bin Recycle / 20, 24 / Filled & Regular +- Briefcase Search / 20, 24 / Filled & Regular +- Circle Line / 16 / Filled & Regular +- Desk / 20, 24 / Filled & Regular +- Filmstrip Off / 48 / Filled & Regular +- Filmstrip / 48 / Filled & Regular +- Flash / 32 / Filled & Regular +- Flow / 24, 32 / Filled & Regular +- Heart Pulse Checkmark / 20 / Filled & Regular +- Heart Pulse Error / 20 / Filled & Regular +- Heart Pulse Warning / 20 / Filled & Regular +- Home Heart / 16, 20, 24, 32 / Filled & Regular +- Image Off / 28, 32, 48 / Filled & Regular +- Money Hand / 16 / Filled & Regular +- Money Settings / 16, 24 / Filled & Regular +- People Edit / 16, 24 / Filled & Regular +- Square Line Hint / 20, 24 / Filled & Regular + +**What's updated (Name / Size(s) / Variant(s))** +- Airplane Take Off / 16, 20, 24 / Filled +- Arrow Flow Up Right Rectangle Multiple / 20, 24 / Filled & Regular +- Arrow Flow Up Right / 20, 24 / Filled & Regular +- Column Triple Edit / 20, 24 / Filled & Regular +- Column Triple / 20, 24 / Filled & Regular +- Flow / 16, 20 / Filled & Regular +- Fluent / 20, 24, 32, 48 / Filled & Regular +- Heart Pulse / 24 / Filled +- Image Off / 20, 24 / Filled & Regular +- Real Estate / 20, 24 / Filled & Regular +- Triangle Down / 20 / Filled & Regular +- Triangle Left / 20 / Filled & Regular +- Triangle Right / 20 / Filled & Regular +- Triangle Up / 20 / Filled & Regular + +**⚠️ Renamed icons** +- Arrow Routing → Arrow Flow Up Left +- Arrow Routing Rectangle Multiple → Arrow Flow Up Left Rectangle Multiple + +## 1.1.201 + +**What's new (Name / Size(s) / Variant(s))** +- App Generic / 48 / Filled & Regular +- Arrow Enter / 16 / Filled & Regular +- Arrow Sprint / 16, 20 / Filled & Regular +- Beaker Settings / 16, 20 / Filled & Regular +- Binder Triangle / 16 / Filled & Regular +- Book Dismiss / 16, 20 / Filled & Regular +- Button / 16, 20 / Filled & Regular +- Card UI / 20, 24 / Filled & Regular +- Chevron Down Up / 16, 20, 24 / Filled & Regular +- Column Single Compare / 16, 20 / Filled & Regular +- Crop Sparkle / 24 / Filled & Regular +- Cursor Prohibited / 16, 20 / Filled & Regular +- Cursor / 16 / Filled & Regular +- Data Histogram / 16 / Filled & Regular +- Document Image / 16, 20 / Filled & Regular +- Document JAVA / 16, 20 / Filled & Regular +- Document One Page Beaker / 16 / Filled & Regular +- Document One Page Multiple / 16, 20, 24 / Filled & Regular +- Document SASS / 16, 20 / Filled & Regular +- Document YML / 16, 20 / Filled & Regular +- Filmstrip Split / 16, 20, 24, 32 / Filled & Regular +- Gavel Prohibited / 16, 20 / Filled & Regular +- Gavel / 16 / Filled & Regular +- Gift Open / 16, 20, 24 / Filled & Regular +- Globe / 12 / Filled & Regular +- Grid Kanban / 16 / Filled & Regular +- Image Stack / 16, 20 / Filled & Regular +- Laptop Shield / 16, 20 / Filled & Regular +- List Bar Tree Offset / 16, 20 / Filled & Regular +- List Bar Tree / 16, 20 / Filled & Regular +- List Bar / 16, 20 / Filled & Regular +- List RTL / 16, 20 / Filled & Regular +- Panel Left Text Add / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Panel Left Text Dismiss / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Panel Left Text / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Person Lightning / 16, 20 / Filled & Regular +- Text Bullet List Square Sparkle / 16, 20, 24 / Filled & Regular +- Text Bullet List Square / 16, 32 / Filled & Regular +- Translate Auto / 16, 20, 24 / Filled & Regular + +**What's updated (Name / Size(s) / Variant(s))** +- Book Add / 20 / Filled +- Book Default / 20 / Filled +- Briefcase Medical / 16, 20, 24, 32 / Filled & Regular +- Briefcase Off / 16, 20, 24, 28, 32, 48 / Filled & Regular +- Briefcase / 12, 16, 20, 24, 28, 32, 48 / Filled & Regular +- Calendar Add / 16 / Filled & Regular +- Calendar Arrow Right / 16 / Filled & Regular +- Calendar Assistant / 16 / Filled & Regular +- Calendar Cancel / 16 / Filled & Regular +- Calendar Checkmark / 16 / Filled & Regular +- Calendar Clock / 16 / Filled & Regular +- Chevron Up Down / 20 / Filled +- Document One Page Add / 16 / Filled & Regular +- List / 20, 24, 28 / Filled & Regular +- Text Bullet List Square Clock / 20 / Filled & Regular +- Text Bullet List Square Edit / 20, 24 / Filled & Regular +- Text Bullet List Square Person / 20, 32 / Filled & Regular +- Text Bullet List Square Search / 20 / Filled & Regular +- Text Bullet List Square Settings / 20 / Filled & Regular +- Text Bullet List Square Shield / 20 / Filled & Regular +- Text Bullet List Square Toolbox / 20 / Filled & Regular +- Text Bullet List Square Warning / 16, 20, 24 / Filled & Regular +- Text Bullet List Square / 20, 24 / Filled & Regular +- Translate Off / 16, 20, 24 / Filled & Regular +- Translate / 16, 20, 24 / Filled & Regular \ No newline at end of file diff --git a/src/Core/Components/Base/FluentInputBase.cs b/src/Core/Components/Base/FluentInputBase.cs index df6f5fa57c..7d1bd180fb 100644 --- a/src/Core/Components/Base/FluentInputBase.cs +++ b/src/Core/Components/Base/FluentInputBase.cs @@ -47,6 +47,24 @@ public abstract partial class FluentInputBase : FluentComponentBase, IDi [Parameter] public string? Name { get; set; } + /// + /// Text displayed just above the component + /// + [Parameter] + public string? Label { get; set; } + + /// + /// Content displayed just above the component + /// + [Parameter] + public RenderFragment? LabelTemplate { get; set; } + + /// + /// Text used on aria-label attribute. + /// + [Parameter] + public virtual string? AriaLabel { get; set; } + /// /// Whether the element needs to have a value /// @@ -218,6 +236,7 @@ protected async Task SetCurrentValueAsString(string? value) /// protected FluentInputBase() { + Id = Identifier.NewId(); _validationStateChangedHandler = OnValidateStateChanged; } diff --git a/src/Core/Components/Card/FluentCard.razor b/src/Core/Components/Card/FluentCard.razor index 87b4d6ff27..317d8744cc 100644 --- a/src/Core/Components/Card/FluentCard.razor +++ b/src/Core/Components/Card/FluentCard.razor @@ -2,7 +2,7 @@ @inherits FluentComponentBase @ChildContent diff --git a/src/Core/Components/Card/FluentCard.razor.cs b/src/Core/Components/Card/FluentCard.razor.cs index 54c437a27a..30936a6af6 100644 --- a/src/Core/Components/Card/FluentCard.razor.cs +++ b/src/Core/Components/Card/FluentCard.razor.cs @@ -1,12 +1,25 @@ using Microsoft.AspNetCore.Components; +using Microsoft.Fast.Components.FluentUI.Utilities; namespace Microsoft.Fast.Components.FluentUI; public partial class FluentCard { + protected string? StyleValue => new StyleBuilder(Style) + .AddStyle("content-visibility", "visible", !AreaRestricted) + .AddStyle("contain", "style", !AreaRestricted) + .Build(); + + /// + /// By default, content in the card is restricted to the area of the card itself. + /// If you want content to be able to overflow the card, set this property to false. + /// + [Parameter] + public bool AreaRestricted { get; set; } = true; + /// /// Gets or sets the content to be rendered inside the component. /// [Parameter] public RenderFragment? ChildContent { get; set; } -} \ No newline at end of file +} diff --git a/src/Core/Components/Checkbox/FluentCheckbox.razor b/src/Core/Components/Checkbox/FluentCheckbox.razor index 5be6022950..5a708652d8 100644 --- a/src/Core/Components/Checkbox/FluentCheckbox.razor +++ b/src/Core/Components/Checkbox/FluentCheckbox.razor @@ -13,5 +13,12 @@ current-checked="@CurrentValue" @oncheckedchange="@((e) => SetCurrentValue(e.Checked))" @attributes="@AdditionalAttributes"> + @if (!string.IsNullOrEmpty(Label) || !string.IsNullOrEmpty(AriaLabel) || LabelTemplate is not null) + { + + @Label + @LabelTemplate + + } @ChildContent diff --git a/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor new file mode 100644 index 0000000000..66ab387d57 --- /dev/null +++ b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor @@ -0,0 +1,7 @@ +@namespace Microsoft.Fast.Components.FluentUI +@inherits FluentComponentBase +@using System.Globalization + +
    + @ChildContent +
    \ No newline at end of file diff --git a/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.cs b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.cs new file mode 100644 index 0000000000..96c3d9faf5 --- /dev/null +++ b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.cs @@ -0,0 +1,62 @@ +using System; +using System.Globalization; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Components; +using Microsoft.Fast.Components.FluentUI.Utilities; +using Microsoft.JSInterop; + + +namespace Microsoft.Fast.Components.FluentUI; +public partial class FluentCollapsibleRegion : FluentComponentBase +{ + private bool _expanded; + + protected string? StyleValue => + new StyleBuilder(Style) + .AddStyle("max-height", MaxHeight, !string.IsNullOrEmpty(MaxHeight)) + .AddStyle("height", "auto", Expanded) + .AddStyle("height", "0", !Expanded) + .Build(); + + protected string? ClassValue => + new CssBuilder(Class) + .AddClass("fluent-collapsible-region-container") + .Build(); + + /// + /// If true, the region is expaned, otherwise it is collapsed. + /// + [Parameter] + public bool Expanded + { + get => _expanded; + set + { + if (_expanded == value) + { + return; + } + _expanded = value; + _ = ExpandedChanged.InvokeAsync(_expanded); + } + } + + /// + /// Explicitly sets the height for the Collapse element to override the css default. + /// + [Parameter] + public string? MaxHeight { get; set; } + + /// + /// Child content of component. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Callback for when the Expanded property changes. + /// + [Parameter] + public EventCallback ExpandedChanged { get; set; } + +} diff --git a/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.css b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.css new file mode 100644 index 0000000000..2f5758665a --- /dev/null +++ b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.css @@ -0,0 +1,3 @@ +.fluent-collapsible-region-container { + overflow: hidden; +} \ No newline at end of file diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 0dfbb5e297..76786b7b88 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -26,7 +26,7 @@ if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault()) { - +
    @Title
    @if (Grid.SortByAscending.HasValue && ShowSortIcon) diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs index aa13bdeb02..9b5f0cdb91 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs @@ -1,3 +1,4 @@ +using System.Linq.Expressions; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Rendering; using Microsoft.AspNetCore.Components.Web.Virtualization; @@ -36,10 +37,14 @@ public abstract partial class ColumnBase [Parameter] public Align Align { get; set; } /// - /// If true, generate a title attribute for the cell contents + /// If true, generate a title and aria-label attribute for the cell contents /// [Parameter] public bool Tooltip { get; set; } = false; + /// + /// Defines the value to be used as the tooltip and aria-label in this column's cells + /// + [Parameter] public Expression>? TooltipText { get; set; } /// /// An optional template for this column's header cell. If not specified, the default header template diff --git a/src/Core/Components/DataGrid/Columns/PropertyColumn.cs b/src/Core/Components/DataGrid/Columns/PropertyColumn.cs index 8b29965f10..44194df107 100644 --- a/src/Core/Components/DataGrid/Columns/PropertyColumn.cs +++ b/src/Core/Components/DataGrid/Columns/PropertyColumn.cs @@ -16,7 +16,8 @@ public class PropertyColumn : ColumnBase, IBindable private Expression>? _lastAssignedProperty; private Func? _cellTextFunc; - private GridSort? _sortBuilder; + private Func? _cellTooltipTextFunc; + private GridSort? _sortBuilder; public PropertyInfo? PropertyInfo { get; private set; } @@ -26,12 +27,12 @@ public class PropertyColumn : ColumnBase, IBindable /// [Parameter, EditorRequired] public Expression> Property { get; set; } = default!; - /// - /// Optionally specifies a format string for the value. - /// - /// Using this requires the type to implement . - /// - [Parameter] public string? Format { get; set; } + /// + /// Optionally specifies a format string for the value. + /// + /// Using this requires the type to implement . + /// + [Parameter] public string? Format { get; set; } /// /// Optionally specifies how to compare values in this column when sorting. @@ -78,7 +79,13 @@ protected override void OnParametersSet() _sortBuilder = Comparer is not null ? GridSort.ByAscending(Property, Comparer) : GridSort.ByAscending(Property); } - if (Property.Body is MemberExpression memberExpression) + Func? compiledTooltipTextExpression = TooltipText?.Compile(); + + _cellTooltipTextFunc = compiledTooltipTextExpression is not null + ? (item => compiledTooltipTextExpression(item)?.ToString()) + : _cellTextFunc; + + if (Property.Body is MemberExpression memberExpression) { if (Title is null) { @@ -97,6 +104,6 @@ protected internal override void CellContent(RenderTreeBuilder builder, TGridIte => builder.AddContent(0, _cellTextFunc?.Invoke(item)); protected internal override string? RawCellContent(TGridItem item) - => _cellTextFunc?.Invoke(item); + => _cellTooltipTextFunc?.Invoke(item); } diff --git a/src/Core/Components/DataGrid/Columns/TemplateColumn.cs b/src/Core/Components/DataGrid/Columns/TemplateColumn.cs index 5c8ce1fd18..7fafb9e115 100644 --- a/src/Core/Components/DataGrid/Columns/TemplateColumn.cs +++ b/src/Core/Components/DataGrid/Columns/TemplateColumn.cs @@ -1,3 +1,4 @@ +using System.Linq.Expressions; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Rendering; @@ -23,6 +24,9 @@ public class TemplateColumn : ColumnBase protected internal override void CellContent(RenderTreeBuilder builder, TGridItem item) => builder.AddContent(0, ChildContent(item)); + protected internal override string? RawCellContent(TGridItem item) + => TooltipText?.Compile()(item); + /// protected override bool IsSortableByDefault() => SortBy is not null; diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index c174ad846c..16c8fdcc29 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -29,7 +29,8 @@ @_renderColumnHeaders } - @if (Items?.Count() == 0 || _ariaBodyRowCount == 0) + + @if (_ariaBodyRowCount == 0) {
    @if (EmptyContent is null) @@ -86,7 +87,7 @@ string? tooltip = col.Tooltip ? @col.RawCellContent(item) : null; - + @((RenderFragment)(__builder => col.CellContent(__builder, item))) } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index c8c53d07cf..203e7954a1 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -409,6 +409,7 @@ private async ValueTask> ResolveItemsRequestA else if (Items is not null) { int totalItemCount = _asyncQueryExecutor is null ? Items.Count() : await _asyncQueryExecutor.CountAsync(Items); + _ariaBodyRowCount = totalItemCount; IQueryable? result = request.ApplySorting(Items).Skip(request.StartIndex); if (request.Count.HasValue) { diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js index cbe2699ec5..a559677001 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.js @@ -1,4 +1,8 @@ export function init(gridElement) { + if (gridElement === null) { + return; + }; + enableColumnResizing(gridElement); const bodyClickHandler = event => { @@ -88,10 +92,6 @@ function enableColumnResizing(gridElement) { let headerBeingResized; let resizeHandle; - if (gridElement === null) { - return; - }; - gridElement.querySelectorAll('.column-header').forEach(header => { columns.push({ header }); const onPointerMove = (e) => requestAnimationFrame(() => { @@ -145,4 +145,4 @@ function enableColumnResizing(gridElement) { dragHandle.addEventListener('pointerup', onPointerUp); } }); -} \ No newline at end of file +} diff --git a/src/Core/Components/DateTime/CalendarExtended.cs b/src/Core/Components/DateTime/CalendarExtended.cs index 79a4829852..ae388b523d 100644 --- a/src/Core/Components/DateTime/CalendarExtended.cs +++ b/src/Core/Components/DateTime/CalendarExtended.cs @@ -110,16 +110,18 @@ public string GetMonthNameAndYear() /// Returns a list of days, abbreviated and complete (Mon, Monday), ...,(Sun, Sunday) in the correct culture. ///
    /// - public IEnumerable<(string Abbreviated, string Name)> GetDayNames() + public IEnumerable<(string Abbreviated, string Shorted, string Name)> GetDayNames() { int firstDayOfWeek = (int)GetFirstDayOfWeek(); var abbreviated = Culture.DateTimeFormat.AbbreviatedDayNames; var names = Culture.DateTimeFormat.DayNames; - var dayNames = new (string Abbreviated, string Name)[7]; + var shorted = Culture.DateTimeFormat.ShortestDayNames; + var dayNames = new (string Abbreviated, string Shorted, string Name)[7]; for (int i = 0; i < 7; i++) { dayNames[i].Name = ToTitleCase(names[i]); + dayNames[i].Shorted = shorted[i]; dayNames[i].Abbreviated = ToTitleCase(abbreviated[i]); } @@ -177,4 +179,4 @@ private string ToTitleCase(string value) { return Culture.TextInfo.ToTitleCase(value); } -} +} \ No newline at end of file diff --git a/src/Core/Components/DateTime/FluentCalendar.razor b/src/Core/Components/DateTime/FluentCalendar.razor index cdeb29734a..3f8b8806f7 100644 --- a/src/Core/Components/DateTime/FluentCalendar.razor +++ b/src/Core/Components/DateTime/FluentCalendar.razor @@ -43,7 +43,7 @@ @foreach (var weekDay in CalendarExtended.GetDayNames()) {
    - @weekDay.Abbreviated[0] + @weekDay.Shorted
    }
    diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor b/src/Core/Components/DateTime/FluentDatePicker.razor index 949a775724..a7ff698e0c 100644 --- a/src/Core/Components/DateTime/FluentDatePicker.razor +++ b/src/Core/Components/DateTime/FluentDatePicker.razor @@ -1,6 +1,7 @@ @namespace Microsoft.Fast.Components.FluentUI @inherits FluentCalendarBase + protected string? StyleValue => new StyleBuilder(Style).Build(); + /// + /// Text displayed just above the component + /// + [Parameter] + public string? Label { get; set; } + + /// + /// Content displayed just above the component + /// + [Parameter] + public RenderFragment? LabelTemplate { get; set; } + + /// + /// Text used on aria-label attribute. + /// + [Parameter] + public virtual string? AriaLabel { get; set; } + /// /// Gets or sets the design of this input. /// diff --git a/src/Core/Components/DateTime/FluentTimePicker.razor b/src/Core/Components/DateTime/FluentTimePicker.razor index ad1276e4e2..6c9efb3020 100644 --- a/src/Core/Components/DateTime/FluentTimePicker.razor +++ b/src/Core/Components/DateTime/FluentTimePicker.razor @@ -1,8 +1,9 @@ @namespace Microsoft.Fast.Components.FluentUI @inherits FluentInputBase - + ShowDialogAsync(Type dialogCo throw new ArgumentException($"{dialogComponent.FullName} must be a Dialog Component"); } + if (OnShowAsync is null) + { + throw new ArgumentNullException(nameof(OnShowAsync), " needs to be added to the main layout of your application/site."); + } + IDialogReference? dialogReference = new DialogReference(parameters.Id, this); - return await OnShowAsync!.Invoke(dialogReference, dialogComponent, parameters, data); + return await OnShowAsync.Invoke(dialogReference, dialogComponent, parameters, data); } /// diff --git a/src/Core/Components/Divider/FluentDivider.razor b/src/Core/Components/Divider/FluentDivider.razor index eace7ea01f..4b6d2c2b52 100644 --- a/src/Core/Components/Divider/FluentDivider.razor +++ b/src/Core/Components/Divider/FluentDivider.razor @@ -1,6 +1,7 @@ @namespace Microsoft.Fast.Components.FluentUI @inherits FluentComponentBase ") { } } + public class ChevronLeft : Icon { public ChevronLeft() : base("ChevronLeft", IconVariant.Regular, IconSize.Size12, "") { } } + public class ChevronRight : Icon { public ChevronRight() : base("ChevronRight", IconVariant.Regular, IconSize.Size12, "") { } } + public class ChevronUp : Icon { public ChevronUp() : base("ChevronUp", IconVariant.Regular, IconSize.Size12, "") { } } + + } + } internal static partial class Regular { [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage] diff --git a/src/Core/Components/Icons/Icon.cs b/src/Core/Components/Icons/Icon.cs index cfb331d497..818be365ab 100644 --- a/src/Core/Components/Icons/Icon.cs +++ b/src/Core/Components/Icons/Icon.cs @@ -46,9 +46,12 @@ public Icon(string name, IconVariant variant, IconSize size, string content) /// /// /// - public virtual Icon WithColor(string color) - { - Color = color; + public virtual Icon WithColor(string? color) + { + if (!string.IsNullOrEmpty(color)) + { + Color = color; + } return this; } diff --git a/src/Core/Components/InputFile/FluentInputFile.razor.cs b/src/Core/Components/InputFile/FluentInputFile.razor.cs index 8ec7e541f1..2a6bdb66da 100644 --- a/src/Core/Components/InputFile/FluentInputFile.razor.cs +++ b/src/Core/Components/InputFile/FluentInputFile.razor.cs @@ -132,6 +132,11 @@ public partial class FluentInputFile : FluentComponentBase [Parameter] public EventCallback> OnCompleted { get; set; } + /// + /// Identifier of the source component clickable by the end user. + /// + [Parameter] + public string AnchorId { get; set; } = string.Empty; public FluentInputFile() { @@ -140,6 +145,8 @@ public FluentInputFile() /// /// Open the dialogbox to select files. + /// Use instead to specify the ID of the button (for example) on which the user should click. + /// ⚠️ This method doesn't work on Safari and iOS. /// /// public async Task ShowFilesDialogAsync() @@ -149,6 +156,17 @@ public async Task ShowFilesDialogAsync() await Module.InvokeVoidAsync("raiseFluentInputFile", Id); } + /// + protected override async Task OnInitializedAsync() + { + if (!string.IsNullOrEmpty(AnchorId)) + { + Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE); + + await Module.InvokeVoidAsync("attachClickHandler", AnchorId, Id); + } + } + /// protected async Task OnUploadFilesHandlerAsync(InputFileChangeEventArgs e) { diff --git a/src/Core/Components/InputFile/FluentInputFile.razor.js b/src/Core/Components/InputFile/FluentInputFile.razor.js index b561d503aa..8a1a55b182 100644 --- a/src/Core/Components/InputFile/FluentInputFile.razor.js +++ b/src/Core/Components/InputFile/FluentInputFile.razor.js @@ -1,10 +1,20 @@ -export function raiseFluentInputFile(id) { - var item = document.getElementById(id); +export function raiseFluentInputFile(fileInputId) { + var item = document.getElementById(fileInputId); if (!!item) { item.click(); } } +export function attachClickHandler(buttonId, fileInputId) { + var button = document.getElementById(buttonId); + var fileInput = document.getElementById(fileInputId); + if (button && fileInput) { + button.addEventListener("click", function (e) { + fileInput.click(); + }); + } +} + export function previewImage(inputElem, index, imgElem) { const url = URL.createObjectURL(inputElem.files[index]); imgElem.addEventListener('load', () => URL.revokeObjectURL(url), { once: true }); diff --git a/src/Core/Components/Label/FluentInputLabel.razor b/src/Core/Components/Label/FluentInputLabel.razor new file mode 100644 index 0000000000..9772d8687c --- /dev/null +++ b/src/Core/Components/Label/FluentInputLabel.razor @@ -0,0 +1,9 @@ +@namespace Microsoft.Fast.Components.FluentUI + +@if (!string.IsNullOrEmpty(Label) || ChildContent is not null) +{ + +} \ No newline at end of file diff --git a/src/Core/Components/Label/FluentInputLabel.razor.cs b/src/Core/Components/Label/FluentInputLabel.razor.cs new file mode 100644 index 0000000000..60ae5e8f9b --- /dev/null +++ b/src/Core/Components/Label/FluentInputLabel.razor.cs @@ -0,0 +1,65 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; + +namespace Microsoft.Fast.Components.FluentUI; + +public partial class FluentInputLabel +{ + private const string JAVASCRIPT_FILE = "./_content/Microsoft.Fast.Components.FluentUI/Components/Label/FluentInputLabel.razor.js"; + + /// + [Inject] + private IJSRuntime JSRuntime { get; set; } = default!; + + /// + private IJSObjectReference? Module { get; set; } + + /// + /// Gets or sets the HTML label `for` attribute. + /// See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for + /// + [Parameter] + public string? ForId { get; set; } + + /// + /// Gets or sets the text to be displayed as a label, just above the component. + /// + [Parameter] + public string? Label { get; set; } + + /// + /// Gets or sets the content to be displayed as a label, just above the component. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Gets or sets the text to be used as the `aria-label` attribute of the input. + /// If not set, the will be used. + /// + [Parameter] + public string? AriaLabel { get; set; } + + /// + /// Gets or sets a collection of additional attributes that will be applied to the created element. + /// + [Parameter(CaptureUnmatchedValues = true)] + public virtual IReadOnlyDictionary? AdditionalAttributes { get; set; } + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender && ShouldRenderAriaLabel) + { + Module ??= await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE); + await Module.InvokeVoidAsync("setInputAriaLabel", ForId, string.IsNullOrWhiteSpace(AriaLabel) ? Label : AriaLabel); + } + } + + /// + private bool ShouldRenderAriaLabel => !string.IsNullOrWhiteSpace(ForId) + && (!string.IsNullOrWhiteSpace(Label) || + !string.IsNullOrWhiteSpace(AriaLabel)); +} diff --git a/src/Core/Components/Label/FluentInputLabel.razor.css b/src/Core/Components/Label/FluentInputLabel.razor.css new file mode 100644 index 0000000000..977d6dd5a2 --- /dev/null +++ b/src/Core/Components/Label/FluentInputLabel.razor.css @@ -0,0 +1,12 @@ +.fluent-input-label { + display: flex; + color: var(--neutral-foreground-rest); + cursor: pointer; + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + font-weight: initial; + font-variation-settings: var(--type-ramp-base-font-variations); + margin-bottom: calc(var(--design-unit) * 1px); + align-items: center; +} diff --git a/src/Core/Components/Label/FluentInputLabel.razor.js b/src/Core/Components/Label/FluentInputLabel.razor.js new file mode 100644 index 0000000000..cd7098d5da --- /dev/null +++ b/src/Core/Components/Label/FluentInputLabel.razor.js @@ -0,0 +1,18 @@ +export function setInputAriaLabel(id, value) { + + const element = document.getElementById(id); + + if (!!element) { + const inputElement = element.shadowRoot?.querySelector("input"); + + // input field included in Shadow DOM + if (!!inputElement) { + inputElement.setAttribute("aria-label", value); + } + + // Fluent element + else { + element.setAttribute("aria-label", value); + } + } +} \ No newline at end of file diff --git a/src/Core/Components/List/FluentAutocomplete.razor b/src/Core/Components/List/FluentAutocomplete.razor index 673fad1c5f..df42116228 100644 --- a/src/Core/Components/List/FluentAutocomplete.razor +++ b/src/Core/Components/List/FluentAutocomplete.razor @@ -5,12 +5,12 @@
    + /// Gets or sets the maximum number of options (items) selected. - /// Exceeding this value, the user must delete some elements in order to select new ones. + /// Exceeding this value requires the user to delete some elements in order to select new ones. /// See the . ///
    [Parameter] @@ -116,7 +116,7 @@ public override bool Multiple /// - /// Footer content, placed at the top of the popup panel. + /// Header content, placed at the top of the popup panel. /// [Parameter] public RenderFragment>? HeaderContent { get; set; } diff --git a/src/Core/Components/List/FluentCombobox.razor b/src/Core/Components/List/FluentCombobox.razor index d1a6d52c26..d23cf99e56 100644 --- a/src/Core/Components/List/FluentCombobox.razor +++ b/src/Core/Components/List/FluentCombobox.razor @@ -10,6 +10,7 @@ } + + @attributes="AdditionalAttributes"> @GetListOptions(Items) diff --git a/src/Core/Components/List/FluentListbox.razor b/src/Core/Components/List/FluentListbox.razor index 22dc916be8..6f7ba8bb83 100644 --- a/src/Core/Components/List/FluentListbox.razor +++ b/src/Core/Components/List/FluentListbox.razor @@ -9,6 +9,7 @@ }
    + @GetListOptions(Items) diff --git a/src/Core/Components/List/FluentOption.razor.cs b/src/Core/Components/List/FluentOption.razor.cs index b44620394a..806f34d6d1 100644 --- a/src/Core/Components/List/FluentOption.razor.cs +++ b/src/Core/Components/List/FluentOption.razor.cs @@ -55,7 +55,10 @@ protected override Task OnInitializedAsync() protected override async Task OnAfterRenderAsync(bool firstRender) { - if (firstRender && Selected && InternalListContext != null && InternalListContext.ValueChanged.HasDelegate) + if (firstRender && Selected && + InternalListContext != null && + InternalListContext.ValueChanged.HasDelegate && + InternalListContext.ListComponent.Multiple) { await InternalListContext.ValueChanged.InvokeAsync(Value); } @@ -82,7 +85,8 @@ protected async Task OnSelectHandler() else { if (InternalListContext != null && - InternalListContext.ValueChanged.HasDelegate) + InternalListContext.ValueChanged.HasDelegate && + InternalListContext.ListComponent.Items is null) { await InternalListContext.ValueChanged.InvokeAsync(Value); } diff --git a/src/Core/Components/List/FluentPersona.razor.cs b/src/Core/Components/List/FluentPersona.razor.cs index f18d3921e7..1c18cecc27 100644 --- a/src/Core/Components/List/FluentPersona.razor.cs +++ b/src/Core/Components/List/FluentPersona.razor.cs @@ -50,7 +50,7 @@ public partial class FluentPersona : FluentComponentBase public string? ImageSize { get; set; } /// - /// / The status to show. See for options. + /// The status to show. See for options. /// [Parameter] public PresenceStatus? Status { get; set; } diff --git a/src/Core/Components/List/FluentSelect.razor b/src/Core/Components/List/FluentSelect.razor index 94a4da69ab..f3e631554c 100644 --- a/src/Core/Components/List/FluentSelect.razor +++ b/src/Core/Components/List/FluentSelect.razor @@ -3,6 +3,7 @@ @typeparam TOption @InlineStyleValue + @GetListOptions(Items) diff --git a/src/Core/Components/List/FluentSelect.razor.cs b/src/Core/Components/List/FluentSelect.razor.cs index 2ea5a2150c..d5add5f8ae 100644 --- a/src/Core/Components/List/FluentSelect.razor.cs +++ b/src/Core/Components/List/FluentSelect.razor.cs @@ -7,7 +7,7 @@ namespace Microsoft.Fast.Components.FluentUI; public partial class FluentSelect : ListComponentBase { /// - protected virtual MarkupString? InlineStyleValue => new InlineStyleBuilder() + protected virtual MarkupString InlineStyleValue => new InlineStyleBuilder() .AddStyle($"#{Id}::part(listbox)", "max-height", Height, !string.IsNullOrWhiteSpace(Height)) .AddStyle($"#{Id}::part(listbox)", "height", Height, !string.IsNullOrWhiteSpace(Height)) .AddStyle($"#{Id}::part(listbox)", "z-index", ZIndex.SelectPopup.ToString()) diff --git a/src/Core/Components/List/ListComponentBase.cs b/src/Core/Components/List/ListComponentBase.cs index 53416db353..daf6f11e37 100644 --- a/src/Core/Components/List/ListComponentBase.cs +++ b/src/Core/Components/List/ListComponentBase.cs @@ -43,7 +43,7 @@ protected string? InternalValue Value = value; // Raise Changed events in another thread - Task.Run(() => RaiseChangedEventsAsync()); + RaiseChangedEventsAsync().ConfigureAwait(false); } } } @@ -61,10 +61,29 @@ protected string? InternalValue [Parameter] public string? Height { get; set; } + /// + /// Text displayed just above the component + /// + [Parameter] + public string? Label { get; set; } + + /// + /// Content displayed just above the component + /// + [Parameter] + public RenderFragment? LabelTemplate { get; set; } + + /// + /// Text used on aria-label attribute. + /// + [Parameter] + public virtual string? AriaLabel { get; set; } + /// /// Text used on aria-label attribute. /// [Parameter] + [Obsolete("Use AriaLabel instead")] public virtual string? Title { get; set; } /// @@ -187,28 +206,6 @@ this is not FluentSelect && _multiple = Multiple; } - if (Multiple) - { - if (SelectedOptions != null && _selectedOptions != SelectedOptions) - { - _selectedOptions = new List(SelectedOptions); - } - - if (SelectedOptions == null && Items != null && OptionSelected != null) - { - _selectedOptions.AddRange(Items.Where(item => OptionSelected.Invoke(item) && !_selectedOptions.Contains(item))); - InternalValue = GetOptionValue(_selectedOptions.FirstOrDefault()); - } - } - else - { - if (SelectedOption == null && Items != null && OptionSelected != null) - { - TOption? item = Items.FirstOrDefault(i => OptionSelected.Invoke(i)); - InternalValue = GetOptionValue(item); - } - } - if (!string.IsNullOrEmpty(Height) && string.IsNullOrEmpty(Id)) { Id = Identifier.NewId(); @@ -231,9 +228,29 @@ protected override void OnParametersSet() InternalValue = Value; } + if (Multiple) + { + if (SelectedOptions != null && _selectedOptions != SelectedOptions) + { + _selectedOptions = new List(SelectedOptions); + } + if (SelectedOptions == null && Items != null && OptionSelected != null) + { + _selectedOptions.AddRange(Items.Where(item => OptionSelected.Invoke(item) && !_selectedOptions.Contains(item))); + InternalValue = GetOptionValue(_selectedOptions.FirstOrDefault()); + } + } + else + { + if (SelectedOption == null && Items != null && OptionSelected != null) + { + TOption? item = Items.FirstOrDefault(i => OptionSelected.Invoke(i)); + InternalValue = GetOptionValue(item); + } + } - base.OnParametersSet(); + } /// @@ -252,7 +269,7 @@ protected virtual bool GetOptionSelected(TOption item) { return false; } - else if (OptionSelected != null) + else if (OptionSelected != null && _selectedOptions.Contains(item)) { return OptionSelected.Invoke(item); } @@ -343,7 +360,10 @@ protected virtual async Task OnSelectedItemChangedHandlerAsync(TOption? item) AddSelectedItem(item); await RaiseChangedEventsAsync(); } - + if (!Equals(item, SelectedOption)) + { + SelectedOption = item; + } } else { @@ -371,13 +391,11 @@ protected virtual async Task RaiseChangedEventsAsync() { await SelectedOptionChanged.InvokeAsync(SelectedOption); } - - if (ValueChanged.HasDelegate) - { - await ValueChanged.InvokeAsync(InternalValue); - } } - + if (ValueChanged.HasDelegate) + { + await ValueChanged.InvokeAsync(InternalValue); + } StateHasChanged(); } @@ -421,7 +439,7 @@ protected virtual async Task RaiseChangedEventsAsync() })); // Needed in fluent-listbox and fluent-select with mutliple select enabled - if (this is FluentListbox || + if (this is FluentListbox || (this is FluentSelect && Multiple) || (this is FluentAutocomplete && Multiple)) { @@ -486,4 +504,12 @@ protected virtual void AddSelectedItem(TOption? item) _selectedOptions.Add(item); } + + /// + protected internal string? GetAriaLabel() + { +#pragma warning disable CS0618 // Type or member is obsolete + return string.IsNullOrEmpty(AriaLabel) ? Title : AriaLabel; +#pragma warning restore CS0618 // Type or member is obsolete + } } diff --git a/src/Core/Components/MainLayout/FluentMainLayout.razor b/src/Core/Components/MainLayout/FluentMainLayout.razor index 1a4e7c3867..91ca93c839 100644 --- a/src/Core/Components/MainLayout/FluentMainLayout.razor +++ b/src/Core/Components/MainLayout/FluentMainLayout.razor @@ -5,15 +5,17 @@ @Header - - + + @SubHeader - + - - @NavMenuContent - - + @if (NavMenuContent != null) + { + + @NavMenuContent + + } @Body diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor b/src/Core/Components/MessageBar/FluentMessageBar.razor index 31cefa3c3a..21577d3560 100644 --- a/src/Core/Components/MessageBar/FluentMessageBar.razor +++ b/src/Core/Components/MessageBar/FluentMessageBar.razor @@ -15,7 +15,10 @@ @* Message *@
    - @((MarkupString)Title) + @if (!String.IsNullOrEmpty(Title)) + { + @((MarkupString)Title) + } @if (ChildContent is not null) { @ChildContent @@ -76,9 +79,12 @@
    @* Message *@ -
    - @((MarkupString)Title) -
    + @if (!String.IsNullOrEmpty(Title)) + { +
    + @((MarkupString)(Title)) +
    + } @* Close *@ diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs index 325576bbf3..65962b35ee 100644 --- a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs +++ b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs @@ -104,7 +104,7 @@ public Icon? Icon /// Most important info to be shown in the message bar. ///     [Parameter] - public string Title + public string? Title { get { diff --git a/src/Core/Components/MessageBar/FluentMessageBarContainer.razor.cs b/src/Core/Components/MessageBar/FluentMessageBarContainer.razor.cs index a72e2461da..68100a845d 100644 --- a/src/Core/Components/MessageBar/FluentMessageBarContainer.razor.cs +++ b/src/Core/Components/MessageBar/FluentMessageBarContainer.razor.cs @@ -83,19 +83,29 @@ protected IEnumerable MessagesToShow /// protected override void OnInitialized() { - MessageService.OnMessageItemsUpdated += OnAlertUpdateHandler; + MessageService.OnMessageItemsUpdated += OnMessageItemsUpdatedHandler; + MessageService.OnMessageItemsUpdatedAsync += OnMessageItemsUpdatedHandlerAsync; base.OnInitialized(); } /// - protected virtual void OnAlertUpdateHandler() + protected virtual void OnMessageItemsUpdatedHandler() { InvokeAsync(StateHasChanged); } + protected async virtual Task OnMessageItemsUpdatedHandlerAsync() + { + await Task.Run(() => + { + InvokeAsync(StateHasChanged); + }); + } + /// public void Dispose() { - MessageService.OnMessageItemsUpdated -= OnAlertUpdateHandler; + MessageService.OnMessageItemsUpdated -= OnMessageItemsUpdatedHandler; + MessageService.OnMessageItemsUpdatedAsync -= OnMessageItemsUpdatedHandlerAsync; } } diff --git a/src/Core/Components/MessageBar/Message.cs b/src/Core/Components/MessageBar/Message.cs index f6fd51db1b..2a9ee3cfd1 100644 --- a/src/Core/Components/MessageBar/Message.cs +++ b/src/Core/Components/MessageBar/Message.cs @@ -33,7 +33,7 @@ internal Message(MessageOptions options) /// /// Most important info to be shown in the message bar. /// - public string Title + public string? Title { get { diff --git a/src/Core/Components/MessageBar/Services/IMessageService.cs b/src/Core/Components/MessageBar/Services/IMessageService.cs index ba6fcc845e..c8ac1b4775 100644 --- a/src/Core/Components/MessageBar/Services/IMessageService.cs +++ b/src/Core/Components/MessageBar/Services/IMessageService.cs @@ -4,7 +4,7 @@ public interface IMessageService : IDisposable { /// - public event Action? OnMessageItemsUpdated; + public event Action OnMessageItemsUpdated; public event Func OnMessageItemsUpdatedAsync; /// IEnumerable AllMessages { get; } diff --git a/src/Core/Components/MessageBar/Services/MessageOptions.cs b/src/Core/Components/MessageBar/Services/MessageOptions.cs index 1c500d210e..0519811ab7 100644 --- a/src/Core/Components/MessageBar/Services/MessageOptions.cs +++ b/src/Core/Components/MessageBar/Services/MessageOptions.cs @@ -22,7 +22,7 @@ public class MessageOptions /// /// Most important info to be shown in the message bar. /// - public string Title { get; set; } = string.Empty; + public string? Title { get; set; } /// /// Message to be shown in the message bar after the title. @@ -32,7 +32,7 @@ public class MessageOptions /// /// Link to be shown in the message bar after the title/message. /// - public ActionLink? Link { get; set; } = new (); + public ActionLink? Link { get; set; } /// /// Action to be executed when the message bar is closed. diff --git a/src/Core/Components/MessageBar/Services/MessageService.cs b/src/Core/Components/MessageBar/Services/MessageService.cs index e3834c4144..b8cade80fa 100644 --- a/src/Core/Components/MessageBar/Services/MessageService.cs +++ b/src/Core/Components/MessageBar/Services/MessageService.cs @@ -22,7 +22,7 @@ public MessageService(NavigationManager navigationManager) } /// - public event Action? OnMessageItemsUpdated = default!; + public event Action OnMessageItemsUpdated = default!; /// public event Func OnMessageItemsUpdatedAsync = default!; diff --git a/src/Core/Components/NavMenu/FluentNavBase.cs b/src/Core/Components/NavMenu/FluentNavBase.cs new file mode 100644 index 0000000000..c1779964f0 --- /dev/null +++ b/src/Core/Components/NavMenu/FluentNavBase.cs @@ -0,0 +1,102 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Routing; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.Fast.Components.FluentUI; +using Microsoft.Fast.Components.FluentUI.Utilities; + +namespace Microsoft.Fast.Components.FluentUI; + +/// +/// Base class for and . +/// +public abstract class FluentNavBase : FluentComponentBase +{ + /// + /// URL for the group. + /// + [Parameter] + public string? Href { get; set; } + + /// + /// The target attribute specifies where to open the group, if Href is specified. + /// Possible values: _blank | _self | _parent | _top. + /// + [Parameter] + public string? Target { get; set; } + + /// + /// Icon to use if set. + /// + [Parameter] + public Icon? Icon { get; set; } + + /// + /// The color of the icon. It supports the theme colors, default value uses the themes drawer icon color. + /// + [Parameter] + public Color IconColor { get; set; } = Color.Accent; + + /// + /// If true, the button will be disabled. + /// + [Parameter] + public bool Disabled { get; set; } + + /// + /// Gets or sets the content to be shown. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Class names to use to indicate the item is active, separated by space. + /// + [Parameter] + public string ActiveClass { get; set; } = "active"; + + /// + /// Gets or sets how the link should be matched. Defaults to . + /// + [Parameter] + public NavLinkMatch Match { get; set; } = NavLinkMatch.Prefix; + + [CascadingParameter(Name = "NavMenuExpanded")] + public bool NavMenuExpanded { get; private set; } + + /// + /// Returns if the item has an set. + /// + internal bool HasIcon => Icon is not null; + + /// + /// The callback to invoke when the item is clicked. + /// + [Parameter] + public EventCallback OnClick { get; set; } + + /// + /// If true, force browser to redirect outside component router-space. + /// + [Parameter] + public bool ForceLoad { get; set; } + + [Inject] + private NavigationManager NavigationManager { get; set; } = default!; + + protected async Task OnClickHandler(MouseEventArgs ev) + { + if (Disabled) + { + return; + } + if (!string.IsNullOrEmpty(Href)) + { + NavigationManager.NavigateTo(Href, ForceLoad); + } + else + { + await OnClick.InvokeAsync(ev); + } + } +} + diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor b/src/Core/Components/NavMenu/FluentNavGroup.razor new file mode 100644 index 0000000000..baac263994 --- /dev/null +++ b/src/Core/Components/NavMenu/FluentNavGroup.razor @@ -0,0 +1,70 @@ +@namespace Microsoft.Fast.Components.FluentUI +@inherits FluentNavBase +@using Microsoft.AspNetCore.Components.Rendering +@using Microsoft.AspNetCore.Components.Routing + + +@if (NavMenuExpanded || HasIcon) +{ +
    +
    +
    + @if (!string.IsNullOrEmpty(Href)) + { + + @_renderContent + + @_renderButton + } + else + { +
    + @_renderContent + @_renderButton +
    + } +
    +
    + + + @ChildContent + + +
    +} +@code { + private void RenderContent(RenderTreeBuilder __builder) + { + @if (Icon is not null) + { + + } + else + { + + } +
    + @Title + @TitleTemplate +
    + } + + private void RenderButton(RenderTreeBuilder __builder) + { + @if (!HideExpander) + { + + + } + } +} \ No newline at end of file diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs new file mode 100644 index 0000000000..8a5b7a3af6 --- /dev/null +++ b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs @@ -0,0 +1,132 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.Fast.Components.FluentUI.Utilities; + +namespace Microsoft.Fast.Components.FluentUI; + +public partial class FluentNavGroup : FluentNavBase +{ + private readonly RenderFragment _renderContent; + private readonly RenderFragment _renderButton; + + protected string? ClassValue => + new CssBuilder("fluent-nav-group") + .AddClass("fluent-nav-item") + .AddClass("expanded", Expanded) + .AddClass("disabled", Disabled) + .AddClass(Class) + .Build(); + + internal string? StyleValue => new StyleBuilder(Style) + .AddStyle("margin", $"{Gap} 0" , !string.IsNullOrEmpty(Gap)) + .Build(); + + + protected string? ButtonClassValue => + new CssBuilder("expand-collapse-button") + .AddClass("rotate", Expanded) + .Build(); + + protected string? ExpandIconClassValue => + new CssBuilder("fluent-nav-expand-icon") + .Build(); + + internal Dictionary Attributes + { + get => Disabled ? new Dictionary() : new Dictionary + { + { "href", Href }, + { "target", Target }, + { "rel", !string.IsNullOrWhiteSpace(Target) ? "noopener noreferrer" : string.Empty } + }; + } + /// + /// The text to display for the group. + /// + [Parameter] + public string? Title { get; set; } + + /// + /// If true, expands the nav group, otherwise collapse it. + /// Two-way bindable + /// + [Parameter] + public bool Expanded { get; set; } + + /// + /// If true, hides expand button at the end of the NavGroup. + /// + [Parameter] + public bool HideExpander { get; set; } + + /// + /// Explicitly sets the height for the Collapse element to override the css default. + /// + [Parameter] + public string? MaxHeight { get; set; } + + /// + /// Defines the vertical spacing between the NavGroup and adjecent items. + /// Needs to be a valid CSS value. Defaults to 10px. + /// + [Parameter] + public string? Gap { get; set; } + + /// + /// If set, overrides the default expand icon. + /// + [Parameter] + public Icon ExpandIcon { get; set; } = new CoreIcons.Regular.Size12.ChevronRight(); + + /// + /// Allows for specific markup and styling to be applied for the group title + /// When using this, the containded s and s need to be placed in a ChildContent tag. + /// When specifying both Title and TitleTemplate, both will be rendered. + /// + [Parameter] + public RenderFragment? TitleTemplate { get; set; } + + /// + /// Gets or sets a callback that is triggered whenever changes. + /// + + [Parameter] + public EventCallback ExpandedChanged { get; set; } + + public FluentNavGroup() + { + _renderContent = RenderContent; + _renderButton = RenderButton; + } + + private Task ToggleExpandedAsync() => SetExpandedAsync(!Expanded); + + private async Task HandleExpanderKeyDownAsync(KeyboardEventArgs args) + { + Task handler = args.Code switch + { + "NumpadEnter" => SetExpandedAsync(!Expanded), + "NumpadArrowRight" => SetExpandedAsync(true), + "NumpadArrowLeft" => SetExpandedAsync(false), + "Enter" => SetExpandedAsync(!Expanded), + "ArrowRight" => SetExpandedAsync(true), + "ArrowLeft" => SetExpandedAsync(false), + _ => Task.CompletedTask + }; + await handler; + } + + private async Task SetExpandedAsync(bool value) + { + if (value == Expanded) + { + return; + } + + Expanded = value; + if (ExpandedChanged.HasDelegate) + { + await ExpandedChanged.InvokeAsync(value); + } + } +} \ No newline at end of file diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.css b/src/Core/Components/NavMenu/FluentNavGroup.razor.css new file mode 100644 index 0000000000..a7eed56927 --- /dev/null +++ b/src/Core/Components/NavMenu/FluentNavGroup.razor.css @@ -0,0 +1,60 @@ +::deep .fluent-nav-link { + width: 100%; + color: inherit; + align-items: center; + text-decoration: none; + display: grid; + grid-template-columns: 30px auto 40px; +} + +::deep .fluent-nav-icon { + margin-inline-end: calc(var(--design-unit) * 2px + 2px); + min-width: 20px; +} + +::deep .fluent-nav-group.disabled { + color: var(--neutral-fill-secondary-rest) !important; + pointer-events: none; +} + + ::deep .fluent-nav-group.disabled .fluent-nav-icon { + fill: var(--neutral-stroke-rest) !important; + } + + +/* Group expand/collapse */ +::deep .expand-collapse-button { + position: absolute; + right: calc(var(--design-unit) * 2px); + left: unset; + border-radius: calc(var(--control-corner-radius) * 1px); + width: calc((((var(--base-height-multiplier) / 2) * var(--design-unit)) + ((var(--design-unit) * var(--density)) / 2) + (var(--design-unit) * 2)) * 1px); + height: calc((((var(--base-height-multiplier) / 2) * var(--design-unit)) + ((var(--design-unit) * var(--density)) / 2) + (var(--design-unit) * 2)) * 1px); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +[dir="rtl"] * .expand-collapse-button { + position: absolute; + left: calc(var(--design-unit) * 2px); + right: unset; +} + +::deep .expand-collapse-button:hover { + background: var(--tree-item-expand-collapse-hover) +} + +::deep .expand-collapse-button svg { + transition: transform 0.1s linear 0s; + pointer-events: none; +} + +[dir="rtl"] * ::deep .expand-collapse-button svg { + transform: rotate(180deg); +} + +::deep .rotate.expand-collapse-button svg { + transform: rotate(90deg); +} diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor b/src/Core/Components/NavMenu/FluentNavLink.razor new file mode 100644 index 0000000000..49381059ba --- /dev/null +++ b/src/Core/Components/NavMenu/FluentNavLink.razor @@ -0,0 +1,45 @@ +@namespace Microsoft.Fast.Components.FluentUI +@inherits FluentNavBase +@using Microsoft.AspNetCore.Components.Rendering +@using Microsoft.AspNetCore.Components.Routing + +
    +
    +
    + @if (!OnClick.HasDelegate && !string.IsNullOrEmpty(Href)) + { + + @_renderContent + + } + else + { +
    + @_renderContent +
    + } +
    +
    +
    + +@code { + private void RenderContent(RenderTreeBuilder __builder) + { + @if (Icon is not null) + { + + } + else + { + + } +
    + @ChildContent +
    + + + } +} \ No newline at end of file diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor.cs b/src/Core/Components/NavMenu/FluentNavLink.razor.cs new file mode 100644 index 0000000000..812a4963d3 --- /dev/null +++ b/src/Core/Components/NavMenu/FluentNavLink.razor.cs @@ -0,0 +1,33 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.Fast.Components.FluentUI.Utilities; + +namespace Microsoft.Fast.Components.FluentUI; + +public partial class FluentNavLink : FluentNavBase +{ + private readonly RenderFragment _renderContent; + + internal string? ClassValue => new CssBuilder(Class) + .AddClass("fluent-nav-item") + .Build(); + + internal string? LinkClassValue => new CssBuilder("fluent-nav-link") + .AddClass($"disabled", Disabled) + .Build(); + + internal Dictionary Attributes + { + get => Disabled ? new Dictionary() : new Dictionary + { + { "href", Href }, + { "target", Target }, + { "rel", !string.IsNullOrWhiteSpace(Target) ? "noopener noreferrer" : string.Empty } + }; + } + + public FluentNavLink() + { + _renderContent = RenderContent; + } +} \ No newline at end of file diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor.css b/src/Core/Components/NavMenu/FluentNavLink.razor.css new file mode 100644 index 0000000000..615539adc0 --- /dev/null +++ b/src/Core/Components/NavMenu/FluentNavLink.razor.css @@ -0,0 +1,24 @@ +::deep .fluent-nav-link { + font-weight: 400; + color: inherit; + align-items: center; + text-decoration: none; + display: grid; + grid-template-columns: 30px auto 40px; +} + +::deep .fluent-nav-icon { + margin-inline-end: calc(var(--design-unit) * 2px + 2px); + min-width: 20px; +} + +::deep .fluent-nav-link.disabled { + color: var(--neutral-fill-secondary-rest) !important; + cursor: not-allowed ; + pointer-events: none; +} + + +::deep .fluent-nav-link.disabled .fluent-nav-icon { + fill: var(--neutral-stroke-rest) !important; +} diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor b/src/Core/Components/NavMenu/FluentNavMenu.razor index 2055c23304..2fd23c6f52 100644 --- a/src/Core/Components/NavMenu/FluentNavMenu.razor +++ b/src/Core/Components/NavMenu/FluentNavMenu.razor @@ -1,39 +1,32 @@ @namespace Microsoft.Fast.Components.FluentUI @inherits FluentComponentBase -
    - - - - - - @if (Collapsible) +
    + + @if (Collapsible) + { +
    +
    +
    + @if (ExpanderContent is not null) { - - @if (ExpanderContent is not null) - { -
    - @ExpanderContent -
    - } - else - { - - } -     + + @ExpanderContent + + } + else + { + } - @ChildContent - - - - +
    +
    +
    + } + @ChildContent
    \ No newline at end of file diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.cs b/src/Core/Components/NavMenu/FluentNavMenu.razor.cs index bfcdd409ff..b013ee5a76 100644 --- a/src/Core/Components/NavMenu/FluentNavMenu.razor.cs +++ b/src/Core/Components/NavMenu/FluentNavMenu.razor.cs @@ -1,50 +1,37 @@ using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Routing; using Microsoft.AspNetCore.Components.Web; using Microsoft.Fast.Components.FluentUI.Utilities; namespace Microsoft.Fast.Components.FluentUI; -public partial class FluentNavMenu : FluentComponentBase, INavMenuItemsOwner, IDisposable +public partial class FluentNavMenu : FluentComponentBase { private const string WIDTH_COLLAPSED_MENU = "40px"; - private bool _disposed; - private bool _hasChildIcons => ((INavMenuItemsOwner)this).HasChildIcons; - private readonly Dictionary _allItems = new(); - private readonly List _childItems = new(); - private readonly string _expandCollapseTreeItemId = Identifier.NewId(); - private FluentTreeItem? _currentlySelectedTreeItem; - private FluentTreeItem? _previousSuccessfullySelectedTreeItem; - protected string? ClassValue => new CssBuilder(Class) - .AddClass("navmenu") - .AddClass("collapsed", Collapsed) - .AddClass("navmenu-parent-element") + internal string? ClassValue => new CssBuilder("fluent-nav-menu") + .AddClass(Class) + .AddClass("collapsed", () => !Expanded) .Build(); - protected string? StyleValue => new StyleBuilder(Style) + internal string? StyleValue => new StyleBuilder(Style) + .AddStyle("margin", Margin, !string.IsNullOrEmpty(Margin)) .AddStyle("width", $"{Width}px", () => Expanded && Width.HasValue) + .AddStyle("width", "100%", () => Expanded && !Width.HasValue) .AddStyle("width", WIDTH_COLLAPSED_MENU, () => !Expanded) .AddStyle("min-width", WIDTH_COLLAPSED_MENU, () => !Expanded) .Build(); - - /// - /// Gets or sets the content to be rendered inside the component. - /// - [Parameter] - public RenderFragment? ChildContent { get; set; } - + /// - /// Gets or sets the content to be rendered for the expander icon - /// when the menu is collapsible. The default icon will be used if + /// Gets or sets the content to be rendered for the collapse icon + /// when the menu is collapsible. The default icon will be used if /// this is not specified. /// [Parameter] public RenderFragment? ExpanderContent { get; set; } /// - /// Gets or sets the title of the navigation menu - /// Default to "Navigation menu" + /// Gets or sets the title of the navigation menu using the aria-label attribute. + /// Defaults to "Navigation menu" /// [Parameter] public string? Title { get; set; } = "Navigation menu"; @@ -72,21 +59,16 @@ public partial class FluentNavMenu : FluentComponentBase, INavMenuItemsOwner, ID public EventCallback ExpandedChanged { get; set; } /// - /// Called when the user attempts to execute the default action of a menu item. + /// Adjust the vertical spacing between navlinks. /// [Parameter] - public EventCallback OnAction { get; set; } + public string? Margin { get; set; } - /// - /// If set to then the tree will - /// expand when it is created. - /// - [Parameter] - public bool InitiallyExpanded { get; set; } - /// - public bool Collapsed => !Expanded; + [Parameter] + public RenderFragment? ChildContent { get; set; } + /// /// Navigation manager /// @@ -98,132 +80,16 @@ public FluentNavMenu() Id = Identifier.NewId(); } - /// - IEnumerable INavMenuItemsOwner.GetChildItems() => _childItems; - - /// - void INavMenuItemsOwner.Register(FluentNavMenuItemBase child) - { - _childItems.Add(child); - StateHasChanged(); - } - - /// - void INavMenuItemsOwner.Unregister(FluentNavMenuItemBase child) - { - _childItems.Remove(child); - StateHasChanged(); - } - - void IDisposable.Dispose() - { - // Do not change this code. Put clean-up code in 'Dispose(bool disposing)' method - Dispose(disposing: true); - GC.SuppressFinalize(this); - } - - internal void Register(FluentNavMenuItemBase item) - { - _allItems[item.Id!] = item; - StateHasChanged(); - } - - internal async Task MenuItemExpandedChangedAsync(INavMenuItemsOwner menuItem) - { - if (menuItem.Id == _expandCollapseTreeItemId) - { - return; - } - - if (menuItem.Expanded && !Expanded) - { - await SetExpandedAsync(value: true); - } - } - - internal void Unregister(FluentNavMenuItemBase item) - { - _allItems.Remove(item.Id!); - StateHasChanged(); - } - - protected override async Task OnInitializedAsync() - { - NavigationManager.LocationChanged += HandleNavigationManagerLocationChanged; - - if (InitiallyExpanded) - { - await SetExpandedAsync(true); - } - } - - protected override void OnAfterRender(bool firstRender) - { - if (firstRender) - { - SelectMenuItemForCurrentUrl(); - } - } - - private void SelectMenuItemForCurrentUrl() - { - HandleNavigationManagerLocationChanged(null, new LocationChangedEventArgs(NavigationManager.Uri, isNavigationIntercepted: false)); - } - - protected virtual void Dispose(bool disposing) - { - if (_disposed) - { - return; - } - - if (disposing) - { - NavigationManager.LocationChanged -= HandleNavigationManagerLocationChanged; - _allItems.Clear(); - _childItems.Clear(); - } - - _disposed = true; - } - - private Task ToggleCollapsedAsync() => SetExpandedAsync(!Expanded); - - private async void HandleNavigationManagerLocationChanged(object? sender, LocationChangedEventArgs e) - { - FluentNavMenuItemBase? menuItem = null; - - string localPath = new Uri(NavigationManager.Uri).LocalPath; - if (string.IsNullOrEmpty(localPath)) - localPath = "/"; - - - if (localPath == "/") - { - if (_allItems.Count > 0) - menuItem = _allItems.Values.ElementAt(0); - } - else - { - string comparePath = (localPath + "/").Replace("//", "/"); - - menuItem = _allItems.Values - .Where(x => !string.IsNullOrEmpty(x.Href)) - .FirstOrDefault(x => x.Href != "/" && comparePath.StartsWith((x.Href! + "/").Replace("//", "/"), StringComparison.InvariantCultureIgnoreCase)); - } - if (menuItem is not null) - { - _currentlySelectedTreeItem = menuItem.TreeItem; - _previousSuccessfullySelectedTreeItem = menuItem.TreeItem; - await _currentlySelectedTreeItem.SetSelectedAsync(true); - } - } + private Task ToggleExpandedAsync() => SetExpandedAsync(!Expanded); private async Task HandleExpandCollapseKeyDownAsync(KeyboardEventArgs args) { Task handler = args.Code switch { - "Enter" => SetExpandedAsync(true), + "NumpadEnter" => SetExpandedAsync(!Expanded), + "NumpadArrowRight" => SetExpandedAsync(true), + "NumpadArrowLeft" => SetExpandedAsync(false), + "Enter" => SetExpandedAsync(value: !Expanded), "ArrowRight" => SetExpandedAsync(true), "ArrowLeft" => SetExpandedAsync(false), _ => Task.CompletedTask @@ -245,108 +111,6 @@ private async Task SetExpandedAsync(bool value) } StateHasChanged(); - } - - private async Task HandleCurrentSelectedChangedAsync(FluentTreeItem? treeItem) - { - // If an already activated menu item is clicked again, then it will - // it will match the previously selected one but have Selected == false. - // In this case, the user has indicated they wish to re-trigger - // its action. For the case of a simple navigation, this will be the same - // page and therefore do nothing. - // But for a nav menu with custom actions like showing a dialog etc, it will - // re-trigger and repeat that action. - bool itemWasClickedWhilstAlreadySelected = - treeItem?.Selected == false && treeItem == _previousSuccessfullySelectedTreeItem; - if (itemWasClickedWhilstAlreadySelected) - { - await TryActivateMenuItemAsync(treeItem); - return; - } - - // If the user has selected a different item, then it will not match the previously - // selected item, and it will have Selected == true. - // So try to activate the new one instead of the old one. - // If it succeeds then keep it selected, if it fails then revert to the last successfully selected - // tree item. This prevents the user from selecting an item with no Href or custom action. - if (treeItem?.Selected == true && _allItems.TryGetValue(treeItem.Id!, out FluentNavMenuItemBase? menuItem)) - { - bool activated = await TryActivateMenuItemAsync(treeItem); - if (activated) - { - _currentlySelectedTreeItem = treeItem; - _previousSuccessfullySelectedTreeItem = treeItem; - } - else - { - _currentlySelectedTreeItem = _previousSuccessfullySelectedTreeItem; - } - } - // At this point we have either - // 1) Succeeded, - // 2) Failed and reverted to a previously successful item without re-executing its action, - // 3) Failed and have no previously successful item to revert to. - // If we have no currently selected item then we fall back to selecting whichever matches the current - // URI. - if (_currentlySelectedTreeItem is null) - { - SelectMenuItemForCurrentUrl(); - } - - // Now we need to ensure the currently selected item has Selected=true, and - // the previous has Selected=false - if (_currentlySelectedTreeItem?.Selected == false) - { - await _currentlySelectedTreeItem.SetSelectedAsync(true); - } - - if (_currentlySelectedTreeItem?.Selected == true) - { - if (_previousSuccessfullySelectedTreeItem?.Selected == true && _previousSuccessfullySelectedTreeItem != _currentlySelectedTreeItem) - { - await _previousSuccessfullySelectedTreeItem.SetSelectedAsync(false); - } - _previousSuccessfullySelectedTreeItem = _currentlySelectedTreeItem; - } - - // If we still don't have a currently selected item, then make sure the invalid one - // the user tried to select is not selected. - if (treeItem?.Selected == true && treeItem != _currentlySelectedTreeItem) - { - await treeItem.SetSelectedAsync(false); - } - } - - private async ValueTask TryActivateMenuItemAsync(FluentTreeItem? treeItem) - { - if (treeItem is null) - { - return false; - } - - if (!_allItems.TryGetValue(treeItem.Id!, out FluentNavMenuItemBase? menuItem)) - { - return false; - } - - var actionArgs = new NavMenuActionArgs(target: menuItem); - if (OnAction.HasDelegate) - { - await OnAction.InvokeAsync(actionArgs); - } - - if (!actionArgs.Handled) - { - await menuItem.ExecuteAsync(actionArgs); - } - - if (actionArgs.Handled) - { - await menuItem.SetSelectedAsync(true); - } - - return actionArgs.Handled; } - -} +} \ No newline at end of file diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.css b/src/Core/Components/NavMenu/FluentNavMenu.razor.css index ca6e73f0da..32525ff060 100644 --- a/src/Core/Components/NavMenu/FluentNavMenu.razor.css +++ b/src/Core/Components/NavMenu/FluentNavMenu.razor.css @@ -1,95 +1,107 @@ -/* - NavMenu -*/ -.navmenu { - background-color: var(--neutral-layer-1); +/* NavMenu */ +.fluent-nav-menu { + flex-direction: column; + align-items: stretch; } - -/* - NavMenu expander -*/ -::deep .navmenu-expander::part(positioning-region) { - background-color: var(--neutral-fill-stealth-rest); -} - -::deep .navmenu-expander::part(content-region) { - margin-inline-start: calc(var(--design-unit) * 2px); +::deep .fluent-nav-item { + margin: calc(var(--design-unit) * 1px + 1px) 0; -webkit-user-select: none; user-select: none; } -::deep .navmenu-expander::part(positioning-region):hover { - background-color: var(--neutral-fill-secondary-rest); -} - -::deep .navmenu-expander.selected::after { - display: none; + /* Hover and active highlighting */ + ::deep .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) { + cursor: pointer; + background: var(--neutral-fill-secondary-rest); + } + + ::deep .fluent-nav-item .positioning-region:has(a.active) { + background: var(--neutral-fill-secondary-rest); + } + + /* Active item indicator */ + ::deep .fluent-nav-item .positioning-region:has(a.active)::before { + content: ""; + display: block; + position: absolute; + left: 0px; + right: unset; + width: 3px; + height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1px); + background: var(--accent-fill-rest); + border-radius: calc(var(--control-corner-radius) * 1px); + margin: calc(var(--design-unit) * 2px) 2px; + z-index: 5; + } + +[dir='rtl'] * ::deep .fluent-nav-item .positioning-region:has(a.active)::before { + left: unset; + right: 0px; } - - -/* - Child Elements (Groups and Items) -*/ -::deep .navmenu-child-element::part(content-region) { - -webkit-user-select: none; - user-select: none; +::deep .content-region { + display: flex; + align-items: center; + white-space: nowrap; + width: 100%; margin-inline-start: calc(var(--design-unit) * 2px); - margin-inline-end: calc(var(--design-unit) * 2px); } -::deep .navmenu .treeitem-text, ::deep .navmenu fluent-tree-item.navmenu-child-element::part(start) { - pointer-events: none; +/* Nav items */ +::deep .fluent-nav-item .positioning-region { + display: flex; + position: relative; + box-sizing: border-box; + background: var(--neutral-fill-stealth-rest); + border: calc(var(--stroke-width) * 1px) solid transparent; + border-radius: calc(var(--control-corner-radius) * 1px); + min-height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) + 1) * 1px); } -::deep .navmenu.collapsed .treeitem-text, ::deep .navmenu.collapsed fluent-tree-item.navmenu-child-element::part(expand-collapse-button) { - display: none; +::deep .fluent-nav-group .fluent-nav-item:last-of-type, .fluent-nav-menu .fluent-nav-item:last-of-type { + margin-bottom: 0; } - - -/* - Groups -*/ -::deep .navmenu-group::part(content-region) { - margin-inline-end: var(--expand-collapse-button-size); +/* level indenting */ +::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item > .positioning-region { + padding-inline-start: 24px; } +::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item > .positioning-region { + padding-inline-start: 48px; +} +::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item > .positioning-region { + padding-inline-start: 72px; +} -/* - Group expander -*/ -::deep .navmenu .navmenu-group::part(expand-collapse-button) { - right: calc(var(--design-unit) * 2px); - left: unset; - margin-inline-end: calc(var(--expand-collapse-button-size) * -1); +::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item > .positioning-region { + padding-inline-start: 96px; } -[dir="rtl"] * ::deep .navmenu-group::part(expand-collapse-button) { - left: calc(var(--design-unit) * 2px); - right: unset; - margin-inline-start: calc(var(--expand-collapse-button-size) - (var(--design-unit) * 2px)); +::deep .fluent-nav-text { + overflow: hidden; + text-overflow: ellipsis; } +/* collapsed */ +::deep.collapsed .fluent-nav-text { + display: none; +} -/* - Group items -*/ -::deep .navmenu-group .navmenu-child-element::part(content-region) { - padding-inline-start: calc(var(--design-unit) * 2px); +::deep.collapsed .expand-collapse-button { + display: none; } -/* Hide any items inside groups of a collapsed nav menu*/ -::deep .navmenu.collapsed > .navmenu-parent-element::part(items) { +::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item { display: none; } + ::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item { + display: none; + } -/* - Nav links -*/ -::deep .navmenu .navmenu-link::part(content-region) { - margin-inline-start: calc(var(--design-unit) * 2px); -} \ No newline at end of file + ::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item { + display: none; + } diff --git a/src/Core/Components/NavMenu/FluentNavMenuGroup.razor b/src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor similarity index 86% rename from src/Core/Components/NavMenu/FluentNavMenuGroup.razor rename to src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor index 188d0806a2..613effa0ab 100644 --- a/src/Core/Components/NavMenu/FluentNavMenuGroup.razor +++ b/src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor @@ -17,11 +17,11 @@ Text="@Text"> @if (HasIcon) { - + } else if (SiblingHasIcon) { - + } @if (GetShouldRenderChildContent()) { diff --git a/src/Core/Components/NavMenu/FluentNavMenuGroup.razor.cs b/src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor.cs similarity index 96% rename from src/Core/Components/NavMenu/FluentNavMenuGroup.razor.cs rename to src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor.cs index 57b2bc2934..370ef3574a 100644 --- a/src/Core/Components/NavMenu/FluentNavMenuGroup.razor.cs +++ b/src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor.cs @@ -3,8 +3,11 @@ namespace Microsoft.Fast.Components.FluentUI; +//[Obsolete("This component has been replaced with the FluentNavGroup and will be removed in a future version.")] public partial class FluentNavMenuGroup : FluentNavMenuItemBase, INavMenuItemsOwner, IDisposable { + internal const string ICON_WIDTH = "20px"; + private readonly List _childItems = new(); private bool HasChildIcons => ((INavMenuItemsOwner)this).HasChildIcons; private bool Visible => NavMenu.Expanded || HasIcon; diff --git a/src/Core/Components/NavMenu/FluentNavMenuItemBase.cs b/src/Core/Components/NavMenuTree/FluentNavMenuItemBase.cs similarity index 82% rename from src/Core/Components/NavMenu/FluentNavMenuItemBase.cs rename to src/Core/Components/NavMenuTree/FluentNavMenuItemBase.cs index 4c5cd5402d..fd91201cbc 100644 --- a/src/Core/Components/NavMenu/FluentNavMenuItemBase.cs +++ b/src/Core/Components/NavMenuTree/FluentNavMenuItemBase.cs @@ -67,7 +67,9 @@ public abstract class FluentNavMenuItemBase : FluentComponentBase, IDisposable public int? Width { get; set; } [CascadingParameter] - protected FluentNavMenu NavMenu { get; private set; } = default!; +#pragma warning disable CS0618 // Type or member is obsolete + protected FluentNavMenuTree NavMenu { get; private set; } = default!; +#pragma warning restore CS0618 // Type or member is obsolete [CascadingParameter(Name = "NavMenuExpanded")] protected bool NavMenuExpanded { get; private set; } @@ -117,7 +119,7 @@ protected internal virtual async ValueTask ExecuteAsync(NavMenuActionArgs args) if (!string.IsNullOrEmpty(Href)) { args.SetHandled(); - if (NeedsNavigation()) + if (args.ReNavigate || NeedsNavigation()) { NavigationManager.NavigateTo(Href); } @@ -164,9 +166,18 @@ protected virtual void Dispose(bool disposing) private bool NeedsNavigation() { - if (string.IsNullOrEmpty(Href) && Href != "/") + if (!string.IsNullOrEmpty(Href) && Href != "/") { - if (NavigationManager.Uri.Contains((Href + "/").Replace("//", "/"), StringComparison.InvariantCultureIgnoreCase)) + // If the current page is the same as the Href, don't navigate + if (new Uri(NavigationManager.Uri).LocalPath.Equals((Href), StringComparison.InvariantCultureIgnoreCase)) + { + return false; + } + + // If the local path starts with this Href (with an added "/"), don't navigate + // Example local path: https://.../Panel/Panel2 starts with Href: https://.../Panel + "/" + // Extra "/" is needed to avoid a match on http://.../Panel for https://.../Panels + if (new Uri(NavigationManager.Uri).LocalPath.StartsWith((Href +"/" ), StringComparison.InvariantCultureIgnoreCase)) { return false; } diff --git a/src/Core/Components/NavMenu/FluentNavMenuLink.razor b/src/Core/Components/NavMenuTree/FluentNavMenuLink.razor similarity index 100% rename from src/Core/Components/NavMenu/FluentNavMenuLink.razor rename to src/Core/Components/NavMenuTree/FluentNavMenuLink.razor diff --git a/src/Core/Components/NavMenu/FluentNavMenuLink.razor.cs b/src/Core/Components/NavMenuTree/FluentNavMenuLink.razor.cs similarity index 88% rename from src/Core/Components/NavMenu/FluentNavMenuLink.razor.cs rename to src/Core/Components/NavMenuTree/FluentNavMenuLink.razor.cs index 91873e6bf7..dee03a617d 100644 --- a/src/Core/Components/NavMenu/FluentNavMenuLink.razor.cs +++ b/src/Core/Components/NavMenuTree/FluentNavMenuLink.razor.cs @@ -2,6 +2,7 @@ namespace Microsoft.Fast.Components.FluentUI; +//[Obsolete("This component has been replaced with the FluentNavLink and will be removed in a future version.")] public partial class FluentNavMenuLink : FluentNavMenuItemBase, IDisposable { protected string? ClassValue => new CssBuilder(Class) diff --git a/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor new file mode 100644 index 0000000000..2055c23304 --- /dev/null +++ b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor @@ -0,0 +1,39 @@ +@namespace Microsoft.Fast.Components.FluentUI +@inherits FluentComponentBase + +
    + + + + + + @if (Collapsible) + { + + @if (ExpanderContent is not null) + { +
    + @ExpanderContent +
    + } + else + { + + } +     + } + @ChildContent +     +     +     +     +     +
    \ No newline at end of file diff --git a/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.cs b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.cs new file mode 100644 index 0000000000..764229bfc6 --- /dev/null +++ b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.cs @@ -0,0 +1,373 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Routing; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.Fast.Components.FluentUI.Utilities; + +namespace Microsoft.Fast.Components.FluentUI; + +//[Obsolete("This component has been replaced with the FluentNavMenu and will be removed in a future version.")] +public partial class FluentNavMenuTree : FluentComponentBase, INavMenuItemsOwner, IDisposable +{ + private const string WIDTH_COLLAPSED_MENU = "40px"; + private bool _disposed; + private bool _hasChildIcons => ((INavMenuItemsOwner)this).HasChildIcons; + private readonly Dictionary _allItems = new(); + private readonly List _childItems = new(); + private readonly string _expandCollapseTreeItemId = Identifier.NewId(); + private FluentTreeItem? _currentlySelectedTreeItem; + private FluentTreeItem? _previousSuccessfullySelectedTreeItem; + + protected string? ClassValue => new CssBuilder(Class) + .AddClass("navmenu") + .AddClass("collapsed", Collapsed) + .AddClass("navmenu-parent-element") + .Build(); + + protected string? StyleValue => new StyleBuilder(Style) + .AddStyle("width", $"{Width}px", () => Expanded && Width.HasValue) + .AddStyle("width", WIDTH_COLLAPSED_MENU, () => !Expanded) + .AddStyle("min-width", WIDTH_COLLAPSED_MENU, () => !Expanded) + .Build(); + + /// + /// Gets or sets the content to be rendered inside the component. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Gets or sets the content to be rendered for the expander icon + /// when the menu is collapsible. The default icon will be used if + /// this is not specified. + /// + [Parameter] + public RenderFragment? ExpanderContent { get; set; } + + /// + /// Gets or sets the title of the navigation menu + /// Default to "Navigation menu" + /// + [Parameter] + public string? Title { get; set; } = "Navigation menu"; + + /// + /// Gets or sets the width of the menu (in pixels). + /// + [Parameter] + public int? Width { get; set; } + + /// + /// Gets or sets whether or not the menu can be collapsed. + /// + [Parameter] + public bool Collapsible { get; set; } + + /// + [Parameter] + public bool Expanded { get; set; } = true; + + /// + /// Event callback for when the property changes. + /// + [Parameter] + public EventCallback ExpandedChanged { get; set; } + + /// + /// Called when the user attempts to execute the default action of a menu item. + /// + [Parameter] + public EventCallback OnAction { get; set; } + + /// + /// If set to then the tree will + /// expand when it is created. + /// + [Parameter] + public bool InitiallyExpanded { get; set; } + + /// + /// If true, the menu will re-navigate to the current page when the user clicks on the currently selected menu item. + /// + [Parameter] + public bool ReNavigate { get; set; } = false; + + /// + public bool Collapsed => !Expanded; + + /// + /// Navigation manager + /// + [Inject] + protected NavigationManager NavigationManager { get; private set; } = null!; + + public FluentNavMenuTree() + { + Id = Identifier.NewId(); + } + + /// + IEnumerable INavMenuItemsOwner.GetChildItems() => _childItems; + + /// + void INavMenuItemsOwner.Register(FluentNavMenuItemBase child) + { + _childItems.Add(child); + StateHasChanged(); + } + + /// + void INavMenuItemsOwner.Unregister(FluentNavMenuItemBase child) + { + _childItems.Remove(child); + StateHasChanged(); + } + + void IDisposable.Dispose() + { + // Do not change this code. Put clean-up code in 'Dispose(bool disposing)' method + Dispose(disposing: true); + GC.SuppressFinalize(this); + } + + internal void Register(FluentNavMenuItemBase item) + { + _allItems[item.Id!] = item; + StateHasChanged(); + } + + internal async Task MenuItemExpandedChangedAsync(INavMenuItemsOwner menuItem) + { + if (menuItem.Id == _expandCollapseTreeItemId) + { + return; + } + + if (menuItem.Expanded && !Expanded) + { + await SetExpandedAsync(value: true); + } + } + + internal void Unregister(FluentNavMenuItemBase item) + { + _allItems.Remove(item.Id!); + StateHasChanged(); + } + + protected override async Task OnInitializedAsync() + { + NavigationManager.LocationChanged += HandleNavigationManagerLocationChanged; + + if (InitiallyExpanded) + { + await SetExpandedAsync(true); + } + } + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender) + { + SelectMenuItemForCurrentUrl(); + } + } + + private void SelectMenuItemForCurrentUrl() + { + HandleNavigationManagerLocationChanged(null, new LocationChangedEventArgs(NavigationManager.Uri, isNavigationIntercepted: false)); + } + + protected virtual void Dispose(bool disposing) + { + if (_disposed) + { + return; + } + + if (disposing) + { + NavigationManager.LocationChanged -= HandleNavigationManagerLocationChanged; + _allItems.Clear(); + _childItems.Clear(); + } + + _disposed = true; + } + + private Task ToggleCollapsedAsync() => SetExpandedAsync(!Expanded); + + private async void HandleNavigationManagerLocationChanged(object? sender, LocationChangedEventArgs e) + { + FluentNavMenuItemBase? menuItem = null; + + string localPath = new Uri(NavigationManager.Uri).LocalPath; + if (string.IsNullOrEmpty(localPath)) + localPath = "/"; + + if (localPath == "/") + { + if (_allItems.Count > 0) menuItem = _allItems.Values.ElementAt(0); + } + else + { + // This will match the first item that has a Href that matches the current URL exactly + menuItem = _allItems.Values + .Where(x => !string.IsNullOrEmpty(x.Href)) + .FirstOrDefault(x => x.Href != "/" && localPath.Equals((x.Href!), StringComparison.InvariantCultureIgnoreCase)); + + // If not found, try to match the first item that has a Href (ending in a "/") that starts with the current URL + // URL: https://.../Panel/Panel2 starts with Href: https://.../Panel + "/" + // Extra "/" is needed to avoid matching https://.../Panels with https://.../Panel + if (menuItem is null) + { + menuItem = _allItems.Values + .Where(x => !string.IsNullOrEmpty(x.Href)) + .FirstOrDefault(x => x.Href != "/" && localPath.StartsWith((x.Href! + "/"), StringComparison.InvariantCultureIgnoreCase)); + } + } + if (menuItem is not null) + { + _currentlySelectedTreeItem = menuItem.TreeItem; + _previousSuccessfullySelectedTreeItem = menuItem.TreeItem; + await _currentlySelectedTreeItem.SetSelectedAsync(true); + } + } + + private async Task HandleExpandCollapseKeyDownAsync(KeyboardEventArgs args) + { + Task handler = args.Code switch + { + "Enter" => SetExpandedAsync(true), + "ArrowRight" => SetExpandedAsync(true), + "ArrowLeft" => SetExpandedAsync(false), + _ => Task.CompletedTask + }; + await handler; + } + + private async Task SetExpandedAsync(bool value) + { + if (value == Expanded) + { + return; + } + + Expanded = value; + if (ExpandedChanged.HasDelegate) + { + await ExpandedChanged.InvokeAsync(value); + } + + StateHasChanged(); + } + + private async Task HandleCurrentSelectedChangedAsync(FluentTreeItem? treeItem) + { + // If an already activated menu item is clicked again, then it will + // match the previously selected one but have Selected == false. + // In this case, the user has indicated they wish to re-trigger + // its action. For the case of a simple navigation, this will be the same + // page and therefore do nothing. + // But for a nav menu with custom actions like showing a dialog etc, it will + // re-trigger and repeat that action. + + // itemWasClickedWhilstAlreadySelected will never be true as treeItem is null when the treeItem is clicked again + // left the code in for now but this should probably be removed + //bool itemWasClickedWhilstAlreadySelected = treeItem?.Selected == false && treeItem == _previousSuccessfullySelectedTreeItem; + //if (itemWasClickedWhilstAlreadySelected) + //{ + // await TryActivateMenuItemAsync(treeItem); + // return; + //} + + if (treeItem is null && _previousSuccessfullySelectedTreeItem is not null && ReNavigate) + { + await TryActivateMenuItemAsync(_previousSuccessfullySelectedTreeItem, true); + return; + } + // If the user has selected a different item, then it will not match the previously + // selected item, and it will have Selected == true. + // So try to activate the new one instead of the old one. + // If it succeeds then keep it selected, if it fails then revert to the last successfully selected + // tree item. This prevents the user from selecting an item with no Href or custom action. + if (treeItem?.Selected == true && _allItems.TryGetValue(treeItem.Id!, out FluentNavMenuItemBase? menuItem)) + { + bool activated = await TryActivateMenuItemAsync(treeItem); + if (activated) + { + _currentlySelectedTreeItem = treeItem; + _previousSuccessfullySelectedTreeItem = treeItem; + } + else + { + _currentlySelectedTreeItem = _previousSuccessfullySelectedTreeItem; + } + } + + // At this point we have either + // 1) Succeeded, + // 2) Failed and reverted to a previously successful item without re-executing its action, + // 3) Failed and have no previously successful item to revert to. + // If we have no currently selected item then we fall back to selecting whichever matches the current + // URI. + if (_currentlySelectedTreeItem is null) + { + SelectMenuItemForCurrentUrl(); + } + + // Now we need to ensure the currently selected item has Selected=true, and + // the previous has Selected=false + if (_currentlySelectedTreeItem?.Selected == false) + { + await _currentlySelectedTreeItem.SetSelectedAsync(true); + } + + if (_currentlySelectedTreeItem?.Selected == true) + { + if (_previousSuccessfullySelectedTreeItem?.Selected == true && _previousSuccessfullySelectedTreeItem != _currentlySelectedTreeItem) + { + await _previousSuccessfullySelectedTreeItem.SetSelectedAsync(false); + } + _previousSuccessfullySelectedTreeItem = _currentlySelectedTreeItem; + } + + // If we still don't have a currently selected item, then make sure the invalid one + // the user tried to select is not selected. + if (treeItem?.Selected == true && treeItem != _currentlySelectedTreeItem) + { + await treeItem.SetSelectedAsync(false); + } + } + + private async ValueTask TryActivateMenuItemAsync(FluentTreeItem? treeItem, bool renavigate = false) + { + if (treeItem is null) + { + return false; + } + + if (!_allItems.TryGetValue(treeItem.Id!, out FluentNavMenuItemBase? menuItem)) + { + return false; + } + + NavMenuActionArgs? actionArgs = new NavMenuActionArgs(target: menuItem, renavigate: renavigate); + if (OnAction.HasDelegate) + { + await OnAction.InvokeAsync(actionArgs); + } + + if (!actionArgs.Handled) + { + await menuItem.ExecuteAsync(actionArgs); + } + + if (actionArgs.Handled) + { + await menuItem.SetSelectedAsync(true); + } + + return actionArgs.Handled; + } + +} diff --git a/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.css b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.css new file mode 100644 index 0000000000..23b0d4d066 --- /dev/null +++ b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.css @@ -0,0 +1,94 @@ +/* + NavMenu +*/ +.navmenu { + background-color: var(--neutral-layer-1); +} + +/* + NavMenu expander +*/ +::deep .navmenu-expander::part(positioning-region) { + background-color: var(--neutral-fill-stealth-rest); +} + +::deep .navmenu-expander::part(content-region) { + margin-inline-start: calc(var(--design-unit) * 2px); + -webkit-user-select: none; + user-select: none; +} + +::deep .navmenu-expander::part(positioning-region):hover { + background-color: var(--neutral-fill-secondary-rest); +} + +::deep .navmenu-expander.selected::after { + display: none; +} + + + +/* + Child Elements (Groups and Items) +*/ +::deep .navmenu-child-element::part(content-region) { + -webkit-user-select: none; + user-select: none; + margin-inline-start: calc(var(--design-unit) * 2px); + margin-inline-end: calc(var(--design-unit) * 2px); +} + +::deep .navmenu .treeitem-text, ::deep .navmenu fluent-tree-item.navmenu-child-element::part(start) { + pointer-events: none; +} + +::deep .navmenu.collapsed .treeitem-text, ::deep .navmenu.collapsed fluent-tree-item.navmenu-child-element::part(expand-collapse-button) { + display: none; +} + + + +/* + Groups +*/ +::deep .navmenu-group::part(content-region) { + margin-inline-end: var(--expand-collapse-button-size); +} + + + +/* + Group expander +*/ +::deep .navmenu .navmenu-group::part(expand-collapse-button) { + right: calc(var(--design-unit) * 2px); + left: unset; + margin-inline-end: calc(var(--expand-collapse-button-size) * -1); +} + +[dir="rtl"] * ::deep .navmenu-group::part(expand-collapse-button) { + left: calc(var(--design-unit) * 2px); + right: unset; + margin-inline-start: calc(var(--expand-collapse-button-size) - (var(--design-unit) * 2px)); +} + + +/* + Group items +*/ +::deep .navmenu-group .navmenu-child-element::part(content-region) { + padding-inline-start: calc(var(--design-unit) * 2px); +} + +/* Hide any items inside groups of a collapsed nav menu*/ +::deep .navmenu.collapsed > .navmenu-parent-element::part(items) { + display: none; +} + + +/* + Nav links +*/ +::deep .navmenu .navmenu-link::part(content-region) { + margin-inline-start: calc(var(--design-unit) * 2px); +} \ No newline at end of file diff --git a/src/Core/Components/NavMenu/INavMenuItemsOwner.cs b/src/Core/Components/NavMenuTree/INavMenuItemsOwner.cs similarity index 100% rename from src/Core/Components/NavMenu/INavMenuItemsOwner.cs rename to src/Core/Components/NavMenuTree/INavMenuItemsOwner.cs diff --git a/src/Core/Components/NumberField/FluentNumberField.razor b/src/Core/Components/NumberField/FluentNumberField.razor index 609faa9266..7faa4b3174 100644 --- a/src/Core/Components/NumberField/FluentNumberField.razor +++ b/src/Core/Components/NumberField/FluentNumberField.razor @@ -3,6 +3,7 @@ @typeparam TValue where TValue : new() @using System.Globalization; @using System.Reflection; + : FluentInputBase public string? DataList { get; set; } /// - /// Gets or sets the maximum lenth + /// Gets or sets the maximum length /// [Parameter] public int MaxLength { get; set; } = 14; diff --git a/src/Core/Components/Radio/FluentRadio.razor b/src/Core/Components/Radio/FluentRadio.razor index f2b7f98530..24d1037b9c 100644 --- a/src/Core/Components/Radio/FluentRadio.razor +++ b/src/Core/Components/Radio/FluentRadio.razor @@ -9,9 +9,12 @@ disabled="@Disabled" name=@Context!.GroupName required="@Required" + aria-label="@(string.IsNullOrEmpty(AriaLabel) ? Label : AriaLabel)" checked="@Context.CurrentValue?.Equals(Value)" current-value="@BindConverter.FormatValue(Value?.ToString())" @attributes="AdditionalAttributes"> + @Label + @LabelTemplate @ChildContent diff --git a/src/Core/Components/Radio/FluentRadio.razor.cs b/src/Core/Components/Radio/FluentRadio.razor.cs index 21a16b41f7..5b8bba51e9 100644 --- a/src/Core/Components/Radio/FluentRadio.razor.cs +++ b/src/Core/Components/Radio/FluentRadio.razor.cs @@ -16,6 +16,24 @@ public partial class FluentRadio<[DynamicallyAccessedMembers(DynamicallyAccessed [Parameter] public bool Readonly { get; set; } + /// + /// Text displayed just above the component + /// + [Parameter] + public string? Label { get; set; } + + /// + /// Content displayed just above the component + /// + [Parameter] + public RenderFragment? LabelTemplate { get; set; } + + /// + /// Text used on aria-label attribute. + /// + [Parameter] + public virtual string? AriaLabel { get; set; } + /// /// The value of the element /// diff --git a/src/Core/Components/Radio/FluentRadioGroup.razor b/src/Core/Components/Radio/FluentRadioGroup.razor index 7c07ab3757..ebe4d9ca22 100644 --- a/src/Core/Components/Radio/FluentRadioGroup.razor +++ b/src/Core/Components/Radio/FluentRadioGroup.razor @@ -2,7 +2,9 @@ @inherits FluentInputBase @typeparam TValue + /// Gets or sets the orientation of the group. See ///
    diff --git a/src/Core/Components/Search/FluentSearch.razor b/src/Core/Components/Search/FluentSearch.razor index 204ed6dd3c..70b339ed63 100644 --- a/src/Core/Components/Search/FluentSearch.razor +++ b/src/Core/Components/Search/FluentSearch.razor @@ -1,5 +1,6 @@ @namespace Microsoft.Fast.Components.FluentUI @inherits FluentInputBase + @typeparam TValue @attribute [CascadingTypeParameter(nameof(TValue))] +@LabelTemplate + @Label + @LabelTemplate @ChildContent @if (!string.IsNullOrEmpty(CheckedMessage)) { diff --git a/src/Core/Components/TextArea/FluentTextArea.razor b/src/Core/Components/TextArea/FluentTextArea.razor index fe2a1ff1ad..3b29537de3 100644 --- a/src/Core/Components/TextArea/FluentTextArea.razor +++ b/src/Core/Components/TextArea/FluentTextArea.razor @@ -1,5 +1,6 @@ @namespace Microsoft.Fast.Components.FluentUI @inherits FluentInputBase + + private void HandleDismissed() { - OnDismissed.InvokeAsync(EventArgs.Empty); + if (OnDismissed.HasDelegate) + { + OnDismissed.InvokeAsync(EventArgs.Empty); + } } /// diff --git a/src/Core/Enums/Color.cs b/src/Core/Enums/Color.cs index b347790366..31b848bcfd 100644 --- a/src/Core/Enums/Color.cs +++ b/src/Core/Enums/Color.cs @@ -71,6 +71,12 @@ public enum Color [Description("var(--neutral-layer-1)")] Lightweight, + /// + /// Use the --neutral-stroke-rest CSS variable color, adapts to light/dark mode. + /// + [Description("var(--neutral-stroke-rest)")] + Disabled, + /// /// Supply an HTML hex color string value (#rrggbb or #rgb) for the CustomColor parameter. /// diff --git a/src/Core/Events/NavMenuActionArgs.cs b/src/Core/Events/NavMenuActionArgs.cs index 7586b55165..b6279e0ed2 100644 --- a/src/Core/Events/NavMenuActionArgs.cs +++ b/src/Core/Events/NavMenuActionArgs.cs @@ -8,11 +8,17 @@ public class NavMenuActionArgs : EventArgs { public bool Handled { get; private set; } public FluentNavMenuItemBase Target { get; } + public bool ReNavigate { get; set; } public NavMenuActionArgs(FluentNavMenuItemBase target) { Target = target ?? throw new ArgumentNullException(nameof(target)); } + public NavMenuActionArgs(FluentNavMenuItemBase target, bool renavigate) + { + Target = target ?? throw new ArgumentNullException(nameof(target)); + ReNavigate = renavigate; + } public void SetHandled() { diff --git a/src/Core/Utilities/InlineStyleBuilder.cs b/src/Core/Utilities/InlineStyleBuilder.cs index 77ab66733c..51d6d870f9 100644 --- a/src/Core/Utilities/InlineStyleBuilder.cs +++ b/src/Core/Utilities/InlineStyleBuilder.cs @@ -80,10 +80,10 @@ public InlineStyleBuilder AddStyle(string name, string prop, string? value, Func /// Finalize the completed Style as a string. /// /// string - public MarkupString? BuildMarkupString() + public MarkupString BuildMarkupString() { var styles = Build(); - return styles != null ? (MarkupString)styles : null; + return styles != null ? (MarkupString)styles : (MarkupString)string.Empty; } /// diff --git a/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html new file mode 100644 index 0000000000..c21abd29f8 --- /dev/null +++ b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted.verified.html @@ -0,0 +1,2 @@ + +childcontent \ No newline at end of file diff --git a/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html new file mode 100644 index 0000000000..c6687b37f2 --- /dev/null +++ b/tests/Core/Card/FluentCardTests.FluentCard_NotAreaRestricted_AdditionalStyle.verified.html @@ -0,0 +1,2 @@ + +childcontent \ No newline at end of file diff --git a/tests/Core/Card/FluentCardTests.cs b/tests/Core/Card/FluentCardTests.cs index 68e50f2c18..4253794696 100644 --- a/tests/Core/Card/FluentCardTests.cs +++ b/tests/Core/Card/FluentCardTests.cs @@ -18,6 +18,35 @@ public void FluentCard_Default() cut.Verify(); } + [Fact] + public void FluentCard_NotAreaRestricted() + { + // Arrange && Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.AreaRestricted, false); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCard_NotAreaRestricted_AdditionalStyle() + { + // Arrange && Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.AreaRestricted, false); + parameters.Add(p => p.Style, "background-color: red"); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + [Fact] public void FluentCard_AdditionalCssClass() { diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Accent.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Accent.verified.html new file mode 100644 index 0000000000..30e786217f --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Accent.verified.html @@ -0,0 +1,3 @@ + +
    fluent-button
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Lightweight.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Lightweight.verified.html new file mode 100644 index 0000000000..b3c51da43b --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Lightweight.verified.html @@ -0,0 +1,3 @@ + +
    fluent-button
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Neutral.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Neutral.verified.html new file mode 100644 index 0000000000..88df7a89c9 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AppearanceAttribute-Neutral.verified.html @@ -0,0 +1,3 @@ + +
    fluent-button
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AttributesDefaultValues.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AttributesDefaultValues.verified.html new file mode 100644 index 0000000000..e0379dbdb5 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_AttributesDefaultValues.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorAndColorAttribute.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorAndColorAttribute.verified.html new file mode 100644 index 0000000000..e0379dbdb5 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorAndColorAttribute.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorErrorLuminanceDark.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorErrorLuminanceDark.verified.html new file mode 100644 index 0000000000..ff67697a35 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorErrorLuminanceDark.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorLightweightLuminanceDark.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorLightweightLuminanceDark.verified.html new file mode 100644 index 0000000000..71fc5014b1 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorLightweightLuminanceDark.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorLightweightLuminanceLight.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorLightweightLuminanceLight.verified.html new file mode 100644 index 0000000000..71fc5014b1 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_BackgroundColorLightweightLuminanceLight.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    1
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_ShowOverflowAttribute.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_ShowOverflowAttribute.verified.html new file mode 100644 index 0000000000..e1e7364d4c --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_ShowOverflowAttribute.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    9+
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_ShowZeroAttribute.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_ShowZeroAttribute.verified.html new file mode 100644 index 0000000000..f8677c7312 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_ShowZeroAttribute.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    10
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_WithAdditionalCssClass.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_WithAdditionalCssClass.verified.html new file mode 100644 index 0000000000..4a4ac049dc --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_WithAdditionalCssClass.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    10
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_WithAdditionalStyle.verified.html b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_WithAdditionalStyle.verified.html new file mode 100644 index 0000000000..5c379b4cad --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_WithAdditionalStyle.verified.html @@ -0,0 +1,3 @@ + +
    childcontent
    10
    +
    \ No newline at end of file diff --git a/tests/Core/CounterBadge/FluentCounterBadgeTests.cs b/tests/Core/CounterBadge/FluentCounterBadgeTests.cs new file mode 100644 index 0000000000..c64c2f05f1 --- /dev/null +++ b/tests/Core/CounterBadge/FluentCounterBadgeTests.cs @@ -0,0 +1,239 @@ +using Bunit; +using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.DependencyInjection; +using Xunit; + +namespace Microsoft.Fast.Components.FluentUI.Tests.CounterBadge; + +public class FluentCounterBadgeTests : TestBase +{ + [Inject] + public GlobalState GlobalState { get; set; } = default!; + + [Fact] + public void FluentCounterBadge_AttributesDefaultValues() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Theory] + [InlineData(Appearance.Accent)] + [InlineData(Appearance.Lightweight)] + [InlineData(Appearance.Neutral)] + public void FluentCounterBadge_AppearanceAttribute(Appearance appearance) + { + // Arrange && + TestContext.Services.AddSingleton(new GlobalState()); + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Appearance, appearance); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("fluent-button"); + }); + + // Assert + cut.Verify(suffix: appearance.ToString()); + } + + + [Fact] + public void FluentCounterBadge_WithAdditionalCssClass() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Class, "additional_class"); + parameters.Add(p => p.Count, 10); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCounterBadge_WithAdditionalStyle() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Style, "background-color: red"); + parameters.Add(p => p.Count, 10); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCounterBadge_ShowOverflowAttribute() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.ShowOverflow, true); + parameters.Add(p => p.Max, 9); + parameters.Add(p => p.Count, 10); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCounterBadge_BackgroundColorAndColorAttribute() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + IRenderedComponent? cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.BackgroundColor, Color.Accent); + parameters.Add(p => p.Color, Color.Fill); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCounterBadge_BackgroundColorNullAndColorSet() + { + // Arrange, Act && Assert + TestContext.Services.AddSingleton(new GlobalState()); + Assert.Throws(() => TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.BackgroundColor, null); + parameters.Add(p => p.Color, Color.Fill); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + })); + } + + [Fact] + public void FluentCounterBadge_BackgroundColorSetAndColorNull() + { + // Arrange, Act && Assert + TestContext.Services.AddSingleton(new GlobalState()); + Assert.Throws(() => TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.BackgroundColor, Color.Accent); + parameters.Add(p => p.Color, null); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + })); + } + + [Fact] + public void FluentCounterBadge_BackgroundColorCustom() + { + // Arrange, Act && Assert + TestContext.Services.AddSingleton(new GlobalState()); + Assert.Throws(() => TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.BackgroundColor, Color.Custom); + parameters.Add(p => p.Color, Color.Custom); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + })); + } + + [Fact] + public void FluentCounterBadge_AppearanceOutline() + { + // Arrange, Act && Assert + TestContext.Services.AddSingleton(new GlobalState()); + Assert.Throws(() => TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Appearance, Appearance.Outline); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + })); + } + + [Fact] + public void FluentCounterBadge_ShowZeroAttribute() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.ShowZero, true); + parameters.Add(p => p.Count, 10); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCounterBadge_BackgroundColorLightweightLuminanceDark() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.BackgroundColor, Color.Lightweight); + parameters.Add(p => p.Color, Color.Fill); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCounterBadge_BackgroundColorLightweightLuminanceLight() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.BackgroundColor, Color.Lightweight); + parameters.Add(p => p.Color, Color.Fill); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentCounterBadge_BackgroundColorErrorLuminanceDark() + { + // Arrange && Act + TestContext.Services.AddSingleton(new GlobalState()); + + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.BackgroundColor, Color.Error); + parameters.Add(p => p.Color, Color.Fill); + parameters.Add(p => p.Count, 1); + parameters.AddChildContent("childcontent"); + }); + + // Assert + cut.Verify(); + } +} diff --git a/tests/Core/FluentAssertOptions.cs b/tests/Core/FluentAssertOptions.cs index 90183e5ef8..7298258dd2 100644 --- a/tests/Core/FluentAssertOptions.cs +++ b/tests/Core/FluentAssertOptions.cs @@ -23,6 +23,7 @@ public class FluentAssertOptions public string ScrubLinesWithReplace(string content) { return content.ReplaceAttribute("id", "xxx") + .ReplaceAttribute("for", "xxx") .ReplaceAttribute("blazor:elementreference", "xxx") .ReplaceAttribute("anchor", "xxx"); } diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html index c4f54cdc98..2d9d64bca1 100644 --- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html +++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html @@ -8,10 +8,9 @@
    This is a message -
    -
    diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html new file mode 100644 index 0000000000..91478a34cb --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html @@ -0,0 +1,21 @@ + +
    +
    +
    +
    + +
    + Group title +
    + +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified (2).html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified (2).html new file mode 100644 index 0000000000..6d41c49e26 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified (2).html @@ -0,0 +1,20 @@ + +
    +
    +
    +
    + +
    Group title +
    + +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified.html new file mode 100644 index 0000000000..39c558143d --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified.html @@ -0,0 +1,20 @@ + +
    +
    +
    +
    + +
    Group title +
    + +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Empty.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Empty.verified.html new file mode 100644 index 0000000000..469d4b508d --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Empty.verified.html @@ -0,0 +1,20 @@ + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Gap.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Gap.verified.html new file mode 100644 index 0000000000..3e6730937b --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Gap.verified.html @@ -0,0 +1,20 @@ + +
    +
    +
    +
    + +
    Group title +
    + +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_HideExpander.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_HideExpander.verified.html new file mode 100644 index 0000000000..705d4cd30e --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_HideExpander.verified.html @@ -0,0 +1,15 @@ + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Href.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Href.verified.html new file mode 100644 index 0000000000..52b6fd2bdd --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Href.verified.html @@ -0,0 +1,20 @@ + +
    +
    +
    + + +
    Group title +
    +     + +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Icon.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Icon.verified.html new file mode 100644 index 0000000000..0ff11a7609 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Icon.verified.html @@ -0,0 +1,22 @@ + +
    +
    +
    +
    + +
    Group title +
    + +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_IconAndIconColor.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_IconAndIconColor.verified.html new file mode 100644 index 0000000000..1e7bc5b5ae --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_IconAndIconColor.verified.html @@ -0,0 +1,22 @@ + +
    +
    +
    +
    + +
    Group title +
    + +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_TitleTemplate.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_TitleTemplate.verified.html new file mode 100644 index 0000000000..91d63a0657 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_TitleTemplate.verified.html @@ -0,0 +1,21 @@ + +
    +
    +
    +
    + +
    +

    Group title

    +
    + +
    +
    +
    +
    +
    NavGroups and NavLinks here
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavGroupTests.cs b/tests/Core/NavMenu/FluentNavGroupTests.cs new file mode 100644 index 0000000000..4cf8245a4a --- /dev/null +++ b/tests/Core/NavMenu/FluentNavGroupTests.cs @@ -0,0 +1,147 @@ +using Microsoft.Fast.Components.FluentUI.Tests.Extensions; +using Xunit; + +namespace Microsoft.Fast.Components.FluentUI.Tests.NavMenu; + +public class FluentNavGroupTests : TestBase +{ + [Fact] + public void FluentNavGroup_Default() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.Title, "Group title"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_Empty() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_HideExpander() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.HideExpander, true); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_Disabled() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.Disabled, true); + parameters.Add(p => p.Title, "Group title"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_TitleTemplate() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.TitleTemplate, "

    Group title

    "); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_Gap() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.Title, "Group title"); + parameters.Add(p => p.Gap, "20px"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_Href() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.Title, "Group title"); + parameters.Add(p => p.Href, "/NavMenu"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_Icon() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.Title, "Group title"); + parameters.Add(p => p.Icon, SampleIcons.Info); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_IconAndIconColor() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.Title, "Group title"); + parameters.Add(p => p.Icon, SampleIcons.Info); + parameters.Add(p => p.IconColor, Color.Neutral); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + +} diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Default.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Default.verified.html new file mode 100644 index 0000000000..17d77eeee3 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Default.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    +
    + +
    NavLink text
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ExtendedTtitle.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ExtendedTtitle.verified.html new file mode 100644 index 0000000000..3b7ccb8f99 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ExtendedTtitle.verified.html @@ -0,0 +1,13 @@ + +
    +
    +
    +
    + +
    +

    NavLink text

    +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ForceLoad.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ForceLoad.verified.html new file mode 100644 index 0000000000..08d6cf5258 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ForceLoad.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    + + +
    NavLink text
    +     +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Href.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Href.verified.html new file mode 100644 index 0000000000..08d6cf5258 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Href.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    + + +
    NavLink text
    +     +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Icon.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Icon.verified.html new file mode 100644 index 0000000000..61c7275191 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Icon.verified.html @@ -0,0 +1,13 @@ + +
    +
    +
    +
    + +
    NavLink text
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_IconAndIconColor.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_IconAndIconColor.verified.html new file mode 100644 index 0000000000..d891dbbbb2 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_IconAndIconColor.verified.html @@ -0,0 +1,13 @@ + +
    +
    +
    +
    + +
    NavLink text
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Match.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Match.verified.html new file mode 100644 index 0000000000..08d6cf5258 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Match.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    + + +
    NavLink text
    +     +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_OnClick.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_OnClick.verified.html new file mode 100644 index 0000000000..17d77eeee3 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_OnClick.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    +
    + +
    NavLink text
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Target.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Target.verified.html new file mode 100644 index 0000000000..2d91ef5729 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Target.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    + + +
    NavLink text
    +     +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavLinkTests.cs b/tests/Core/NavMenu/FluentNavLinkTests.cs new file mode 100644 index 0000000000..b0c3822111 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavLinkTests.cs @@ -0,0 +1,144 @@ +using Microsoft.AspNetCore.Components.Routing; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.Fast.Components.FluentUI.Tests.Extensions; +using Xunit; + +namespace Microsoft.Fast.Components.FluentUI.Tests.NavMenu; + +public class FluentNavLinkTests : TestBase +{ + [Fact] + public void FluentNavLink_Default() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_ExtendedTtitle() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.AddChildContent("

    NavLink text

    "); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_Href() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Href, "/NavMenu"); + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_Target() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Href, "/NavMenu"); + parameters.Add(p => p.Target, "_blank"); + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_Match() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Href, "/NavMenu"); + parameters.Add(p => p.Match, NavLinkMatch.All); + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_ForceLoad() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Href, "/NavMenu"); + parameters.Add(p => p.ForceLoad, true); + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_Icon() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Icon, SampleIcons.Info); + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_IconAndIconColor() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.NavMenuExpanded, true); + parameters.Add(p => p.Icon, SampleIcons.Info); + parameters.Add(p => p.IconColor, Color.Neutral); + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_OnClick() + { + Action onClickHandler = _ => { }; + + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.OnClick, onClickHandler); + parameters.AddChildContent("NavLink text"); + }); + + // Assert + cut.Verify(); + } + + //ActiveClass + //Match + //Target +} diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Collapsible.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Collapsible.verified.html new file mode 100644 index 0000000000..c4a556086e --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Collapsible.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    +
    + +
    +
    +
    NavGroups and NavLinks here
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CollapsibleCustomTitle.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CollapsibleCustomTitle.verified.html new file mode 100644 index 0000000000..d6b657561e --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CollapsibleCustomTitle.verified.html @@ -0,0 +1,11 @@ + +
    +
    +
    +
    + +
    +
    +
    NavGroups and NavLinks here
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CustomTitle.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CustomTitle.verified.html new file mode 100644 index 0000000000..39ec9a18d1 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CustomTitle.verified.html @@ -0,0 +1,2 @@ + +
    NavGroups and NavLinks here
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Default.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Default.verified.html new file mode 100644 index 0000000000..bbf9fd18df --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Default.verified.html @@ -0,0 +1,2 @@ + +
    NavGroups and NavLinks here
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_ExpanderContent.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_ExpanderContent.verified.html new file mode 100644 index 0000000000..ab9e5b4c22 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_ExpanderContent.verified.html @@ -0,0 +1,10 @@ + +
    +
    +
    +
    +
    custom expander
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Margin.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Margin.verified.html new file mode 100644 index 0000000000..a3874c3e52 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Margin.verified.html @@ -0,0 +1,2 @@ + +
    NavGroups and NavLinks here
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_NotExpanded.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_NotExpanded.verified.html new file mode 100644 index 0000000000..40aabf93c6 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_NotExpanded.verified.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Width.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Width.verified.html new file mode 100644 index 0000000000..f1c083ae5b --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Width.verified.html @@ -0,0 +1,2 @@ + +
    NavGroups and NavLinks here
    \ No newline at end of file diff --git a/tests/Core/NavMenu/FluentNavMenuTests.cs b/tests/Core/NavMenu/FluentNavMenuTests.cs new file mode 100644 index 0000000000..c587c458c2 --- /dev/null +++ b/tests/Core/NavMenu/FluentNavMenuTests.cs @@ -0,0 +1,119 @@ +using Xunit; + +namespace Microsoft.Fast.Components.FluentUI.Tests.NavMenu; + +public class FluentNavMenuTests : TestBase +{ + [Fact] + public void FluentNavMenu_Default() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavMenu_Collapsible() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Collapsible, true); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavMenu_NotExpanded() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Expanded, false); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavMenu_CustomTitle() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Title, "Custom title"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + + [Fact] + public void FluentNavMenu_CollapsibleCustomTitle() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Collapsible, true); + parameters.Add(p => p.Title, "Custom title"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavMenu_Width() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Width, 300); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavMenu_Margin() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Margin, "5px 15px"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavMenu_ExpanderContent() + { + // Arrange & Act + var cut = TestContext.RenderComponent(parameters => + { + parameters.Add(p => p.Collapsible, true); + parameters.Add(p => p.ExpanderContent, "
    custom expander
    "); + }); + + // Assert + cut.Verify(); + } +} diff --git a/tests/Core/NumberField/FluentNumberFieldTests.FluentNumberField_Label.verified.html b/tests/Core/NumberField/FluentNumberFieldTests.FluentNumberField_Label.verified.html new file mode 100644 index 0000000000..4c7a934071 --- /dev/null +++ b/tests/Core/NumberField/FluentNumberFieldTests.FluentNumberField_Label.verified.html @@ -0,0 +1,4 @@ + + +100 \ No newline at end of file diff --git a/tests/Core/NumberField/FluentNumberFieldTests.FluentNumberField_LabelTemplate.verified.html b/tests/Core/NumberField/FluentNumberFieldTests.FluentNumberField_LabelTemplate.verified.html new file mode 100644 index 0000000000..c0889989f3 --- /dev/null +++ b/tests/Core/NumberField/FluentNumberFieldTests.FluentNumberField_LabelTemplate.verified.html @@ -0,0 +1,5 @@ + + +100 \ No newline at end of file diff --git a/tests/Core/NumberField/FluentNumberFieldTests.cs b/tests/Core/NumberField/FluentNumberFieldTests.cs index 9ae564b233..855ab67a04 100644 --- a/tests/Core/NumberField/FluentNumberFieldTests.cs +++ b/tests/Core/NumberField/FluentNumberFieldTests.cs @@ -1,5 +1,6 @@ using Bunit; using FluentAssertions; +using Microsoft.AspNetCore.Components; using Xunit; namespace Microsoft.Fast.Components.FluentUI.Tests.NumberField; @@ -513,4 +514,39 @@ public void FluentNumberField_AdditionalParameters() // Assert cut.Verify(); } + + [Fact] + public void FluentNumberField_LabelTemplate() + { + int currentValue = 100; + + // Arrange && Act + var cut = TestContext.RenderComponent>(parameters => + { + parameters.Bind(p => p.Value, currentValue, newValue => currentValue = 101); + parameters.Add(p => p.LabelTemplate, "

    My label

    "); + parameters.AddChildContent("100"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNumberField_Label() + { + int currentValue = 100; + TestContext.JSInterop.Mode = JSRuntimeMode.Loose; + + // Arrange && Act + var cut = TestContext.RenderComponent>(parameters => + { + parameters.Bind(p => p.Value, currentValue, newValue => currentValue = 101); + parameters.Add(p => p.Label, "My label"); + parameters.AddChildContent("100"); + }); + + // Assert + cut.Verify(); + } } \ No newline at end of file diff --git a/tests/Core/Utilities/InlineStyleBuilderTests.cs b/tests/Core/Utilities/InlineStyleBuilderTests.cs index 01954821a3..8d55d85d58 100644 --- a/tests/Core/Utilities/InlineStyleBuilderTests.cs +++ b/tests/Core/Utilities/InlineStyleBuilderTests.cs @@ -44,5 +44,6 @@ public void InlineStyleBuilder_NoStyle() // Assert - Values are sorted Assert.Null(styleBuilder.Build(newLineSeparator: false)); + Assert.Equal(string.Empty, styleBuilder.BuildMarkupString().Value); } }