@hazelcast/ui 2.0.5-canary.0 → 3.0.0-canary.0

package/lib/components/Terminal.module.scss

@@ -1,109 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-.container {
-  // Match TextField
-  @include c.typographyBodySmall;
-
-  color: c.$colorText;
-  padding: c.$grid * 5;
-  background-color: c.$colorNeutralWhite;
-}
-
-.input {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  margin: 0;
-  margin-bottom: c.$grid * 3;
-
-  > input {
-    flex: 1 1 auto;
-    min-width: 0;
-    border: none;
-    border-bottom: c.$outlineWidth solid c.$colorNeutral;
-    padding: 0;
-
-    // Align input bottom line with the icon
-    margin-bottom: c.$grid;
-    outline: none;
-    background-color: transparent;
-    color: c.$colorText;
-    box-sizing: border-box;
-    font-size: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-
-    &.blank {
-      border-bottom-color: transparent;
-    }
-
-    &:hover,
-    &.hover {
-      border-bottom-color: c.$colorText;
-    }
-
-    &:focus-visible,
-    &.focus {
-      // Do not remove outline for high-contrast modes
-      // https://stackoverflow.com/a/52616313
-      outline: transparent solid c.$outlineWidth;
-      border-bottom-color: c.$colorAccessibilityOutline;
-    }
-
-    &:disabled {
-      color: c.$colorTextSecondary;
-      background-color: transparent;
-      border-bottom-color: c.$colorNeutral;
-    }
-
-    &:read-only {
-      border-bottom-color: c.$colorNeutral;
-    }
-  }
-}
-
-.welcome {
-  @include c.typographyBodySmall('bold');
-
-  margin: 0;
-  margin-bottom: c.$grid * 5;
-}
-
-.commandRes {
-  color: c.$colorSuccessDarkest;
-  margin: 0;
-  margin-bottom: c.$grid * 3;
-
-  > p {
-    margin: 0;
-    margin-bottom: c.$grid;
-    white-space: break-spaces;
-  }
-}
-
-.commandError {
-  color: c.$colorErrorDark;
-  margin: 0;
-  margin-bottom: c.$grid * 3;
-}
-
-.loading {
-  margin: 0;
-  margin-bottom: c.$grid * 3;
-  position: relative;
-}
-
-.loadingA11yText {
-  @include h.visuallyHidden;
-}
-
-.terminalIcon {
-  margin-right: c.$grid * 3;
-}
-
-.prompt {
-  @include c.typographyBodySmall('bold');
-
-  margin-right: c.$grid;
-}

package/lib/components/TextArea.module.scss

