{"action":"closed","issue":{"url":"https://api.github.com/repos/ionic-team/ionic/issues/16666","repository_url":"https://api.github.com/repos/ionic-team/ionic","labels_url":"https://api.github.com/repos/ionic-team/ionic/issues/16666/labels{/name}","comments_url":"https://api.github.com/repos/ionic-team/ionic/issues/16666/comments","events_url":"https://api.github.com/repos/ionic-team/ionic/issues/16666/events","html_url":"https://github.com/ionic-team/ionic/issues/16666","id":389498210,"node_id":"MDU6SXNzdWUzODk0OTgyMTA=","number":16666,"title":"Toast customization - toast wrapper border color and toast CSS property","user":{"login":"ashinpaugh","id":1760041,"node_id":"MDQ6VXNlcjE3NjAwNDE=","avatar_url":"https://avatars2.githubusercontent.com/u/1760041?v=4","gravatar_id":"","url":"https://api.github.com/users/ashinpaugh","html_url":"https://github.com/ashinpaugh","followers_url":"https://api.github.com/users/ashinpaugh/followers","following_url":"https://api.github.com/users/ashinpaugh/following{/other_user}","gists_url":"https://api.github.com/users/ashinpaugh/gists{/gist_id}","starred_url":"https://api.github.com/users/ashinpaugh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashinpaugh/subscriptions","organizations_url":"https://api.github.com/users/ashinpaugh/orgs","repos_url":"https://api.github.com/users/ashinpaugh/repos","events_url":"https://api.github.com/users/ashinpaugh/events{/privacy}","received_events_url":"https://api.github.com/users/ashinpaugh/received_events","type":"User","site_admin":false},"labels":[{"id":999100804,"node_id":"MDU6TGFiZWw5OTkxMDA4MDQ=","url":"https://api.github.com/repos/ionic-team/ionic/labels/package:%20core","name":"package: core","color":"1d76db","default":false},{"id":884930892,"node_id":"MDU6TGFiZWw4ODQ5MzA4OTI=","url":"https://api.github.com/repos/ionic-team/ionic/labels/type:%20feature%20request","name":"type: feature request","color":"028199","default":false}],"state":"closed","locked":false,"assignee":{"login":"paulstelzer","id":20501666,"node_id":"MDQ6VXNlcjIwNTAxNjY2","avatar_url":"https://avatars2.githubusercontent.com/u/20501666?v=4","gravatar_id":"","url":"https://api.github.com/users/paulstelzer","html_url":"https://github.com/paulstelzer","followers_url":"https://api.github.com/users/paulstelzer/followers","following_url":"https://api.github.com/users/paulstelzer/following{/other_user}","gists_url":"https://api.github.com/users/paulstelzer/gists{/gist_id}","starred_url":"https://api.github.com/users/paulstelzer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulstelzer/subscriptions","organizations_url":"https://api.github.com/users/paulstelzer/orgs","repos_url":"https://api.github.com/users/paulstelzer/repos","events_url":"https://api.github.com/users/paulstelzer/events{/privacy}","received_events_url":"https://api.github.com/users/paulstelzer/received_events","type":"User","site_admin":false},"assignees":[{"login":"paulstelzer","id":20501666,"node_id":"MDQ6VXNlcjIwNTAxNjY2","avatar_url":"https://avatars2.githubusercontent.com/u/20501666?v=4","gravatar_id":"","url":"https://api.github.com/users/paulstelzer","html_url":"https://github.com/paulstelzer","followers_url":"https://api.github.com/users/paulstelzer/followers","following_url":"https://api.github.com/users/paulstelzer/following{/other_user}","gists_url":"https://api.github.com/users/paulstelzer/gists{/gist_id}","starred_url":"https://api.github.com/users/paulstelzer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulstelzer/subscriptions","organizations_url":"https://api.github.com/users/paulstelzer/orgs","repos_url":"https://api.github.com/users/paulstelzer/repos","events_url":"https://api.github.com/users/paulstelzer/events{/privacy}","received_events_url":"https://api.github.com/users/paulstelzer/received_events","type":"User","site_admin":false}],"milestone":null,"comments":1,"created_at":"2018-12-10T21:40:27Z","updated_at":"2018-12-11T12:30:38Z","closed_at":"2018-12-11T12:30:38Z","author_association":"NONE","body":"<!-- Please make sure you are posting an feature request pertaining to the Ionic Framework. -->\r\n\r\n<!-- Before submitting an issue, please consult our docs (https://beta.ionicframework.com/docs/) and API reference (https://beta.ionicframework.com/docs/api/) -->\r\n\r\n<!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Appflow services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Appflow support portal (https://ionic.zendesk.com/hc/en-us) -->\r\n\r\n<!-- Please do not submit support requests or \"How to\" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->\r\n\r\n<!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->\r\n\r\n# Feature Request\r\n\r\n**Ionic version:**\r\n<!-- (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) -->\r\n<!-- (For Ionic 2.x & 3.x issues, please use https://github.com/ionic-team/ionic-v3) -->\r\n[x] **4.x**\r\n\r\n**Describe the Feature Request**\r\nBeta 16 added the --color property to the toast component, and toast-wrapper was put into shadow dom meaning we can no longer style the toast content.\r\n\r\nI added CSS definitions that worked in beta 13 that added borders to toast-wrapper, which indicated success / error / info / warning / etc. After upgrading it's no longer possible to use these definitions.\r\n\r\n**Describe Preferred Solution**\r\nI would either like to see a --border property exposed to the toast-wrapper, or to have the toast's CSS property added to the .toast-wrapper like this post recommends @see https://github.com/ionic-team/ionic/issues/16253\r\n\r\n**Related Code**\r\nIonic related code:\r\n```\r\nthis.toast = await this.toastCtrl.create({\r\n      duration: 500000,\r\n      position: 'top',\r\n      message:  text,\r\n      // color:    color,\r\n      cssClass: color, // Currently useless as far as I can tell.\r\n    });\r\n```\r\n\r\nExample of the CSS definitions I'd like to continue to be able to use:\r\n```\r\nion-toast {\r\n  text-align: center;\r\n\r\n  &.info {\r\n    .toast-wrapper {\r\n      border: 2px solid var(--app-component-border);\r\n    }\r\n  }\r\n\r\n...\r\n}\r\n```\r\n**Additional Context**\r\n```\r\napp $ ionic info\r\n\r\nIonic:\r\n\r\n   ionic (Ionic CLI)             : 4.5.0 (/Users/developer/.npm-packages/lib/node_modules/ionic)\r\n   Ionic Framework               : @ionic/angular 4.0.0-beta.17\r\n   @angular-devkit/build-angular : 0.10.7\r\n   @angular-devkit/schematics    : 7.0.7\r\n   @angular/cli                  : 7.0.7\r\n   @ionic/angular-toolkit        : 1.2.0\r\n\r\nCordova:\r\n\r\n   cordova (Cordova CLI) : 8.0.0\r\n   Cordova Platforms     : android 7.0.0, ios 4.5.5\r\n   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 12 other plugins)\r\n\r\nSystem:\r\n\r\n   Android SDK Tools : 26.1.1 (/Users/developer/Library/Android/sdk)\r\n   ios-deploy        : 2.0.0\r\n   NodeJS            : v8.12.0 (/usr/local/Cellar/node@8/8.12.0/bin/node)\r\n   npm               : 6.4.1\r\n   OS                : macOS High Sierra\r\n   Xcode             : Xcode 9.4.1 Build version 9F2000\r\n```\r\n"}}
{"actor":{"display_login":"paulstelzer"}}