From c06425e16556dac0f8d38cd6bb770e4da576711b Mon Sep 17 00:00:00 2001 From: Paul C Pederson Date: Fri, 17 Apr 2015 08:45:08 -0700 Subject: [PATCH 01/10] tooltips use aria-label --- docs/source/components/_tooltips.md | 2 +- docs/source/components/sample-code/_tooltips.html | 4 ++-- lib/sass/calcite-web/components/_tooltip.scss | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/source/components/_tooltips.md b/docs/source/components/_tooltips.md index d35cf5ff3..8c84e8107 100644 --- a/docs/source/components/_tooltips.md +++ b/docs/source/components/_tooltips.md @@ -1,3 +1,3 @@ ## Tooltips -Tooltips use a `data-message` attribute to provide contextual help on hover. Tooltips can apply to any element. \ No newline at end of file +Tooltips use an `aria-label` attribute to provide contextual help on hover. Tooltips can apply to any element. diff --git a/docs/source/components/sample-code/_tooltips.html b/docs/source/components/sample-code/_tooltips.html index 5ce9feeb7..7025beeea 100644 --- a/docs/source/components/sample-code/_tooltips.html +++ b/docs/source/components/sample-code/_tooltips.html @@ -1,3 +1,3 @@ -
+
? -
\ No newline at end of file +
diff --git a/lib/sass/calcite-web/components/_tooltip.scss b/lib/sass/calcite-web/components/_tooltip.scss index e53921b16..514e4055f 100644 --- a/lib/sass/calcite-web/components/_tooltip.scss +++ b/lib/sass/calcite-web/components/_tooltip.scss @@ -11,7 +11,7 @@ } .tooltip:before { - content: attr(data-message); + content: attr(aria-label); position: absolute; top: $baseline; left: -6em; @@ -45,4 +45,4 @@ opacity: 1; } -} \ No newline at end of file +} From 37ab895437d92fd0c28add8db5171d611fad460f Mon Sep 17 00:00:00 2001 From: Paul C Pederson Date: Fri, 17 Apr 2015 10:57:47 -0700 Subject: [PATCH 02/10] multi-line-toooltips, restyle tooltips --- CHANGELOG.md | 7 + .../components/sample-code/_tooltips.html | 10 +- docs/source/table_of_contents.yml | 1 + lib/sass/calcite-web/components/_tooltip.scss | 171 +++++++++++++++--- 4 files changed, 161 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 628cdd0d7..9cf0d6581 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 0.2.1 + +### Changed +- tooltips use `aria-label` for tooltip text +- Modify tooltip styles +- Multi-line tooltips + ## 0.1.2 ### Added diff --git a/docs/source/components/sample-code/_tooltips.html b/docs/source/components/sample-code/_tooltips.html index 7025beeea..7eed13b10 100644 --- a/docs/source/components/sample-code/_tooltips.html +++ b/docs/source/components/sample-code/_tooltips.html @@ -1,3 +1,7 @@ -
- ? -
+

+ Tooltips can be single line: single line tooltip +

+

+ Tooltips can also have more than one line. Just use the tooltip-multiline class: + multiline tooltip +

