FS.FluentUI 0.0.1-beta12

This is a prerelease version of FS.FluentUI.
There is a newer version of this package available.
See the version list below for details.
dotnet add package FS.FluentUI --version 0.0.1-beta12                
NuGet\Install-Package FS.FluentUI -Version 0.0.1-beta12                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="FS.FluentUI" Version="0.0.1-beta12" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add FS.FluentUI --version 0.0.1-beta12                
#r "nuget: FS.FluentUI, 0.0.1-beta12"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install FS.FluentUI as a Cake Addin
#addin nuget:?package=FS.FluentUI&version=0.0.1-beta12&prerelease

// Install FS.FluentUI as a Cake Tool
#tool nuget:?package=FS.FluentUI&version=0.0.1-beta12&prerelease                

FS.FluentUI

Microsoft's FluentUI V9 (React) made for F#

NuGet version (FS.FluentUI)

⚠️This repo is in beta. Some components/ functions are incomplete. Please feel free to send PR's and messages in order to get this library as close to 100% as possible!⚠️

NOTE: I've created FS.FluentUI.V8toV9 in order to use Stack, StackItem, and createBrandVariants (from V8 theme). See example of Stack below.
IMPORTANT: Place a Fui.fluentProvider at the root of your app and pass the theme in as a prop. You can use pre-determined themes, or create your own BrandVariants or Tokens to use for your theme. See src/TestGrounds/src/Main.fs for specific examples. BrandVariants can be generated and copied over from Microsoft's Theme Designer. Simply pick your "Key color value", choose your theme, click Export, and convert the TS BrandVariants into something more F#.
open Feliz
open Browser.Dom
open FS.FluentUI
open FS.FluentUI.V8toV9

[<ReactComponent>]
let ToggleButtons () =
    let isChecked1, setIsChecked1 = React.useState true
    let isChecked2, setIsChecked2 = React.useState false
    Fui.stack [
        stack.horizontal true
        stack.tokens [ stack.tokens.childrenGap 16 ]
        stack.children [
            Fui.toggleButton [
                toggleButton.icon (Fui.icon.checkbox1Filled [])
                toggleButton.checked' isChecked1
                toggleButton.onClick (fun _ -> setIsChecked1 (isChecked1 |> not))
                toggleButton.text "Checked state"
            ]
            Fui.toggleButton [
                toggleButton.appearance.primary
                toggleButton.checked' isChecked2
                toggleButton.onClick (fun _ -> setIsChecked2 (isChecked2 |> not))
                toggleButton.text "Unchecked state"
            ]
            Fui.toggleButton [
                toggleButton.shape.circular
                toggleButton.disabledFocusable true
                toggleButton.text "Disabled focusable"
            ]
        ]
    ]

let root = ReactDOM.createRoot (document.getElementById "feliz-app")
root.render (
    Fui.fluentProvider [
        fluentProvider.theme.webDarkTheme
        fluentProvider.children [
            ToggleButtons ()
        ]
    ]
)

Components / Hooks

If you don't see a component/ hook in this list.... just wait longer!

Please see src/FS.FluentUI.TestGrounds/src for examples of every component
Complete Components Complete Hooks / Functions Has TODO's or are unstable Upcoming
Accordion useArrowNavigationGroup Toast TimePicker
Avatar useId Table ColorPicker
AvatarGroup useFocusableGroup useToastController SwatchColorPicker
Badge partitionAvatarGroupItems Drawer (Preview) Rating
CounterBadge useOverflowMenu useHeadlessFlatTree_unstable BasicList
PresenceBadge useIsOverflowItemVisible Alert (Preview) PeoplePicker
Button createTableColumn useTableFeatures TeachingCallout
CompoundButton useStaticVirtualizerMeasure InfoLabel (Preview) Coachmark
MenuButton useModalAttributes VirtualizerScrollView (Preview) MessageBar
SplitButton useObservedElement InteractionTag (Preview)
ToggleButton useFocusFinders TagGroup (Preview)
Card useOverflowCount Tag (Preview)
CardFooter makeResetStyles Breadcrumb (Preview)
CardHeader makeStyles Searchbox (Preview)
CardPreview bundleIcon VirtualizerScrollViewDynamic (Preview)
Checkbox Virtualizer (Preview)
Combobox
DataGrid
Dialog
Divider
Divider
Dropdown
Tablist
Field
FluentProvider
Image
Input
Label
Link
Menu
Overflow
Persona
Popover
Portal
ProgressBar
Radio
RadioGroup
Select
Skeleton
Slider
SpinButton
Switch
Text
Textarea
Toolbar
Tree
Tooltip
DatePicker (w/ one small TODO)

I have done my best so far to keep usage of these similar to Typescript usage in the docs. See docs for more usage examples: Microsoft Docs

Styling

Fluent UI React v9 provides design tokens for consistent theming. Microsoft doesn't suggest using exact colors in Fluent UI code.

style.color.darkBlue

style.color Theme.tokens.colorBrandForeground1

Although shorthands is used extensively throughout the Microsoft documentation, it is not necessary here when using makeStyles or makeResetStyles; I'm expanding any shorthand styling properties under-the-hood.

makeStyles is used to define style permutations in components and is used for style overrides. It returns a React hook that should be called inside a component:

