carbon-addons-iot-react 2.151.0-next.2 → 2.151.0-next.3

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.151.0-next.3](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.151.0-next.2...v2.151.0-next.3) (2022-08-03)
+
+
+### Bug Fixes
+
+* **listspinner:** check for window before calling methods ([a742335](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a742335a7928e57adc866acf2568d803981b2fab))
+* **listspinner:** test ([f07ec6e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f07ec6e12e997da9ba1c18db0af12bde55d48521))
+* **timepicker:** add exceptions to jest ([41ce295](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/41ce29581243f3fa93a8cabbc7378038c522abb3))
+* **timepicker:** fix issues with keyboard nav ([ecef4e9](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/ecef4e97eb1079d9b077921f76df0e1fe0f670b0))
+* **timepicker:** fix long label issue ([87c3376](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/87c3376adccb2c8c0a301e4f909103297d79d5c6))
+* **timepicker:** refactor code that was causing warnings ([3cd711a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/3cd711a575e3e9c4a173f0f90f7b33ec7789f4bb))
+* **timepicker:** remove unused variables ([19de1d1](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/19de1d159d227901eb5e9f0880cf1cd5d3dc0550))
+
+
+### Features
+
+* **listspinner:** add keyboard a11y for up/down btns ([d4732e2](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d4732e278f3c6ef8c4a78fd0f892edb78942fb21))
+* **listspinner:** create listspinner first pass ([835a7b2](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/835a7b27dcd9793b62f37468b9480b1757784abd))
+* **listspinner:** swap requestAnimation frame with setTimeout ([d5bce01](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d5bce01a50c84c6f1300d7966f5925829f0fb391))
+* **timepicker:** add awareness to dropdown positioning ([c567a4a](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c567a4ad5796c0bfb18a0beafcb1ec9761eeec58))
+* **timepicker:** add validation and peformance improvments ([29df414](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/29df414c8f237586a6a4aa1c6cc41e9332d084c9))
+* **timepicker:** build dropdown pieces ([25676bd](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/25676bd8018c1f7da68932447b85613f5cadd85c))
+* **timepicker:** change directions for markup ([c964fb4](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c964fb4479ea0cc7d1b86591933c100302a62112))
+* **timepicker:** clean up files ([a2e3610](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/a2e3610eebeccb59e7eb96801ff3804ded7c3677))
+* **timepicker:** initial work for timepicker ([fa8dff7](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/fa8dff70c026760d12708882eac30ced108cf1a2))
+
+
+
+
+
 # [2.151.0-next.2](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.151.0-next.1...v2.151.0-next.2) (2022-07-27)
 
 

package/css/carbon-addons-iot-react.css

@@ -32317,6 +32317,402 @@ html[dir=rtl] .iot--list-builder__reset-button .bx--btn__icon {
   margin-right: 0.5rem;
 }
 
