Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

^

Alternative solutions

No response

Relevant Assets

No response

Just curious since last commit was in June 2022.

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Description

The slider thumb is misaligned with the ticks. The problem increases with the distance from the center point of the slider, in both directions.

The problem disappears if you override the following CSS rule:

.slider .slider.orientation-horizontal .slider-thumb {
    inset-inline-start: calc(var(--fds-slider-percentage)) !important;
}

Steps To Reproduce

1. Visit test page
2. Look for the Slider with ticks.
3. Slide it around. The value of the slider is 18 when the thumb visually aligns with the center of the tick.

Expected behavior

The slider thumb should visually align exactly with the ticks.

Relevant Assets

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Microsoft Edge

Description

I want to open a closable dialog. Currently, it works with the Esc key. I also want to close it when clicking outside. Any of these events are never triggered: backdropclick, backdropmousedown.

Steps To Reproduce

<script>
	import { Button, ContentDialog } from "fluent-svelte";
	
	let open = true;
</script>

<Button on:click={() => open = true}>
	Open
</Button>
<ContentDialog bind:open title="Dialog Title" on:backdropclick={() => open = false} on:backdropmousedown={() => open = false}>
	Some text
	<svelte:fragment slot="footer">
		<Button variant="accent" on:click={() => open = false}>
			Button 1
		</Button>
		<Button on:click={() => open = false}>
			Button 2
		</Button>
	</svelte:fragment>
</ContentDialog>

<style>
	@import url("https://unpkg.com/fluent-svelte/theme.css");
	
	:global(body) {
		background-color: var(--fds-solid-background-base);
		color: var(--fds-text-primary);
	}
</style>

Expected behavior

When a dialog is opened, I'd like to close it when I click outside the dialog.

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Chrome Beta/Dev/Canary, Microsoft Edge Beta/Dev/Canary

Description

the block-size and inline-size of input:before is 4px bigger than Microsoft major design

Steps To Reproduce

No response

Expected behavior

so input:before must be 4px smaller
in checked state:

block-size: 8px;
inline-size: 8px;

in hover state:

block-size: 10px;
inline-size: 10px;

and in active state:

block-size: 6px;
inline-size: 6px;

Relevant Assets

https://www.figma.com/community/file/1159947337437047524

go to https://fluent-svelte.vercel.app/docs/getting-started, and user-select: none is applied to the code blocks. i hope you aren't trying to break my copy paste everything habits 😅

Right now, <InfoBar> components, which are supposed to display helpful notifications/information, have no loading animation, which could be nice to have.

I'm thinking of something like a quick fly transition.

Currently, our ComboBox component usage looks something like this:

<ComboBox value="item" items={[
    { name: "Item" }
]} />

"Selection" occurs when the name of the item matches the value passed in (or the value set by the developer). This has some advantages and disadvantages. The main advantage is that matching based on name means that we can bind the value of the input in searchable mode and use the same input for matching selection. This has some drawbacks, though. Items cannot be assigned a separate value from their name. Names must be unique for the ComboBox to behave as expected, and it can overall be a mess using a readable case system. This will need a bit of thinking on my part on how we should handle this. This would techncially be a breaking change under semver, but I consider undocumented components as in the 0.x stage.

One of WinUI's most important (and most complex) components is NavigationView, which provides the base layout for most apps. NavigationView provides the base layout for most apps with either a sidebar or navigation strip.

Currently, we are actually removing the anchor from the DOM, however this causes issues with the checkbox and radio items being reset on every open. I'm not sure if this is should be considered as intended, but it's certainly not expected behavior. Anyways, I plan to use display: none; instead of if-blocks to preserve input state across opens.

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

As mentioned in #6, combobox flyout isn't always ideally positioned.
Add placement property (similar to Flyout) to Combobox

Alternative solutions

No response

Relevant Assets

No response

need to handle home and end keys, and also cancel behavior when the shift key is held

• ComboBox
• CalendarView
• AutoSuggestBox
• MenuFlyout
• ContextMenu
• MenuBar
• Slider

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

Fluent UI v9 Table component is missing from the Alpha version of the website

Alternative solutions

No response

Relevant Assets

Fluent UI table

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

Since Segoe UI is not redistributable, I think it would be a good idea to include Selawik as a Font Fallback to increase support for other Operating Systems that don't have Segoe UI installed like Android, Linux, IOS and MacOS.

Alternative solutions

No response

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

The switches in the WinUI library can be dragged to an on/off state.
Consider adding this functionality to FluentSvelte :)

Alternative solutions

No response

Relevant Assets