When using single numeric values in makeStyles or makeResetStyles, specify the value's length.

style.minWidth 200

style.minWidth (length.px 200)

open Feliz
open FS.FluentUI

let tokens = Theme.tokens

type Styles = {
    accordion: string
    useArrowNavigationGroup: string
    tooltip: string
    icon: string
    compoundButton: string
}

let useStyles: unit -> Styles = Fui.makeStyles [
    "accordion", [
        style.color.red
        style.backgroundColor.darkGray
    ]
    "useArrowNavigationGroup", [
        style.display.flex
        style.columnGap 15
    ]
    "tooltip", [
        style.backgroundColor tokens.colorBrandBackground
        style.color tokens.colorNeutralForegroundInverted
    ]
    "icon", [
        style.color.green
    ]
    "compoundButton", [
        style.width (length.px 150)
    ]
]

[ReactComponent]
let ToolTip () =
    let styles = useStyles()

    Fui.tooltip [
        tooltip.className styles.tooltip
    ...

The makeResetStyles API works similarly to makeStyles and is used to generate styles as a single monolithic class to avoid the "CSS rules explosion" problem.

open Feliz
open FS.FluentUI
open FS.FluentUI.V8toV9

let dialogClass = Fui.makeResetStyles [
    style.position.fixedRelativeToWindow
    style.top (length.px 200)
    style.backgroundColor tokens.colorBrandBackground2
    style.margin (length.auto)
    style.borderStyle.none
    style.padding (10, 50)
    style.boxShadow (5, 5, tokens.shadow16)
    style.width (length.px 450)
    style.height (length.px 200)
    style.zIndex 100
]

[<ReactComponent>]
let Dialog () =
    let isOpen, setIsOpen = React.useState false
    let dialogClass = dialogClass()

    Fui.stack [
        stack.className dialogClass
    ...

BundleIcon

You can use the bundleIcon method to bundle a filled and unfilled version of an icon which will combine them into one icon.

let AddIcon = Fui.bundleIcon(Fui.icon.addCircleFilled [], Fui.icon.addCircleRegular [])

let AddIcon = Fui.bundleIcon(bundleIcon.addCircleFilled, bundleIcon.addCircleRegular)

In the following example, the icons are toggled depending on if the button isChecked. Some components will toggle between the two icons on-hover, on-click, or not at all. Please see Microsoft's documentation for more examples.

[<ReactComponent>]
let ToggleButton () =
    let isChecked, setIsChecked = React.useState true

    let CheckedIcon = Fui.bundleIcon(bundleIcon.checkbox1Filled, bundleIcon.checkbox1Regular)

    Fui.toggleButton [
        toggleButton.icon (CheckedIcon [])
        toggleButton.checked' isChecked
        toggleButton.onClick (fun _ -> setIsChecked (isChecked |> not))
        toggleButton.text "Button Text"
    ]

Contributing

Before sending PR's, please test what you've added in the "TestGrounds".

cd src/FS.FluentUI.TestGrounds
npm install
npm start

Installation

Install into your Client.fsproj project using Femto (recommended)

cd ./{path to Client}

# when using femto as a global CLI tool
femto install FS.FluentUI --version {newest version}

# when using femto as a local CLI tool
dotnet femto install FS.FluentUI --version {newest version}

This will install the nuget package and afterwards automatically installs the required npm packages used by this binding.

Femto will detect whether you are using paket and will install the package using paket into the dependency group of the project

You can install the library manually if you want by first installing the nuget package

cd ./{path to your project}
dotnet add package FS.FluentUI --version {newest version}
Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.16.0 106 10/9/2024
1.15.2 778 7/27/2024
1.15.1 119 6/26/2024
1.15.0 149 6/7/2024
1.14.0 118 5/20/2024
1.13.0 146 4/24/2024
1.12.0 144 4/1/2024
1.11.0 184 1/23/2024
1.10.0 135 1/11/2024
1.9.0 218 12/22/2023
1.8.0 179 12/3/2023
1.7.0 132 11/27/2023
1.6.0 147 11/11/2023
1.5.0 147 11/2/2023
1.4.0 120 10/30/2023
1.3.0 134 10/23/2023
1.2.0 144 10/18/2023
1.1.0 187 10/6/2023
1.0.4 146 10/6/2023
1.0.3 139 10/6/2023
1.0.2 146 10/5/2023
1.0.1 164 9/25/2023
1.0.0 156 9/25/2023
1.0.0-prerelease-003 110 9/21/2023
1.0.0-prerelease-002 128 9/18/2023
1.0.0-prerelease-001 112 9/15/2023
0.0.1-beta12 128 9/14/2023
0.0.1-beta11 134 9/12/2023
0.0.1-beta10 115 9/12/2023
0.0.1-beta09 129 9/11/2023
0.0.1-beta08 127 9/11/2023
0.0.1-beta07 130 9/8/2023
0.0.1-beta06 129 9/7/2023
0.0.1-beta05 116 9/7/2023
0.0.1-beta04 150 9/1/2023
0.0.1-beta03 115 8/31/2023
0.0.1-beta02 148 8/29/2023

- Add ability to bundleIcons, theme with custom Tokens, and fix dataGrid.onSelectionChange bug