### Node Component Migration Example

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example of migrating a Node component from NodeTpl.Node to DiagramNode.

```typescript
// Before
<NodeTpl.Node>
	<NodeTpl.NodeTitle>My Node</NodeTpl.NodeTitle>
</NodeTpl.Node>

// After
<DiagramNode>My Node</DiagramNode>
```

--------------------------------

### Port Component Migration Example

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example of migrating a Port component using createPort to DiagramPort.

```typescript
// Before
const MyPort = createPort<MyProps, MyPortProps>({
	// port configuration
});

// After
<DiagramPort />
```

--------------------------------

### Status Component Theming Example

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Provides an example of how to customize the Status component's warning variant using theme variables, specifically for text color and icon color, after the removal of the deprecated 'light' property.

```tsx
import { ThemeProvider, useTheme } from "styled-components";
import { createTheme } from "@com.mgmtp.a12.widgets/widgets-core/lib/theme/create-theme";

const customTheme = () => {
  	const statusConfigs: DeepPartial<StatusConfigType> = {
  		text: {
  			color: { warning: colors.text.color }
  		},
  		icon: {
  			color: { warning: colors.variant.warningColorDark }
  		}
  	};

  	return createTheme({
  		components: { status: statusConfigs }
  	});
};

<ThemeProvider theme={customTheme}>
  	<Status variant="warning" icon={<Icon>warning</Icon>}>
  		Warning
  	</Status>
</ThemeProvider>
```

--------------------------------

### TimeUtils Namespace Move

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example demonstrating the updated import path for the TimeUtils namespace.

```tsx
// BEFORE
import { TimeUtils } from "@com.mgmtp.a12.widgets/widgets-core/lib/common/main/utils";

// AFTER
import { TimeUtils } from "@com.mgmtp.a12.widgets/widgets-core/lib/common/main/date-time/time-utils";
```

--------------------------------

### Nested Imports vs Top-Level Imports

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example demonstrating the change from nested imports to top-level imports.

```typescript
// Before
import { Button } from "@com.mgmtp.a12.widgets/widgets-core/lib/button/index.js";

// After
import { Button } from "@com.mgmtp.a12.widgets/widgets-core";
```

--------------------------------

### Content Box: BASE_CONTENTBOX_DATA_ROLE Removal

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the replacement of `BASE_CONTENTBOX_DATA_ROLE` with `DataRoles.Contentbox`.

```tsx
// BEFORE
import { BASE_CONTENTBOX_CLASS_NAME } from "@com.mgmtp.a12.widgets/widgets-core/lib/contentbox/main/template/elements/config.js";

<div data-role={BASE_CONTENTBOX_DATA_ROLE} />;

// AFTER
import { DataRoles } from "@com.mgmtp.a12.widgets/widgets-core/lib/common/main/data-roles.js";

<div data-role={DataRoles.Contentbox} />;
```

--------------------------------

### Relation Node Migration

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the migration from relation-node module components to model-graph-diagram module components.

```typescript
// Before
import { NodeTpl, createPort, PortProps } from "@com.mgmtp.a12.widgets/widgets-core";

// After
import { DiagramNode, DiagramPort } from "@com.mgmtp.a12.widgets/widgets-core";
```

--------------------------------

### Interaction Hint Component Usage

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example demonstrating the 'before' and 'after' of using the InteractionHint component to replace browser tooltips with a look-alike Widgets's Tooltip for better accessibility.

```tsx
// BEFORE
import * as React from "react";

function ButtonExample(): React.ReactElement {
	return <input role="button" type="button" title="This is a submit button" value="Submit" />;
}

// AFTER
import * as React from "react";
import { InteractionHint } from "@com.mgmtp.a12.widgets/widgets-core/lib/interaction-hint/main/interaction-hint.view";

function ButtonExample(): React.ReactElement {
	const inputRef = React.useRef<HTMLInputElement | null>(null);

	return (
		<>
			<input role="button" type="button" value="Submit" ref={inputRef} />
			<InteractionHint referenceElementRef={inputRef} title="This is a submit button" />
		</>
	);
}

```

