Updates from: 01/12/2021 04:07:55
Service Microsoft Docs article Related commit history on GitHub Change details
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/components/buttons https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/components/buttons.md deleted file mode 100644
@@ -1,82 +0,0 @@
-title: Design Guidelines Reference
-description: Describes the guidelines for using buttons, links and controls in your apps
-keywords: teams design guidelines reference components buttons links colors
-# Buttons, links, and controls
--
-## Button types
-
-The way buttons are styled helps communicate what kind of action they trigger. We maintain a wide range of buttons that are formatted to show different levels of emphasis.
-
-Buttons can have text, an icon, or a combination of text and an icon. To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.
-
-### Fluent Design System
-
-Fluent UI provides guidance for web and desktop component states, styling, and accessibility. Buttons on the Teams platform can be formatted to show different levels of emphasis. *See* [Fluent UI button colors](https://fluentsite.z22.web.core.windows.net/components/button/definition?showCode=false&showRtl=false&showTransparent=false&showVariables=true#types-emphasis) for HTML and CSS hexadecimal color values.
-
-### Text buttons
-
-In dialogs, you should align buttons to the right, starting with the primary action farthest to the right. In cards, buttons are left-aligned.
-
-Button styles in Teams
-
-Desktop Client
-[!include[Button states](~/includes/design/buttons-image-states.html)]
-
-Mobile Client
-[!include[Mobile button states](~/includes/design/buttons-mobile-image-states.html)]
-
-Dialog buttons
-[!include[Dialog buttons](~/includes/design/buttons-image-dialog.html)]
-
-Card button states
-[!include[Card button states](~/includes/design/buttons-image-cardstates.html)]
-
-Card buttons
-[!include[Card buttons](~/includes/design/buttons-image-card.html)]
-
-### Icon buttons
-
-Icon buttons can invoke an action and can also be toggled on and off.
-[!include[Icon buttons](~/includes/design/buttons-image-icon.html)]
-
-In some cases, you can pair an icon and text to increase emphasis.
-[!include[Icon text buttons](~/includes/design/buttons-image-icontext.html)]
-
-### Miscellaneous buttons
-
-#### Desktop Clients
-Radial buttons, checkboxes, and toggle switches.<br/>
-[!include[Other buttons](~/includes/design/buttons-image-others.html)]
-
-#### Mobile Clients
-Radial buttons, checkboxes, and toggle switches.<br/>
-[!include[Other buttons](~/includes/design/buttons-image-mobile-others.html)]
--
-## Links
-
-Here are our approved styles for inline text links.
-[!include[Approved link styles](~/includes/design/links-image-text.html)]
--
-## Style
-
-## Size and padding
-
-Text buttons, icons, and controls are contained within a 32px high container to ensure all controls are visually aligned and consistent.
-[!include[Size and padding](~/includes/design/style-image-size.html)]
-
-### Rounded corners
-
-Text buttons have a corner radius of 3px.
-[!include[Rounded corners](~/includes/design/style-image-corners.html)]
-
-### Button text
-
-Use sentence case in text for buttons to help with localization and legibility. (In other words, only capitalize the first letter of the first word in a phrase or sentence.)
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/components/color https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/components/color.md deleted file mode 100644
@@ -1,58 +0,0 @@
-title: Design Guidelines Reference
-description: Describes the guidelines for using color in the apps
-keywords: teams design guidelines reference components color
-# Color
-
-Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in Teams. Since Teams has two color themes (light and dark), itΓÇÖs a good idea to make sure your app looks great in both themes.
-
-### $app-black (#252423)
-
-Our most commonly-used text color. We use it at five levels of opacity for text. Text should mainly be used at 100%, 74%, 64% opacity since it is accessible. Text at 52% and 36% should be used sparingly since it is not accessible.
-
-[!include[Appblack color and text](~/includes/design/color-image-appblack-text.html)]
-
-1. 100% - Headers and base text
-2. 74% - Labels, subheads, attributions, and icon buttons
-3. 64% - Message previews, help text (not shown)
-4. 52% - Timestamps
-5. 36% - Disabled text
-
-We also use `$app-black` at other opacities for some UI elements:
-
-[!include[Appblack color and text](~/includes/design/color-image-appblack-ui.html)]
-
-1. 14% - Banner backgrounds
-2. 5% - Disabled button and card borders
-
-### Default theme color ramp
-
-See the Pen [Microsoft Teams design guidelines - default theme color ramp](https://codepen.io/msteams/pen/KyPmqL/) on CodePen.
-
-<iframe height='620' scrolling='no' title='Microsoft Teams design guidelines - default theme color ramp' src='//codepen.io/msteams/embed/KyPmqL/?height=682&theme-id=31655&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/msteams/pen/KyPmqL/'>Microsoft Teams design guidelines - default theme color ramp</a> by Microsoft Teams (<a href='https://codepen.io/msteams'>@msteams</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
-
-### Other default theme colors
-
-See the Pen [Microsoft Teams design guidelines - other default theme colors](https://codepen.io/msteams/pen/zPOdYJ/) on CodePen.
-
-<iframe height='392' scrolling='no' title='Microsoft Teams design guidelines - other default theme colors' src='//codepen.io/msteams/embed/zPOdYJ/?height=442&theme-id=31655&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/msteams/pen/zPOdYJ/'>Microsoft Teams design guidelines - other default theme colors</a> by Microsoft Teams (<a href='https://codepen.io/msteams'>@msteams</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
-
-### Dark theme color ramp
-
-See the Pen [Microsoft Teams design guidelines - dark theme color ramp](https://codepen.io/msteams/pen/BmBwjx/) on CodePen.
-
-<iframe height='798' scrolling='no' title='Microsoft Teams design guidelines - dark theme color ramp' src='//codepen.io/msteams/embed/BmBwjx/?height=846&theme-id=31655&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/msteams/pen/BmBwjx/'>Microsoft Teams design guidelines - dark theme color ramp</a> by Microsoft Teams (<a href='https://codepen.io/msteams'>@msteams</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
-
-> **Note:** The msteams-ui-styles-core library has the actual values coded as variables. These variables will be helpful if the colors are ever updated.
--
-### Other dark theme colors
-
-See the Pen [Microsoft Teams design guidelines - other dark theme colors](https://codepen.io/msteams/pen/zPOEXN/) on CodePen.
-
-<iframe height='390' scrolling='no' title='Microsoft Teams design guidelines - other dark theme colors' src='//codepen.io/msteams/embed/zPOEXN/?height=442&theme-id=31655&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/msteams/pen/zPOEXN/'>Microsoft Teams design guidelines - other dark theme colors</a> by Microsoft Teams (<a href='https://codepen.io/msteams'>@msteams</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/components/dialogs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/components/dialogs.md deleted file mode 100644
@@ -1,46 +0,0 @@
-title: Design Guidelines Reference
-description: Describes the guidelines for using dialogs in your apps
-keywords: teams design guidelines reference components dialogs
-# Dialogs
-
-Dialogs should be used sparingly since they can be disruptive, and should have a clear way for the user to exit.
--
-## Sizes
-
-We have 3 dialog sizes to choose from. Choose the size that is appropriate for the content you have.
-[!include[Dialog sizes](~/includes/design/dialogs-image-sizes.html)]
--
-## Buttons
-
-Buttons are right-justified.
-All other elements (checkboxes, help text, etc.) should be left-justified.
-DonΓÇÖt duplicate negative actions (Never provide an ΓÇÿXΓÇÖ and a ΓÇÿCancelΓÇÖ button at the same time.).
-ΓÇÿApplyΓÇÖ buttons should be paired with ΓÇÿCancelΓÇÖ buttons.
-[!include[Dialog buttons](~/includes/design/dialogs-image-buttons.html)]
--
-## Scrolling
-
-In some cases, content will scroll. The dialog title and other important information remains in place.
-[!include[Dialog scrolling](~/includes/design/dialogs-image-scrolling.html)]
--
-## Padding
-
-The padding around all four sides of the dialog should be 32px.
-[!include[Dialog padding](~/includes/design/dialogs-image-padding.html)]
--
-## Typography
-
-We use Segoe UI SemiBold at 18pt (title2) and $app-black for dialog titles. For body text, we use Segoe UI Regular at 14pt (base) and $app-black.
-[!include[Dialog typography](~/includes/design/dialogs-image-typography.html)]
\ No newline at end of file
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/components/fields https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/components/fields.md deleted file mode 100644
@@ -1,62 +0,0 @@
-title: Design Guidelines Reference
-description: Describes the guidelines for using fields and flyouts in your apps
-keywords: teams design guidelines reference components fields and flyouts
-# Fields and flyouts
--
-## Fields
-
-Fields are areas where users can input text.
-
-### Padding and size
-
-Single-line text fields are a fixed height of 32px to match the height of other components. Some text fields such as description fields may be taller vertically to allow more text.
-[!include[Padding and size](~/includes/design/fields-image-padding.html)]
-
-### States
-
-These are the states of our text fields. Text fields exist in different states. We have specific designs dedicated to nine possible scenarios, including (top to bottom): Resting text field, Keyboard in focus and cursor inside the field, Keyboard in focus with text entered, Error handling has succeeded, Error handling has failed, Clear text field (including an X icon), Search field (including a Search icon), Loading field, and a Disabled field.
-[!include[Field states](~/includes/design/fields-image-states.html)]
-
-### Formatting help text and labels
-
-Fields can contain placeholder text to give an example of the kind of information that is required. They can also hold labels that give the user more context. Within a field, your text should always be justified left. We use sentence casing throughout here, as well.
-
-We use Segoe UI Regular at 12 pt (caption) and $app-gray-02 for labels. For help text, we use Segoe UI Regular at 14 pt (base) and $app-gray-02.
-[!include[Fields typography](~/includes/design/fields-image-typography.html)]
--
-## Flyouts
-
-Flyouts are more lightweight than dialogs and can be dismissed quickly. They can contain buttons, fields, and other components.
-[!include[Flyouts](~/includes/design/flyouts-image.html)]
-
-### Sizing and padding
-
-We recommend a 16px padding to the left and right of the content.
-[!include[Flyouts size and padding](~/includes/design/flyouts-image-sizepadding.html)]
-
-### Placement
-
-Flyouts are contextual and should be placed above, below, or beside the element that triggered it.
-
-### Scrolling
-
-The header remains in place to give context to the content being scrolled.
-[!include[Flyouts scrolling](~/includes/design/flyouts-image-scrolling.html)]
-
-## Mobile
-
-Fields are text-entry boxes that accept input from users. Flyout menus are horizontal pop-up windows that appear from the top pane and can be used to show more detail about an item.
-
-### Field Controls
-
-[!include[Mobile fields](~/includes/design/fields-mobile-image.html)]
-
-### Flyout menu list controls
-
-[!include[Mobile flyout menu controls](~/includes/design/flyout-menu-mobile-image.html)]
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/components/typography https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/components/typography.md deleted file mode 100644
@@ -1,29 +0,0 @@
-title: Design Guidelines Reference
-description: Describes the guidelines for typography in your apps
-keywords: teams design guidelines reference components typography
-# Typography
-
-Typography should be clear and purposeful. It should emphasize important information and, to reduce confusion, avoid using multiple fonts and sizes. For localization and legibility, we recommend using sentence case and avoiding the usage of all caps.
-
-## Desktop clients
-
-Please use the following type ramp:
-<iframe height='600' scrolling='no' title='Microsoft Teams design guidelines - typography ramp' src='//codepen.io/msteams/embed/xPxxQz/?height=687&theme-id=31655&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%; overflow:hidden;margin:0; padding:0; border:none; '>See the Pen Microsoft Teams design guidelines - typography ramp by Microsoft Teams (@msteams) on CodePen.</iframe>
-
-## Mobile Android clients
-
-Please use the following type ramp:
-<iframe height="525" style="width: 100%; " scrolling="no" title="Microsoft Teams Android design guidelines - typography" src="//codepen.io/msteams/embed/vYBWOoX/?height=565&theme-id=31655&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
- See the Pen <a href='https://codepen.io/msteams/pen/vYBWOoX/'>Microsoft Teams Android design guidelines - typography</a> by Bill Bliss
- (<a href='https://codepen.io/msteams'>@msteams</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
-
-## Mobile IOS clients
-
-Please use the following type ramp:
-<iframe height="635" style="width: 100%; " scrolling="no" title="Microsoft Teams IOS design guidelines - typography" src="//codepen.io/msteams/embed/qBWVWjw/?height=825&theme-id=31655&default-tab=result&editable=true" frameborder="no" allowtransparency="true" allowfullscreen="true">
- See the Pen <a href='https://codepen.io/msteams/pen/qBWVWjw/'>Microsoft Teams IOS design guidelines - typography</a> by Bill Bliss
- (<a href='https://codepen.io/msteams'>@msteams</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
platform https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/schema/manifest-schema.md
@@ -567,8 +567,8 @@ Specify your Azure Active Directory (Azure AD) App ID and Microsoft Graph inform
|Name| Type| Maximum size | Required | Description| |---|---|---|---|---| |`id`|string|36 characters|Γ£ö|AAD application id of the app. This id must be a GUID.|
-|`resource`|string|2048 characters|Γ£ö|Resource url of app for acquiring auth token for SSO.|
-|`applicationPermissions`|array of strings|128 characters||Specify granular [resource specific consent](../../graph-api/rsc/resource-specific-consent.md#resource-specific-permissions)|
+|`resource`|string|2048 characters|Γ£ö|Resource URL of app for acquiring auth token for SSO. </br> **NOTE:** If you are not using SSO, ensure that you enter a dummy string value in this field to your app manifest, for example, https://notapplicable to avoid an error response. |
+|`applicationPermissions`|array of strings|128 characters||Specify granular [resource specific consent](../../graph-api/rsc/resource-specific-consent.md#resource-specific-permissions).|
## showLoadingIndicator
platform https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-using https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/connectors-using.md
@@ -62,6 +62,11 @@ You can also use this JSON to create cards containing rich inputs, such as text
"name": "Save", "target": "http://..." }]
+ {
+ "@type": "OpenUri",
+ "name": "Learn More",
+ "targets": [{ "os": "default", "uri": "https://docs.microsoft.com/outlook/actionable-messages" }]
+ }
}, { "@type": "ActionCard", "name": "Change status",
@@ -104,8 +109,6 @@ Connector cards support three types of actions:
- `HttpPOST` Sends a POST request to a URL - `OpenUri` Opens a URI in a separate browser or app; optionally targets different URIs based on operating systems
-(A fourth action, `ViewAction`, is still supported but no longer needed; use `OpenUri` instead.)
- The `ActionCard` action supports three input types: - `TextInput` A single-line or multiline text field with an optional length limit