From a5ec72d5f4f83670edeccf748ba7d25a780800c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= Date: Wed, 24 Apr 2024 15:19:39 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=96Release=20eds-core-react@0.37.0=20(?= =?UTF-8?q?#3403)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * πŸ”–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 --- packages/eds-core-react/CHANGELOG.md | 26 +++++++++++++++++++ packages/eds-core-react/package.json | 2 +- .../Datepicker/DatePicker.stories.tsx | 2 +- .../src/components/Datepicker/DatePicker.tsx | 2 +- .../components/Datepicker/DateRangePicker.tsx | 2 +- .../Datepicker/calendars/CalendarCell.tsx | 5 ++-- .../Datepicker/calendars/CalendarHeader.tsx | 3 ++- .../Datepicker/fields/DateRangeField.tsx | 2 +- .../Datepicker/fields/FieldWrapper.tsx | 13 ++++------ .../components/TextField/TextField.docs.mdx | 4 ++- .../DatePicker/DatePicker.stories.tsx | 4 +-- 11 files changed, 46 insertions(+), 19 deletions(-) diff --git a/packages/eds-core-react/CHANGELOG.md b/packages/eds-core-react/CHANGELOG.md index f7cb215c14..f2a05a16c8 100644 --- 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 index 9b7653596d..a88c19ae57 100644 --- 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 index 4e787bfb93..a8e458dada 100644 --- 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 index c1d0436cce..60feea4351 100644 --- 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( ? { text: pickerState.displayValidation.validationErrors.join('\n'), color: tokens.colors.interactive.warning__text.rgba, - icon: , + icon: , } : undefined diff --git a/packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx b/packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx index 682ccf14ac..1eeec9f095 100644 --- 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: , } : 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 index aa23c811d7..2416dae949 100644 --- 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 index 4949e411d3..478d740be6 100644 --- 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 index 8299ff4c4e..f74e312b64 100644 --- 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 index 448f3b7348..855dcd4b5e 100644 --- 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 index a8531dfa98..4ee7fc629c 100644 --- 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. ### 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. + ### 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 index 0fbafcdcb9..a6c43bd0e3 100644 --- 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 = { } const meta: Meta = { - title: 'Components/DatePicker', + title: 'Components/⚠️ DatePicker', component: DatePicker, parameters: { docs: { @@ -236,7 +236,7 @@ const meta: Meta = { }, 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.**
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';`", }, }, },