--------------------------------

### DatePicker Modifier Update

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the update to DatePicker modifiers, including new styles and class names.

```javascript
      // BEFORE
      <DatePicker
        modifiers={{ booked: bookedDays }}
      />

      // AFTER
      <DatePicker
        modifiers={{ booked: bookedDays }}
        modifiersStyles={{ booked: { border: "2px solid currentColor" } }}
        modifiersClassNames={{ booked: "booked-classname" }}
      />
```

--------------------------------

### Changed isRangeModifier to isRangeMatcher

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the change from `DateTimeUtils.isRangeModifier` to `DateTimeUtils.isRangeMatcher`.

```ts
import { DateTimeUtils } from "@com.mgmtp.a12.widgets/widgets-core/lib/common/main/utils";

// BEFORE
DateTimeUtils.isRangeModifier(value);

// AFTER
DateTimeUtils.isRangeMatcher(value);
```

--------------------------------

### Link Component Migration

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example illustrating the change in the Link component's API, introducing `linkAttributes` for HTML attributes.

```tsx
import { Link } from "@com.mgmtp.a12.widgets/widgets-core/lib/link/main/link/link.view";

// BEFORE
<Link disabled={true} />

// AFTER
<Link linkAttributes={{ "aria-disabled": "true" }} />
```

--------------------------------

### Master Detail Layout Migration

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the migration from the old Master Detail component API to the new one.

```tsx
import { MasterDetail } from "@com.mgmtp.a12.widgets/widgets-core/lib/layout/master-detail";

// BEFORE
<MasterDetail
  title="Master Detail Layout"
  minimized={minimizedViews}
  visibleViews={visibleViews}
  animation={{
    enabled: this.state.enableAnimation,
    animateSingleItem
  }}
  navigationElementId="navigation"
  onSelectMinimizedView={(view): void => {
    this.gotoView((view as any).view);
  }}
  viewSelectionPlaceholder="SELECT COMPONENT TO SHOW"
  onSizeChange={this.handleWindowSizeChanged}
/>

// AFTER
<MasterDetail
  title="Master Detail Layout"
  visibleViews={visibleViews}
  animation={{
    enabled: this.state.enableAnimation,
    animateSingleItem
  }}
  onSizeChange={this.handleWindowSizeChanged}
/>
```

--------------------------------

### Renamed initialMonth to defaultMonth

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the renaming of the `initialMonth` prop to `defaultMonth` for the DatePicker component.

```tsx
import { DatePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

// BEFORE
<DatePicker initialMonth={new Date()} />

// AFTER
<DatePicker defaultMonth={new Date()} />
```

--------------------------------

### Renamed onWeekClick to onWeekNumberClick

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the renaming of the `onWeekClick` prop to `onWeekNumberClick` for the DatePicker component.

```tsx
import { DatePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

const handleClick = (weekNumber: number, dates: Date[], e: React.MouseEvent): void => {
  // Your logic here.
}

// BEFORE
<DatePicker onWeekClick={handleClick} />

// AFTER
<DatePicker onWeekNumberClick={handleClick} />
```

--------------------------------

### React 18 Upgrade: Enabling React 18 Support

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Configuration example for enabling React 18 support via webpack's DefinePlugin.

```tsx
plugins: [
	webpack.DefinePlugin({
		A12_ENABLE_REACT_18_SUPPORT: false
	})
];
```

--------------------------------

### Renamed showWeekNumbers to showWeekNumber

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the renaming of the `showWeekNumbers` prop to `showWeekNumber` for the DatePicker component.

```tsx
import { DatePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

// BEFORE
<DatePicker showWeekNumbers={true} />

// AFTER
<DatePicker showWeekNumber={true} />
```

--------------------------------

### Popup Menu Accessibility Revert

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example of how to revert the popup menu to its previous design using PopupMenuConfigContext.

