RSP-631 InputGroup: Datepicker range adjust dash based on text width

Use div with class name rather than hr for styling dash.
adobe · Dec 18, 2018 · 1eb6e42 · 1eb6e42
1 parent c167d4d
commit 1eb6e42
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 13 deletions.
diff --git a/docs/inputgroup/datepicker-range-quiet.yml b/docs/inputgroup/datepicker-range-quiet.yml
@@ -3,7 +3,7 @@ description: A date picker uses the input group component to display a field wit
 markup: |
  <div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
- <hr />
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet" tabindex="-1">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
@@ -15,7 +15,7 @@ markup: |
 
  <div aria-invalid="true" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" aria-invalid="true" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
- <hr />
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field is-invalid" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
@@ -27,7 +27,7 @@ markup: |
 
  <div aria-disabled="true" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="start" value="2018-10-01" disabled>
- <hr />
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="end" value="2018-10-30" disabled>
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
@@ -38,7 +38,7 @@ markup: |
 
  <div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range spectrum-Datepicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
- <hr />
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet" tabindex="-1" aria-expanded="false" aria-haspopup="dialog">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>

diff --git a/docs/inputgroup/datepicker-range.yml b/docs/inputgroup/datepicker-range.yml
@@ -3,7 +3,7 @@ description: A date picker uses the input group component to display a field wit
 markup: |
  <div aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="start" value="">
- <hr>
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="end" value="">
  <button type="button" class="spectrum-FieldButton" tabindex="-1" aria-expanded="false" aria-haspopup="dialog">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
@@ -15,7 +15,7 @@ markup: |
 
  <div aria-invalid="true" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range is-invalid" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" aria-invalid="true" placeholder="mm/dd/yyyy" name="start" value="">
- <hr>
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field is-invalid" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="">
  <button type="button" class="spectrum-FieldButton is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
@@ -27,7 +27,7 @@ markup: |
 
  <div aria-disabled="true" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range is-disabled" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="start" value="" disabled>
- <hr>
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" placeholder="mm/dd/yyyy" name="end" value="" disabled>
  <button type="button" class="spectrum-FieldButton" disabled tabindex="-1">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
@@ -37,9 +37,9 @@ markup: |
 
  <p/>
 
- <div class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range  spectrum-Datepicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
+ <div class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range spectrum-Datepicker--datetimeRange" role="combobox" aria-expanded="false" aria-haspopup="dialog">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" placeholder="mm/dd/yyyy hh:mm a" name="start" value="">
- <hr>
+ <div class="spectrum-Datepicker--range-dash"></div>
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  <button type="button" class="spectrum-FieldButton" tabindex="-1" aria-expanded="false" aria-haspopup="dialog">
  <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>

diff --git a/src/inputgroup/index.css b/src/inputgroup/index.css
@@ -26,6 +26,7 @@
  --spectrum-combobox-quiet-fieldbutton-padding-right: 0;
  --spectrum-datepicker-input-width: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-padding));
  --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-input-width) + var(--spectrum-global-dimension-size-700) - 0.5em);
+ --spectrum-datepicker-range-dash-margin-left: -0.5em;
 }
 
 .spectrum-InputGroup {
@@ -111,16 +112,14 @@
  }
  }
  /* Em dash */
- hr {
- border: 0;
+ .spectrum-Datepicker--range-dash {
  margin: var(--spectrum-global-dimension-size-50) 0;
  width: 0;
- overflow: visible;
  position: relative;
  z-index: 1;
  &:before {
  content: '—';
- margin-left: -0.5em;
+ margin-left: var(--spectrum-datepicker-range-dash-margin-left);
  }
  }
  /* Focus ring */
@@ -142,5 +141,10 @@
  top: auto;
  }
  }
+ .spectrum-Datepicker--range-dash {
+ &:before {
+ margin-left: var(--spectrum-datepicker-range-dash-margin-left);
+ }
+ }
  }
 }
diff --git a/topdoc/resources/js/docs.js b/topdoc/resources/js/docs.js
@@ -460,11 +460,67 @@ function makeDial(dial) {
  }
 }
 
+function getTextWidth(text, font) {
+ var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
+ var context = canvas.getContext('2d');
+ if (context) {
+ context.font = font || '14px adobe-clean, Helvetica, Arial, sans-serif';
+ var metrics = context.measureText(text);
+ return metrics.width;
+ }
+ return 0;
+}
+
+function getFontShorthand(element) {
+ if (!element) {
+ element = document.body;
+ }
+ var prop = ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'];
+ var props = [];
+ var computedStyle = window.getComputedStyle(element, null);
+ for (var x in prop) {
+ props.push(computedStyle.getPropertyValue(prop[x]));
+ }
+ return props.join(' ');
+}
+
+function makeRangeDatepicker(rangedatepicker) {
+ var startInput = rangedatepicker.querySelector('.spectrum-InputGroup-field');
+
+ function updateDashMarginStyle(event) {
+ var textfieldNode = event.target;
+ var dash = textfieldNode.nextElementSibling;
+ var isQuiet = textfieldNode.classList.contains('spectrum-TextField--quiet');
+ var font = getFontShorthand(textfieldNode);
+ var text = textfieldNode.value.trim();
+ if (!text.length) {
+ text = textfieldNode.getAttribute('placeholder').trim();
+ }
+ var textWidth = getTextWidth(text, font);
+ var computedStyle = window.getComputedStyle(textfieldNode, null);
+ var paddingLeft = parseFloat(computedStyle.paddingLeft);
+ var fieldWidth = parseFloat(computedStyle.width) - paddingLeft;
+ var emWidth = parseFloat(computedStyle.fontSize) / 2;
+ var offsetPadding = isQuiet ? parseInt(computedStyle.paddingRight) : paddingLeft;
+ var offset = Math.max(emWidth * 2, fieldWidth - textWidth - emWidth + offsetPadding) / 2;
+ dash.style.marginLeft = emWidth - offset + 'px';
+ dash.style.marginRight = offset - emWidth + 'px';
+ }
+
+ startInput.addEventListener('input', updateDashMarginStyle);
+ setTimeout(function() {
+ updateDashMarginStyle({target: startInput});
+ }, 2000);
+}
+
 window.addEventListener('DOMContentLoaded', function() {
  Array.prototype.forEach.call(document.querySelectorAll('.spectrum-Slider'), function(slider) {
  makeSlider(slider);
  });
  Array.prototype.forEach.call(document.querySelectorAll('.spectrum-Dial'), function(dial) {
  makeDial(dial);
  });
+ Array.prototype.forEach.call(document.querySelectorAll('.spectrum-Datepicker--range'), function(rangedatepicker) {
+ makeRangeDatepicker(rangedatepicker);
+ });
 });