@atlaskit/date-label 0.1.0 → 1.0.1

package/CHANGELOG.md

@@ -1 +1,33 @@
 # @atlaskit/date-label
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies

package/constellation/date-label-dropdown-trigger/code.mdx

@@ -1,7 +1,8 @@
 ---
 order: 1
 title: Date label dropdown trigger
-description: Date label dropdown trigger is an interactive date label that opens a dropdown for date selection.
+description:
+  Date label dropdown trigger is an interactive date label that opens a dropdown for date selection.
 props:
   packageName: '@atlaskit/date-label'
   exports:

package/constellation/date-label-dropdown-trigger/usage.mdx

@@ -57,20 +57,20 @@ Date label dropdown trigger should only open a dropdown to allow for switching b
 		image={{
 			url: dateLabelDropdownDo1Light,
 			urlDarkMode: dateLabelDropdownDo1Dark,
-			alt: 'Use date label dropdown trigger to open a dropdown for date selection.',
+			alt: 'Use to enable date selection.',
 		}}
 	>
-		Use date label dropdown trigger to open a dropdown for date selection.
+		Use to enable date selection.
 	</DoDont>
 	<DoDont
 		type="dont"
 		image={{
 			url: dateLabelDropdownDont1Light,
 			urlDarkMode: dateLabelDropdownDont1Dark,
-			alt: "Don't use date label dropdown trigger to open menus unrelated to date selection.",
+			alt: "Don't use to communicate other information, such as more information about the date.",
 		}}
 	>
-		Don't use date label dropdown trigger to open menus unrelated to date selection.
+		Don't use to communicate other information, such as more information about the date.
 	</DoDont>
 </DoDontGrid>
 
@@ -85,27 +85,27 @@ elements, such as when it appears alongside other buttons.
 		image={{
 			url: dateLabelDropdownDo2Light,
 			urlDarkMode: dateLabelDropdownDo2Dark,
-			alt: 'Use the spacious variant when the date label dropdown trigger appears alongside other buttons.',
+			alt: 'Use a spacious date label dropdown trigger alongside other buttons.',
 		}}
 	>
-		Use the spacious variant when the date label dropdown trigger appears alongside other buttons.
+		Use a spacious date label dropdown trigger alongside other buttons.
 	</DoDont>
 	<DoDont
 		type="dont"
 		image={{
 			url: dateLabelDropdownDont2Light,
 			urlDarkMode: dateLabelDropdownDont2Dark,
-			alt: "Don't use the default size alongside larger interactive elements.",
+			alt: "Don't use a default date label dropdown trigger alongside other buttons.",
 		}}
 	>
-		Don't use the default size alongside larger interactive elements.
+		Don't use a default date label dropdown trigger alongside other buttons.
 	</DoDont>
 </DoDontGrid>
 
 ### Use date time picker for date entry in forms
 
 Date label dropdown trigger is designed to sit alongside other labels like lozenge and tag. It is
-not a form input. For date entry in forms, use a date time picker.
+not a form input. For date entry in forms, use a [date time picker](/components/datetime-picker).
 
 <DoDontGrid>
 	<DoDont
@@ -113,20 +113,20 @@ not a form input. For date entry in forms, use a date time picker.
 		image={{
 			url: dateLabelDropdownDo3Light,
 			urlDarkMode: dateLabelDropdownDo3Dark,
-			alt: 'Use date label dropdown trigger alongside other labels in structured UI contexts.',
+			alt: 'Use date label dropdown trigger to display dates alongside other labels in a view.',
 		}}
 	>
-		Use date label dropdown trigger alongside other labels in structured UI contexts.
+		Use date label dropdown trigger to display dates alongside other labels in a view.
 	</DoDont>
 	<DoDont
 		type="dont"
 		image={{
 			url: dateLabelDropdownDont3Light,
 			urlDarkMode: dateLabelDropdownDont3Dark,
-			alt: "Don't use date label dropdown trigger as a form input for date entry.",
+			alt: "Don't use date label dropdown trigger for date entry in forms.",
 		}}
 	>
-		Don't use date label dropdown trigger as a form input for date entry.
+		Don't use date label dropdown trigger for date entry in forms.
 	</DoDont>
 </DoDontGrid>
 

package/date-label/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/date-label.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/date-label.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/date-label.d.ts"
 }

package/date-label-dropdown-trigger/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/date-label-dropdown-trigger.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/date-label-dropdown-trigger.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/date-label-dropdown-trigger.d.ts"
 }

package/date-label.docs.tsx