@@ -1,144 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-// Why is it so complex? Why do we need .borderOverlay?
-// Ideally, we would have used native `border` for every style: hover, error, focus.
-// Since our focus outline is thicker than the native border, we cannot use the native border for focus styles.
-// Say, the initial border is 1px. For focus you make it 2px.
-// As result, it shifts the content inside. Not nice UX at all.
-// To work around that in other places, we do not change the thickness of the border on focus.
-// Instead we add a 1px inset box-shadow which adds ups to the border and gives us the desired 2px outline on focus.
-// Back to the textarea. As you can see it is supposed to have rounded corners. So we use border-radius.
-// Ideally, we would have used border-radius on the textarea itself
-// and applied the same technique with the inset box-shadow.
-// Guess what? Chrome does not apply border-radius to the scrollbar inside of the textarea.
-// Next step is to add a wrapping div to the textarea, and apply the border-radius,
-// the border itself and the inset box-shadow there.
-// Now the inset box-shadow is rendered under the textarea,
-// so the scrollbar is rendered on top of it and the textarea text as well.
-// At least it makes sense. After all, it is a shadow. It is supposed to decorate, not overlap and override.
-// Let's go deeper down the rabbit hole.
-// We add the wrapping div and add the border-radius there, but we do not add the border itself.
-// Instead we make the wrapping div relative.
-// Next, we add an absolute child div. We add the border with the inset box-shadow to that div,
-// so it is rendered on top of the textarea.
-// Finally, we add textarea:focus styling to support IE11 that does not play nice with :focus-within.
-
-.container {
-  @include c.typographyBodySmall;
-
-  color: c.$colorText;
-  box-sizing: border-box;
-
-  .label {
-    display: block;
-    margin-bottom: c.$grid;
-
-    &.small {
-      @include c.typographyBodySmall;
-    }
-  }
-
-  .helperText {
-    display: block;
-    margin: 2 * c.$grid 0 0 c.$grid;
-  }
-
-  .textAreaContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-  }
-
-  .borderOverlay {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-    z-index: c.$zIndex100;
-    border-radius: c.$borderRadius;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    box-sizing: border-box;
-  }
-
-  .textAreaWrapper {
-    position: relative;
-    width: 100%;
-    border-radius: c.$borderRadius;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-
-  textarea {
-    display: block;
-    padding: c.$grid * 2 c.$grid * 3;
-    border: none;
-    box-sizing: border-box;
-    width: 100%;
-    font-family: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    background-color: c.$colorOverlayBackground;
-    /* doiuse-disable css-resize */
-    resize: vertical;
-    /* doiuse-enable css-resize */
-
-    // Note: Resize is not supported by IE11, it's presence does no harm though
-    &.notResizable {
-      /* doiuse-disable css-resize */
-      resize: none;
-      /* doiuse-enable css-resize */
-    }
-
-    &::placeholder {
-      color: c.$colorTextSecondary;
-    }
-  }
-
-  &.hover .textAreaWrapper,
-  .textAreaWrapper:hover {
-    .borderOverlay {
-      border-color: c.$colorPrimary;
-    }
-  }
-
-  &.disabled {
-    .textAreaWrapper {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
-
-      .borderOverlay {
-        border-color: c.$colorNeutralLight;
-      }
-    }
-  }
-
-  &.hasError {
-    .textAreaWrapper .borderOverlay {
-      border-color: c.$colorError;
-    }
-
-    label {
-      color: c.$colorError;
-    }
-  }
-
-  textarea:focus {
-    // Do not remove outline for high-contrast modes
-    // https://stackoverflow.com/a/52616313
-    outline: transparent solid c.$outlineWidth;
-  }
-
-  &.focus .textAreaWrapper .borderOverlay,
-  .textAreaWrapper textarea:focus + .borderOverlay {
-    @include h.outlineFormField;
-  }
-}
-
-@include h.withError;

package/lib/components/TextField.module.scss

