diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml index 06fa12020f..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 @@ - + @@ -1155,11 +1093,6 @@ Optionally defines a class to be applied to a rendered row. - - - If specified, grids render this fragment when there is no content. - - Constructs an instance of . @@ -1193,11 +1126,6 @@ - - - Gets or sets the reference to the item that holds this cell's values - - Gets or sets the cell type. See @@ -1220,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 @@ -1583,7 +1505,7 @@ - Type style for the day (numeric or 2-digits). + Format style for the day (numeric or 2-digits). @@ -1777,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 @@ -1802,11 +1710,6 @@ Gets or sets if the dialog is hidden - - - The event callback invoked when change. - - Indicates that the dialog should trap focus. @@ -1834,7 +1737,7 @@ - Used when not calling the to show a dialog. + Used when not calling the to show a dialog @@ -1842,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 . @@ -2017,33 +1773,19 @@ 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. @@ -2051,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" @@ -2097,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. @@ -2206,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 @@ -2298,217 +2010,59 @@ 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). + Convenience method to create a for a dialog result. + You can also call EventCallback.Factory.Create directly. - 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). + A event that will be invoked when showing a dialog with a custom component - 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). + The role of the element. - 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. - - - - - - - - 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 - - - - - The role of the element. - - - - - The orientation of the divider. + The orientation of the divider. @@ -2659,14 +2213,8 @@ - FluentUI Emoji content. - - - - - Please use the constructor including parameters. + FluentUI Icon content. - @@ -2885,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 @@ -2987,12 +2530,6 @@ FluentUI Icon content. - - - Please use the constructor including parameters. - - - Initializes a new instance of the class. @@ -3322,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 @@ -3470,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 @@ -3511,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. @@ -3623,16 +2976,6 @@ - - - Width of the component. - - - - - Height of the component or of the popup panel. - - Text used on aria-label attribute. @@ -3656,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. @@ -3735,7 +3077,7 @@ - + @@ -3747,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 + + + @@ -4718,9 +3629,6 @@ - - - @@ -4860,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 @@ -4907,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. @@ -4931,7 +3835,7 @@ - Gets or sets the size to use. + Gets or sets the to use. Default is Small. @@ -5068,12 +3972,6 @@ - - - - - - Allows associating a datalist to the element by id. @@ -5134,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. @@ -5365,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. @@ -5387,7 +4265,7 @@ - If this tab is outside of vistible tab panel area. + Gets if this component is out of panel. @@ -5553,12 +4431,6 @@ Gets or sets the content to be rendered inside the component. - - - - - - Gets or sets the text filed type. See @@ -5604,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 @@ -5974,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 + @@ -9357,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. @@ -9669,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. @@ -9901,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. @@ -9980,18 +8577,12 @@ - - - - - - @@ -10001,24 +8592,15 @@ - - - - - - - - - @@ -10028,9 +8610,6 @@ - - - @@ -10040,9 +8619,6 @@ - - - @@ -10467,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 @@ -10498,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 . @@ -10587,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 @@ -10653,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. @@ -10771,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 @@ -10797,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. @@ -10905,7 +9460,7 @@ Inspired from https://github.com/MudBlazor - + Splits the text into fragments, according to the text to be highlighted @@ -10914,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. + + @@ -10934,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.. @@ -10951,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.. @@ -10960,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/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(); + } +}