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

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

Closed
weretygr opened this Issue Jun 5, 2017 · 9 comments

Comments

Projects
None yet
7 participants
@weretygr

weretygr commented Jun 5, 2017

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

This comment has been minimized.

Collaborator

danmarshall commented Jun 5, 2017

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

This comment has been minimized.

Collaborator

danmarshall commented Jun 5, 2017

Can this be solved with actions on ColumnSets?

@weretygr

This comment has been minimized.

weretygr commented Jun 5, 2017

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 from Action.Submit should allow an image to be displayed in addition to text for the title to 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

This comment has been minimized.

Collaborator

andrewleader commented Aug 30, 2017

Toasts need this too
image

@matthidinger

This comment has been minimized.

Member

matthidinger commented May 21, 2018

@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

@weretygr

This comment has been minimized.

weretygr commented May 21, 2018

@dclaux

This comment has been minimized.

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

This comment has been minimized.

Collaborator

andrewleader commented May 21, 2018

@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.

@paulcam206

This comment has been minimized.

Member

paulcam206 commented Sep 24, 2018

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

@paulcam206 paulcam206 closed this Sep 24, 2018

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