diff --git a/docs/source/table_of_contents.yml b/docs/source/table_of_contents.yml index 2c551d1ee..cdccc003a 100644 --- a/docs/source/table_of_contents.yml +++ b/docs/source/table_of_contents.yml @@ -407,6 +407,7 @@ components: modifiers: - tooltip-left - tooltip-right + - tooltip-top - title: 'Tables' id: '21d0b59b-bb08-4aac-a486-880891246ba2' link: tables diff --git a/lib/sass/calcite-web/components/_tooltip.scss b/lib/sass/calcite-web/components/_tooltip.scss index 514e4055f..f52c35fb7 100644 --- a/lib/sass/calcite-web/components/_tooltip.scss +++ b/lib/sass/calcite-web/components/_tooltip.scss @@ -4,45 +4,166 @@ // ↳ http://esri.github.io/calcite-web/components/#tooltips // ↳ components → _tooltips.md @if $include-tooltip { + $multiline-max-width: 250px; .tooltip { position: relative; - display: inline-block; + cursor: pointer; + &:after { + content: attr(aria-label); + position: absolute; + z-index: 1000000; + display: none; + padding: $baseline/4 $baseline/2; + @include font-size(-2); + color: $white; + text-align: center; + word-wrap: break-word; + white-space: pre; + pointer-events: none; + background: $transparent-black; + border-radius: 3px; + } } .tooltip:before { - content: attr(aria-label); + content: ""; position: absolute; - top: $baseline; - left: -6em; - width: 12em; - padding: $baseline/4 $baseline/2; - display: block; - @include font-size(-1); - @extend .avenir-regular; - text-align: center; - background-color: $transparent-black; - color: $off-white; + z-index: 1000001; + display: none; + width: 0; + height: 0; + color: $transparent-black; pointer-events: none; - opacity: 0; - z-index: 4; - @include transition(all, $transition); - @include transform(translate3d(0, 4px, 0)); + border: 5px solid transparent; } - .tooltip-left:before { - left: 0; + .tooltip { + &:hover, &:active, &:focus { + &:before, + &:after { + display: inline-block; + text-decoration: none; + } + } + } + + .tooltip-multiline { + &:hover, &:active, &:focus { + &:after { + display: table-cell; + } + } + } + + // Default is bottom + .tooltip { + &:after { + top: 100%; + right: 50%; + margin-top: 5px; + } + + &:before { + top: auto; + right: 50%; + bottom: -5px; + margin-right: -5px; + border-bottom-color: $transparent-black; + } } - .tooltip-right:before { - left: auto; - right: 0; + .tooltip-top { + &:after { + top: auto; + right: 50%; + bottom: 100%; + margin-bottom: 5px; + } + + &:before { + top: -5px; + right: 50%; + bottom: auto; + margin-right: -5px; + border-top-color: $transparent-black; + border-bottom: 5px solid transparent; + } } - .tooltip:hover:before { - @include transition(all, $transition); - @include transform(translate3d(0, 0, 0)); - opacity: 1; + .tooltip:after, + .tooltip-bottom:after { + transform: translateX(50%); } + .tooltip-left { + &:after { + top: auto; + right: 100%; + bottom: 50%; + margin-right: 5px; + margin-bottom: inherit; + transform: translateY(50%); + } + + &:before { + top: 50%; + bottom: 50%; + left: -5px; + margin-top: -5px; + border-left-color: $transparent-black; + border-bottom: 5px solid transparent; + } + } + + .tooltip-right { + &:after { + top: auto; + right: auto; + bottom: 50%; + left: 100%; + margin-left: 5px; + transform: translateY(50%); + } + + &:before { + top: 50%; + right: -5px; + bottom: 50%; + margin-top: -5px; + margin-right: 0; + border-right-color: $transparent-black; + border-bottom: 5px solid transparent; + } + } + + .tooltip-multiline { + &:after { + width: -moz-max-content; + width: -webkit-max-content; + max-width: $multiline-max-width; + word-break: break-word; + word-wrap: normal; + white-space: pre-line; + border-collapse: separate; + } + + &.tooltip-bottom:after, + &.tooltip-top:after { + right: auto; + left: 50%; + transform: translateX(-50%); + } + + &.tooltip-left:after, + &.tooltip-right:after { + right: 100%; + } + } + + @media screen and (min-width:0\0) { + .tooltip-multiline:after { + width: $multiline-max-width; + } + } } From f42733a5933198ccbffc2671b5c51f4013ba8f90 Mon Sep 17 00:00:00 2001 From: Paul C Pederson Date: Fri, 17 Apr 2015 10:58:14 -0700 Subject: [PATCH 03/10] broadcast http-server on 0.0.0.0 for device testing --- Gruntfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index 44382b769..d135ba93c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -23,7 +23,7 @@ module.exports = function(grunt) { 'dev': { root: 'docs/build', port: 8888, - host: 'local.arcgis.com', + host: '0.0.0.0', cache: 0, showDir : true, autoIndex: true, From 3a344d6cf3addaaac779d060b4b00fc708e14216 Mon Sep 17 00:00:00 2001 From: Paul C Pederson Date: Fri, 17 Apr 2015 11:00:00 -0700 Subject: [PATCH 04/10] scaffold out simple icon --- lib/sass/calcite-web.scss | 2 +- lib/sass/calcite-web/icons/_config.scss | 14 -------------- lib/sass/calcite-web/icons/_icons.scss | 8 +++----- 3 files changed, 4 insertions(+), 20 deletions(-) delete mode 100644 lib/sass/calcite-web/icons/_config.scss diff --git a/lib/sass/calcite-web.scss b/lib/sass/calcite-web.scss index 14749ea9f..ac25cd297 100644 --- a/lib/sass/calcite-web.scss +++ b/lib/sass/calcite-web.scss @@ -84,7 +84,7 @@ $include-sticky: true !default; // Icons // Multiple sets of icons, full color, monochrome -// @import "calcite-web/icons/icons"; +@import "calcite-web/icons/icons"; // Components // small pieces: buttons, icons, tables... diff --git a/lib/sass/calcite-web/icons/_config.scss b/lib/sass/calcite-web/icons/_config.scss deleted file mode 100644 index a7d9933c6..000000000 --- a/lib/sass/calcite-web/icons/_config.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Icon Preferences -$icon-class-prefix: 'icon-' !default; // prefix to all icon classes -$icon-size: 1rem !default; // set to 1em so that the icon can sit along side text -$small-icon-size: 1rem !default; // .small icon size -$medium-icon-size: 2rem !default; // .medium icon size -$large-icon-size: 4rem !default; // .large icon size - -// Customize Icon Sets -$include-vecticons: true !default; // one-color interface icons -$include-calcite: true !default; // use the entire calcite icon set -$include-calcite-large: true !default; // add the large versions of the calcite icons - -// Legacy support -$ie8-support: false !default; //support for ie8 \ No newline at end of file diff --git a/lib/sass/calcite-web/icons/_icons.scss b/lib/sass/calcite-web/icons/_icons.scss index b069e2c0c..1e18555a4 100644 --- a/lib/sass/calcite-web/icons/_icons.scss +++ b/lib/sass/calcite-web/icons/_icons.scss @@ -18,13 +18,11 @@ background-size: 100% 100%; } } - - // Pass a file glob and iterate over it. - @each $filename in listFiles("lib/img/icons/calcite-large/*.svg") { - .icon-#{$filename}:before { background-image: url('../img/icons/calcite-large/#{$filename}.svg'); } + .icon-close { + content: "×" } } @if $include-icons == true { @include icons(); -} \ No newline at end of file +} From e0d293141c560a901ef9fb22d6fbcb3740f8d85d Mon Sep 17 00:00:00 2001 From: Paul C Pederson Date: Fri, 17 Apr 2015 12:08:12 -0700 Subject: [PATCH 05/10] change doc for required fields --- CHANGELOG.md | 3 +++ docs/source/components/_form-overview.md | 7 +++++- .../sample-code/_form-overview.html | 22 +++++++++---------- lib/sass/calcite-web/components/_form.scss | 13 +---------- 4 files changed, 21 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9cf0d6581..2a1b8e273 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,9 @@ - Modify tooltip styles - Multi-line tooltips +### Removed +- `label.required` + ## 0.1.2 ### Added diff --git a/docs/source/components/_form-overview.md b/docs/source/components/_form-overview.md index 4f3e7e28a..907ebdae5 100644 --- a/docs/source/components/_form-overview.md +++ b/docs/source/components/_form-overview.md @@ -2,4 +2,9 @@ The forms section provides basic styling of form elements in addition to a basic reset. -Labels for form elements should describe what the field is, while placeholder text should describe the specifics about formatting or examples for the input text. +Labels for form elements should describe what the field is, while placeholder text should describe the specifics about formatting or examples for the input text. Labels should **not** be followed by a semicolon. + +Required form fields should be labeled with two things: + +1. The `