From e913c954401af2fb923c7b582586ca3afb621c40 Mon Sep 17 00:00:00 2001 From: "REDMOND\\krsiler" Date: Mon, 13 Apr 2020 11:48:52 -0700 Subject: [PATCH] restore files that should have been unchanged --- docs/content/windows/components/Checkbox.mdx | 118 +++++++++--------- docs/content/windows/components/button.mdx | 40 +++--- docs/content/windows/components/link.mdx | 48 +++---- .../content/windows/components/radiogroup.mdx | 78 ++++++------ docs/content/windows/components/separator.mdx | 92 +++++++------- .../components/utilities/focustrapzone.mdx | 48 +++---- .../components/utilities/pressable.mdx | 6 +- .../windows/components/utilities/stack.mdx | 6 +- docs/content/windows/counter.jsx | 30 ++--- .../src/Text/Text.settings.ts | 4 +- 10 files changed, 235 insertions(+), 235 deletions(-) diff --git a/docs/content/windows/components/Checkbox.mdx b/docs/content/windows/components/Checkbox.mdx index 6c7c6bb55a..6b5080fd46 100644 --- a/docs/content/windows/components/Checkbox.mdx +++ b/docs/content/windows/components/Checkbox.mdx @@ -1,59 +1,59 @@ -# Component Name: Checkbox - -## Purpose: -The goal of this Checkbox component is to allows users to switch between two mutually exclusive options (checked or unchecked, -on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control. - -## Do's: - - Allow users to choose any combination of options when several Checkboxes are grouped together. - -## Don't: - - Don't use a Checkbox as an on/off control. Instead use a toggle switch. - - Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead. - - Don't put two groups of Checkboxes next to each other. Separate the two groups with labels. - -## Sample Code: -``` - - -``` - -## Tokens: -Checkbox supports the following tokens: - 1. checkboxBackgroundColor – This changes the background color of the Checkbox. - 2. checkboxBorderColor – This changes the border color of the Checkbox. - 3. checkmarkColor – This changes the color of Checkmark. - 4. borderRadius - This changes the border radius of the Checkbox (use this to create a circular checkbox) - -## Token Usage Example: -Circular Checkbox: We use "borderRadius=7" right now because we currently don't support % for borderRadius. The checkbox -size is currently 14x14, so 7 is 50%. We have a task to allow for %'s. - ``` - const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 7 } }); - ``` - -Checkbox with white background (when unchecked): - ``` - const WhiteCheckbox = Checkbox.customize({ tokens: { backgroundColor: 'white' } }); - ``` - -Circular Color-Customized Checkbox - (Green background + green border + white checkmark) when Checked. - ``` - const CircleColorCheckbox = Checkbox.customize({ - tokens: { borderRadius: 7 }, - _overrides: { - checked: { - tokens: { - checkboxBackgroundColor: 'green', - checkboxBorderColor: 'green', - checkmarkColor: 'white' - } - }, - focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } }, - hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } }, - pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } } - } - }); - ``` - - +# Component Name: Checkbox + +## Purpose: +The goal of this Checkbox component is to allows users to switch between two mutually exclusive options (checked or unchecked, +on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control. + +## Do's: + - Allow users to choose any combination of options when several Checkboxes are grouped together. + +## Don't: + - Don't use a Checkbox as an on/off control. Instead use a toggle switch. + - Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead. + - Don't put two groups of Checkboxes next to each other. Separate the two groups with labels. + +## Sample Code: +``` + + +``` + +## Tokens: +Checkbox supports the following tokens: + 1. checkboxBackgroundColor – This changes the background color of the Checkbox. + 2. checkboxBorderColor – This changes the border color of the Checkbox. + 3. checkmarkColor – This changes the color of Checkmark. + 4. borderRadius - This changes the border radius of the Checkbox (use this to create a circular checkbox) + +## Token Usage Example: +Circular Checkbox: We use "borderRadius=7" right now because we currently don't support % for borderRadius. The checkbox +size is currently 14x14, so 7 is 50%. We have a task to allow for %'s. + ``` + const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 7 } }); + ``` + +Checkbox with white background (when unchecked): + ``` + const WhiteCheckbox = Checkbox.customize({ tokens: { backgroundColor: 'white' } }); + ``` + +Circular Color-Customized Checkbox - (Green background + green border + white checkmark) when Checked. + ``` + const CircleColorCheckbox = Checkbox.customize({ + tokens: { borderRadius: 7 }, + _overrides: { + checked: { + tokens: { + checkboxBackgroundColor: 'green', + checkboxBorderColor: 'green', + checkmarkColor: 'white' + } + }, + focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } }, + hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } }, + pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } } + } + }); + ``` + + diff --git a/docs/content/windows/components/button.mdx b/docs/content/windows/components/button.mdx index 78a848a5fe..a65dbc4af8 100644 --- a/docs/content/windows/components/button.mdx +++ b/docs/content/windows/components/button.mdx @@ -1,20 +1,20 @@ -# Button Documentation - -## Example - -``` -import * as React from 'react'; -import { Button, View } from '@fluentui/react-native'; - -export const ButtonExample: React.FunctionComponent<{}> = props => { - return ( - - - - ); -}; - -export default Counter; +import React, { useState } from 'react'; + +export const Counter = function() { + // Declare a new state variable, which we'll call "count" + const [count, setCount] = useState(0); + + return ( +
+

You clicked {count} times

+ +
+ ); +}; + +export default Counter; diff --git a/packages/experiments/experimental-web-controls/src/Text/Text.settings.ts b/packages/experiments/experimental-web-controls/src/Text/Text.settings.ts index 598f2284d4..27dc14a776 100644 --- a/packages/experiments/experimental-web-controls/src/Text/Text.settings.ts +++ b/packages/experiments/experimental-web-controls/src/Text/Text.settings.ts @@ -5,8 +5,8 @@ export const settings: IComposeSettings = [ { tokens: { fontFamily: 'primary', - fontSize: 'secondary', - fontWeight: 'regular', + fontSize: 'medium', + fontWeight: 'medium', color: 'bodyText' }, root: {