@@ -0,0 +1,85 @@
+import path from 'path';
+
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
+
+const documentation: StructuredContentSource = {
+	components: [
+		{
+			name: 'DateLabel',
+			description:
+				'A date label displays a date as a label, with an optional appearance to communicate a meaningful condition such as a due or overdue date.',
+			status: 'open-beta',
+			import: {
+				name: 'DateLabel',
+				package: '@atlaskit/date-label',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
+			},
+			usageGuidelines: [
+				'Use to display a date as a label on an object (for example a due date), not for entering or selecting a date.',
+				'Use the appearance to communicate a meaningful condition: neutral by default, warning for approaching dates, and danger for overdue or critical dates.',
+				'A leading icon is shown by default and is appearance-driven (calendar, warning, or danger). Set `hasIconBefore={false}` to hide it.',
+				'Use spacious sizing when the date label is displayed alongside buttons.',
+				'For entering or selecting a date in a form, use DatePicker from @atlaskit/datetime-picker instead.',
+			],
+			contentGuidelines: [
+				'Keep the date format concise and consistent with the surrounding experience.',
+				'Pair the appearance with a label that makes the condition clear; do not rely on color alone.',
+				'Use a single date value per label.',
+			],
+			accessibilityGuidelines: [
+				'Do not rely on color alone to convey a date’s condition; ensure the date text is meaningful on its own.',
+				'Ensure sufficient color contrast for the date text across all appearances.',
+				'Provide clear, descriptive text for screen readers.',
+			],
+			examples: [
+				{
+					name: 'Date label',
+					description: 'Basic date label example',
+					source: path.resolve(__dirname, './examples/0-basic.tsx'),
+				},
+			],
+			keywords: ['date', 'label', 'date label', 'due date', 'overdue', 'lozenge'],
+			categories: ['status-indicators'],
+		},
+		{
+			name: 'DateLabelDropdownTrigger',
+			description:
+				'Date label dropdown trigger displays a date as a label and enables changing the date through a menu or popup.',
+			status: 'open-beta',
+			import: {
+				name: 'DateLabelDropdownTrigger',
+				package: '@atlaskit/date-label',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
+			},
+			usageGuidelines: [
+				'Use to enable date selection—only open a dropdown or popup to allow changing the date.',
+				'Use spacious sizing when displayed alongside buttons.',
+				'Do not use to communicate other information about the date; use DateLabel instead.',
+				'Do not use for date entry in forms; use DatePicker from @atlaskit/datetime-picker instead.',
+			],
+			contentGuidelines: [
+				'Keep the date format concise and consistent with the surrounding experience.',
+				'Do not rely on color alone; pair the appearance with clear date text.',
+			],
+			accessibilityGuidelines: [
+				'Do not rely on color alone to convey a date’s condition; ensure the date text is meaningful on its own.',
+				'Ensure the trigger is operable by keyboard and exposes an accessible name.',
+			],
+			examples: [
+				{
+					name: 'Date label dropdown trigger',
+					description: 'DateLabelDropdownTrigger example',
+					source: path.resolve(__dirname, './examples/4-dropdown-trigger.tsx'),
+				},
+			],
+			keywords: ['date', 'label', 'dropdown', 'trigger', 'date label', 'menu', 'interactive'],
+			categories: ['status-indicators'],
+		},
+	],
+};
+
+export default documentation;

package/dist/types/entry-points/date-label-dropdown-trigger.d.ts

@@ -1,2 +1,2 @@
-export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';
+export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance, } from '../ui/date-label-dropdown-trigger/types';
 export { default } from '../ui/date-label-dropdown-trigger';

package/dist/types/entry-points/date-label.d.ts

@@ -1,4 +1,4 @@
 export type { DateLabelProps, DateLabelAppearance } from '../ui/date-label/types';
 export { default } from '../ui/date-label';
-export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';
+export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance, } from '../ui/date-label-dropdown-trigger/types';
 export { default as DateLabelDropdownTrigger } from '../ui/date-label-dropdown-trigger';

package/dist/types/entry-points/types.d.ts

@@ -1,2 +1,2 @@
 export type { DateLabelProps, DateLabelAppearance } from '../ui/date-label/types';
-export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';
+export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance, } from '../ui/date-label-dropdown-trigger/types';

package/package.json

