From f9b131242dcbef317939c068a1dd497ebe456645 Mon Sep 17 00:00:00 2001 From: "Menkhaus, Katherine" Date: Tue, 8 Mar 2016 10:51:34 -0800 Subject: [PATCH 1/2] Message truncates after 3 lines, able to expand --- .Gruntfile.js.swp | Bin 0 -> 16384 bytes History.md | 4 + README.md | 128 +++++++++++- bower.json | 6 +- css/px-alert-message-sketch.css | 217 +++++++++++++------- css/px-alert-message.css | 318 ++++++++++++++++-------------- demo.html | 31 +-- package.json | 52 ++--- px-alert-message.html | 151 +++++++++++--- sass/px-alert-message-predix.scss | 100 +++------- sass/px-alert-message-sketch.scss | 71 ++++++- test/fixture.html | 303 ++++++++++++++++++++++++++-- wct.conf.js | 14 ++ 13 files changed, 1006 insertions(+), 389 deletions(-) create mode 100644 .Gruntfile.js.swp create mode 100644 wct.conf.js diff --git a/.Gruntfile.js.swp b/.Gruntfile.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..fde6b72327d67e31861c18fade41aa169dd26618 GIT binary patch literal 16384 zcmeI2Piz%M9LEO~LqatPSkvX0tXfjImL}wnqi`Tv_v`Du&I4UukhE zjd5PvB?8B9ST?Ut$k}^RB}xIMKu&?cZ&dDCKGfISvzhYO-?2_xwQ?v|MSV~TC2Zf5Lja2|XD-T^NG0rr6{U_Dq382D*9W5>V-unH^!SC%n$8GH-Qfj7WO z@Dz9wJOpkBi@_BbeFW%8M#eq>uYxwHgCTG~SPd@YoWvL43^)Z&fak!ozy*(ijbJTU0sg#!u^+&@ z;52v{*x(@82eyN|z#oe-E^r2%0w=(6Fb$4?1E2;N_-qkluY)$&4c3B7_@d?__!7Jc zPJ*Lg612e%unw#Nw}J)WeSFDt42*(ppbzwd+raPekMF>z;4JtEoCL>#1IT|K2brYB zNw4#U5!k-IiKSVx$!)uT%$?*Sn{C?MaN>+{I_XgreB6>g7yAu)s7n_d6(rX;Y5Jq- zzr!qScVy$XPWzL5tS+oJTJPjd$fo5aR+P2wbBSV2-ydCv!&_@LZ6LB=^I=0Z>TEjG zS=3Zm2$Q=oTu*Y*=K7pqeWSbz%hNxb-FfcPbXvCNq10rc9c0uVVM~SfkQj}b>42dbslM3 z)_+m~-4F0Kw_T48`)GUUrcGMegc*VFdV)8ssob1NL&`b)A@!_em}7xu*TXI}r1H6o z47OdPzSnD!U&$^#%&T;Um>0LKZqDF%8p~QvJ+UGK&vS)8f75WFO3s7I+D$F?g*8^0 zG<>r;f6EwPSUp|}bC{iPK3bRaRu5P8{8ogMipE0U%dVv9Fo$N2QvOqU4&~bJ_=Bl$ z4hFs#`28BZpED}WCf6gkm;JHZXNze0qF`8$l!W7^%Xp*{x9E=8x3i6O{3e?_oxgA9 za8lO@J2sobZE<~sWzDi()3CFRQemNC%90*8cj8oB*b>FDS~q3kkX)g`5(!c>vi%hL zm}$I=pwzGF_ifk?MWTQg$0=>Yj!x7i<4XEWZlNw2)uA+RpEIqX+iZ&Sh%rWemT9L- zi2PiLz>8fYKQ&aL#7N4fM8^$7VY{Qi3+Lz#mCd(8L3sl8qL>=pI%80j{T~e@b@3>u zYI-h&jpPSIcBbQ|8*1I%weG4k5swR1sWdz4a0Ol6#76N*m~bcvOOI(`&g(;DV!;&3 z(kEhD;rom-vPs{CM_h7#G_&)dIyiNT0Kk&!ksVhz4%2P53{{L}JterGgjH*>d5BP89!}^Bzr$hcg^4<54VY&vodydNKCF324(m%ODeq!tGM( zWYO-;ax5R)6m0Ih(oOdx!kyrzuVMdy{6HAAJ*hIXxNV5ch_&sS;D-ZC@GjlKCb~i+ ztVD`bu=feyH5m5f0S?AvnbGKQPqNY1x +``` + +Finally, use the component in your application: + +``` + + +``` + +
+
+ +## Attributes + +#### type + +*Type:* **String** - (*Optional*) - *Default:* "information" + +Type defines the alert level; this is reflected in the icon. +``` +'important' - red triangle labeled 1 +'warning'- orange diamond labeled 2 +'error' - yellow square labeled 3 +'information' - blue circle labeled 4 +'custom' - allows a developer to specify HTML incluing images in place of the icon. +'more' - allows for a message that shows that there are more messages. +``` +``` + + +``` +#### message-title + +*Type:* **String** - (*Optional*) - *Default:* "" + +The title that is displayed bold in the message area of the alert box. + +``` + + +``` + +#### message + +*Type:* **String** - (*Optional*) - *Default:* "" + +The message body that is displayed after the message-title in the message area of the alert box. + +``` + + +``` + +#### action + +*Type:* **String** - (*Optional*) - *Default:* null + +User interaction on the right hand side of the message box. +``` +'dismiss' - displays the (x) control to dismiss +'acknowledge' - displays the (OK) button to dismiss +'URL' - string containing http url to be opened, displays the (Open) button. +``` +``` + + +``` + +#### auto-dismiss + +*Type:* **Number** - (*Optional*) - *Default:* null + +A delay in milliseconds before an alert message is dismissed automatically. + +``` + + +``` + + +
+
+ + +## Local Development From the component's directory... @@ -23,7 +143,7 @@ From the component's directory $ grunt depserve ``` -Starts a local server. Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples. +Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples. ### LiveReload @@ -31,6 +151,8 @@ By default grunt depserve is configured to enable LiveReload and will be watchin Your browser will also need to have the LiveReload extension installed and enabled. For instructions on how to do this please refer to [livereload.com/extensions/](http://livereload.com/extensions/). +Disable LiveReload by removing the livereload key from the configuration object or explicitly setting it to false. + Add, remove, modify file system patterns specified in the `depserve.options.livereload` array in your `Gruntfile.js` This is an example depserve configuration: diff --git a/bower.json b/bower.json index b3a5d4a0..96074be0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "px-alert-message", - "version": "0.2.0", + "version": "0.3.0", "main": [ "px-alert-message.html" ], @@ -17,7 +17,9 @@ "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.3", "polymer": "~1.2.3", "px-theme": "https://github.com/PredixDev/px-theme.git#~0.4.0", - "web-component-tester": "~3.3.17" + "web-component-tester": "~3.3.17", + "px-buttons-design": "https://github.com/PredixDev/px-buttons-design.git#^0.4.18", + "px-actionable-text-icons": "https://github.com/PredixDev/px-actionable-text-icons.git#^0.0.1" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#~v1.1.0", diff --git a/css/px-alert-message-sketch.css b/css/px-alert-message-sketch.css index e7bbf762..8f007c68 100644 --- a/css/px-alert-message-sketch.css +++ b/css/px-alert-message-sketch.css @@ -183,9 +183,7 @@ html { /*! Comment to prevent cssmin munging this rule with html above and borking Safari */ box-sizing: border-box; } -*, -*:before, -*:after { +*, *:before, *:after { box-sizing: inherit; } /** @@ -248,15 +246,13 @@ a { /** * Improve readability when focused and also mouse hovered in all browsers. */ } - a:link, - a:visited { + a:link, a:visited { color: #3e87e8; } a:hover { color: #3573c5; } a:active { color: #2b5ea2; } - a:active, - a:hover { + a:active, a:hover { outline: 0; } /** @@ -339,9 +335,9 @@ a { padding: 0 !important; clip: rect(0 0 0 0) !important; } -.a11y.focusable:active, -.a11y.focusable:focus, -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { +.a11y.focusable:active, .a11y.focusable:focus, +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { position: static; overflow: visible; width: auto; @@ -581,8 +577,6 @@ a { .viewport--full-height { min-height: 100vh; } -/*------------------------------------* #PX-META-BUTTONS-DESIGN -\*------------------------------------*/ .btn { display: inline-block; overflow: visible; @@ -601,11 +595,7 @@ a { text-transform: none; white-space: nowrap; background-color: #e4e4ea; } - .btn, - .btn:link, - .btn:visited, - .btn:hover, - .btn:active { + .btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: black; } .btn:hover { border-color: #9999a3; @@ -618,6 +608,13 @@ a { .btn:active { outline: none; } +/** Workaround for FF since it does not support calc(). + * Other buttons appear ok with the height declaration, but non-button elements do not. +**/ +@-moz-document url-prefix() { + .btn:not(button) { + line-height: 1.8em; } } + button.btn { -webkit-appearance: button; } @@ -627,63 +624,151 @@ button.btn { .btn + .btn { margin-left: 0.6666666667rem; } -.btn-group { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .btn-group input { - position: absolute !important; - overflow: hidden !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; } - .btn-group .btn { - border-radius: 0; - -webkit-appearance: inherit; } - .btn-group .btn:first-of-type { - border-radius: 3px 0 0 3px; } - .btn-group .btn:last-of-type { - border-radius: 0 3px 3px 0; } - .btn-group .btn + .btn { - margin-left: 0; } - .btn-group :checked + .btn { - border-color: #086e87; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); - color: white; - background: #0a9ec1; } - .btn-group :checked + .btn:hover, - .btn-group :checked + .btn:focus { - border-color: transparent; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); - color: white; - background: #0986a4; } - .btn-group :checked + .btn:active { - border-color: transparent; - box-shadow: none; - color: white; - background: #086e87; } +/** + * Buttons with no styles (good a11y practice to use