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

chore: fix broken ui in fast-website, various content fixes, update to use new color vars #3324

Merged
merged 6 commits into from
Jun 17, 2020
Merged

chore: fix broken ui in fast-website, various content fixes, update to use new color vars #3324

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
73131d4
fix regression where buttons went full width on section headers
chrisdholt Jun 16, 2020
50ca615
update cstyles to use behavior vars and fix card regression due to in…
chrisdholt Jun 16, 2020
b8e3094
add aria-labels for content
chrisdholt Jun 16, 2020
4e08642
update api docs
chrisdholt Jun 17, 2020
2334cbd
Merge branch 'master' into users/chhol/fit-and-finish-website
chrisdholt Jun 17, 2020
e22bcc1
Merge branch 'master' into users/chhol/fit-and-finish-website
chrisdholt Jun 17, 2020
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
6 changes: 3 additions & 3 deletions sites/fast-website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
"private": true,
"license": "MIT",
"devDependencies": {
"@microsoft/fast-element": "^0.10.2",
"@microsoft/fast-foundation": "^1.1.2",
"@microsoft/fast-element": "^0.11.0",
"@microsoft/fast-foundation": "^1.2.0",
"@microsoft/fast-web-utilities": "^4.5.1",
"@microsoft/fast-components": "^1.1.2",
"@microsoft/fast-components": "^1.2.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
Expand Down
2 changes: 1 addition & 1 deletion sites/fast-website/src/app/components/card-section/card-section.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const CardSectionStyles = css`
:host ::slotted(site-feature-card:focus-within) {
cursor: pointer;
color: currentColor;
background-color: var(--neutral-fill-hover);
background-color: ${neutralFillHoverBehavior.var};
filter: saturate(1);
}
`.withBehaviors(neutralFillHoverBehavior);
15 changes: 8 additions & 7 deletions sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { css } from "@microsoft/fast-element";
import {
neutralFillInputHoverBehavior,
neutralFillInputRestBehavior,
neutralFocusBehavior,
neutralOutlineHoverBehavior,
neutralOutlineRestBehavior,
} from "@microsoft/fast-components";
Expand Down Expand Up @@ -38,18 +39,18 @@ ${display("inline-flex")} :host {
height: calc(var(--input-size) * 1px);
box-sizing: border-box;
border-radius: calc(var(--corner-radius) * 1px);
border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
outline: none;
cursor: pointer;
}

.label__hidden {
.label-hidden {
display: none;
}

.label {
font-family: var(--body-font);
color: var(--neutral-foreground-rest);
color: ${neutralForegroundRestBehavior.var};
${
/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ ""
} padding-inline-start: calc(var(--design-unit) * 2px + 2px);
Expand All @@ -69,18 +70,18 @@ ${display("inline-flex")} :host {
border-radius: calc(var(--corner-radius) * 1px);
display: inline-block;
flex-shrink: 0;
border: 1px solid var(--neutral-foreground-rest);
border: 1px solid ${neutralForegroundRestBehavior.var};
opacity: 0;
pointer-events: none;
}

.control:hover {
border-color: var(--neutral-outline-hover);
border-color: ${neutralOutlineHoverBehavior.var};
}

:host(:${focusVisible}) .control {
box-shadow: 0 0 0 1px var(--neutral-focus) inset;
border-color: var(--neutral-focus);
box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
border-color: ${neutralFocusBehavior.var};
}

:host(.disabled) .label,
Expand Down
2 changes: 1 addition & 1 deletion sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const ColorSwatchTemplate = html<ColorSwatch>`
class="${x =>
x.defaultSlottedNodes && x.defaultSlottedNodes.length
? "label"
: "label label__hidden"}"
: "label label-hidden"}"
>
<slot ${slotted("defaultSlottedNodes")}></slot>
</label>
Expand Down
2 changes: 1 addition & 1 deletion sites/fast-website/src/app/components/color-swatch/color-swatch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { attr, observable } from "@microsoft/fast-element";
import { attr, observable, FASTElement } from "@microsoft/fast-element";
import { FASTRadio } from "@microsoft/fast-components";

export class ColorSwatch extends FASTRadio {
Expand Down
16 changes: 8 additions & 8 deletions ...site/src/app/components/content-placement-container/content-placement-container.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const ContentPlacementContainerStyles = css`

:host([section="feature"]) site-feature-card:hover :first-child::before,
:host([section="feature"]) site-feature-card:focus-within :first-child::before {
color: var(--accent-foreground-rest);
color: ${accentForegroundRestBehavior.var};
}

/* end */
Expand All @@ -60,7 +60,7 @@ export const ContentPlacementContainerStyles = css`
:host([section="community"]:focus-within) site-content-placement,
:host([section="community"]:hover) site-content-placement ::part(content),
:host([section="community"]:focus-within) site-content-placement ::part(content) {
color: var(--neutral-foreground-hint);
color: ${neutralForegroundHintBehavior.var};
}

:host([section="feature"]:hover) site-feature-card,
Expand All @@ -70,8 +70,8 @@ export const ContentPlacementContainerStyles = css`

:host([section="feature"]) site-feature-card:hover,
:host([section="feature"]) site-feature-card:focus-within {
color: var(--neutral-foreground-rest);
background: var(--neutral-fill-focus);
color: ${neutralForegroundRestBehavior.var};
background: ${neutralFillFocusBehavior.var};
cursor: pointer;
filter: saturate(1);
}
Expand All @@ -80,21 +80,21 @@ export const ContentPlacementContainerStyles = css`
:host([section="community"]) site-content-placement:focus-within {
--elevation: 4;
cursor: pointer;
background: var(--neutral-fill-focus);
background: ${neutralFillFocusBehavior.var};
border-radius: calc(var(--corner-radius) * 1px);
color: currentColor;
${elevation}
}

:host([section="community"]) site-content-placement:hover ::part(content),
:host([section="community"]) site-content-placement:focus-within ::part(content) {
color: var(--accent-foreground-rest);
color: ${accentForegroundRestBehavior.var};
}

/* end */

.headerSubscript {
color: var(--neutral-foreground-hint);
color: ${neutralForegroundHintBehavior.var};
font-size: var(--type-ramp-minus-1-font-size);
}

Expand Down Expand Up @@ -133,7 +133,7 @@ export const ContentPlacementContainerStyles = css`
justify-content: space-between;
}
:host([section="feature"]) site-feature-card :first-child::before {
color: var(--accent-foreground-rest);
color: ${accentForegroundRestBehavior.var};
}
}
`.withBehaviors(
Expand Down
1 change: 1 addition & 0 deletions sites/fast-website/src/app/components/content-placement/content-placement.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const ContentPlacementStyles = css`

fast-card ::slotted([slot="action"]) {
margin-top: calc(var(--design-unit) * 2px);
align-self: start;
}

fast-card:hover .contentPlacement_icon,
Expand Down
30 changes: 15 additions & 15 deletions sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const FastFrameStyles = css`
${display("block")} :host {
flex-direction: column;
font-family: var(--body-font);
color: var(--neutral-foreground-rest);
color: ${neutralForegroundRestBehavior.var};
box-sizing: border-box;
text-align: center;
width: 100%;
Expand Down Expand Up @@ -44,7 +44,7 @@ export const FastFrameStyles = css`
flex-direction: column;
width: 100%;
text-align: start;
background: var(--neutral-fill-card-rest);
background: ${neutralFillCardRestBehavior.var};
padding: calc(var(--gutter) * 2px);
}

