@wix/editor-react-components 1.2418.0 → 1.2420.0

package/dist/site/components/TimePicker/component.js

@@ -17,8 +17,8 @@ import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
-const timePicker = "timePicker__j78My";
 const root = "root__dzkbY";
+const timePicker = "timePicker__j78My";
 const labelRow = "labelRow__qoC8g";
 const label = "label__THO5j";
 const tooltipButton = "tooltipButton__ISWIR";
@@ -31,8 +31,8 @@ const segment = "segment__OtazP";
 const clearButton = "clearButton__Bto7s";
 const clearIcon = "clearIcon__x11eI";
 const styles = {
-  timePicker,
   root,
+  timePicker,
   labelRow,
   label,
   tooltipButton,
@@ -101,7 +101,13 @@ const useTimeConstraints = (params) => {
     [minTimeStr, maxTimeStr]
   );
 };
-const renderSegments = (segment2) => /* @__PURE__ */ jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { segment: segment2, className: styles.segment });
+const renderSegments = (segment2) => /* @__PURE__ */ jsx(
+  $40825cdb76e74f70$export$336ab7fa954c4b5f,
+  {
+    segment: segment2,
+    className: clsx(styles.segment, selectors.segment)
+  }
+);
 const TimePickerField = ({
   clearButton: clearButton2
 }) => /* @__PURE__ */ jsxs(
@@ -264,7 +270,17 @@ function TimePicker(props) {
                   ] }) : null
                 ] }) : null,
                 /* @__PURE__ */ jsx(TimePickerField, { clearButton: clearButton2 }),
-                description2 ? /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: styles.description, children: description2 }) : null,
+                description2 ? /* @__PURE__ */ jsx(
+                  $514c0188e459b4c0$export$5f1af8db9871e1d6,
+                  {
+                    slot: "description",
+                    className: clsx(
+                      styles.description,
+                      selectors.description
+                    ),
+                    children: description2
+                  }
+                ) : null,
                 isInvalid && validity.validationMessage ? /* @__PURE__ */ jsx(
                   $ee014567cb39d3f0$export$f551688fc98f2e09,
                   {

package/dist/site/components/TimePicker/constants.d.ts

@@ -39,11 +39,11 @@ export declare const DisplayNames: {
         elements: {
             label: string;
             timeInput: string;
+            description: string;
+            segment: string;
         };
         cssCustomProperties: {
             labelSpacing: string;
-            segmentFocusBackgroundColor: string;
-            segmentFocusTextColor: string;
         };
     };
 };
@@ -86,6 +86,12 @@ export declare const DesignStates: {
             className: string;
         };
     };
+    segment: {
+        focus: {
+            displayName: string;
+            className: string;
+        };
+    };
 };
 /** The value that represents "no time selected". */
 export declare const EMPTY_VALUE = "";
@@ -114,6 +120,8 @@ export declare const selectors: {
     readonly label: "timePicker__label";
     readonly requiredIndicator: "timePicker__required-indicator";
     readonly group: "timePicker__group";
+    readonly description: "timePicker__description";
+    readonly segment: "timePicker__segment";
     readonly errorMessage: "timePicker__error-message";
 };
 /** Intrinsic `required` failure message (pre-resolved; i18n is a shared TODO). */

package/dist/site/components/TimePicker/css.css