```tsx
<PopupMenuConfigContext.Provider value={{ enableA11YMobileDesign: false }}>...</PopupMenuConfigContext.Provider>
```

--------------------------------

### Action Content Box: Heading Elements Property Change

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example demonstrating the change in checking for the `headingElements` property from only null to both null and undefined.

```tsx
// BEFORE: Checking only for null
if (props.headingElements !== null) {
	// Render heading elements
	renderHeading(props.headingElements);
}

// AFTER: Checking for both null and undefined
if (props.headingElements !== null && props.headingElements !== undefined) {
	// Render heading elements
	renderHeading(props.headingElements);
}
```

--------------------------------

### File Upload onUploadAreaClick Migration

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the type change for the `onUploadAreaClick` property in the File Upload component.

```tsx
import { Checkbox } from "@com.mgmtp.a12.widgets/widgets-core/lib/input/checkbox";
import { DefaultFileUpload } from "@com.mgmtp.a12.widgets/widgets-core/lib/file-upload";

// BEFORE
const onUploadAreaClick = (): boolean | undefined => {
	// Your logic here.
};

<DefaultFileUpload id="click-event" label="With Click event" onUploadAreaClick={onUploadAreaClick} />;

// AFTER
const onUploadAreaClick = (): boolean | void => {
	// Your logic here
};

<DefaultFileUpload id="click-event" label="With Click event" onUploadAreaClick={onUploadAreaClick} />;
```

--------------------------------

### Collapsible Panel Icon Button Adjustment

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing how the Collapsible Panel adapts to changes in icon button theming.

```tsx
// BEFORE
<CollapsiblePanel
  addons={
  	<CollapsiblePanelElements.Addon>
  	  <Button

```

--------------------------------

### Renamed selectedDays to selected

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the renaming of the `selectedDays` prop to `selected` for the DatePicker component.

```tsx
import { DatePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

// BEFORE
<DatePicker selectedDays={[new Date()]} />

// AFTER
<DatePicker selected={[new Date()]} />
```

--------------------------------

### Table/Tree Table Drag and Drop Preview Layer

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example demonstrating the change in rendering for the dragging row during drag and drop events in Table and Tree Table components.

```tsx
// BEFORE
<TableBody>
	// ... Few levels below
	<MyContextProvider value={myValue}>
		...
		<MyCustomBodyRow></MyCustomBodyRow>
	</MyContextProvider>
</TableBody>
```

```tsx
// AFTER
<MyContextProvider value={myValue}>
	<TableBody>
		...
		<MyCustomBodyRow></MyCustomBodyRow>
	</TableBody>
</MyContextProvider>
```

--------------------------------

### Renamed disabledDays to disabled

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the renaming of the `disabledDays` prop to `disabled` for the DatePicker component.

```tsx
import { DatePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

// BEFORE
<DatePicker disabledDays={[{ daysOfWeek: [0, 6] }]} />

// AFTER
<DatePicker disabled={[{ dayOfWeek: [0, 6] }]} />
```

--------------------------------

### Renamed firstDayOfWeek to weekStartsOn

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the renaming of the `firstDayOfWeek` prop to `weekStartsOn` for the DatePicker component.

```tsx
import { DatePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

// BEFORE
<DatePicker firstDayOfWeek={0} />

// AFTER
<DatePicker weekStartsOn={0} />
```

--------------------------------

### Time Picker Validation Migration

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example demonstrating the change in the Time Picker's validation callback from `onValidationError` to `onValidate`.

```tsx
import { useCallback } from "react";

import { TimePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/time-picker";

// BEFORE
const onValidationError = useCallback((value: string): void => {
	// Your logic here.
}, []);

<TimePicker onValidationError={onValidationError} />;

// AFTER
const onValidate: TimePickerProps["onValidate"] = useCallback(({ value, valid }) => {
	// Your logic here.
}, []);

<TimePicker onValidate={onValidate} />;
```

--------------------------------

