🔖Release eds-core-react@0.37.0 (#3403)

* 🔖Release eds-core-react@0.37.0 * add new dependency list * Hotfix: Datepicker/dRangePicker: helper icon size * update expected release date * 📝 TextField docs: added note about datepicker * 📝 labs Datepicker: added note about new picker * 🚑️fix cyclical dependencies * 🚑️ DateRangeField: removed react default import * minor fix date time story
equinor · Apr 24, 2024 · a5ec72d · a5ec72d
1 parent 6662c26
commit a5ec72d
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 19 deletions.
diff --git a/packages/eds-core-react/CHANGELOG.md b/packages/eds-core-react/CHANGELOG.md
@@ -5,6 +5,32 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.37.0] - 2024-04-24
+
+### Added
+
+- ✨ New components: `Datepicker` and `DateRangePicker` by @yusijs in https://github.com/equinor/design-system/pull/3387
+- ➕ New dependencies
+  - `react-aria`
+  - `@react-aria/utils`
+  - `@react-stately/calendar`
+  - `@react-stately/datepicker`
+  - `@react-types/shared`
+  - `@internationalized/date`
+
+### Changed
+
+- 🏷️ `Label`: change "meta" field type to `ReactNode` by @oddvernes in https://github.com/equinor/design-system/pull/3341
+- 🚸 `Autocomplete`: show "no options" on focus when `options` is empty by @oddvernes in https://github.com/equinor/design-system/pull/3399
+- 💄 `Menu`: focus-ring changed from :focus to :focus-visible by @oddvernes in https://github.com/equinor/design-system/pull/3396
+
+### Fixed
+
+- 🐛 `TextArea`/`TextField`: Fixed scrollbar being inaccessible when `inputIcon` is present by @oddvernes in https://github.com/equinor/design-system/pull/3378
+- 🐛 `TextField`: Dynamically update padding when `inputIcon` changes by @torleifhalseth in https://github.com/equinor/design-system/pull/3380
+- 🐛 `Button`: fixed misaligned clickbounds on icon/ghost icon variants by @oddvernes in https://github.com/equinor/design-system/pull/3397
+- 🔥 `Tabs`: Remove invalid props from `TabListProps` type by @oddvernes in https://github.com/equinor/design-system/pull/3401
+
 ## [0.36.1] - 2024-03-01
 
 ### Changed

diff --git a/packages/eds-core-react/package.json b/packages/eds-core-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.36.1",
+  "version": "0.37.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"

diff --git a/packages/eds-core-react/src/components/Datepicker/DatePicker.stories.tsx b/packages/eds-core-react/src/components/Datepicker/DatePicker.stories.tsx
@@ -76,7 +76,7 @@ export const DateTime: StoryFn = () => {
       value={val}
       onChange={(v) => {
         setValue(v)
-        action('onChange')(v.toISOString())
+        action('onChange')(v?.toISOString())
       }}
     />
   )

diff --git a/packages/eds-core-react/src/components/Datepicker/DatePicker.tsx b/packages/eds-core-react/src/components/Datepicker/DatePicker.tsx
@@ -129,7 +129,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       ? {
           text: pickerState.displayValidation.validationErrors.join('\n'),
           color: tokens.colors.interactive.warning__text.rgba,
-          icon: <Icon data={warning_outlined} />,
+          icon: <Icon size={16} data={warning_outlined} />,
         }
       : undefined
 

