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.

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

feat: display 6 actions as contentless node #2108

Merged
merged 6 commits into from
Feb 27, 2020

Conversation

yeze322
Copy link
Contributor

@yeze322 yeze322 commented Feb 27, 2020

Description

Follows new design, implement a new widget <ActionHeader /> to draw contentless node and apply it to 6 types:

  1. EndDialog
  2. EndTurn
  3. RepeatDialog
  4. CancelAllDialogs
  5. LogAction
  6. TraceActivity

Preview the changes in UISchema (2 types out of 6):
image

Design

According to new design, we want to show some types as contentless node.

image

What's changed?

  1. Created a new widget <ActionHeader />
  2. Consumed the new widget in 6 types' definition to make them borderless.
  3. Adjusted element size constants.
  4. Color

Why created a new widget?

I plan to retire the FormCard component in next few PRs because it can't meet our customization requirements under the new widget-based structure.
Therefore, this PR copied out a part of its code as ActionHeader; the new widget will be applied to more actions as a nested field. For example:

[SDKTypes.SendActivity]: {
    "ui:widget": Card,
    "header": {
        "ui:widget": ActionHeader,
    },
     "body": {
        "ui:widget": LGActivity,
        "text": data => data.activity,
    }
}

Task Item

fixes #1701

Screenshots

image
image

@yeze322 yeze322 marked this pull request as ready for review February 27, 2020 13:15
@@ -8,7 +8,7 @@ const Colors = {
Black: '#000000',
AzureGray: '#3C3C41',
AzureGray2: '#656565',
AzureGray3: '#EBEBEB',
AzureGray3: '#D7D7D7',
Gray80: '#B3B0AD',
Gray60: '#C8C6C4',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to use the colors from the @ui-fabric/fluent-theme package?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@a-b-r-o-w-n Yes! I would like to do that. We need designer's help on mapping those colors to our theme, do we need an issue to track this?

@a-b-r-o-w-n a-b-r-o-w-n merged commit 482aaf7 into microsoft:master Feb 27, 2020
@cwhitten cwhitten mentioned this pull request Mar 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants