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

Jump to bottom

(web-components) update neutral fill card vNext #18444

Merged
merged 5 commits into from
Jun 9, 2021
Merged

(web-components) update neutral fill card vNext #18444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
44e75fd
[web-components] update components to extend foundation element (#18187)
chrisdholt May 14, 2021
91f6294
Updated the neutral fill card color recipe to always be lighter or eq…
bheston Jun 3, 2021
a377ea6
Updated old recipe and tests
bheston Jun 3, 2021
a87148b
Run `yarn build`
bheston Jun 9, 2021
adb6315
Change files
bheston Jun 9, 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-2355946e-5b33-4f44-8bc5-296ea0523b72.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Updated the neutral fill card color recipe to always be lighter or equal to the container, instead of flipping to go darker over white.",
"packageName": "@fluentui/web-components",
"email": "47367562+bheston@users.noreply.github.com",
"dependentChangeType": "patch"
}
73 changes: 30 additions & 43 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 @@ -5,20 +5,19 @@
```ts

import { Accordion } from '@microsoft/fast-foundation';
import { AccordionItem } from '@microsoft/fast-foundation';
import { AccordionItemOptions } from '@microsoft/fast-foundation';
import { Anchor as Anchor_2 } from '@microsoft/fast-foundation';
import { AnchoredRegion } from '@microsoft/fast-foundation';
import { Badge as Badge_2 } from '@microsoft/fast-foundation';
import { BaseProgress } from '@microsoft/fast-foundation';
import { Behavior } from '@microsoft/fast-element';
import { Breadcrumb } from '@microsoft/fast-foundation';
import { BreadcrumbItem } from '@microsoft/fast-foundation';
import { BreadcrumbItemOptions } from '@microsoft/fast-foundation';
import { Button as Button_2 } from '@microsoft/fast-foundation';
import { Checkbox } from '@microsoft/fast-foundation';
import { CheckboxOptions } from '@microsoft/fast-foundation';
import { ColorRGBA64 } from '@microsoft/fast-colors';
import { Combobox as Combobox_2 } from '@microsoft/fast-foundation';
import { ComboboxOptions } from '@microsoft/fast-foundation';
import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation';
import { CSSDirective } from '@microsoft/fast-element';
import { DataGrid } from '@microsoft/fast-foundation';
import { DataGridCell } from '@microsoft/fast-foundation';
import { DataGridRow } from '@microsoft/fast-foundation';
Expand All @@ -28,27 +27,31 @@ import { Direction } from '@microsoft/fast-web-utilities';
import { Divider } from '@microsoft/fast-foundation';
import { ElementStyles } from '@microsoft/fast-element';
import { FASTElement } from '@microsoft/fast-element';
import { Flipper } from '@microsoft/fast-foundation';
import { FlipperOptions } from '@microsoft/fast-foundation';
import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
import { Listbox } from '@microsoft/fast-foundation';
import { ListboxOption } from '@microsoft/fast-foundation';
import { Menu } from '@microsoft/fast-foundation';
import { MenuItem } from '@microsoft/fast-foundation';
import { MenuItemOptions } from '@microsoft/fast-foundation';
import { NumberField as NumberField_2 } from '@microsoft/fast-foundation';
import { Radio } from '@microsoft/fast-foundation';
import { NumberFieldOptions } from '@microsoft/fast-foundation';
import { ProgressOptions } from '@microsoft/fast-foundation';
import { ProgressRingOptions } from '@microsoft/fast-foundation';
import { RadioGroup } from '@microsoft/fast-foundation';
import { RadioOptions } from '@microsoft/fast-foundation';
import { Select as Select_2 } from '@microsoft/fast-foundation';
import { SelectOptions } from '@microsoft/fast-foundation';
import { Skeleton } from '@microsoft/fast-foundation';
import { Slider } from '@microsoft/fast-foundation';
import { SliderLabel } from '@microsoft/fast-foundation';
import { Switch } from '@microsoft/fast-foundation';
import { SliderOptions } from '@microsoft/fast-foundation';
import { SwitchOptions } from '@microsoft/fast-foundation';
import { Tab } from '@microsoft/fast-foundation';
import { TabPanel } from '@microsoft/fast-foundation';
import { Tabs } from '@microsoft/fast-foundation';
import { TextArea as TextArea_2 } from '@microsoft/fast-foundation';
import { TextField as TextField_2 } from '@microsoft/fast-foundation';
import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation';
import { TreeItem } from '@microsoft/fast-foundation';
import { TreeItemOptions } from '@microsoft/fast-foundation';
import { TreeView } from '@microsoft/fast-foundation';

// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
Expand Down Expand Up @@ -501,7 +504,7 @@ export const fluentAccordion: (overrideDefinition?: import("@microsoft/fast-foun
}, typeof Accordion>;

// @public
export const fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof AccordionItem>;
export const fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<AccordionItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<AccordionItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// Warning: (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal
//
Expand Down Expand Up @@ -558,7 +561,7 @@ export const fluentBreadcrumb: (overrideDefinition?: import("@microsoft/fast-fou
}, typeof Breadcrumb>;

// @public
export const fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof BreadcrumbItem>;
export const fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<BreadcrumbItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<BreadcrumbItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// Warning: (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal
//
Expand Down Expand Up @@ -589,12 +592,10 @@ export class FluentCard extends FluentDesignSystemProvider {
}

// @public
export const fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Checkbox>;
export const fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<CheckboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// Warning: (ae-incompatible-release-tags) The symbol "fluentCombobox" is marked as @public, but its signature references "Combobox" which is marked as @internal
//
// @public
export const fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Combobox>;
export const fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<ComboboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<ComboboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentDataGrid: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
Expand Down Expand Up @@ -811,7 +812,7 @@ export const fluentDivider: (overrideDefinition?: import("@microsoft/fast-founda
}, typeof Divider>;

// @public
export const fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Flipper>;
export const fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FlipperOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FlipperOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// Warning: (ae-incompatible-release-tags) The symbol "fluentHorizontalScroll" is marked as @public, but its signature references "HorizontalScroll" which is marked as @internal
//
Expand Down Expand Up @@ -849,12 +850,10 @@ export const fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundatio
}, typeof Menu>;

// @public
export const fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof MenuItem>;
export const fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<MenuItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<MenuItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// Warning: (ae-incompatible-release-tags) The symbol "fluentNumberField" is marked as @public, but its signature references "NumberField" which is marked as @internal
//
// @public
export const fluentNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof NumberField>;
export const fluentNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<NumberFieldOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<NumberFieldOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
Expand All @@ -868,21 +867,13 @@ export const fluentOption: (overrideDefinition?: import("@microsoft/fast-foundat
}, typeof ListboxOption>;

// @public
export const fluentProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof BaseProgress>;
export const fluentProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<ProgressOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<ProgressOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
baseName: string;
template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<BaseProgress, any>;
styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
baseName: string;
template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate<BaseProgress, any>;
styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
}, typeof BaseProgress>;
export const fluentProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<ProgressRingOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<ProgressRingOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Radio>;
export const fluentRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<RadioOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<RadioOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
Expand All @@ -895,10 +886,8 @@ export const fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-fou
styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
}, typeof RadioGroup>;

// Warning: (ae-incompatible-release-tags) The symbol "fluentSelect" is marked as @public, but its signature references "Select" which is marked as @internal
//
// @public
export const fluentSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Select>;
export const fluentSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SelectOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SelectOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
Expand All @@ -912,7 +901,7 @@ export const fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-found
}, typeof Skeleton>;

// @public
export const fluentSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Slider>;
export const fluentSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SliderOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SliderOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
Expand All @@ -926,7 +915,7 @@ export const fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-fo
}, typeof SliderLabel>;

// @public
export const fluentSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Switch>;
export const fluentSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SwitchOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SwitchOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
Expand Down Expand Up @@ -1013,7 +1002,7 @@ export const fluentTooltip: (overrideDefinition?: import("@microsoft/fast-founda
}, typeof Tooltip>;

// @public
export const fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TreeItem>;
export const fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

// @public
export const fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
Expand All @@ -1026,10 +1015,8 @@ export const fluentTreeView: (overrideDefinition?: import("@microsoft/fast-found
styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
}, typeof TreeView>;

// Warning: (ae-forgotten-export) The symbol "HeightNumber" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
export const heightNumber: HeightNumber;
// @public
export const heightNumber: import("@microsoft/fast-element").CSSDirective;

// Warning: (ae-internal-missing-underscore) The name "HorizontalScroll" should be prefixed with an underscore because the declaration is marked as @internal
//
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/src/color-vNext/recipes/neutral-fill-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ import { Swatch } from '../swatch';
export function neutralFillCard(palette: PaletteRGB, reference: Swatch, delta: number) {
const referenceIndex = palette.closestIndexOf(reference);

return palette.get(referenceIndex - (referenceIndex < delta ? delta * -1 : delta));
return palette.get(referenceIndex - delta);
}
6 changes: 3 additions & 3 deletions packages/web-components/src/color/neutral-fill-card.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import { neutralFillCard as neutralFillCardNew } from "../color-vNext/recipes/ne
describe('neutralFillCard', (): void => {
it('should operate on design system defaults', (): void => {
expect(neutralFillCard({} as DesignSystem)).to.equal(
DesignSystemDefaults.neutralPalette[DesignSystemDefaults.neutralFillCardDelta],
DesignSystemDefaults.neutralPalette[0],
);
});
it('should get darker when the index of the backgroundColor is lower than the offset index', (): void => {
it('should stay white when the index of the backgroundColor is lower than the offset index', (): void => {
for (let i: number = 0; i < DesignSystemDefaults.neutralFillCardDelta; i++) {
expect(
DesignSystemDefaults.neutralPalette.indexOf(
Expand All @@ -23,7 +23,7 @@ describe('neutralFillCard', (): void => {
}),
),
),
).to.equal(DesignSystemDefaults.neutralFillCardDelta + i);
).to.equal(0);
}
});
it('should return the color at three steps lower than the background color', (): void => {
Expand Down