+.iot--list-spinner {
+  /* stylelint-disable declaration-property-unit-blacklist */
+  /* stylelint-enable declaration-property-unit-blacklist */
+}
+.iot--list-spinner__section {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 5rem;
+  max-height: 17.5rem;
+  overflow: hidden;
+}
+.iot--list-spinner__list-container {
+  position: relative;
+  min-width: 5rem;
+  min-height: 12.5rem;
+  overflow: hidden;
+}
+.iot--list-spinner__list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+  scrollbar-color: #ffffff;
+  scrollbar-width: none;
+  /* stylelint-disable-next-line */
+}
+.iot--list-spinner__list::scrollbar, .iot--list-spinner__list::-webkit-scrollbar {
+  display: none;
+  width: 0;
+}
+.iot--list-spinner__list-item {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 2.5rem;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+}
+.iot--list-spinner__list .iot--list-spinner__list-item--selected, .iot--list-spinner__list .iot--list-spinner__list-item--selected .iot--btn {
+  color: #ffffff;
+}
+.iot--list-spinner__list .iot--list-spinner__list-item--selected:hover, .iot--list-spinner__list .iot--list-spinner__list-item--selected .iot--btn:hover {
+  background: #e5e5e5;
+  color: #161616;
+}
+.iot--list-spinner__btn, .iot--list-spinner__list-item .iot--btn {
+  color: #161616;
+  justify-content: center;
+  margin: 0 auto;
+  min-height: unset;
+  max-height: 2.5rem;
+  width: 100%;
+}
+.iot--list-spinner__btn .bx--btn__icon, .iot--list-spinner__list-item .iot--btn .bx--btn__icon {
+  margin: 0 auto;
+}
+.iot--list-spinner__btn {
+  z-index: 1;
+}
+.iot--list-spinner__btn:first-child {
+  box-shadow: 0 1px 5px 4px #ffffff;
+  border-width: 1.5px;
+}
+.iot--list-spinner__btn:last-child {
+  box-shadow: 0 -1px 5px 4px #ffffff;
+  border-width: 1.5px;
+}
+
+.iot--list-spinner {
+  /* stylelint-disable declaration-property-unit-blacklist */
+  /* stylelint-enable declaration-property-unit-blacklist */
+}
+.iot--list-spinner__section {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 5rem;
+  max-height: 17.5rem;
+  overflow: hidden;
+}
+.iot--list-spinner__list-container {
+  position: relative;
+  min-width: 5rem;
+  min-height: 12.5rem;
+  overflow: hidden;
+}
+.iot--list-spinner__list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+  scrollbar-color: #ffffff;
+  scrollbar-width: none;
+  /* stylelint-disable-next-line */
+}
+.iot--list-spinner__list::scrollbar, .iot--list-spinner__list::-webkit-scrollbar {
+  display: none;
+  width: 0;
+}
+.iot--list-spinner__list-item {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 2.5rem;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+}
+.iot--list-spinner__list .iot--list-spinner__list-item--selected, .iot--list-spinner__list .iot--list-spinner__list-item--selected .iot--btn {
+  color: #ffffff;
+}
+.iot--list-spinner__list .iot--list-spinner__list-item--selected:hover, .iot--list-spinner__list .iot--list-spinner__list-item--selected .iot--btn:hover {
+  background: #e5e5e5;
+  color: #161616;
+}
+.iot--list-spinner__btn, .iot--list-spinner__list-item .iot--btn {
+  color: #161616;
+  justify-content: center;
+  margin: 0 auto;
+  min-height: unset;
+  max-height: 2.5rem;
+  width: 100%;
+}
+.iot--list-spinner__btn .bx--btn__icon, .iot--list-spinner__list-item .iot--btn .bx--btn__icon {
+  margin: 0 auto;
+}
+.iot--list-spinner__btn {
+  z-index: 1;
+}
+.iot--list-spinner__btn:first-child {
+  box-shadow: 0 1px 5px 4px #ffffff;
+  border-width: 1.5px;
+}
+.iot--list-spinner__btn:last-child {
+  box-shadow: 0 -1px 5px 4px #ffffff;
+  border-width: 1.5px;
+}
+
+.iot--time-picker {
+  width: 16.125rem;
+  position: relative;
+}
+.iot--time-picker input {
+  font-family: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
+  padding-right: 2rem;
+}
+.iot--time-picker__wrapper {
+  position: relative;
+}
+.iot--time-picker__wrapper--selected input {
+  border: 0.125rem solid #393939;
+}
+.iot--time-picker .bx--text-input__field-outer-wrapper {
+  justify-content: flex-end;
+}
+.iot--time-picker__wrapper-sm .iot--time-picker {
+  height: 1rem;
+}
+.iot--time-picker__wrapper-md .iot--time-picker {
+  height: 1.25rem;
+}
+.iot--time-picker__wrapper-lg .iot--time-picker .bx--text-input__field-outer-wrapper {
+  height: 3rem;
+}
+.iot--time-picker.iot--time-picker--invalid .iot--time-picker-range__helper-text,
+.iot--time-picker.iot--time-picker--invalid .iot--time-picker__helper-text {
+  color: #da1e28;
+}
+.iot--time-picker .bx--text-input__invalid-icon {
+  display: none;
+}
+.iot--time-picker__icon {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: 0.125rem solid transparent;
+  box-sizing: content-box;
+  cursor: pointer;
+  height: 1rem;
+  padding: 0.25rem;
+  position: absolute;
+  right: 0.5rem;
+  -webkit-transform: translateY(0.875rem);
+          transform: translateY(0.875rem);
+  width: 1rem;
+}
+.iot--time-picker__icon:focus {
+  border-color: #0f62fe;
+}
+.iot--time-picker__wrapper-sm .iot--time-picker__icon {
+  bottom: 1rem;
+}
+.iot--time-picker__wrapper-md .iot--time-picker__icon {
+  bottom: 1.25rem;
+}
+.iot--time-picker__wrapper-lg .iot--time-picker__icon {
+  bottom: 1.5rem;
+}
+.iot--time-picker--disabled .iot--time-picker__icon svg {
+  fill: #c6c6c6;
+}
+.iot--time-picker--disabled .iot--time-picker__icon {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.iot--time-picker--warn .iot--time-picker__icon--warn:not(.iot--time-picker__icon--invalid) svg {
+  fill: #f1c21b;
+}
+.iot--time-picker--warn .iot--time-picker__icon--warn:not(.iot--time-picker__icon--invalid) svg path:first-of-type {
+  fill: #161616;
+  opacity: 1;
+}
+.iot--time-picker--invalid .iot--time-picker__icon--invalid svg {
+  fill: #da1e28;
+}
+.iot--time-picker .bx--text-input__invalid-icon,
+.iot--time-picker .bx--text-input__readonly-icon {
+  display: none;
+}
+.iot--time-picker .bx--label {
+  max-width: 16.125rem;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.bx--text-input__field-wrapper[data-invalid] ~ .bx--form-requirement,
+.bx--text-input__field-wrapper--warning ~ .bx--form-requirement {
+  display: none;
+}
+
+.iot--time-picker-range {
+  display: grid;
+  gap: 0.15rem;
+  grid-template-columns: 1fr 1fr;
+}
+.iot--time-picker-range .iot--time-picker__wrapper {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+}
+.iot--time-picker-range .iot--time-picker__wrapper:first-child {
+  grid-column: 1;
+}
+.iot--time-picker-range .iot--time-picker__wrapper .bx--text-input__field-outer-wrapper {
+  justify-content: flex-end;
+}
+.iot--time-picker-range__helper-text {
+  grid-column: 1/3;
+  grid-row: 2;
+}
+.iot--time-picker-range fieldset {
+  grid-column: 1/3;
+  width: 100%;
+  display: grid;
+  gap: 0.15rem;
+  grid-template-columns: 1fr 1fr;
+}
+.iot--time-picker-range fieldset legend {
+  grid-column: 1/3;
+  grid-row: 1;
+}
+.iot--time-picker-range fieldset legend + .iot--time-picker__wrapper {
+  grid-column: 1;
+}
+.iot--time-picker-range fieldset .iot--time-picker-range__helper-text {
+  grid-column: 1/3;
+  grid-row: 3;
+}
+.iot--time-picker-range .bx--label,
+.iot--time-picker-range .iot--time-picker__wrapper {
+  max-width: 8rem;
+}
+
+.iot--time-picker-spinner {
+  background-color: #ffffff;
+  box-shadow: 0 7px 10px 2px #ddd;
+  display: flex;
+  gap: 1px;
+  justify-content: center;
+  height: 280px;
+  opacity: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: contain;
+  padding: 0 0.5rem;
+  position: absolute;
+  width: 16.125rem;
+  /* stylelint-disable-next-line */
+  transition: opacity 0.25s;
+  -webkit-animation: fadeIn 0.25s forwards;
+          animation: fadeIn 0.25s forwards;
+}
+.iot--time-picker-spinner::before {
+  background: #0f62fe;
+  content: "";
+  width: calc(100% - 1rem);
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.iot--time-picker-spinner button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  z-index: 1;
+}
+.iot--time-picker-spinner button:focus {
+  border-color: #0f62fe;
+}
+.iot--time-picker-spinner-section {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 80px;
+}
+.iot--time-picker-spinner-section:nth-child(3) {
+  justify-content: center;
+  padding-top: 40px;
+}
+.iot--time-picker-spinner-list {
+  position: relative;
+  width: 80px;
+  overflow: hidden;
+}
+.iot--time-picker-spinner-list li {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 40px;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+}
+.iot--time-picker-spinner .iot--time-picker-spinner-button {
+  color: #161616;
+  justify-content: center;
+  margin: 0 auto;
+  min-height: unset;
+  max-height: 40px;
+  width: 100%;
+}
+.iot--time-picker-spinner .iot--time-picker-spinner-button--selected {
+  color: #ffffff;
+}
+.iot--time-picker-spinner .iot--time-picker-spinner-button--selected:hover {
+  color: #161616;
+}
+.iot--time-picker-spinner .iot--time-picker-spinner-button .bx--btn__icon {
+  margin: 0 auto;
+}
+
+.iot--time-picker-spinner-last-list-spinner > .iot--list-spinner__btn {
+  display: none;
+}
+.iot--time-picker-spinner-last-list-spinner .iot--list-spinner__list-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.iot--time-picker-spinner-last-list-spinner li {
+  -webkit-transform: translateY(7.5rem);
+          transform: translateY(7.5rem);
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .iot--tear-sheet-wrapper {
   top: 0;
   left: 0;