Merge pull request #2051 from sparkdesignsystem/staging

Publish Oct 4th, 2019
sparkdesignsystem · Oct 4, 2019 · 9dbac28 · 9dbac28
2 parents 3100896 + f807d49
commit 9dbac28
Show file tree

Hide file tree

Showing 133 changed files with 7,849 additions and 5,497 deletions.
diff --git a/packages/spark/_spark-angular.scss b/packages/spark/_spark-angular.scss
@@ -6,3 +6,10 @@
 }
 
 /* stylelint-enable selector-class-pattern */
+sprk-masthead {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  display: block;
+  z-index: $sprk-layer-height-m;
+}
diff --git a/packages/spark/base/hugeInput.js b/packages/spark/base/hugeInput.js
@@ -0,0 +1,46 @@
+import getElements from '../utilities/getElements';
+import toggleClassWithValue from '../utilities/toggleClassWithValue';
+import addClassIfNotEmpty from '../utilities/addClassIfNotEmpty';
+
+/*
+ * TODO: Deprecate the code below
+ * that adds the class of `sprk-b-TextInput--float-label`
+ * in favor of the more universal `sprk-b-Input--has-floating-label`.
+ */
+const bindUIEvents = element => {
+  toggleClassWithValue(element, 'sprk-b-TextInput--float-label', 'input');
+};
+
+const bindUIEventsHugeInput = element => {
+  if (element.tagName === 'SELECT') {
+    toggleClassWithValue(element, 'sprk-b-Input--has-floating-label', 'change');
+  } else {
+    toggleClassWithValue(element, 'sprk-b-Input--has-floating-label', 'input');
+  }
+};
+
+const hugeInput = () => {
+  const oldSelector = '[data-sprk-input="hugeTextInput"]';
+  const oldClassName = 'sprk-b-TextInput--float-label';
+  const newSelector = '[data-sprk-input="huge"]';
+  const newClassName = 'sprk-b-Input--has-floating-label';
+
+  window.addEventListener('load', () => {
+    getElements(oldSelector, element => {
+      addClassIfNotEmpty(element, oldClassName);
+    });
+    getElements(newSelector, element => {
+      addClassIfNotEmpty(element, newClassName);
+    });
+  });
+  /*
+   * TODO: Deprecate the code below
+   * that gets elements with the oldSelector
+   * in favor of the more universal newSelector.
+   */
+  getElements(oldSelector, bindUIEvents);
+
+  getElements(newSelector, bindUIEventsHugeInput);
+};
+
+export { hugeInput, bindUIEventsHugeInput, bindUIEvents };
diff --git a/packages/spark/base/hugeTextInput.js b/packages/spark/base/hugeTextInput.js
diff --git a/packages/spark/base/inputs/_input-container.scss b/packages/spark/base/inputs/_input-container.scss
@@ -11,3 +11,318 @@
 .sprk-b-InputContainer__visibility-toggle {
   margin: $sprk-visibility-control-margin;
 }
