@osdk/react-components 0.2.0-beta.16 → 0.2.0-beta.17

package/build/cjs/public/experimental.css

@@ -1212,14 +1212,56 @@
   }
 }
 
+/* src/base-components/tooltip/Tooltip.module.css */
+.osdkTooltipTrigger {
+  border: none;
+  background: inherit;
+}
+.osdkTooltipPositioner {
+  z-index: var(--osdk-tooltip-z-index);
+}
+.osdkTooltipPopup {
+  padding: var(--osdk-tooltip-padding);
+  background-color: var(--osdk-tooltip-bg);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-tooltip-shadow);
+  max-width: var(--osdk-tooltip-max-width);
+  font-size: var(--osdk-tooltip-font-size);
+}
+.osdkTooltipArrow {
+  display: flex;
+  &[data-side=top] {
+    bottom: -8px;
+    rotate: 180deg;
+  }
+  &[data-side=bottom] {
+    top: -8px;
+    rotate: 0deg;
+  }
+  &[data-side=left] {
+    right: -13px;
+    rotate: 90deg;
+  }
+  &[data-side=right] {
+    left: -13px;
+    rotate: -90deg;
+  }
+}
+.tooltipArrowFill {
+  fill: var(--osdk-tooltip-bg);
+}
+.tooltipArrowOuterStroke {
+  fill: var(--osdk-tooltip-border-color);
+}
+
 /* src/object-table/EditableCell.module.css */
-.osdkEditableInput {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+.osdkEditableCell {
   width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
   border-radius: var(--osdk-surface-border-radius);
   border: var(--osdk-surface-border-width) solid transparent;
   background: inherit;
@@ -1229,16 +1271,46 @@
     &.osdkEditedInput {
       border: var(--osdk-table-cell-edited-border);
     }
-    &:focus,
-    &.osdkEditedInput:focus {
+    &:focus-within,
+    &.osdkEditedInput:focus-within {
       border: var(--osdk-emphasis-focus-width) solid var(--osdk-emphasis-focus-color);
     }
+    &.error {
+      border: var(--osdk-table-cell-edited-border-error);
+      &:focus-within {
+        border: var(--osdk-emphasis-focus-width) solid var(--osdk-intent-danger-rest);
+      }
+    }
+  }
+  &.error {
+    background: var(--osdk-table-cell-editable-bg);
+    border: var(--osdk-table-cell-edited-border-error);
+  }
+}
+.osdkEditableInput {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  background: inherit;
+  border: none;
+  &:focus {
+    outline: none;
   }
 }
 .osdkEditedInput {
   border: var(--osdk-table-cell-edited-border);
   background: var(--osdk-table-cell-editable-bg);
 }
+.validationError {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
+.errorIcon {
+  color: var(--osdk-intent-danger-rest);
+}
 
 /* src/object-table/LoadingCell.module.css */
 .osdkLoadingCell {
@@ -2165,6 +2237,14 @@
   font-size: var(--osdk-typography-size-body-small);
   padding: calc(var(--osdk-surface-spacing) * 2) 0;
 }
+.editsInfoContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  font-size: var(--osdk-typography-size-body-small);
+}
 .modificationCount {
   color: var(--osdk-intent-primary-rest);
   font-size: var(--osdk-typography-size-body-small);
@@ -2176,4 +2256,19 @@
   gap: 8px;
   flex: 1;
 }
+.validationError {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--osdk-surface-spacing) * 2);
+  color: var(--osdk-intent-danger-rest);
+}
+.errorIcon {
+  color: var(--osdk-intent-danger-rest);
+}
+.divider {
+  width: 1px;
+  height: 8px;
+  background-color: var(--osdk-surface-border-color-default);
+  align-self: center;
+}
 /*# sourceMappingURL=experimental.css.map */