@@ -1,4 +1,12 @@
 {
+	"name": "@atlaskit/date-label",
+	"version": "1.0.1",
+	"description": "Date label is a non-interactive label that displays a date and optionally, visually communicates its status.",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
 	"atlassian": {
 		"team": "Design System Team",
 		"website": {
@@ -21,24 +29,16 @@
 	"module": "dist/esm/entry-points/date-label.js",
 	"module:es2019": "dist/es2019/entry-points/date-label.js",
 	"types": "dist/types/entry-points/date-label.d.ts",
-	"typesVersions": {
-		">=4.5 <5.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/entry-points/date-label.d.ts"
-			]
-		}
-	},
 	"sideEffects": [
 		"*.compiled.css"
 	],
 	"atlaskit:src": "src/entry-points/date-label.tsx",
 	"dependencies": {
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/icon": "^35.4.0",
-		"@atlaskit/icon-lab": "^6.13.0",
-		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/icon": "^36.0.0",
+		"@atlaskit/icon-lab": "^7.1.0",
+		"@atlaskit/spinner": "^20.0.0",
+		"@atlaskit/tokens": "^15.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -48,7 +48,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/primitives": "^19.0.0",
+		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"react": "^19.0.0",
@@ -91,13 +91,5 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
-	},
-	"name": "@atlaskit/date-label",
-	"version": "0.1.0",
-	"description": "A Date label is a label that displays a date and optionally, visually communicates its status. And a Date label dropdown trigger is an interactive date label that opens a dropdown for date selection.",
-	"author": "Atlassian Pty Ltd",
-	"license": "Apache-2.0",
-	"publishConfig": {
-		"registry": "https://registry.npmjs.org/"
 	}
 }

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

package/dist/types-ts4.5/entry-points/date-label-dropdown-trigger.d.ts

@@ -1,2 +0,0 @@
-export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';
-export { default } from '../ui/date-label-dropdown-trigger';

package/dist/types-ts4.5/entry-points/date-label.d.ts

@@ -1,4 +0,0 @@
-export type { DateLabelProps, DateLabelAppearance } from '../ui/date-label/types';
-export { default } from '../ui/date-label';
-export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';
-export { default as DateLabelDropdownTrigger } from '../ui/date-label-dropdown-trigger';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1,2 +0,0 @@
-export type { DateLabelProps, DateLabelAppearance } from '../ui/date-label/types';
-export type { DateLabelDropdownTriggerProps, DateLabelDropdownTriggerAppearance } from '../ui/date-label-dropdown-trigger/types';

package/dist/types-ts4.5/ui/date-label/constants.d.ts

@@ -1 +0,0 @@
-export declare const DATE_LABEL_TEST_ID = "date-label";

package/dist/types-ts4.5/ui/date-label/index.d.ts

@@ -1,16 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { DateLabelProps } from './types';
-/**
- * __DateLabel__
- *
- * A date label is a compact label to display dates for quick recognition.
- * It supports three appearances: `neutral`, `warning`, and `danger`.
- *
- * - [Examples](https://atlassian.design/components/date-label/examples)
- * - [Code](https://atlassian.design/components/date-label/code)
- * - [Usage](https://atlassian.design/components/date-label/usage)
- */
-export default function DateLabel({ label, appearance, hasIconBefore, maxWidth, isSpacious, iconLabel, testId, }: DateLabelProps): JSX.Element;

package/dist/types-ts4.5/ui/date-label/types.d.ts

@@ -1,60 +0,0 @@
-export type DateLabelAppearance = 'neutral' | 'warning' | 'danger';
-export interface DateLabelProps {
-    /**
-     * The text content to display inside the date label.
-     */
-    label: string;
-    /**
-     * Controls the visual style of the date label.
-     * - `neutral` — default grey border style
-     * - `warning` — orange border, used for upcoming/near-due dates
-     * - `danger` — red border, used for overdue dates
-     *
-     * @default 'neutral'
-     */
-    appearance?: DateLabelAppearance;
-    /**
-     * When `true`, an icon is displayed before the label text.
-     * The icon shown depends on the `appearance`:
-     * - `neutral` → CalendarIcon
-     * - `warning` → ClockIcon
-     * - `danger` → WarningOutlineIcon
-     *
-     * @default true
-     */
-    hasIconBefore?: boolean;
-    /**
-     * The accessible label for the icon. This is passed to the icon's `label` prop
-     * and is read by screen readers to convey the icon's meaning.
-     *
-     * Defaults to a contextual string based on the `appearance`:
-     * - `neutral` → `'Calendar'`
-     * - `warning` → `'Warning'`
-     * - `danger` → `'Danger'`
-     *
-     * Set to `''` to mark the icon as decorative (when the label text alone is sufficient).
-     */
-    iconLabel?: string;
-    /**
-     * The maximum width of the date label. Accepts a number (treated as px) or
-     * a string (e.g. `'50%'`). When the label text exceeds this width it will be
-     * truncated with an ellipsis.
-     *
-     * @default 180
-     */
-    maxWidth?: number | string;
-    /**
-     * When `true`, increases the padding and height of the date label for use in
-     * more spacious layouts (e.g. forms or detail views). Sets the height to 32px
-     * and increases horizontal padding.
-     *
-     * @default false
-     */
-    isSpacious?: boolean;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-}

