@jobber/components 8.23.0 → 8.23.1-JOB-175910-23de950.7

package/dist/FormFieldWrapper-cjs.js

@@ -11,7 +11,7 @@ var Text = require('./Text-cjs.js');
 var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
 var InputValidation = require('./InputValidation-cjs.js');
 
-var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","small":"Sw5O4I0lMJg-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -95,7 +95,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
         [formFieldStyles.disabled]: disabled,
         [formFieldStyles.maxLength]: maxLength,
-        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && value === "",
     });
     const containerClasses = classnames(formFieldStyles.container, {
         [formFieldStyles.inline]: inline,

package/dist/FormFieldWrapper-es.js

@@ -9,7 +9,7 @@ import { T as Text } from './Text-es.js';
 import { u as useFormFieldFocus } from './useFormFieldFocus-es.js';
 import { I as InputValidation } from './InputValidation-es.js';
 
-var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","small":"Sw5O4I0lMJg-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -93,7 +93,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
         [formFieldStyles.disabled]: disabled,
         [formFieldStyles.maxLength]: maxLength,
-        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && value === "",
     });
     const containerClasses = classnames(formFieldStyles.container, {
         [formFieldStyles.inline]: inline,

package/dist/docs/InputTime/InputTime.md

@@ -29,6 +29,14 @@ number automatically fills in the rest of the time. For example, typing `2` will
 fill in `2:00 PM` and typing `1` waits for a few milliseconds in case the user
 wants to type `10`, `11`, or `12`.
 
+## Sizes and the placeholder
+
+Consistent with other inputs, `size="small"` does not show the floating mini
+label. The placeholder appears while the field is empty and unfocused, and is
+hidden while the field is being edited or has a value, keeping the field at its
+small height throughout. The default and `large` sizes float the placeholder up
+as a mini label while editing or once a value is set.
+
 
 ## Props
 

package/dist/styles.css

@@ -1425,7 +1425,10 @@
   -webkit-text-fill-color: var(--field--background-color);
 }
 
-._0pmqVa2zSE4-:not(.Tz9LK9ABKMk-):focus-within,
+/* Small fields don't grow into the mini-label state; their placeholder
+  is hidden instead (see the .small label rules below) */
+
+._0pmqVa2zSE4-:not(.Tz9LK9ABKMk-):not(.Sw5O4I0lMJg-):focus-within,
 .F1t76G6bDKo- {
   --field--placeholder-color: var(--color-text--secondary);
   --field--placeholder-offset: var(--space-smallest);
@@ -1737,7 +1740,10 @@
   background-color: var(--field--background-color);
 }
 
-._0pmqVa2zSE4-.Sw5O4I0lMJg-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
+/* An empty focused time input shows the native --:-- segments, so small
+  fields hide the placeholder rather than float it as a mini label */
+
+._0pmqVa2zSE4-.Sw5O4I0lMJg-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
   display: none;
 }
 
@@ -1746,7 +1752,7 @@
 /* stylelint-disable-next-line no-descending-specificity */
 
 ._9tjyT9QUtP8-.F1t76G6bDKo- .Dgk00tzlODA-,
-._0pmqVa2zSE4-._9tjyT9QUtP8-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
+._0pmqVa2zSE4-._9tjyT9QUtP8-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
   padding-top: 8px;
   padding-top: var(--space-small);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.23.0",
+  "version": "8.23.1-JOB-175910-23de950.7+23de9504",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "24617d52a3a75075486510f029fbff1e0389306c"
+  "gitHead": "23de95043a80584ff5a8bc1837db160272352eba"
 }