### Migration of disabledDays to disabled for DateInput

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example showing the migration of `disabledDays` to `disabled` within the `datePickerProps` of the `DateInput` widget.

```tsx
import { DateInput as DateInputWidget } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

// BEFORE
<DateInput
  datePickerProps={{
    disabledDays: [{ daysOfWeek: [0, 6] }],
  }}
/>

// AFTER
<DateInput
  datePickerProps={{
    disabled: [{ dayOfWeek: [0, 6] }],
  }}
/>
```

--------------------------------

### React 18 Upgrade: Portal DOM Snapshot Test Markup

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example of the additional markup that may appear in the DOM where a portal is rendered due to React 18 compatibility changes.

```html
<div data-role="portal-placeholder"></div>
```

--------------------------------

### DateTimeUtils Migration to date-fns locale

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Example illustrating the change in how locales are handled with DateTimeUtils, now using date-fns locale objects.

```tsx
// BEFORE
import { DateTimeUtils } from "@com.mgmtp.a12.widgets/widgets-core/lib/common/main/utils";

const date = new Date();
const locale = "de";
const format = "DD/MM/YYYY";

DateTimeUtils.formatDateTime(date, locale, format);

// AFTER
import { DateTimeUtils } from "@com.mgmtp.a12.widgets/widgets-core/lib/common/main/date-time/date-utils";
import { de } from "date-fns/locale/de";

const date = new Date();
const format = "DD/MM/YYYY";

DateTimeUtils.formatDateTime(date, de, format);
```

--------------------------------

### Date Input Locale Configuration (Before and Now)

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Demonstrates the change in locale configuration for DateInput components, moving from direct prop passing to using DateTimeContext.Provider with date-fns.

```tsx
// BEFORE
<DateInput datePickerProps={{ locale: "de" }} />;

// NOW
import { de } from "date-fns/locale/de";

<DateTimeContext.Provider value={{ locale: de }}>
	<DateInput />
</DateTimeContext.Provider>;
```

--------------------------------

### Enable Interaction Hint

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

To enable the interaction hint, use the InteractionHintConfigProvider with enableInteractionHint set to true.

```tsx
import { InteractionHintConfigProvider } from "@com.mgmtp.a12.widgets/widgets-core/lib/interaction-hint/main/interaction-hint-context";

<InteractionHintConfigProvider enableInteractionHint>...</InteractionHintConfigProvider>;
```

--------------------------------

### Menu: mainMenu removed, useAs property introduced

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Illustrates the replacement of the 'mainMenu' property with the 'useAs' property for customizing Menu styles.

```tsx
import { FlyoutMenu } from "@com.mgmtp.a12.widgets/widgets-core/lib/menu";

// BEFORE
return <FlyoutMenu type="horizontal" items={items} className="-u-width-full" mainMenu />;

// AFTER
// Display the main menu
return <FlyoutMenu type="horizontal" items={items} className="-u-width-full" useAs="main" />;

// In case you want the menu to be displayed as Tab Navigation
return <FlyoutMenu type="horizontal" items={items} className="-u-width-full" useAs="tabNavigation" />;
```

--------------------------------

### Theming Customization: Interactive Tile Border Configuration

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Demonstrates the change in how border styles are configured for the Interactive Tile component, moving from a general 'border' key to specific 'primary.border' and 'secondary.border'.

```tsx
// BEFORE
import { ThemeProvider, useTheme } from "styled-components";
import { createTheme } from "@com.mgmtp.a12.widgets/widgets-core/lib/theme/create-theme";

const customTheme = () => {
  const interactiveTileConfigs: DeepPartial<InteractiveTileConfigType> = {
      border: "1px solid red",
      secondary: {
        border: "1px solid blue",
    }
  };

  return createTheme({ components: { interactiveTile: interactiveTileConfig } });
}

 <ThemeProvider theme={customTheme}>
   <InteractiveTile primary />
   <InteractiveTile secondary />
 </ThemeProvider>
```

