@uniformdev/design-system 19.45.1 → 19.45.2-alpha.6

package/dist/esm/index.js

@@ -15181,57 +15181,67 @@ var ScrollableListItem = ({
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
 import { css as css67, keyframes as keyframes3 } from "@emotion/react";
-var bounceFade = keyframes3`
+function bounceFade(size) {
+  const bounceHeight = size === "lg" ? 10 : 5;
+  return keyframes3`
     0%, 100% {
-        opacity: 1.0;
-        transform: translateY(0);
+      opacity: 1.0;
+      transform: translateY(0);
     }
     30% {
-        opacity: 0.6;
+      opacity: 0.6;
     }
     80% {
-        opacity: 0.4;
-        transform: translateY(-10px);
+      opacity: 0.4;
+      transform: translateY(-${bounceHeight}px);
     }
     90% {
       opacity: 0.2;
-        transform: translateY(-5px);
+      transform: translateY(-${bounceHeight / 2}px);
     }
 `;
+}
 var loader = css67`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = css67`
-  background-color: var(--gray-700);
-  display: block;
-  border-radius: var(--rounded-full);
-  animation: ${bounceFade} 0.75s infinite ease-in-out;
-  width: 8px;
-  height: 8px;
-  margin: 0 var(--spacing-xs);
-  transform: translateY(0);
+function loadingDot(size) {
+  const dotSize = size === "lg" ? 8 : 4;
+  return css67`
+    background-color: var(--gray-700);
+    display: block;
+    border-radius: var(--rounded-full);
+    animation: ${bounceFade(size)} 0.75s infinite ease-in-out;
+    width: ${dotSize}px;
+    height: ${dotSize}px;
+    margin: 0 var(--spacing-${size === "lg" ? "xs" : "2xs"});
+    transform: translateY(0);
 
-  &:nth-of-type(1) {
-    animation-delay: 0.15s;
-  }
+    &:nth-of-type(1) {
+      animation-delay: 0.15s;
+    }
 
-  &:nth-of-type(2) {
-    animation-delay: 0.3s;
-  }
+    &:nth-of-type(2) {
+      animation-delay: 0.3s;
+    }
 
-  &:nth-of-type(3) {
-    animation-delay: 0.6s;
-  }
-`;
+    &:nth-of-type(3) {
+      animation-delay: 0.6s;
+    }
+  `;
+}
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 import { jsx as jsx81, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
-var LoadingIndicator = ({ ...props }) => {
+var LoadingIndicator = ({
+  size = "lg",
+  ...props
+}) => {
+  const dotStyle = loadingDot(size);
   return /* @__PURE__ */ jsxs53("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ jsx81("span", { css: loadingDot }),
-    /* @__PURE__ */ jsx81("span", { css: loadingDot }),
-    /* @__PURE__ */ jsx81("span", { css: loadingDot })
+    /* @__PURE__ */ jsx81("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx81("span", { css: dotStyle }),
+    /* @__PURE__ */ jsx81("span", { css: dotStyle })
   ] });
 };
 
@@ -16220,6 +16230,7 @@ var extractParameterProps = (props) => {
 var ParameterShell = ({
   label,
   labelLeadingIcon,
+  labelTrailingIcon,
   hiddenLabel,
   id,
   errorMessage,
@@ -16240,12 +16251,14 @@ var ParameterShell = ({
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs61("div", { css: inputContainer2, ...props, children: [
     hiddenLabel || title ? null : /* @__PURE__ */ jsxs61(ParameterLabel, { id, css: labelText2, children: [
-      labelLeadingIcon ? labelLeadingIcon : null,
-      label
+      labelLeadingIcon != null ? labelLeadingIcon : null,
+      label,
+      labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     !title ? null : /* @__PURE__ */ jsxs61(ParameterLabel, { id, asSpan: true, children: [
-      labelLeadingIcon ? labelLeadingIcon : null,
-      title
+      labelLeadingIcon != null ? labelLeadingIcon : null,
+      title,
+      labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ jsxs61("div", { css: inputWrapper, children: [
       menuItems ? /* @__PURE__ */ jsx91(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,

package/dist/index.d.mts

@@ -21996,7 +21996,9 @@ declare const ScrollableListItem: ({ buttonText, active, disableShadow, ...props
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: ({ ...props }: HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const LoadingIndicator: ({ size, ...props }: HTMLAttributes<HTMLDivElement> & {
+    size?: "sm" | "lg" | undefined;
+}) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -22163,8 +22165,10 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
 type CommonParameterProps = {
     /** sets the label value */
     label: string;
-    /** (optional): allows user to pass a component within the label */
+    /** (optional): allows user to pass a component before the label */
     labelLeadingIcon?: ReactNode;
+    /** (optional): allows user to pass a component after the label */
+    labelTrailingIcon?: ReactNode;
     /** sets the value for label and id on the input field */
     id: string;
     /** (optional): hides the label, but set an aria-label on the input */
@@ -22500,9 +22504,6 @@ declare const extractParameterProps: <T>(props: T & CommonParameterProps & {
     menuItems?: ReactNode;
     errorTestId?: string | undefined;
     captionTestId?: string | undefined;
-    /** sets overriding parameters indicator
-     * @deprecated
-     */
     title?: string | undefined;
 }) => {
     shellProps: {
@@ -22526,9 +22527,6 @@ declare const extractParameterProps: <T>(props: T & CommonParameterProps & {
         menuItems?: ReactNode;
         errorTestId?: string | undefined;
         captionTestId?: string | undefined;
-        /** sets overriding parameters indicator
-         * @deprecated
-         */
         title?: string | undefined;
     }, "caption" | "label" | "title" | "id" | "menuItems" | "errorMessage" | "warningMessage" | "errorTestId" | "captionTestId" | "hiddenLabel" | "labelLeadingIcon" | "infoMessage" | "hasOverriddenValue" | "onResetOverriddenValue">;
 };
@@ -22547,7 +22545,7 @@ type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonPar
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, hasOverriddenValue, onResetOverriddenValue, title, children, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, hasOverriddenValue, onResetOverriddenValue, title, children, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;

package/dist/index.d.ts

@@ -21996,7 +21996,9 @@ declare const ScrollableListItem: ({ buttonText, active, disableShadow, ...props
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: ({ ...props }: HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const LoadingIndicator: ({ size, ...props }: HTMLAttributes<HTMLDivElement> & {
+    size?: "sm" | "lg" | undefined;
+}) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -22163,8 +22165,10 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
 type CommonParameterProps = {
     /** sets the label value */
     label: string;
-    /** (optional): allows user to pass a component within the label */
+    /** (optional): allows user to pass a component before the label */
     labelLeadingIcon?: ReactNode;
+    /** (optional): allows user to pass a component after the label */
+    labelTrailingIcon?: ReactNode;
     /** sets the value for label and id on the input field */
     id: string;
     /** (optional): hides the label, but set an aria-label on the input */
@@ -22500,9 +22504,6 @@ declare const extractParameterProps: <T>(props: T & CommonParameterProps & {
     menuItems?: ReactNode;
     errorTestId?: string | undefined;
     captionTestId?: string | undefined;
-    /** sets overriding parameters indicator
-     * @deprecated
-     */
     title?: string | undefined;
 }) => {
     shellProps: {
@@ -22526,9 +22527,6 @@ declare const extractParameterProps: <T>(props: T & CommonParameterProps & {
         menuItems?: ReactNode;
         errorTestId?: string | undefined;
         captionTestId?: string | undefined;
-        /** sets overriding parameters indicator
-         * @deprecated
-         */
         title?: string | undefined;
     }, "caption" | "label" | "title" | "id" | "menuItems" | "errorMessage" | "warningMessage" | "errorTestId" | "captionTestId" | "hiddenLabel" | "labelLeadingIcon" | "infoMessage" | "hasOverriddenValue" | "onResetOverriddenValue">;
 };
@@ -22547,7 +22545,7 @@ type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonPar
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, hasOverriddenValue, onResetOverriddenValue, title, children, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, hasOverriddenValue, onResetOverriddenValue, title, children, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;

package/dist/index.js

@@ -16942,57 +16942,67 @@ init_emotion_jsx_shim();
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
 init_emotion_jsx_shim();
 var import_react85 = require("@emotion/react");
-var bounceFade = import_react85.keyframes`
+function bounceFade(size) {
+  const bounceHeight = size === "lg" ? 10 : 5;
+  return import_react85.keyframes`
     0%, 100% {
-        opacity: 1.0;
-        transform: translateY(0);
+      opacity: 1.0;
+      transform: translateY(0);
     }
     30% {
-        opacity: 0.6;
+      opacity: 0.6;
     }
     80% {
-        opacity: 0.4;
-        transform: translateY(-10px);
+      opacity: 0.4;
+      transform: translateY(-${bounceHeight}px);
     }
     90% {
       opacity: 0.2;
-        transform: translateY(-5px);
+      transform: translateY(-${bounceHeight / 2}px);
     }
 `;
+}
 var loader = import_react85.css`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = import_react85.css`
-  background-color: var(--gray-700);
-  display: block;
-  border-radius: var(--rounded-full);
-  animation: ${bounceFade} 0.75s infinite ease-in-out;
-  width: 8px;
-  height: 8px;
-  margin: 0 var(--spacing-xs);
-  transform: translateY(0);
+function loadingDot(size) {
+  const dotSize = size === "lg" ? 8 : 4;
+  return import_react85.css`
+    background-color: var(--gray-700);
+    display: block;
+    border-radius: var(--rounded-full);
+    animation: ${bounceFade(size)} 0.75s infinite ease-in-out;
+    width: ${dotSize}px;
+    height: ${dotSize}px;
+    margin: 0 var(--spacing-${size === "lg" ? "xs" : "2xs"});
+    transform: translateY(0);
 
-  &:nth-of-type(1) {
-    animation-delay: 0.15s;
-  }
+    &:nth-of-type(1) {
+      animation-delay: 0.15s;
+    }
 
-  &:nth-of-type(2) {
-    animation-delay: 0.3s;
-  }
+    &:nth-of-type(2) {
+      animation-delay: 0.3s;
+    }
 
-  &:nth-of-type(3) {
-    animation-delay: 0.6s;
-  }
-`;
+    &:nth-of-type(3) {
+      animation-delay: 0.6s;
+    }
+  `;
+}
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
-var LoadingIndicator = ({ ...props }) => {
+var LoadingIndicator = ({
+  size = "lg",
+  ...props
+}) => {
+  const dotStyle = loadingDot(size);
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: loadingDot }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: loadingDot }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: loadingDot })
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: dotStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: dotStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: dotStyle })
   ] });
 };
 
@@ -18008,6 +18018,7 @@ var extractParameterProps = (props) => {
 var ParameterShell = ({
   label,
   labelLeadingIcon,
+  labelTrailingIcon,
   hiddenLabel,
   id,
   errorMessage,
@@ -18028,12 +18039,14 @@ var ParameterShell = ({
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: inputContainer2, ...props, children: [
     hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(ParameterLabel, { id, css: labelText2, children: [
-      labelLeadingIcon ? labelLeadingIcon : null,
-      label
+      labelLeadingIcon != null ? labelLeadingIcon : null,
+      label,
+      labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     !title ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(ParameterLabel, { id, asSpan: true, children: [
-      labelLeadingIcon ? labelLeadingIcon : null,
-      title
+      labelLeadingIcon != null ? labelLeadingIcon : null,
+      title,
+      labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: inputWrapper, children: [
       menuItems ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.45.1",
+  "version": "19.45.2-alpha.6+ea4628ae5",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
-    "@uniformdev/canvas": "^19.45.1",
-    "@uniformdev/richtext": "^19.45.1",
+    "@uniformdev/canvas": "^19.45.2-alpha.6+ea4628ae5",
+    "@uniformdev/richtext": "^19.45.2-alpha.6+ea4628ae5",
     "autoprefixer": "10.4.15",
     "hygen": "6.2.11",
     "postcss": "8.4.27",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "27d329b913db64152e9d49bcfa7dddf8b3b31bb6"
+  "gitHead": "ea4628ae5765af32b174d3dac546fed03170c9aa"
 }