Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web-components] add combobox as a new component, add filled style for select #17307

Merged
merged 4 commits into from
Mar 7, 2021
Merged

[web-components] add combobox as a new component, add filled style for select #17307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
98388f2
add combobox as a new web component
chrisdholt Mar 6, 2021
9a01fc0
Change files
chrisdholt Mar 6, 2021
5028146
add filled apeparance
chrisdholt Mar 6, 2021
f4f8b4c
update api report and export combobox from root
chrisdholt Mar 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-545bf68d-0de1-4229-ae74-8ec9197f53e8.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "add combobox as a new web component",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
24 changes: 24 additions & 0 deletions packages/web-components/docs/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { BreadcrumbItem } from '@microsoft/fast-foundation';
import { Button } from '@microsoft/fast-foundation';
import { Checkbox } from '@microsoft/fast-foundation';
import { ColorRGBA64 } from '@microsoft/fast-colors';
import { Combobox } from '@microsoft/fast-foundation';
import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation';
import { DesignSystemProvider } from '@microsoft/fast-foundation';
import { Dialog } from '@microsoft/fast-foundation';
Expand Down Expand Up @@ -251,6 +252,12 @@ export const CardStyles: import("@microsoft/fast-element").ElementStyles;
// @public
export const CheckboxStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export type ComboboxAppearance = SelectAppearance;

// @public
export const ComboboxStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export function createColorPalette(baseColor: any): string[];