Expand All @@ -70,15 +70,15 @@ export const FastFrameStyles = css`
.content h1 {
font-size: var(--type-ramp-minus-1-font-size);
line-height: var(--type-ramp-base-line-height);
color: var(--neutral-foreground-hint);
color: ${neutralForegroundHintBehavior.var};
margin: 0;
margin-bottom: 15px;
font-weight: bold;
text-transform: uppercase;
}

.content-heading-highlight {
color: var(--accent-foreground-rest);
color: ${accentForegroundRestBehavior.var};
}

.content h2 {
Expand All @@ -94,7 +94,7 @@ export const FastFrameStyles = css`
grid-gap: calc(var(--gutter) * 2px);
grid-template-columns: auto 300px;
padding: calc(var(--gutter) * 2px);
background: var(--neutral-fill-card-rest);
background: ${neutralFillCardRestBehavior.var};
position: relative;
border-radius: 0 calc(var(--corner-radius) * 1px) calc(var(--corner-radius) * 1px) 0;
}
Expand All @@ -112,7 +112,7 @@ export const FastFrameStyles = css`
flex-direction: column;
padding: calc(var(--gutter) * 1px);
text-align: start;
color: var(--neutral-foreground-rest);
color: ${neutralForegroundRestBehavior.var};
}

.badge {
Expand Down Expand Up @@ -150,7 +150,7 @@ export const FastFrameStyles = css`
display: grid;
grid-template-columns: auto 1fr;
text-align: start;
color: var(--neutral-foreground-rest);
color: ${neutralForegroundRestBehavior.var};
}