```tsx
// AFTER
import { ThemeProvider, useTheme } from "styled-components";
import { createTheme } from "@com.mgmtp.a12.widgets/widgets-core/lib/theme/create-theme";

const customTheme = () => {
  const interactiveTileConfigs: DeepPartial<InteractiveTileConfigType> = {
      primary: {
        border: "1px solid red",
      },
      secondary: {
        border: "1px solid blue",
    }
  };

  return createTheme({ components: { interactiveTile: interactiveTileConfig } });
}

 <ThemeProvider theme={customTheme}>
   <InteractiveTile primary />
   <InteractiveTile secondary />
 </ThemeProvider>
```

--------------------------------

### Styled Components v5 vs v6 StyleSheetManager

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Illustrates the difference in using the StyleSheetManager component between styled-components v5 and v6, specifically regarding vendor prefix management.

```tsx
// In Styled Components v5, the <StyleSheetManager> component supported the `disableVendorPrefixes` property:
<StyleSheetManager disableVendorPrefixes>
```
```

```tsx
// In Styled Components v6:
// `disableVendorPrefixes` has been removed.
// Vendor prefixes are now disabled by default.
// To enable vendor prefixes, set `enableVendorPrefixes` to true in the `StyleSheetManager`.
<StyleSheetManager enableVendorPrefixes={true}>
```
```

--------------------------------

### Codemod for Nested Imports

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Command to run the codemod for updating nested imports to top-level imports.

```bash
npx @com.mgmtp.a12.widgets/widgets-codemod prefer-top-level-imports <your-source-directory-containing-ts-config-json-file>
```

--------------------------------

### Button Widget Interaction Hint DOM Difference

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Demonstrates the DOM difference for a Button Widget before and after the Interaction Hint enhancement, showing how the title property is now passed to aria-label.

```tsx
// BEFORE: `title` property's value was passed to `title` attribute.
<button type="button" title="This is a button" data-role="button">
  <span data-role="button-label">Default</span>
</button>

// NOW:
// - `title` attribute is set to empty.
// - `title` property's value is passed to `aria-label` attribute.
<button aria-label="Default, This is a button" title="" type="button" data-role="button">
  <span data-role="button-label">Default</span>
</button>

```

--------------------------------

### React 18 Upgrade: `withSizeDetector` HOC vs. New Hooks

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Comparison of the old `withSizeDetector` HOC usage with the new, simpler `useWindowSize` hook for responsive behavior detection.

```tsx
const AppFrameWithSizeDetect = withSizeDetector(ApplicationFrame);

const AppView = () => {
	const [windowSize, setWindowSize] = React.useState<SizeDetectorProps.Size>("lg");

	const handleWindowSizeChange = React.useCallback((breakPoint: SizeDetectorProps.BreakPoint) => {
		setWindowSize(breakPoint.size);
	}, []);

	return (
		<AppFrameWithSizeDetect window={true} onSizeChange={handleWindowSizeChange}>
			{windowSize}
		</AppFrameWithSizeDetect>
	);
};

```

```tsx
const AppView = () => {
	const { breakPoint } = useWindowSize();
	return <ApplicationFrame>{breakPoint.size}</ApplicationFrame>;
};

```

--------------------------------

### Button: Dark and Light button properties unified to invert

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Demonstrates the change from 'dark' and 'light' properties to 'invert' for styling buttons on dark backgrounds, and the introduction of 'withBackground' for rounded backgrounds.

```tsx
import { Button } from "@com.mgmtp.a12.widgets/widgets-core/lib/button";

// BEFORE
  // Dark button
  <Button
    icon={<Icon>get_app</Icon>}
    title="Download"
    dark
  />

  // Light button
  <Button
    icon={<Icon>close</Icon>}
    title="Close"
    light
  />

// AFTER
  // Dark button
  <Button
    icon={<Icon>get_app</Icon>}
    title="Download"
    invert
  />

  // Light button
  <Button
    icon={<Icon>close</Icon>}
    title="Close"
    invert
    withBackground
  />
```

