@pingux/astro 2.164.0 → 2.164.1-alpha.0

package/lib/components/TimeField/TimeField.styles.js

@@ -32,7 +32,7 @@ var inputField = _objectSpread(_objectSpread({}, input), {}, {
 var segment = {
   '&:focus-visible': {
     outline: '1px solid',
-    outlineColor: 'active',
+    outlineColor: 'focus',
     borderRadius: 4
   }
 };

package/lib/components/TimeField/TimeSegment.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import React, { useCallback, useRef } from 'react';
 import { useFocusManager } from 'react-aria';
 import { useDateSegment } from '@react-aria/datepicker';
@@ -43,6 +44,6 @@ var TimeSegment = function TimeSegment(props) {
     ref: ref,
     variant: "forms.timeField.segment",
     onKeyUp: handleKeyEvents
-  }), text);
+  }), _trimInstanceProperty(text).call(text));
 };
 export default TimeSegment;

package/lib/components/TimeField/stories/OnyxTimeField.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, TimeField } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var OnyxTimeField = function OnyxTimeField() {
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    p: "md"
+  }, ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default"
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    defaultValue: "12:30",
+    hourCycle: 12,
+    granularity: "second"
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    isDisabled: true
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    isReadOnly: true
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    isRequired: true,
+    label: "Lorem Ipsum"
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    defaultValue: "12:30",
+    isInvalid: true
+  }));
+};
+export default OnyxTimeField;

package/lib/components/TimeField/stories/TimeFieldOnyx.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxTheme } from '../../..';
+import OnyxTimeField from './OnyxTimeField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Onyx TimeField'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxTheme
+  }, ___EmotionJSX(OnyxTimeField, null));
+};

package/lib/components/TimeField/stories/TimeFieldOnyxDark.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxDarkTheme } from '../../..';
+import OnyxTimeField from './OnyxTimeField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Onyx Dark TimeField'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxDarkTheme
+  }, ___EmotionJSX(OnyxTimeField, null));
+};

package/lib/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -35,6 +35,7 @@ export var checkbox = {
   color: 'text.primary'
 };
 var label = {
+  color: 'gray-100',
   radioGroup: {
     color: 'white'
   },

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

package/lib/styles/themes/next-gen/forms.js

@@ -92,6 +92,39 @@ export var radio = {
     }
   }
 };
+export var timeField = {
+  inputField: _objectSpread(_objectSpread({}, input), {}, {
+    color: 'font.base',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: 'body',
+    minWidth: '105px',
+    '&:focus-within:not(.is-read-only)': {
+      borderColor: 'focus',
+      outline: '1px solid',
+      outlineColor: 'focus',
+      outlineOffset: '0px'
+    },
+    '&.is-read-only': {
+      border: '1px solid',
+      borderColor: 'border.input',
+      backgroundColor: 'disabled'
+    },
+    '&.is-disabled': {
+      opacity: 1,
+      border: '1px solid',
+      borderColor: 'border.input',
+      backgroundColor: 'disabled'
+    }
+  }),
+  segment: {
+    px: '2px',
+    textTransform: 'uppercase',
+    '&:empty': {
+      px: 0
+    }
+  }
+};
 export default {
   input: input,
   label: label,
@@ -101,5 +134,6 @@ export default {
   radio: radio,
   search: search,
   "switch": switchable,
-  numberField: numberField
+  numberField: numberField,
+  timeField: timeField
 };