.checkbox {
Expand Down Expand Up @@ -183,7 +183,7 @@ export const FastFrameStyles = css`
.sample-control-icon {
width: 21px;
height: 21px;
background-color: var(--accent-fill-rest);
background-color: ${accentFillRestBehavior.var};
border-radius: calc(var(--corner-radius) * 1px);
}

Expand Down Expand Up @@ -235,16 +235,16 @@ export const FastFrameStyles = css`
}

fast-badge {
--badge-fill-primary: var(--accent-fill-rest);
--badge-color-primary: var(--neutral-foreground-rest);
--badge-fill-primary: ${accentFillRestBehavior.var};
--badge-color-primary: ${neutralForegroundRestBehavior.var};
}

fast-slider {
min-width: unset;
}

fast-tab-panel {
background: var(--neutral-fill-card-rest);
background: ${neutralFillCardRestBehavior.var};
height: 100%;
}

Expand All @@ -264,7 +264,7 @@ export const FastFrameStyles = css`

fast-slider-label {
font-size: var(--type-ramp-minus-2-font-size);
color: var(--neutral-foreground-hint);
color: ${neutralForegroundHintBehavior.var};
}

@media screen and (max-width: 1330px) {
Expand Down Expand Up @@ -301,7 +301,7 @@ export const FastFrameStyles = css`
border-radius: calc(var(--corner-radius) * 1px);
}

.preview__expanded {
.preview-expanded {
transition: right .5s ease-in-out;
right: -10%;
}
Expand All @@ -317,7 +317,7 @@ export const FastFrameStyles = css`
visibility: visible;
}

.tab-panel__expanded {
.tab-panel-expanded {
opacity: 0;
transition: opacity .5s ease-in-out;
}
Expand All @@ -335,7 +335,7 @@ export const FastFrameStyles = css`
border-radius: calc(var(--corner-radius) * 1px);
}