--------------------------------

### Status Component Warning Icon Update

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Illustrates the recommended change for the warning icon in the Status component to improve contrast, using 'warning_amber' with an 'outlined' theme.

```tsx
// BEFORE
<Status variant="warning" icon={<Icon>warning</Icon>} />

// AFTER
<Status variant="warning" icon={<Icon iconTheme="outlined">warning_amber</Icon>} />
```

--------------------------------

### Interactive Counter Widget Interaction Hint DOM Difference

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Illustrates the DOM difference for an Interactive Counter Widget before and after the Interaction Hint enhancement, showing how the title property is now passed to HiddenText and aria-label.

```tsx
// BEFORE: `title` property's value was passed to `title` attribute.
<span title="This is an Interactive Counter" data-role="counter" tabindex="0">
  <span data-role="hidden-text">9 Entries</span>
  <span aria-hidden="true" role="presentation">
    <span>9</span>
  </span>
</span>

// NOW:
// - `role="button"` is added.
// - `title` attribute is removed.
// - `title` property's value is passed to the new added `HiddenText` (data-role="hidden-text").
<span data-role="counter" role="button" tabindex="0" >
  <span data-role="hidden-text">9 Entries</span>
    <span data-role="hidden-text">, This is an Interactive Counter</span>
    <span aria-hidden="true" role="presentation">
        <span>9</span>
    </span>
</span>

```

--------------------------------

### List: List.Divider removed, use divider prop on List.Item

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Shows the migration from using a separate List.Divider component to using the 'divider' prop on the List.Item component.

```tsx
import { List } from "@com.mgmtp.a12.widgets/widgets-core/lib/list";

// BEFORE
return (
	<List>
		<List.Item text="List Item" />
		<List.Item text="List Item 1" selected />
		<List.Item text="List Item 2" />
		<List.Divider />
		<List.Item text="List Item 3" />
	</List>
);

// AFTER
return (
	<List>
		<List.Item text="List Item" />
		<List.Item text="List Item 1" selected />
		<List.Item text="List Item 2" divider />
		<List.Item text="List Item 3" />
	</List>
);
```

--------------------------------

### Date Picker: Renamed from Datepicker to DatePicker

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Illustrates the renaming of the Datepicker component to DatePicker.

```tsx
// BEFORE
import { Datepicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";

// AFTER
import { DatePicker } from "@com.mgmtp.a12.widgets/widgets-core/lib/datepicker";
```

--------------------------------

### Layout Grid: LayoutGridContextType moved to LayoutGridProps

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Demonstrates how to access LayoutGridContextType after it has been moved into LayoutGridProps.

```tsx
import { useContext } from "react";

import { LayoutGrid, LayoutGridProps } from "@com.mgmtp.a12.widgets/widgets-core/lib/layout/layout-grid";

// BEFORE
const oldLayoutGridContext = useContext<LayoutGrid.LayoutGridContextType>();

// AFTER
const newLayoutGridContext = useContext<LayoutGridProps.LayoutGridContextType>();
```

--------------------------------

### Text Line Tpl Selection Suffix Change

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

The `selection` property on `TextLineStateless` has been removed. Use the new `SelectionSuffix` component instead for adding an arrow icon suffix.

```tsx
import { TextLineStateless } from "@com.mgmtp.a12.widgets/widgets-core/lib/input/text-line";
import { SelectionSuffix } from "@com.mgmtp.a12.widgets/widgets-core/lib/input/base/template/base.tpl.view";

// BEFORE
return <TextLineStateless selection />;

// AFTER
return <TextLineStateless suffixes={<SelectionSuffix />} />;
```

--------------------------------

### Button: Outline secondary button change

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Shows the change in styling for outline secondary buttons from 'outline secondary' to 'invert secondary'.

```tsx
import { Button } from "@com.mgmtp.a12.widgets/widgets-core/lib/button";

// BEFORE
<Button
  icon={<Icon>close</Icon>}
  title="Close"
  outline
  secondary
/>

// AFTER
<Button
  icon={<Icon>close</Icon>}
  title="Close"
  invert
  secondary
/>
```