diff --git a/packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx b/packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx
@@ -121,7 +121,7 @@ export const DateRangePicker = forwardRef(
       ? {
           text: state.displayValidation.validationErrors.join('\n'),
           color: tokens.colors.interactive.warning__text.rgba,
-          icon: <Icon data={warning_outlined} />,
+          icon: <Icon size={16} data={warning_outlined} />,
         }
       : undefined
 

diff --git a/packages/eds-core-react/src/components/Datepicker/calendars/CalendarCell.tsx b/packages/eds-core-react/src/components/Datepicker/calendars/CalendarCell.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-import { Typography, useEds } from '../../../index'
+import { Typography } from '../../Typography'
+import { useEds } from '../../EdsProvider'
 import { tokens } from '@equinor/eds-tokens'
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar'
 import { CalendarDate } from '@internationalized/date'
@@ -46,7 +47,7 @@ const StyledCell = styled(Typography)<{
   ${({ $disabled }) =>
     $disabled &&
     `
-    
+
     color: ${tokens.colors.interactive.disabled__text.rgba};
     &:hover {
       background-color: transparent;

diff --git a/packages/eds-core-react/src/components/Datepicker/calendars/CalendarHeader.tsx b/packages/eds-core-react/src/components/Datepicker/calendars/CalendarHeader.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar'
-import { Button, Icon } from '../../../index'
+import { Button } from '../../Button'
+import { Icon } from '../../Icon'
 import {
   chevron_down,
   chevron_left,

diff --git a/packages/eds-core-react/src/components/Datepicker/fields/DateRangeField.tsx b/packages/eds-core-react/src/components/Datepicker/fields/DateRangeField.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import { forwardRef, useRef } from 'react'
 import { InputProps } from '../../Input'
 import { InputFieldWrapper } from './FieldWrapper'
 import { AriaDatePickerProps, DateValue } from 'react-aria'

diff --git a/packages/eds-core-react/src/components/Datepicker/fields/FieldWrapper.tsx b/packages/eds-core-react/src/components/Datepicker/fields/FieldWrapper.tsx
@@ -8,12 +8,9 @@ import {
   RefObject,
   useEffect,
 } from 'react'
-import {
-  InputWrapper,
-  InputWrapperProps,
-  Popover,
-  useEds,
-} from '../../../index'
+import { InputWrapper, InputWrapperProps } from '../../InputWrapper'
+import { Popover } from '../../Popover'
+import { useEds } from '../../EdsProvider'
 import { GroupDOMAttributes } from '@react-types/shared'
 import { filterDOMProps } from '@react-aria/utils'
 
@@ -60,7 +57,7 @@ const StyledInputFieldWrapper = styled.div<{
     outline: 2px solid
       ${tokens.colors.interactive.primary__resting.rgba};
   }
-  
+
   ${
     !$disabled &&
     `&:not(:focus-within) {
@@ -79,7 +76,7 @@ const StyledInputFieldWrapper = styled.div<{
       outline: none;`
     )
   }}
-  
+
   color: ${(p) => getVariantText(p.$variant)};
   cursor: default;
 `

diff --git a/packages/eds-core-react/src/components/TextField/TextField.docs.mdx b/packages/eds-core-react/src/components/TextField/TextField.docs.mdx
@@ -84,10 +84,12 @@ Units are used for single line text field.
 <Canvas of={ComponentStories.WithIcons} />
 
 ### Date and time
+**Note:** For a more feature rich datepicker please use our [Datepicker](../?path=/docs/inputs-dates-datepicker--docs) and [DateRangePicker](../?path=/docs/inputs-dates-daterangepicker--docs) components.
 
-Textfield can be used with the native `type` prop which allows the usage of `"date"`/`"time"`/`"datetime-local"` to create accessible date/timepickers.
+Textfield can be used with the native `type` prop which allows the usage of `"date"`/`"time"`/`"datetime-local"` to display the browsers built in date/timepickers.
 Note that icon should not be used here, as browser implement this input in different ways and some, such as Chrome, add their own icons inside the input.
 
+
 <Canvas of={ComponentStories.Datepicker} />
 
 ### Variants

diff --git a/packages/eds-lab-react/src/components/DatePicker/DatePicker.stories.tsx b/packages/eds-lab-react/src/components/DatePicker/DatePicker.stories.tsx
@@ -227,7 +227,7 @@ export const DatePickerWithCustomHeader: StoryObj<DatePickerProps> = {
 }
 
 const meta: Meta<typeof DatePicker> = {
-  title: 'Components/DatePicker',
+  title: 'Components/⚠️ DatePicker',
   component: DatePicker,
   parameters: {
     docs: {
@@ -236,7 +236,7 @@ const meta: Meta<typeof DatePicker> = {
       },
       description: {
         component:
-          "The date picker is a community contributed component based around `react-datepicker`. It opens an overlaying interactive calendar that allows the user to select a date. If a date is chosen, this is reflected in the input field. Under some circumstances `Datepicker` is missing it's styles. A workaround is to import the css explicitly: `import 'react-datepicker/dist/react-datepicker.css';`",
+          "⚠️ **`@equinor/eds-core-react` now has new `Datepicker` and `DateRangePicker` components which replaces the need for this. Please use those instead.** <br>The date picker is a community contributed component based around `react-datepicker`. It opens an overlaying interactive calendar that allows the user to select a date. If a date is chosen, this is reflected in the input field. Under some circumstances `Datepicker` is missing it's styles. A workaround is to import the css explicitly: `import 'react-datepicker/dist/react-datepicker.css';`",
       },
     },
   },