.preview__expanded {
.preview-expanded {
right: -5%;
}

Expand Down
14 changes: 7 additions & 7 deletions sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const FastFrameTemplate = html<FastFrame>`
<fast-tab id="swatches-tab" title="Styles">${SwatchesIcon}</fast-tab>
<fast-tab id="density-tab" title="Density">${ScreenIcon}</fast-tab>
<fast-tab-panel id="contrast-tab-panel" class="${x =>
x.expanded ? "tab-panel__expanded" : ""}">
x.expanded ? "tab-panel-expanded" : ""}">
<div class="content">
<h1><span class="content-heading-highlight">Fast Frame</span> Dark Mode</h4>
<h2>Pre-built for both light and dark modes</h2>
Expand All @@ -42,7 +42,7 @@ export const FastFrameTemplate = html<FastFrame>`
</div>
</fast-tab-panel>
<fast-tab-panel id="palette-tab-panel" class="${x =>
x.expanded ? "tab-panel__expanded" : ""}">
x.expanded ? "tab-panel-expanded" : ""}">
<div class="content">
<h1><span class="content-heading-highlight">Fast Frame</span> Colors</h4>
<h2>Pre-existing color you can customize</h2>
Expand Down Expand Up @@ -124,7 +124,7 @@ export const FastFrameTemplate = html<FastFrame>`
</div>
</fast-tab-panel>
<fast-tab-panel id="swatches-tab-panel" class="${x =>
x.expanded ? "tab-panel__expanded" : ""}">
x.expanded ? "tab-panel-expanded" : ""}">
<div class="content">
<h1><span class="content-heading-highlight">Fast Frame</span> Styles</h4>
<h2>Adjust style settings on the fly</h2>
Expand Down Expand Up @@ -182,7 +182,7 @@ export const FastFrameTemplate = html<FastFrame>`
</div>
</fast-tab-panel>
<fast-tab-panel id="density-tab-panel" class="${x =>
x.expanded ? "tab-panel__expanded" : ""}">
x.expanded ? "tab-panel-expanded" : ""}">
<div class="content">
<h1><span class="content-heading-highlight">Fast Frame</span> Density</h4>
<h2>Quickly change and modify your layout</h2>
Expand Down Expand Up @@ -268,7 +268,7 @@ export const FastFrameTemplate = html<FastFrame>`
</fast-tab-panel>
</fast-tabs>
<fast-design-system-provider
class="${x => (x.expanded ? "preview preview__expanded" : "preview")}"
class="${x => (x.expanded ? "preview preview-expanded" : "preview")}"
base-layer-luminance="${x =>
x.darkMode
? StandardLuminance.DarkMode
Expand Down Expand Up @@ -318,10 +318,10 @@ export const FastFrameTemplate = html<FastFrame>`
<span class="sample-control-icon"></span>
<span class="sample-control-text">Label</span>
<div class="sample-control-actions">
<fast-button appearance="stealth"
<fast-button appearance="stealth" aria-label="Example 'share' button"
>${ShareIcon}</fast-button
>
<fast-button appearance="stealth"
<fast-button appearance="stealth" aria-label="Example 'more' button"
>${ContextIcon}</fast-button
>
</div>
Expand Down
3 changes: 1 addition & 2 deletions sites/fast-website/src/app/components/feature-card/feature-card.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { css } from "@microsoft/fast-element";
import { neutralForegroundRestBehavior } from "@microsoft/fast-components";
import { display } from "@microsoft/fast-foundation";

export const FeatureCardStyles = css`
Expand Down Expand Up @@ -69,4 +68,4 @@ export const FeatureCardStyles = css`
max-width: 600px;
}
}
`.withBehaviors(neutralForegroundRestBehavior);
`;
4 changes: 2 additions & 2 deletions sites/fast-website/src/app/components/feature-card/feature-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { FASTCard as Card } from "@microsoft/fast-components";
import { FASTElement } from "@microsoft/fast-element";

export class FeatureCard extends Card {}
export class FeatureCard extends FASTElement {}
2 changes: 1 addition & 1 deletion sites/fast-website/src/app/components/navigation/navigation.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const NavigationStyles = css`
${display("grid")} :host {
grid-template-columns: auto 1fr auto;
font-family: var(--body-font);
color: var(--neutral-foreground-rest);
color: ${neutralForegroundRestBehavior.var};
box-sizing: border-box;
width: 100%;
}
Expand Down
3 changes: 2 additions & 1 deletion sites/fast-website/src/app/components/section-header/section-header.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import { css } from "@microsoft/fast-element";

export const SectionHeaderStyles = css`
${display("flex")} :host {
align-items: center;
flex-direction: column;
font-family: var(--body-font);
color: var(--neutral-foreground-rest);
color: ${neutralForegroundRestBehavior.var};
box-sizing: border-box;
text-align: center;
}
Expand Down
Loading