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) Web component visual update #19263

Merged
merged 30 commits into from
Oct 22, 2021
Merged

(web-components) Web component visual update #19263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
c6c4ba4
Initial update of Fluent visual styling
bheston Jul 20, 2021
439da7c
Added and updated color recipes
bheston Jul 27, 2021
cc332df
Cleaned up disabled styles
bheston Jul 28, 2021
a8d5f87
Update a few icons
bheston Jul 28, 2021
a634c91
Updated anchor and button 'disabled' styling
bheston Aug 2, 2021
941d9ee
Change files
bheston Aug 4, 2021
2ad3ce1
Review comments and clean up
bheston Aug 13, 2021
6c2e85f
Added 'stealth' Select appearance
bheston Aug 13, 2021
36004c4
Adjust accordion padding, storybook color, and light mode level
bheston Aug 18, 2021
36f592c
Cleaned up color recipes and application
bheston Sep 14, 2021
2fec90c
Color recipe cleanup
bheston Sep 22, 2021
8c38aac
Cleanup log
bheston Sep 22, 2021
39bb7ff
Minor definitions and import fixes
bheston Sep 22, 2021
03a4fd8
Fix one more import issue
bheston Sep 22, 2021
8e6ce82
Apply updates made in FAST
bheston Sep 29, 2021
faf3123
Fix some button style details
bheston Sep 29, 2021
4bd4db0
Fix enabled selector rules for Firefox
bheston Sep 30, 2021
f87b854
Rebase and cleanup for token deprecation and sorting
bheston Oct 11, 2021
eebd0a3
Updated gradient design tokens for consistent API
bheston Oct 11, 2021
0aedc39
Fix some token exports and gradient recipe issues
bheston Oct 11, 2021
43c32f1
Fix direction handling and nested menus
bheston Oct 12, 2021
6031665
Clean up design token interface
bheston Oct 15, 2021
6de8026
Flipper style update to look not disabled
bheston Oct 15, 2021
6db3fc1
Fixed disabled button style
bheston Oct 21, 2021
f939800
Added design tokens for neutral and accent bae colors.
bheston Oct 21, 2021
b482de5
Change files
bheston Oct 21, 2021
41e4aee
Merge branch 'master' into web-component-visual-update
chrisdholt Oct 22, 2021
89547a8
Update card.html
chrisdholt Oct 22, 2021
8b36d06
Run prettier
bheston Oct 22, 2021
ab322e7
Docs update
bheston Oct 22, 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-e1a84d66-4c1b-4a87-9309-38c608a5b80a.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "major",
"comment": "Update to Sun Valley visual styling",
"packageName": "@fluentui/web-components",
"email": "47367562+bheston@users.noreply.github.com",
"dependentChangeType": "patch"
}
1 change: 1 addition & 0 deletions packages/web-components/.storybook/preview-body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<label for="direction-switch">Direction:</label>
</fluent-switch>
<fluent-switch id="luminance-switch">
Luminance
<span slot="checked-message">Dark</span>
<span slot="unchecked-message">Light</span>
<label for="luminance-switch">Luminance:</label>
Expand Down
6 changes: 0 additions & 6 deletions packages/web-components/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
height: 100%;
background: var(--fill-color) !important;
}

.sbdocs-preview,
div.docs-story {
background: var(--fill-color) !important;
Expand All @@ -23,25 +22,20 @@
box-shadow: 0px 0px 3px rgb(0 0 0 / 22%);
z-index: 10;
}

#switches-container > fluent-badge {
vertical-align: bottom;
font-size: var(--type-ramp-base-font-size);
height: 24px;
}

#switches-container > fluent-badge:host(.control) {
font-weight: 400;
}

#switches-container > fluent-badge:last-of-type {
margin-left: 22px;
}

#docs-root a.sbdocs.sbdocs-a {
color: #0969da !important;
}

#docs-root a.sbdocs.sbdocs-a:hover {
color: var(--accent-foreground-hover) !important;
text-decoration: underline;
Expand Down
13 changes: 12 additions & 1 deletion packages/web-components/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { addons } from '@storybook/addons';
import { DOCS_RENDERED } from '@storybook/core-events';
import * as Fluent from '../src/index-rollup';
import { fillColor, neutralLayer1, neutralLayer2 } from '../src/design-tokens';
import webcomponentsTheme from './theme';
import { toggleBgMode, toggleLtr } from '../public/switches';

Expand All @@ -18,7 +21,7 @@ export const parameters = {
storySort: {
order: [
'Getting Started',
['Overview', 'Installation'],
['Overview', 'Installation', 'Styling'],
'Components',
'Integrations',
['Introduction'],
Expand All @@ -35,3 +38,11 @@ export const parameters = {
theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme
},
};

addons.getChannel().addListener(DOCS_RENDERED, name => {
if (name.toLowerCase() === 'components/accordion' || name.toLowerCase() === 'components/card') {
fillColor.setValueFor(document.body, neutralLayer2);
} else {
fillColor.setValueFor(document.body, neutralLayer1);
}
});
Loading