--------------------------------

### Disable Interaction Hint

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

To disable the interaction hint, use the InteractionHintConfigProvider with enableInteractionHint set to false. This will ensure that only the default browser tooltip is shown for elements with a title attribute.

```tsx
import { InteractionHintConfigProvider } from "@com.mgmtp.a12.widgets/widgets-core/lib/interaction-hint/main/interaction-hint-context";

<InteractionHintConfigProvider enableInteractionHint={false}>...</InteractionHintConfigProvider>;
```

--------------------------------

### Applying shouldForwardProp in StyleSheetManager

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Shows how to apply the shouldForwardProp function from widgets-core within the StyleSheetManager for filtering props in styled-components v6.

```tsx
import { shouldForwardProp } from "@com.mgmtp.a12.widgets/widgets-core/lib/common/main/should-forward-prop";

// ...

<StyleSheetManager shouldForwardProp={shouldForwardProp}>
```
```

--------------------------------

### React 18 Upgrade: `react-virtualized` Dependency Change

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Illustrates the change in importing `react-virtualized` components, switching from a forked version to the original.

```tsx
// BEFORE
import { InfiniteLoader, List as ReactVirtualizedList } from "@com.mgmtp.a12.widgets/react-virtualized-fork";

// AFTER
import { InfiniteLoader, List as ReactVirtualizedList } from "react-virtualized";
```

--------------------------------

### CollapsiblePanel Addon Button Invert Change

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

Demonstrates the change in how the 'invert' property affects the button within the CollapsiblePanel addon. Previously, 'invert' was applied in all themes, but now it's conditional based on the theme.

```tsx
// BEFORE
<CollapsiblePanel
  addons={
  	<CollapsiblePanelElements.Addon>
  	  <Button
          invert // inverted button in all themes
          icon={<Icon>get_app</Icon>}
        />
      </CollapsiblePanelElements.Addon>
  }
>
  Content
</CollapsiblePanel>

// AFTER
<CollapsiblePanel
  addons={
  	<CollapsiblePanelElements.Addon>
  	  <Button
          invert={isDefaultTheme} // inverted button only in the default theme. In flat theme, it is a normal button
          icon={<Icon>get_app</Icon>}
        />
      </CollapsiblePanelElements.Addon>
  }
>
  Content
</CollapsiblePanel>
```

--------------------------------

### ContentBox tile property deprecation

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

The `tile` property of `ContentBox` has been deprecated. Use the `Tile` widget instead.

```tsx
import { ContentBox, Tile } from "@com.mgmtp.a12.widgets/widgets-core/lib/contentbox";

// BEFORE
return <ContentBox tile>{props.children}</ContentBox>;

// AFTER
return <Tile>{props.children}</Tile>;
```

--------------------------------

### Column Width Type Change

Source: https://github.com/mgm-tp/a12-widgets/blob/main/new-showcase/src/docs/migration/migration-notes.md

The `Column.Width` type has changed from a union of specific numbers (0.1 to 4.0) to a general `number` type that accepts any positive number up to one decimal place.

```typescript
// BEFORE
type Width =
	| 0.1
	| 0.2
	| 0.3
	| 0.4
	| 0.5
	| 0.6
	| 0.7
	| 0.8
	| 0.9
	| 1
	| 1.1
	| 1.2
	| 1.3
	| 1.4
	| 1.5
	| 1.6
	| 1.7
	| 1.8
	| 1.9
	| 2
	| 2.1
	| 2.2
	| 2.3
	| 2.4
	| 2.5
	| 2.6
	| 2.7
	| 2.8
	| 2.9
	| 3
	| 3.1
	| 3.2
	| 3.3
	| 3.4
	| 3.5
	| 3.6
	| 3.7
	| 3.8
	| 3.9
	| 4;

// AFTER
type Width = number;
```