@@ -1,209 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-$inputHorizontalPadding: c.$grid * 3;
-$marginLeftWithIcon: c.$grid * 5;
-
-.container {
-  color: c.$colorText;
-  box-sizing: border-box;
-
-  @include c.typographyBodySmall;
-
-  .inputBlock {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .inputContainer {
-    position: relative;
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-    box-sizing: border-box;
-    height: c.$inputHeight;
-    background-color: c.$colorOverlayBackground;
-    border-radius: c.$borderRadius;
-  }
-
-  .inputIconContainer {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: $marginLeftWithIcon + $inputHorizontalPadding;
-  }
-
-  .inputTrailingIconContainer {
-    width: auto;
-    margin-right: c.$grid * 1.5;
-  }
-
-  .inputLeftIconContainer {
-    order: -1;
-  }
-
-  .inputIcon,
-  .inputIconTrailing {
-    pointer-events: none;
-  }
-
-  .inputIcon {
-    left: ($marginLeftWithIcon + $inputHorizontalPadding) * 0.5;
-  }
-
-  .inputIconTrailing {
-    right: -(c.$grid);
-    color: c.$colorPrimary;
-  }
-
-  // Here we go. Another border hack. Why?
-  // TextField is re-used for PasswordField. PasswordField is meant for passwords.
-  // Passwords are often handled by password managers.
-  // Password managers often add their own UI on top of the password inputs.
-  // To make our password visibility toggle and their UI not overlap,
-  // we have to make the actual input shorter than its visual representation.
-  // However, visually we still would like our users to see it as one unit.
-  // As result, we cannot apply border to the input itself (because it's shorter).
-  // We could have applied border styles to .inputContainer. But IE11 does not support :focus-within.
-  // So to properly apply focus styles we need a sibling element to the actual input that supports :focus.
-  // .borderOverlay is that very sibling element.
-  .borderOverlay {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-    z-index: c.$zIndex100;
-    border-radius: c.$borderRadius;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    box-sizing: border-box;
-  }
-
-  input {
-    display: block;
-    flex: 1 1 auto;
-    background-color: transparent;
-    padding: 0 $inputHorizontalPadding;
-    margin: 0;
-    border: none;
-    box-sizing: border-box;
-    font-size: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    height: 100%;
-    width: 100%;
-
-    &::placeholder {
-      color: c.$colorTextSecondary;
-    }
-  }
-
-  .clearButton {
-    display: inline-flex;
-    align-items: center;
-    margin-right: c.$grid * 1.5;
-  }
-
-  &.small {
-    .inputContainer {
-      height: c.$inputHeightSmall;
-    }
-  }
-
-  &.large {
-    .inputContainer {
-      height: c.$inputHeightLarge;
-    }
-  }
-
-  &.mockAutofill {
-    input {
-      @include h.mockChromeAutofill;
-    }
-  }
-
-  &.withIcon {
-    input {
-      padding-left: 0;
-    }
-  }
-
-  &.empty {
-    color: c.$colorTextSecondary;
-  }
-
-  input:hover,
-  input.hover {
-    & ~ .borderOverlay {
-      border-color: c.$colorPrimary;
-    }
-
-    & ~ .inputIconContainer > .inputIcon {
-      color: c.$colorPrimary;
-    }
-  }
-
-  &.hasError input {
-    & ~ .borderOverlay {
-      border-color: c.$colorError;
-    }
-  }
-
-  &.hasError label {
-    color: c.$colorError;
-  }
-
-  input:focus,
-  input.focus {
-    // Do not remove outline for high-contrast modes
-    // https://stackoverflow.com/a/52616313
-    outline: transparent solid c.$outlineWidth;
-
-    & ~ .borderOverlay {
-      @include h.outlineFormField;
-    }
-
-    & ~ .inputIconContainer > .inputIcon {
-      color: c.$colorPrimary;
-    }
-  }
-
-  // .hasError styles split in two groups to always color the icon with the error colors
-  // but the change the color of the border
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  &.hasError input {
-    ~ .inputIconContainer > .inputIcon {
-      color: c.$colorError;
-    }
-  }
-
-  &.disabled {
-    color: c.$colorTextSecondary;
-
-    .inputContainer {
-      background-color: c.$colorNeutral;
-    }
-
-    input {
-      & ~ .borderOverlay {
-        border-color: c.$colorNeutralLight;
-      }
-
-      & ~ .inputIconContainer > .inputIcon {
-        color: c.$colorTextSecondary;
-      }
-
-      & ~ .inputIconContainer > .inputIconTrailing {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-}
-
-@include h.withError;

package/lib/components/TimeField.module.scss

@@ -1,4 +0,0 @@
-.container {
-  display: inline-flex;
-  flex-direction: column;
-}

package/lib/components/Toast.module.scss

@@ -1,53 +0,0 @@
-@use '../../styles/constants' as c;
-
-.toast {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  border-radius: c.$borderRadiusToast;
-  max-width: c.$toastMaxWidth;
-  padding: c.$grid * 1.5 c.$grid * 2.5;
-
-  .icon {
-    flex: 0 0 auto;
-    margin-right: c.$grid * 2.5;
-  }
-
-  .content {
-    @include c.typographyBodyNormal;
-
-    word-break: break-word;
-  }
-
-  .close {
-    margin-left: c.$grid * 2.5;
-  }
-
-  &.success {
-    background-color: c.$colorSuccessLight;
-    color: c.$colorText;
-  }
-
-  &.info {
-    background-color: c.$colorInfoLight;
-    color: c.$colorText;
-
-    .icon {
-      color: c.$colorText;
-    }
-  }
-
-  &.warning {
-    background-color: c.$colorWarningLight;
-    color: c.$colorText;
-
-    .icon {
-      color: c.$colorText;
-    }
-  }
-
-  &.critical {
-    background-color: c.$colorErrorLight;
-    color: c.$colorText;
-  }
-}

package/lib/components/Toggle.module.scss

@@ -1,175 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-@use 'sass:math';
-
-$height: c.$grid * 6;
-$width: c.$grid * 15;
-$labelMargin: c.$grid * 2.5;
-/* doiuse-disable calc */
-$trackBr: calc(#{$height} - #{c.$borderWidth * 2});
-/* doiuse-enable calc */
-$trackBgOn: c.$colorSuccess;
-$trackBgOff: c.$colorNeutral;
-$knobBgOn: c.$colorNeutralWhite;
-$knobBgOff: c.$colorNeutralLighter;
-$knobRadius: c.$grid * 5;
-/* stylelint-disable  length-zero-no-unit */
-$knobHorizontalOffset: math.max(c.$outlineWidth - c.$borderWidth, 0px);
-/* stylelint-enable */
-
-@keyframes switchOn {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) translateX(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(-50%);
-  }
-}
-
-@keyframes switchOff {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) translateX(-100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(-50%);
-  }
-}
-
-.wrapper {
-  position: relative;
-
-  input {
-    @include h.visuallyHidden;
-  }
-
-  // faux wrapping label
-  label {
-    cursor: pointer;
-    display: inline-flex; // for aligning with the .labelText
-    align-items: center;
-    color: c.$colorText;
-    vertical-align: middle;
-
-    @include c.typographyBodySmall;
-
-    &.disabled {
-      cursor: not-allowed;
-      color: c.$colorNeutralLight;
-    }
-  }
-
-  // actual text label
-  .labelText {
-    margin-right: $labelMargin;
-  }
-
-  .helperText {
-    margin-left: c.$grid * 1.5;
-  }
-
-  // the `track` (default off state)
-  .toggleTrack {
-    display: inline-block;
-    height: $height;
-    width: $width;
-    background: $trackBgOff;
-    border-radius: $trackBr;
-    position: relative;
-    border: c.$borderWidth solid transparent;
-    box-sizing: border-box;
-    color: c.$colorNeutralWhite;
-
-    &::before {
-      content: '';
-      display: inline-block;
-      height: $knobRadius;
-      width: $knobRadius;
-      background: $knobBgOff;
-      border-radius: 50%;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      /* doiuse-disable calc */
-      right: calc(#{$width} - #{c.$borderWidth * 2} - #{$knobRadius} - #{$knobHorizontalOffset});
-      /* doiuse-enable calc */
-      transition: right c.$transitionTimeMedium ease-in;
-    }
-  }
-
-  // track states
-  label.hover .toggleTrack,
-  label:hover .toggleTrack {
-    border-color: c.$colorPrimary;
-  }
-
-  label.error .toggleTrack {
-    border-color: c.$colorError;
-  }
-
-  label.disabled .toggleTrack {
-    background-color: c.$colorNeutralLight;
-    border-color: c.$colorNeutralLight;
-    box-shadow: none;
-    color: c.$colorNeutral;
-
-    &::before {
-      background: c.$colorNeutral;
-    }
-  }
-
-  label.focus .toggleTrack,
-  input:focus + label .toggleTrack {
-    @include h.outlineFormField;
-  }
-
-  // track ON state
-  input:checked + label .toggleTrack {
-    background: $trackBgOn;
-
-    &::before {
-      background: $knobBgOn;
-      right: $knobHorizontalOffset;
-    }
-  }
-
-  input:checked + label.disabled .toggleTrack {
-    background-color: c.$colorSuccessDark;
-    border-color: c.$colorNeutralLight;
-    box-shadow: none;
-    color: c.$colorNeutral;
-
-    &::before {
-      background-color: c.$colorNeutral;
-    }
-  }
-
-  .toggleTrackText {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  // the "OFF" text
-  input:not(:checked) + label .toggleTrackText {
-    animation: switchOff c.$transitionTimeMedium ease-in;
-    right: c.$grid * 2;
-    left: auto;
-    color: c.$colorTextSecondary;
-  }
-
-  // the "ON" text
-  input:checked + label .toggleTrackText {
-    animation: switchOn c.$transitionTimeMedium ease-in;
-    right: auto;
-    left: c.$grid * 1.5;
-    color: c.$colorNeutralWhite;
-  }
-}
-
-@include h.withError;