No response

Components

• AutoSuggestBox
• Button
• Checkbox
• ComboBox
• ContentDialog
• ContextMenu
• Expander
• Flyout
• IconButton
• InfoBar
• ListItem
• MenuBar
• MenuBarItem
• MenuFlyout
• MenuFlyoutItem
• NumberBox
• PersonPicture
• ProgressBar
• ProgressRing
• RadioButton
• Slider
• TextBlock
• TextBox
• ToggleSwitch
• Tooltip
• CalendarView

Internals

• MenuFlyoutSurface
• FlyoutSurface
• TooltipSurface
• ComboBoxItem
• externalMouseEvents
• focusTrap
• uid
• arrowNavigation
• getCSSDuration
• createEventForwarder

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

When adding ProgressRing to my SvelteKit project I was expecting the Ring to have the color that was showcased in the Docs. When going to the page I didn't even see the ProgressRing. Going to the Elements section of the dev tools I saw that the html was present, and there was a stroke color assigned from a variable (var(--fds-accent-default)), yet the circle had no color, hence it was invisible.

To add color I did the following:

<script lang="ts">
	import { ProgressRing } from "fluent-svelte";
	let circleElement: SVGCircleElement;

	$: if (circleElement) {
		circleElement.style.stroke = "red";
	}
</script>

<ProgressRing size={50} bind:circleElement />

Which is basically going around the issue. Which is: How to set the color of the ring?

Alternative solutions

What I propose is to expose a variable called stroke on which the User can set the desirable color of the ProgressRing.

Maybe something like:

<script lang="ts">
   export let stroke: string | undefined = undefined;
<script>


<circle
    bind:this={circleElement}
    style:stroke
    cx="50%"
    cy="50%"
    r="7"
    stroke-dasharray="3"
    stroke-dashoffset={((100 - value) / 100) * circumference}
/>

If stroke is a bit confusing you could go with color like so as well:

<script lang="ts">
   export let color: string | undefined = undefined;
<script>


<circle
    bind:this={circleElement}
    style:stroke={color}
    cx="50%"
    cy="50%"
    r="7"
    stroke-dasharray="3"
    stroke-dashoffset={((100 - value) / 100) * circumference}
/>

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome

Description

on:change and on:input event handlers on the Slider Component don't work.

See: https://svelte.dev/repl/833c79a8f04e497a80ed52ff2868978c?version=3.46.4

Steps To Reproduce

No response

Expected behavior

On:change and on:input events should be forwarded.

Relevant Assets

No response

there are a handful of combo box issues that make the component hard to use.

attached is a capture with a box with 50 elements. the popup is scrollable, but it appears above the top of the page if it is too close.

<main>
  hello
  <ComboBox
    value="6"
    items={Array.from(Array(50).keys()).map((i) => ({
      name: `Item ${i}`,
      value: i.toString(),
    }))} />
</main>

similarly, if scrolling you can get the combobox to be cut off.

also, it can be cut off with overflow:hidden css.

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Chrome

Description

This happening in Fluent Svelte-REPL (i just testing)

Steps To Reproduce

No response

Expected behavior

I expect the icon is centered like in the Fluent Svelte Web

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome

Description

If you open a Flyout that's placed inside an Expander, it gets clipped off, because the Expander has set 'overflow: hidden'.
AFAIK this problem can not be solved CSS-only, because the height of the Expander is transitioned and doesn't work with height set to auto.

