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

Jump to bottom

Actions should allow an image to be displayed in addition to text for the title #389

Closed
6 tasks done
waynehsmith opened this issue Jun 5, 2017 · 10 comments
Closed
6 tasks done

Actions should allow an image to be displayed in addition to text for the title #389

waynehsmith opened this issue Jun 5, 2017 · 10 comments
Assignees
@matthidinger
Labels
Area-Schema Epic Platform-XAML Bugs or features related to Xaml Renderer

Comments

@waynehsmith
Copy link

waynehsmith commented Jun 5, 2017 •
edited by paulcam206

Implementation status

Problem

There's no way to display an image in addition to text on an action. Some hosts, like toast notifications, are built around this experience where developers can provide "image buttons" for their actions.

image

This can NOT be part of the card body. The actions need to be consistently rendered just like actions are today - with the only difference being that an image can be provided.

Card authors should NOT have control over the placement of the image. Otherwise the end user experience would be inconsistent, since some toast notifications would have the image on the left, some on the right, etc.

Spec

Schema changes

We add an iconUrl property to action...

Property Type Required Description
type IAction true
title string true Label for button or link that represents this action
speak Speak false Specifies what should be spoken for this entire element. This is simple text or SSML fragment
iconUrl string false Optional icon to be shown on the action in conjunction with the title 
"actions": [
  {
    "type": "Action.Submit",
    "title": "Snooze",
    "iconUrl": "ms-appx:///Assets/Snooze.png",
    "data": "snooze"
  },
  {
    "type": "Action.Submit",
    "title": "Dismiss",
    "iconUrl": "ms-appx:///Assets/Dismiss.png",
    "data": "dismiss"
  }

]

Host Config

"actions": {
    "iconPlacement": "aboveTitle|leftOfTitle",
    "iconSize": 30
}

Defaults: aboveTitle and 30

Update 8/3: iconSize was changed from a string "30px" to a number [30], to match the unit conventions throughout host config. Also updated spec to clarify defaults and some behavior.

Renderer Requirements

  1. If iconPlacement is aboveTitle then the iconSize should be used as the height of the image, while maintaining aspect ratio. Card Authors should use square images for ideal portability between Hosts.
  2. If iconPlacement is leftOfTitle then the image SHOULD BE as close as possible to the height of the text in the action. If that isn't reasonable then iconSize should be used.
  3. If iconUrl is null on ANY action within a set, the iconPlacement SHOULD BE leftOfTitle to ensure buttons are all the same height.
  4. Per-platform styling (CSS, XAML, etc) MUST ADD a new style with a name that combines "ActionWithIcon" appended by the iconPlacement value. E.g., if HostConfig.actions.iconPlacement is "aboveTitle" then the platform style would be "ActionWithIconAboveTitle". This will allow for fine-grained UI treatment of Actions with icons in various placements.

Downlevel Impact

Medium
On a 1.0 renderer the icon will be dropped.
@danmarshall
Copy link
Contributor

The slippery slope here is that someone will inevitably want it on the right, then the top, bottom, etc., leading to another layout language.

@danmarshall
Copy link
Contributor

Can this be solved with actions on ColumnSets?

@waynehsmith
Copy link
Author

That's a bit unclear @danmarshall . The issue I'm trying to solve is a Container ( with a Column Set containing an Image and a TextBlock, as well as an InputBox). I want the "submit" button to submit information from the Image ( a feedback action) as well as the contents of the input box. If I use the selectAction the entire container sends the click without the user being able to enter information as seen here:

{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have define the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"speak": "",
"wrap": true
},
{
"type": "FactSet",
"speak": "It has been assigned to: David Claux",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
}
]
},
{
"type": "Input.Text",
"id": "Improve",
"isMultiline": true,
"placeholder": "How can we improve?"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "Action.Submit",
"data": {
"x": 13
}
}
}

@matthidinger matthidinger added this to the v1 milestone Aug 3, 2017
@matthidinger matthidinger changed the title Action.Submit should allow an image to be displayed in addition to text for the title Actions should allow an image to be displayed in addition to text for the title Aug 7, 2017
@matthidinger matthidinger modified the milestones: v1.1, v1 Aug 11, 2017
@andrewleader
Copy link
Contributor

Toasts need this too
image

@andrewleader andrewleader added Platform-XAML Bugs or features related to Xaml Renderer High Priority labels Sep 5, 2017
@matthidinger matthidinger mentioned this issue Sep 5, 2017
Closed
7 tasks
@andrewleader andrewleader mentioned this issue Sep 15, 2017
Closed
@khouzam khouzam removed this from the v1.1 milestone Nov 30, 2017
@almedina-ms almedina-ms mentioned this issue Apr 4, 2018
Merged
@almedina-ms almedina-ms mentioned this issue May 18, 2018
Closed
@matthidinger
Copy link
Member

@dclaux at some point we added iconSize in HostConfig but didn't really specify it's behavior. Currently the image size will be the height of the action text, even if it's set to be placed above the title. Does this seem sufficient or do you feel we should include iconSize in this release? We can always add it later since it's a HostConfig option

@waynehsmith
Copy link
Author

waynehsmith commented May 21, 2018 via email

@dclaux
Copy link
Member

dclaux commented May 21, 2018

@matthidinger from the screenshot at the top of this issue it doesn't look like the image is the same height as the text:
image

In any case, I think a configurable size is preferable.

@andrewleader
Copy link
Contributor

@matthidinger that doesn't work for toasts. We need the icon to be bigger, and on top of the text, as seen in that screenshot I provided earlier.

@dclaux dclaux mentioned this issue May 23, 2018
Merged
@tuanh118 tuanh118 mentioned this issue Aug 2, 2018
Merged
@paulcam206
Copy link
Member

Documentation is done and in the mahiding/site1.1 branch.

This was referenced Aug 21, 2019
Closed
Closed
@hari44330
Copy link

is it possible to add alt text for icon ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@matthidinger matthidinger

Labels
Area-Schema Epic Platform-XAML Bugs or features related to Xaml Renderer
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@dclaux @matthidinger @khouzam @danmarshall @andrewleader @paulcam206 @waynehsmith @hari44330