Expand Down Expand Up @@ -457,6 +464,15 @@ export class FluentCard extends FluentDesignSystemProvider {
export class FluentCheckbox extends Checkbox {
}

// @public
export class FluentCombobox extends Combobox {
appearance: ComboboxAppearance;
// @internal (undocumented)
appearanceChanged(oldValue: ComboboxAppearance, newValue: ComboboxAppearance): void;
// @internal (undocumented)
connectedCallback(): void;
}

// @public
export type FluentDesignSystem = Omit<DesignSystem, 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex'>;

Expand Down Expand Up @@ -662,6 +678,11 @@ export class FluentRadioGroup extends RadioGroup {

// @public
export class FluentSelect extends Select {
appearance: SelectAppearance;
// @internal (undocumented)
appearanceChanged(oldValue: SelectAppearance, newValue: SelectAppearance): void;
// @internal (undocumented)
connectedCallback(): void;
}

// @public
Expand Down Expand Up @@ -1193,6 +1214,9 @@ export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles;
// @public
export const RadioStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export type SelectAppearance = 'filled' | 'outline';

// @public
export const SelectStyles: import("@microsoft/fast-element").ElementStyles;

Expand Down
10 changes: 10 additions & 0 deletions packages/web-components/src/combobox/combobox.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import '../design-system-provider';
import '../listbox-option';
import Examples from './fixtures/base.html';
import './index';

export default {
title: 'Combobox',
};

export const Combobox = () => Examples;
40 changes: 40 additions & 0 deletions packages/web-components/src/combobox/combobox.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { css } from '@microsoft/fast-element';
import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
import { SelectStyles } from '../select/select.styles';

export const ComboboxStyles = css`
${SelectStyles}

:host(:empty) .listbox {
display: none;
}

:host([disabled]) *,
:host([disabled]) {
cursor: ${disabledCursor};
user-select: none;
}

:host(:active) .selected-value {
user-select: none;
}

.selected-value {
-webkit-appearance: none;
background: transparent;
border: none;
color: inherit;
font-size: var(--type-ramp-base-font-size);
line-height: var(--type-ramp-base-line-height);
height: calc(100% - (var(--outline-width) * 1px));
margin: auto 0;
width: 100%;
}

.selected-value:hover,
.selected-value:${focusVisible},
.selected-value:disabled,
.selected-value:active {
outline: none;
}
`;
269 changes: 269 additions & 0 deletions packages/web-components/src/combobox/fixtures/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
<fluent-design-system-provider use-defaults>
<h1>Combobox</h1>

<h2>Default</h2>
<fluent-combobox id="combobox">
<fluent-option>Please Please Me</fluent-option>
<fluent-option>With The Beatles</fluent-option>
<fluent-option>A Hard Day's Night</fluent-option>
<fluent-option>Beatles for Sale</fluent-option>
<fluent-option>Help!</fluent-option>
<fluent-option>Rubber Soul</fluent-option>
<fluent-option>Revolver</fluent-option>
<fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
<fluent-option>Magical Mystery Tour</fluent-option>
<fluent-option>The Beatles</fluent-option>
<fluent-option>Yellow Submarine</fluent-option>
<fluent-option>Abbey Road</fluent-option>
<fluent-option>Let It Be</fluent-option>
</fluent-combobox>

<h2>Filled</h2>
<fluent-combobox id="combobox" filled>
<fluent-option>Please Please Me</fluent-option>
<fluent-option>With The Beatles</fluent-option>
<fluent-option>A Hard Day's Night</fluent-option>
<fluent-option>Beatles for Sale</fluent-option>
<fluent-option>Help!</fluent-option>
<fluent-option>Rubber Soul</fluent-option>
<fluent-option>Revolver</fluent-option>
<fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
<fluent-option>Magical Mystery Tour</fluent-option>
<fluent-option>The Beatles</fluent-option>
<fluent-option>Yellow Submarine</fluent-option>
<fluent-option>Abbey Road</fluent-option>
<fluent-option>Let It Be</fluent-option>
</fluent-combobox>

<h2>Default Selected</h2>
<fluent-combobox id="combobox-with-default">
<fluent-option>William Hartnell</fluent-option>
<fluent-option>Patrick Troughton</fluent-option>
<fluent-option>Jon Pertwee</fluent-option>
<fluent-option>Tom Baker</fluent-option>
<fluent-option>Peter Davidson</fluent-option>
<fluent-option>Colin Baker</fluent-option>
<fluent-option>Sylvester McCoy</fluent-option>
<fluent-option>Paul McGann</fluent-option>
<fluent-option>Christopher Eccleston</fluent-option>
<fluent-option>David Tenant</fluent-option>
<fluent-option>Matt Smith</fluent-option>
<fluent-option>Peter Capaldi</fluent-option>
<fluent-option selected>Jodie Whittaker</fluent-option>
</fluent-combobox>

<h2>Initial Value</h2>
<fluent-combobox id="combobox-with-initial-value" value="Christopher Eccleston">
<fluent-option>William Hartnell</fluent-option>
<fluent-option>Patrick Troughton</fluent-option>
<fluent-option>Jon Pertwee</fluent-option>
<fluent-option>Tom Baker</fluent-option>
<fluent-option>Peter Davidson</fluent-option>
<fluent-option>Colin Baker</fluent-option>
<fluent-option>Sylvester McCoy</fluent-option>
<fluent-option>Paul McGann</fluent-option>
<fluent-option>Christopher Eccleston</fluent-option>
<fluent-option>David Tenant</fluent-option>
<fluent-option>Matt Smith</fluent-option>
<fluent-option>Peter Capaldi</fluent-option>
<fluent-option>Jodie Whittaker</fluent-option>
</fluent-combobox>

<h2>Combobox with Autocomplete</h2>

<h3>Inline Autocomplete</h3>
<fluent-combobox id="combobox-with-inline-autocomplete" autocomplete="inline">
<fluent-option>William Hartnell</fluent-option>
<fluent-option>Patrick Troughton</fluent-option>
<fluent-option>Jon Pertwee</fluent-option>
<fluent-option>Tom Baker</fluent-option>
<fluent-option>Peter Davidson</fluent-option>
<fluent-option>Colin Baker</fluent-option>
<fluent-option>Sylvester McCoy</fluent-option>
<fluent-option>Paul McGann</fluent-option>
<fluent-option>Christopher Eccleston</fluent-option>
<fluent-option>David Tenant</fluent-option>
<fluent-option>Matt Smith</fluent-option>
<fluent-option>Peter Capaldi</fluent-option>
<fluent-option>Jodie Whittaker</fluent-option>
</fluent-combobox>

<h3>List Autocomplete</h3>
<fluent-combobox id="combobox-with-list-autocomplete" autocomplete="list">
<fluent-option>William Hartnell</fluent-option>
<fluent-option>Patrick Troughton</fluent-option>
<fluent-option>Jon Pertwee</fluent-option>
<fluent-option>Tom Baker</fluent-option>
<fluent-option>Peter Davidson</fluent-option>
<fluent-option>Colin Baker</fluent-option>
<fluent-option>Sylvester McCoy</fluent-option>
<fluent-option>Paul McGann</fluent-option>
<fluent-option>Christopher Eccleston</fluent-option>
<fluent-option>David Tenant</fluent-option>
<fluent-option>Matt Smith</fluent-option>
<fluent-option>Peter Capaldi</fluent-option>
<fluent-option>Jodie Whittaker</fluent-option>
</fluent-combobox>

<h3>Both Autocomplete</h3>
<fluent-combobox id="combobox-with-both-autocomplete" autocomplete="both">
<fluent-option>William Hartnell</fluent-option>
<fluent-option>Patrick Troughton</fluent-option>
<fluent-option>Jon Pertwee</fluent-option>
<fluent-option>Tom Baker</fluent-option>
<fluent-option>Peter Davidson</fluent-option>
<fluent-option>Colin Baker</fluent-option>
<fluent-option>Sylvester McCoy</fluent-option>
<fluent-option>Paul McGann</fluent-option>
<fluent-option>Christopher Eccleston</fluent-option>
<fluent-option>David Tenant</fluent-option>
<fluent-option>Matt Smith</fluent-option>
<fluent-option>Peter Capaldi</fluent-option>
<fluent-option>Jodie Whittaker</fluent-option>
</fluent-combobox>

<h2>Disabled Combobox</h2>
<fluent-combobox disabled>
<fluent-option>Extra Small</fluent-option>
<fluent-option>Small</fluent-option>
<fluent-option>Medium</fluent-option>
<fluent-option>Large</fluent-option>
<fluent-option>Extra Large</fluent-option>
</fluent-combobox>

<h2>Combobox with disabled items</h2>

<h3>Combobox with alternating disabled items</h3>
<fluent-combobox id="combobox-with-every-other-disabled">
<fluent-option>Extra Small</fluent-option>
<fluent-option disabled>Small</fluent-option>
<fluent-option>Medium</fluent-option>
<fluent-option disabled>Large</fluent-option>
<fluent-option>Extra Large</fluent-option>
</fluent-combobox>

<h3>Combobox with adjacent disabled items at start of list</h3>
<fluent-combobox id="combobox-with-adjacent-disabled-start">
<fluent-option disabled>Extra Small</fluent-option>
<fluent-option disabled>Small</fluent-option>
<fluent-option>Medium</fluent-option>
<fluent-option>Large</fluent-option>
<fluent-option>Extra Large</fluent-option>
</fluent-combobox>

<h3>Combobox with adjacent disabled items in middle of list</h3>
<fluent-combobox id="combobox-with-adjacent-disabled-middle">
<fluent-option>Extra Small</fluent-option>
<fluent-option disabled>Small</fluent-option>
<fluent-option disabled>Medium</fluent-option>
<fluent-option>Large</fluent-option>
<fluent-option>Extra Large</fluent-option>
</fluent-combobox>

<h3>Combobox with adjacent disabled items at end of list</h3>
<fluent-combobox id="combobox-with-adjacent-disabled-end">
<fluent-option>Extra Small</fluent-option>
<fluent-option>Small</fluent-option>
<fluent-option>Medium</fluent-option>
<fluent-option disabled>Large</fluent-option>
<fluent-option disabled>Extra Large</fluent-option>
</fluent-combobox>

<h3>Combobox with all but one item disabled</h3>
<fluent-combobox id="combobox-with-all-but-one-disabled">
<fluent-option disabled>Extra Small</fluent-option>
<fluent-option disabled>Small</fluent-option>
<fluent-option disabled>Medium</fluent-option>
<fluent-option disabled>Large</fluent-option>
<fluent-option>Extra Large</fluent-option>
</fluent-combobox>

<h3>Combobox with all items disabled</h3>
<fluent-combobox id="combobox-with-all-disabled">
<fluent-option disabled>Extra Small</fluent-option>
<fluent-option disabled>Small</fluent-option>
<fluent-option disabled>Medium</fluent-option>
<fluent-option disabled>Large</fluent-option>
<fluent-option disabled>Extra Large</fluent-option>
</fluent-combobox>

<h2>Combobox with placeholder</h2>
<fluent-combobox placeholder="Please select a size" id="combobox-with-placeholder">
<fluent-option>Extra Small</fluent-option>
<fluent-option>Small</fluent-option>
<fluent-option>Medium</fluent-option>
<fluent-option>Large</fluent-option>
<fluent-option>Extra Large</fluent-option>
</fluent-combobox>

<h2>Combobox with no items</h2>
<fluent-combobox id="combobox-with-no-items"></fluent-combobox>

<h2>Combobox with long list</h2>
<fluent-combobox id="combobox-with-long-list" autocomplete="both">
<fluent-option>Alabama</fluent-option>
<fluent-option>Alaska</fluent-option>
<fluent-option>Arizona</fluent-option>
<fluent-option>Arkansas</fluent-option>
<fluent-option>California</fluent-option>
<fluent-option>Colorado</fluent-option>
<fluent-option>Connecticut</fluent-option>
<fluent-option>Delaware</fluent-option>
<fluent-option>Florida</fluent-option>
<fluent-option>Georgia</fluent-option>
<fluent-option>Hawaii</fluent-option>
<fluent-option>Idaho</fluent-option>
<fluent-option>Illinois</fluent-option>
<fluent-option>Indiana</fluent-option>
<fluent-option>Iowa</fluent-option>
<fluent-option>Kansas</fluent-option>
<fluent-option>Kentucky</fluent-option>
<fluent-option>Louisiana</fluent-option>
<fluent-option>Maine</fluent-option>
<fluent-option>Maryland</fluent-option>
<fluent-option>Massachussets</fluent-option>
<fluent-option>Michigain</fluent-option>
<fluent-option>Minnesota</fluent-option>
<fluent-option>Mississippi</fluent-option>
<fluent-option>Missouri</fluent-option>
<fluent-option>Montana</fluent-option>
<fluent-option>Nebraska</fluent-option>
<fluent-option>Nevada</fluent-option>
<fluent-option>New Hampshire</fluent-option>
<fluent-option>New Jersey</fluent-option>
<fluent-option>New Mexico</fluent-option>
<fluent-option>New York</fluent-option>
<fluent-option>North Carolina</fluent-option>
<fluent-option>North Dakota</fluent-option>
<fluent-option>Ohio</fluent-option>
<fluent-option>Oklahoma</fluent-option>
<fluent-option>Oregon</fluent-option>
<fluent-option>Pennsylvania</fluent-option>
<fluent-option>Rhode Island</fluent-option>
<fluent-option>South Carolina</fluent-option>
<fluent-option>South Dakota</fluent-option>
<fluent-option>Texas</fluent-option>
<fluent-option>Tennessee</fluent-option>
<fluent-option>Utah</fluent-option>
<fluent-option>Vermont</fluent-option>
<fluent-option>Virginia</fluent-option>
<fluent-option>Washington</fluent-option>
<fluent-option>Wisconsin</fluent-option>
<fluent-option>West Virginia</fluent-option>
<fluent-option>Wyoming</fluent-option>
</fluent-combobox>

<h2>Forced positions</h2>

<h3>Combobox with forced position above</h3>
<fluent-combobox id="combobox-with-forced-position-above" position="above">
<fluent-option>Position forced above</fluent-option>
<fluent-option>Option Two</fluent-option>
</fluent-combobox>

<h3>Combobox with forced position below</h3>
<fluent-combobox id="combobox-with-forced-position-below" position="below">
<fluent-option>Position forced below</fluent-option>
<fluent-option>Option Two</fluent-option>
</fluent-combobox>
</fluent-design-system-provider>
Loading