@@ -1,4 +1,5 @@
-.timePicker__j78My {
+/* :global() required: this file is @import'ed into the .module.scss; without it the vars scope to the module hash and shadow the editor's root overrides. */
+.timePicker {
   --labelFont: var(
     --wst-paragraph-2-font,
     normal normal normal 14px/1.4em madefor-text,
@@ -13,10 +14,7 @@
 
   --label-spacing: 6px;
 
-  --segment-focus-background-color: var(--wst-links-and-actions-color, #116dff);
-  --segment-focus-text-color: var(--wst-primary-background-color, #ffffff);
-
-  --accent-color: var(--segment-focus-background-color);
+  --accent-color: var(--wst-links-and-actions-color, #116dff);
 
   --tooltip-font: var(
     --wst-paragraph-2-font,
@@ -28,6 +26,16 @@
   );
   --tooltip-text-color: var(--wst-primary-background-color, #ffffff);
   --tooltip-background-color: var(--wst-paragraph-2-color, #2b2b2b);
+
+  --descriptionFont: var(
+    --wst-paragraph-3-font,
+    normal normal normal 12px/1.4em madefor-text,
+    helveticaneuew01-45ligh,
+    helveticaneuew02-45ligh,
+    helveticaneuew10-45ligh,
+    sans-serif
+  );
+  --description-text-color: var(--wst-paragraph-2-color, #6b6b6b);
 }
 .root__dzkbY {
   box-sizing: border-box;
@@ -141,8 +149,8 @@
   white-space: nowrap;
 }
 .description__ePprf {
-  font-size: 12px;
-  opacity: 0.7;
+  font: var(--descriptionFont);
+  color: var(--description-text-color);
 }
 .errorMessage__zxbOJ {
   margin-top: 4px;
@@ -163,9 +171,9 @@
 .segment__OtazP[data-placeholder] {
   color: color-mix(in srgb, currentColor 45%, transparent);
 }
-.segment__OtazP[data-focused] {
-  background: var(--segment-focus-background-color, #116dff);
-  color: var(--segment-focus-text-color, #ffffff);
+.segment__OtazP[data-focused], .segment__OtazP.timePicker__segment--focus {
+  background: var(--wst-links-and-actions-color, #116dff);
+  color: var(--wst-primary-background-color, #ffffff);
 }
 .clearButton__Bto7s {
   flex: none;

package/dist/site/components/TimePicker/manifest.js

@@ -15,16 +15,6 @@ const designState = (s) => withSpec({
   className: s.className
 });
 const cssCustomProperties = {
-  "segment-focus-background-color": {
-    // Keep `color` (not `backgroundColor`): Dev Center enrichment rejects
-    // changing a released cssCustomProperty's type (this was published as color).
-    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-    displayName: DisplayNames.root.cssCustomProperties.segmentFocusBackgroundColor
-  },
-  "segment-focus-text-color": {
-    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-    displayName: DisplayNames.root.cssCustomProperties.segmentFocusTextColor
-  },
   "label-spacing": {
     cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
     displayName: DisplayNames.root.cssCustomProperties.labelSpacing,
@@ -95,6 +85,27 @@ const manifest = {
             disabled: designState(DesignStates.timeInput.disabled)
           }
         }
+      },
+      description: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.description,
+          selector: getSelector(selectors.description),
+          behaviors: { selectable: false },
+          cssProperties: { font: {}, color: {} }
+        }
+      },
+      segment: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.segment,
+          selector: getSelector(selectors.segment),
+          behaviors: { selectable: false },
+          cssProperties: { background: {}, color: {} },
+          states: {
+            focus: designState(DesignStates.segment.focus)
+          }
+        }
       }
     },
     data: {

package/dist/site/components/chunks/constants2.js

@@ -38,12 +38,12 @@ const DisplayNames = {
     },
     elements: {
       label: "Label",
-      timeInput: "Time input"
+      timeInput: "Time input",
+      description: "Helper text",
+      segment: "Segment"
     },
     cssCustomProperties: {
-      labelSpacing: "Label spacing",
-      segmentFocusBackgroundColor: "Focused segment background",
-      segmentFocusTextColor: "Focused segment text color"
+      labelSpacing: "Label spacing"
     }
   }
 };
@@ -79,6 +79,12 @@ const DesignStates = {
       displayName: DisplayNames.root.designStates.disabled,
       className: "timePicker__group--disabled"
     }
+  },
+  segment: {
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "timePicker__segment--focus"
+    }
   }
 };
 const EMPTY_VALUE = "";
@@ -105,6 +111,8 @@ const selectors = {
   label: "timePicker__label",
   requiredIndicator: "timePicker__required-indicator",
   group: "timePicker__group",
+  description: "timePicker__description",
+  segment: "timePicker__segment",
   errorMessage: "timePicker__error-message"
 };
 const VALUE_MISSING_MESSAGE = "This field is required";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2418.0",
+  "version": "1.2420.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "2c7f8e41d9c5beb0aa71bf08876245cb60111c623a0ec1e982b6f0c2"
+  "falconPackageHash": "85190a52b976e7eff33a44b0e123e13f91258bc1f5511adb99448a57"
 }