My (quickly programmed) solution with JavaScript: https://svelte.dev/repl/833c79a8f04e497a80ed52ff2868978c?version=3.46.4
(I was so stupid and overwrote the repl and I can't undo it 😑)

Steps To Reproduce

No response

Expected behavior

The Flyout is not clipped off by the parent Expander Component.

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge, Firefox Beta/Dev/Nightly, Chrome Beta/Dev/Canary, Safari Beta, Microsoft Edge Beta/Dev/Canary

Description

1:03:21 PM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Steps To Reproduce

1. Init Sveltekit app
2. install Fluent Svelte
3. run sveltekit app in dev

Expected behavior

No warning

Relevant Assets

No response

Currently RTL is a bit broken when using with slider. You can get around this for now by forcing direction: ltr; on the slider's container, then using the reverse property.

title

For the last week or so, ive been working on a Calendar/Datepicker component for fluent-svelte. It's being developed in an isolated repo here. There are a few things that need to be ironed out, notably some a11y insights and page transitions, as well as some missing functionality. Thought I might track that here:

• Complete reliance on the Intl.DateTimeFormat API and no additional date libraries.
• Localization quirks. (controlling first day of week)
• Minimum/Maximum dates.
• Multiple values/selections.
• Keyboard navigation.
• Option to label each item as the start of a new month.
• Excluding certain dates (believe WinUI calls these "blackout" dates).
• Standalone CalendarViewItem component.
• Remove the temporary styling and integrate it with fluent styles.
• Paging stuff and animations.

Stretches - Very likely won't happen.

• Non-gregorian calendar layouts Probably not possible due to how the Dates work atm.
• Eventual Temporal support? Probably shouldn't even include this due to the spec not being supported anywhere.
• Progressive enhancement. Probably won't happen since date inputs don't map to what i'm trying to accomplish here.

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

https://react.fluentui.dev/?path=/docs/components-tablist

Alternative solutions

No response

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Microsoft Edge

Description

Expander Components inside an Expander Component don't toggle.

I temporarily solve it as follows:

:global(.folder-section
      .expander:has(.expander)
      .expander:not(.expanded)
      .expander-content) {
    @apply [max-block-size:0] p-0 overflow-hidden;
  }

Steps To Reproduce

1. Create an Expander
2. Put another Expander inside the Expander
3. Try to toggle the child Expander

Expected behavior

Child Expanders should toggle, too

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Chrome

Description

Just trying to port a Svelte project to SvelteKit so I could add more pages to it, and when I started copying everything, the css was not being applied at all.

Steps To Reproduce

1. Make new SvelteKit project using npm (skeleton project)
2. Copy a Svelte project (using Fluent Svelte)'s files over to SvelteKit
3. Nothing works!

Expected behavior

The css would be applied and the page would look normal.

Relevant Assets

https://i.imgur.com/MVAG8ks.jpeg
(what the site is supposed to look like)
https://i.imgur.com/68JuLlk.png
(what the site looks like with sveltekit)

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

When adding ProgressRing to a SvelteKit project, when trying to build or run dev you arrive to the following error:

[vite-plugin-svelte] Error while preprocessing {project-path}/node_modules/fluent-svelte/ProgressRing/ProgressRing.svelte - Cannot find any of modules: sass,node-sass

Error: Cannot find module 'node-sass'
Require stack:
- {project-path}/node_modules/svelte-preprocess/dist/modules/utils.js
- {project-path}/node_modules/svelte-preprocess/dist/autoProcess.js
- {project-path}/node_modules/svelte-preprocess/dist/index.js
file: {project-path}/node_modules/fluent-svelte/ProgressRing/ProgressRing.svelte
> Error while preprocessing {project-path}/node_modules/fluent-svelte/ProgressRing/ProgressRing.svelte - Cannot find any of modules: sass,node-sass

This error is simply fixed by adding sass and node-sass as dev dependencies to the project.

My proposal is to add this in the README description so that people are not confused when trying to use fluent-svelte.

Alternative solutions

Adding a description in the README with the prerequisite of installing sass and node-sass as dev dependencies to your project before adding fluent-svelte.

Relevant Assets

No response

Nice components!

Very minor: most components should probably use cursor: pointer. It's also what MS does, eg https://developer.microsoft.com/en-us/fluentui#/controls/web/button

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Microsoft Edge

Description

i use this pattern a lot

<input bind:value={object.property} />

and if the value is unset or otherwise undefined, the input shows undefined. the way the TextBox is implemented, it just uses the value prop, not bind, which doesnt copy this behavior over, using TextBox or without the bind:, it will put a literal "undefined" in the text box.

Steps To Reproduce

<script>
  const object = { };
</script>

<TextBox type="text" bind:value={object.property} />

<code>{JSON.stringify(object)}</code>

Expected behavior

the input has no text in it to start

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Other - list in description

Description

<ComboBox> will fire its select event if the items prop is updated in the way that replaces a previous object with a new one, as opposed to just mutating the old object.

Consider the following code:

<script>
	import { ComboBox, Button } from 'fluent-svelte'

	let items = [
		{ name: 'first', value: 0 },
		{ name: 'second', value: 1 },
		{ name: 'minute', value: 2 },
	]
</script>

<ComboBox on:select={console.log} value={0} />
<Button on:click={() => { items[2] = { name: 'minute', value: 2 }; items = items; }}>Change 'minute' to 'third'</Button>

The console.log actually fires when you press the button!

P.S. I tested it only in Opera, but I'm sure this bug is not browser-specific

Steps To Reproduce

No response

Expected behavior

This behavior is very counter-intuitive, because the select event should not fire with the same value of item (nothing new has been selected). I'm guessing the code checks aboutToBeSelectedItem === previousItem but what should matter here is only the value of item! The way items array should be filled (by users of the library) is questionable by itself: #25

Also, I think that it would be easier if the select event fired only when the user selected an item. That would make more sense, because all the changes of the value prop can be handled by the bind: directive

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox Beta/Dev/Nightly

Description

The "View GitHub" button on the project's website doesn't open the repo.

Steps To Reproduce

1. Go to the official website
2. Click the "View GitHub" button

Expected behavior

Upon clicking the button, the repo is opened.

Relevant Assets

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

When you want to add custom buttons to a <TextBox> via the buttons slot, you don't have access to the current value of the text box, which makes things like a reset button unreasonably difficult.

Alternative solutions

Maybe we should have a new default prop which enable a reset button?

Relevant Assets

No response

Developers might want to just straight out disable all user interaction on CalendarView temporarily. Not sure if WinUI includes an option to do this, but I think we should. I'll look into how styling will be handled.

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Microsoft Edge

Description

When using the property disabled of NumberBox, we can still update the text inside the TextBox, whether the property is true or false.

Steps To Reproduce

No response

Expected behavior

When disabled is set to true, we should not be able to update the text inside the TextBox.

Relevant Assets

No response

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge, Firefox Beta/Dev/Nightly, Chrome Beta/Dev/Canary, Microsoft Edge Beta/Dev/Canary

Description

• Do not auto-select the first element of the array.

When AutoSuggestBox is rendered, by default the first array item option is selected by default. It is necessary to prevent this since if the first element is selected it will be impossible to get an event that notifies that the first option has been selected.

I think it could be corrected with:

/** Bindable index of the currently selected item. */
export let selection = -1;

However, some other method could be used that I don't imagine at the moment...

• Dispatch 'Select' Event does not make sure to update the current value of the AutoSuggestBox

When the 'select' event is fired, it doesn't make sure to update the current value of the AutoSuggestBox , as a result, the event sends the current value but the AutoSuggestBox element keeps the previous value, so calling event.target.value will return the previous value and not the selected/current one

• Adding the 'on:select' event on component allows better mobile performance

When using the component on mobile, it is much more difficult to fire the 'on:select' event since it is not included in the component, I guess it is because the event is not executed by a click, but rather it is executed by a touch . Carrying out some tests I was able to obtain good results by adding:

on:select={() => {
	if (open && matches.length > 0) value = matches[selection];
}}
on:select

... to the component wrapper.

//////

I'll be running various tests to improve overall performance, so I may submit a pull request regarding this.

Regards... :

Steps To Reproduce

1. Just try to select the first element and execute an function... you will not be able to get any event on it
2. On mobile/desktop select one element then select another and another and another, you will see that it will always be the previous value when the select/change/search event are fired.
3. Better mobile compatibility.

Expected behavior

1. Do not auto-select the first element of the array.
2. Dispatch 'Select' Event should make sure to update the current value of the AutoSuggestBox
3. Better performance on touch screens

Relevant Assets

No response

We're going to ideally need a logo before the production release of the library. Using either the Svelte logo or Fluent Design logo directly with some recolors isn't really an option.

Cross-browser scrollbar theming is enraging

• Webkit has pretty decent theming support, but ::-webkit-scrollbar also has a lot of limitations.
• Firefox has less to none customization, and pretty much only allows you to hide the scrollbar or change basic colors around.

To get around this, I want to design a custom ScrollView component, that still uses native scrolling but adds our own DOM-based scrollbar component to accurately replicate WinUI's ScrollViewer.

Considerations:

• Accessibility (of course)
• Progressive Enhancement - I want the native scrollbars to be visible when JS is disabled or before hydration.
• Performance - scroll events are weird sometimes
• Keyboard Navigation
• Component-level scrolling customizations (binding to scrollX/scrollY, etc...)

A good starting place would probably be looking at how https://www.radix-ui.com/docs/primitives/components/scroll-area does it.

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Chrome

Description

When I add a on:close listener on the InfoBar HTML Element no event will be triggered. The on:open event won't work too.

Steps To Reproduce

1. Add Element
2. Add a on:close event
   
3. Click the close button of the InfoBar in the browser

Expected behavior

'close' should be logged to the console

Relevant Assets

No response

Is this doable ?

Thanks

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

Have you considered providing style prop on component so we can override CSS style the easy way?

Alternative solutions

No response

Relevant Assets

No response

the native implementation doesn't have this, but I think it'll be beneficial for accessibility and would just be a nice feature to have.