package/dist/types-ts4.5/ui/date-label-dropdown-trigger/index.d.ts

@@ -1,20 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { DateLabelDropdownTriggerProps } from './types';
-/**
- * __DateLabelDropdownTrigger__
- *
- * An interactive date label that acts as a dropdown trigger.
- * Renders as a `<button>` with hover, pressed, selected, and focus ring states,
- * and a chevron icon on the right to signal interactivity.
- *
- * Supports all three appearances (`neutral`, `warning`, `danger`),
- * the `isSpacious` variant, and `isSelected` for open/active dropdown state.
- *
- * - [Examples](https://atlassian.design/components/date-label/examples)
- * - [Code](https://atlassian.design/components/date-label/code)
- * - [Usage](https://atlassian.design/components/date-label/usage)
- */
-export default function DateLabelDropdownTrigger({ label, appearance, hasIconBefore, isSpacious, isSelected, isLoading, maxWidth, iconLabel, onClick, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-haspopup': ariaHaspopup, 'aria-label': ariaLabel, testId, }: DateLabelDropdownTriggerProps): JSX.Element;

package/dist/types-ts4.5/ui/date-label-dropdown-trigger/types.d.ts

@@ -1,95 +0,0 @@
-export type DateLabelDropdownTriggerAppearance = 'neutral' | 'warning' | 'danger';
-export interface DateLabelDropdownTriggerProps {
-    /**
-     * The text content to display inside the trigger (e.g. a formatted date string).
-     */
-    label: string;
-    /**
-     * Controls the visual style of the trigger.
-     * - `neutral` — default grey border style
-     * - `warning` — orange border, used for upcoming/near-due dates
-     * - `danger` — red border, used for overdue dates
-     *
-     * @default 'neutral'
-     */
-    appearance?: DateLabelDropdownTriggerAppearance;
-    /**
-     * When `true`, an icon is displayed before the label text.
-     * The icon shown depends on the `appearance`:
-     * - `neutral` → CalendarIcon
-     * - `warning` → ClockIcon
-     * - `danger` → WarningOutlineIcon
-     *
-     * @default true
-     */
-    hasIconBefore?: boolean;
-    /**
-     * When `true`, a spinner replaces the chevron icon and the trigger becomes non-interactive,
-     * indicating that an async operation is in progress (for example, saving a date selection).
-     *
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * The accessible label for the leading icon. This is passed to the icon's `label` prop
-     * and is read by screen readers to convey the icon's meaning.
-     *
-     * Defaults to a contextual string based on the `appearance`:
-     * - `neutral` → `'Calendar'`
-     * - `warning` → `'Warning'`
-     * - `danger` → `'Danger'`
-     *
-     * Set to `''` to mark the icon as decorative (when the label text alone is sufficient).
-     */
-    iconLabel?: string;
-    /**
-     * When `true`, increases the padding and height of the trigger to 32px
-     * and uses the body font size for more spacious layouts.
-     *
-     * @default false
-     */
-    isSpacious?: boolean;
-    /**
-     * The maximum width of the trigger. Accepts a number (treated as px) or
-     * a string (e.g. `'50%'`). Label text exceeding this width is truncated with an ellipsis.
-     *
-     * @default 200
-     */
-    maxWidth?: number | string;
-    /**
-     * When `true`, renders the trigger in a selected/active state using the pressed
-     * background colour for the current appearance. Use this when the associated
-     * dropdown is open or the date has been chosen.
-     *
-     * @default false
-     */
-    isSelected?: boolean;
-    /**
-     * Callback fired when the trigger button is clicked.
-     */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Identifies the popup element that this trigger controls.
-     * Should match the `id` of the popup content for screen readers.
-     */
-    'aria-controls'?: string;
-    /**
-     * Announces to assistive technology whether the popup is currently open.
-     */
-    'aria-expanded'?: boolean;
-    /**
-     * Informs assistive technology that this element triggers a popup.
-     */
-    'aria-haspopup'?: boolean | 'dialog';
-    /**
-     * Defines a string value that labels the trigger element for assistive technology.
-     * If not provided, the `label` text is used as the accessible name.
-     */
-    'aria-label'?: string;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-}