+
+// Applies to any huge input
+.sprk-b-InputContainer--huge .sprk-b-TextInput,
+.sprk-b-InputContainer--huge .sprk-b-Select {
+  position: relative;
+  transition: $sprk-input-huge-transition;
+  transition-delay: $sprk-input-huge-transition-delay;
+  height: $sprk-input-huge-height;
+  border-width: $sprk-input-huge-border-width;
+  border-radius: $sprk-text-input-border-radius;
+  font-size: $sprk-input-huge-font-size;
+  padding: $sprk-input-huge-padding;
+  box-shadow: $sprk-input-huge-box-shadow;
+}
+
+// Adjust for select open icon
+.sprk-b-InputContainer--huge .sprk-b-Select {
+  padding-right: $sprk-select-input-huge-padding-right;
+}
+
+.sprk-b-InputContainer--huge .sprk-b-TextInput:focus,
+.sprk-b-InputContainer--huge .sprk-b-Select:focus {
+  border-width: $sprk-input-huge-focus-border-width;
+}
+
+/*
+* TODO as part of deprecate task:
+* delete this selector `.sprk-b-TextInput--float-label`
+*/
+
+.sprk-b-InputContainer--huge .sprk-b-TextInput::placeholder,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInput.sprk-b-TextInput--float-label::placeholder,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInput.sprk-b-Input--has-floating-label::placeholder,
+.sprk-b-InputContainer--huge .sprk-b-Select.sprk-b-Input--has-floating-label {
+  font-size: $sprk-input-huge-font-size;
+}
+
+.sprk-b-InputContainer--huge .sprk-b-TextInput:-ms-input-placeholder,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInput.sprk-b-TextInput--float-label:-ms-input-placeholder,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInput.sprk-b-Input--has-floating-label:-ms-input-placeholder {
+  font-size: $sprk-input-huge-font-size;
+}
+
+// Applies when input is first direct child of the container div
+// to create floating label effect
+// Label element must follow the input element
+
+// Huge styles for Monetary Input
+.sprk-b-InputContainer--huge .sprk-b-TextInputIconContainer .sprk-b-TextInput {
+  padding: $sprk-text-input-has-icon-padding;
+}
+
+// Takes in account the height of the select to position select icon
+.sprk-b-InputContainer--huge .sprk-b-SelectContainer__icon {
+  margin-top: $sprk-select-input-huge-icon-margin-top;
+}
+
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+:first-child.sprk-b-TextInput {
+  padding: $sprk-text-input-huge-has-text-icon-padding;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:focus,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:focus,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--float-label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--float-label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-Input--has-floating-label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-Input--has-floating-label {
+  opacity: $sprk-input-huge-placeholder-active-opacity;
+  padding-top: $sprk-input-huge-active-padding-top;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:focus::placeholder,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:focus::placeholder,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--float-label::placeholder,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--float-label::placeholder,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-Input--has-floating-label::placeholder,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-Input--has-floating-label::placeholder,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden::placeholder {
+  opacity: $sprk-input-huge-placeholder-active-opacity;
+  transition-delay: $sprk-input-huge-placeholder-transition-delay;
+  transition-property: $sprk-input-huge-placeholder-transition-property;
+}
+
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput::placeholder,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput::placeholder {
+  opacity: $sprk-input-huge-placeholder-opacity;
+}
+
+// IE11 Override
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:-ms-input-placeholder,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:-ms-input-placeholder {
+  color: transparent;
+  opacity: $sprk-input-huge-placeholder-active-opacity;
+  transition: color 0s;
+}
+// IE11 Override
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden:-ms-input-placeholder {
+  opacity: $sprk-input-huge-placeholder-active-opacity;
+  color: $sprk-placeholder-color;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden:focus,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden.sprk-b-TextInput.sprk-b-TextInput--float-label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden.sprk-b-TextInput.sprk-b-Input--has-floating-label {
+  padding: $sprk-input-huge-padding;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden + .sprk-b-Label {
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+// Edge does not support :placeholder-shown
+// This has to be separated from the rest of the CSS
+// for the rest of it to work in Edge
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden:not(:placeholder-shown) {
+  padding: $sprk-input-huge-padding;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--label-hidden:not(:placeholder-shown) + .sprk-b-Label {
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:disabled,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--float-label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-Input--has-floating-label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select:disabled,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select.sprk-b-Input--has-floating-label {
+  padding-top: $sprk-input-huge-active-padding-top;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:disabled {
+  color: transparent;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:disabled.sprk-b-TextInput--label-hidden {
+  color: $sprk-text-input-disabled-color;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:not(:placeholder-shown) {
+  padding-top: $sprk-input-huge-active-padding-top;
+}
+
+// Huge styles for text inputs with icon
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Label + .sprk-b-TextInputIconContainer
+.sprk-b-TextInput::placeholder {
+  opacity: $sprk-input-huge-placeholder-active-opacity;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Label + .sprk-b-TextInputIconContainer
+.sprk-b-TextInput:focus,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--label-hidden:focus {
+  padding: $sprk-text-input-has-icon-padding;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Label + .sprk-b-TextInputIconContainer
+.sprk-b-TextInput:not(:placeholder-shown),
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--label-hidden:not(:placeholder-shown) {
+  padding: $sprk-text-input-has-icon-padding;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput + .sprk-b-Label {
+  position: absolute;
+  top: $sprk-input-huge-label-top;
+  font-size: $sprk-input-huge-font-size;
+  padding: $sprk-input-huge-label-padding;
+  transition: $sprk-input-huge-transition;
+  transform: translateZ(0);
+  pointer-events: none;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:focus + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select:focus + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:focus + .sprk-b-Label {
+  font-size: $sprk-input-huge-label-font-size;
+  top: $sprk-input-huge-label-active-top;
+  color: $sprk-input-huge-focus-label-color;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--float-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-Input--has-floating-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select.sprk-b-Input--has-floating-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--float-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-Input--has-floating-label + .sprk-b-Label {
+  font-size: $sprk-input-huge-label-font-size;
+  top: $sprk-input-huge-label-active-top;
+  color: $sprk-input-huge-complete-label-color;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:not(:placeholder-shown) + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:not(:placeholder-shown) + .sprk-b-Label {
+  font-size: $sprk-input-huge-label-font-size;
+  top: $sprk-input-huge-label-active-top;
+  color: $sprk-input-huge-focus-label-color;
+}
+
+/* stylelint-disable */
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:not(:placeholder-shown) + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:not(:placeholder-shown) + .sprk-b-Label {
+  color: $sprk-input-huge-complete-label-color;
+}
+
+/* stylelint-enable */
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--error:focus + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--error:focus + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--error.sprk-b-TextInput--float-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--error.sprk-b-TextInput--float-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--error.sprk-b-Input--has-floating-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--error.sprk-b-Input--has-floating-label + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select.sprk-b-Select--error:focus + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select.sprk-b-Select--error.sprk-b-Input--has-floating-label + .sprk-b-Label {
+  color: $sprk-input-huge-error-focus-label-color;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput.sprk-b-TextInput--error:not(:placeholder-shown) + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select.sprk-b-Select--error + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput.sprk-b-TextInput--error:not(:placeholder-shown) + .sprk-b-Label {
+  color: $sprk-input-huge-error-focus-label-color;
+}
+
+// Huge monetary inputs overrides
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon > :first-child.sprk-b-TextInput + .sprk-b-Label {
+  padding: $sprk-text-input-huge-has-text-icon-padding;
+}
+
+// Huge text input with svg icon overwrites
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:focus + .sprk-b-Label {
+  padding: $sprk-text-input-huge-has-text-icon-padding;
+}
+
+.sprk-b-InputContainer--huge > :first-child.sprk-b-TextInput:disabled + .sprk-b-Label,
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon
+.sprk-b-TextInputIconContainer
+.sprk-b-TextInput:disabled + .sprk-b-Label,
+.sprk-b-InputContainer--huge > :first-child.sprk-b-Select:disabled + .sprk-b-Label {
+  top: $sprk-input-huge-label-top;
+  font-size: $sprk-input-huge-font-size;
+  color: $sprk-text-input-disabled-color;
+  cursor: not-allowed;
+}
+
+.sprk-b-InputContainer--huge
+.sprk-b-TextInputIconContainer--has-text-icon::before {
+  top: $sprk-input-huge-icon-offset-top;
+  font-size: $sprk-input-huge-font-size;
+}