# Changelog

## 5.1.3

**Fixes**

- [IconButton] Remove `relative positioning` from the Wrapper so that IconButton can be inline with regular Buttons.
- [Messaging] Banner and Notification - Fix title header overlapping content on small screens.
- [Stepper] Fixed the padding property on the `input` variant of the Stepper component.

**Adding**

- [Button] Added `margin` prop to allow user to set a custom margin to the button in the case that the default margin is too restrictive.

## 5.1.2

**Changes**
[Package] Update PIE Theme version
[Listitem] added changes to handle onClick event

## 5.1.1

**Fixes**

- [DatePicker] Remove the unused `selector` file
- [Button] Fixed incorrect svg `fill` for primary variant.
- [Accordion] added `type="button"` to prevent form submission.
- [Button] Fixed incorrect svg `fill` for primary variant.

**Adding**

- [Button] Allowing the `fill` prop from Icon to be passed to the Icon section of the Button component.

**Changes**

### Toast

- Remove default `dismissAction` on `Toast`
- Remove default `primaryAction` on `ToastCompact`

## 5.1.0

**Changes**

- Move to new PIE Theme version, with new brand color
- [Modal] `isLoading` prop set to `false` as default

**Fixes**

- [Checkbox] `id` is being correctly passed down from CheckboxGroup to fix label select mismatch issue.
- [Stepper] Export `Stepper` component and its types properly into esm

### DatePicker

**Component**

- [BREAKING] The DatePicker is now a controlled component, the state will be handled from outside the component
- [BREAKING] The defaultRange prop has been replaced by selectedRange and now allows for DateRange | Date | null
- [BREAKING] The selectorsText prop has been replaced by defaultSelectorValues and all the hideSelectors props have been removed and null can just be passed the the desired defaultSelector value to hide a selector
- [BREAKING] The variant prop is now required
- [BREAKING] The Component
- [BREAKING] The DatePicker is now a controlled component, the state will be handled from outside the component
- [BREAKING] The `defaultRange` prop has been replaced by `selectedRange` and now allows for `DateRange | Date | null`
- [BREAKING] The `selectorsText` prop has been replaced by `defaultSelectorValues` and all the `hideSelectors` props have been removed and null can just be passed the the desired defaultSelector value to hide a selector
- [BREAKING] The `variant` prop is now required
- [BREAKING] The `selectors` prop has been renamed as `showSelectors`
- [BREAKING] The `label` prop has been removed
- Added the `customerSelectors` props
- The `startingDay` prop now allows for the `none` to be passed
- Improved accessibility, allowing for keyboard navigation of the component

**Testing**

- Added testing coverage to component

**Storybook**

- Examples story covering most of the customization to the DatePicker component
- Playground story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
- Currently there are no design docs for this component

## 5.0.5

**Adding**

- `data-testid` prop to Modal buttons
- `data-trackid` prop to Modal buttons

## 5.0.4

**Fixes**

- [Checkbox][checkboxgroup][RadioButton][radiobuttongroup] `onChange` prop type has been modified from `(value: string | number | boolean)` to `(event: ChangeEvent<HTMLInputElement>) => void`
- [TextArea] Render number of existing characters when component loads
- [TextField] Render number of existing characters when loads
- [TextArea] Add new testId suffix into character count area `${['data-testid']}-character-count`
- [TextArea] `/00` has been removed out of the character counter area if `maxChar` prop is not defined
- [TextField] `/00` has been removed out of the character counter area if `maxChar` prop is not defined
- [Button][dropdown][SearchableDropdown][textfield][TextArea][iconbutton][Link] Border property has been replaced to box-shadow on focus state which does not apply extra borders when user focus on it.

**Component**

- Add new unit tests to `TextArea` component
- Add new unit tests to `TextField` component

## 5.0.3

**Fixes**

- Exporting utils helpers
- Updating PIE Theme
- Fix Checkbox check prop
- Fix CheckboxGroup check prop in the options

## 5.0.2

**Fixes**

- Allowed data-testid to be passed down from `MessageProvider` to the corresponding `Toast` components.

## 5.0.1

**Fixes**

- The following components had their folder names renamed in the git file system using `git mv` fixing Storybook when a developer install this repository fresh: `Chip, DatePicker, DateView, IconButton, Listitem, Modal, Progressbar, SegmentedControl, SideSheet, Skeleton, Slider, Tabs, Tag`
- Move documentation files to its designated folders in favor of smaller bundle size.

**Breaking**

- `FileUploader` component has been deprecated in favor of `Uploader` component.

## 5.0.0

### Accordion

**Component**

- Re-created Accordion based on new designs and variants.
  - [https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/⚡️🧊--PIE-2.-0-Global---Light-🧊⚡️?node-id=876%3A1410](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.-0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=876%3A1410)
- Refactored Accordion to use a simple css-only transition.
  - Previous approach generated bugs in a few specific cases hiding content. We can improve this more later on if we decide we require better animation.
- Added accessibility elements to Accordion and made it compliant with a11y
  - [https://w3c.github.io/aria-practices/examples/accordion/accordion.html](https://w3c.github.io/aria-practices/examples/accordion/accordion.html)
  - [http://web-accessibility.carnegiemuseums.org/code/accordions/](http://web-accessibility.carnegiemuseums.org/code/accordions/)
- Added data-testid properties to all Accordion elements
  - Also created the `getTestOrTrackId` util for appending values to test ids.

**Storybook**

- Recreated Storybook stories to match our new guidelines, which are:
  - Overview Story that includes a Playground using Storybook's Controls. Controls are also named and have descriptions to explain the API.
  - Overview Docs that shows the most relevant content from the design docs.
  - Examples Folder that includes some examples of how to use the Component
- I decided to only generate one set of examples for now, we can add more later.

**Testing**

- Refactored testing of Accordions
- Added 100% test coverage to Accordion.
  - This is just a number though, some things could not be tested (like having the divider or not).

Improve Colors Story page

- Add color search for each page
- Alias pages show dark colors when on dark mode
- New property on Alias items to display the Global token it points to

---

### Banner

**Component**

- Created new Banner component based on the new Designs
  - [https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/⚡️🧊--PIE-2.-0-Global---Light-🧊⚡️?node-id=877%3A2984](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.-0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=877%3A2984)
- Added accessibility elements to Banner and made it compliant with a11y
  - [https://w3c.github.io/aria-practices/#alert](https://w3c.github.io/aria-practices/#alert)
- Added data-testid properties to all Banner elements

**Storybook**

- Created the Storybook for this component and slightly adjusted both this and Accordion to match the following.
  - Playground Story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
  - Overview Docs that shows the most relevant content from the design docs.

**Testing**

- Added 100% test coverage to Banner.
  - This is just a number though, some things could not be tested (like being compact or not).

---

### Breadcrumb

**Component**

- Created new Breadcrumb component based on the new Designs
  - [https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/⚡️🧊--PIE-2.-0-Global---Light-🧊⚡️?node-id=2425%3A1312](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.-0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=2425%3A1312)
- Added accessibility elements to Breadcrumb and made it compliant with a11y
  - [https://a11y-style-guide.com/style-guide/section-navigation.html](https://a11y-style-guide.com/style-guide/section-navigation.html)
- Added data-testid properties to all Breadcrumb elements

**Storybook**

- Created the Storybook for this component.
  - Playground Story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
  - Overview Docs that shows the most relevant content from the design docs.

**Testing**

- Added 100% test coverage to Breadcrumb.
  - This is just a number though, some things could not be tested (like being with Scrim enabled or not).

Update Spacing token

This PR update the spacing tokens to the newer version according to [this spreadsheet](https://docs.google.com/spreadsheets/d/1KRVJgMELOA-QkKuqNZh-9z4kpQe__diuRhjIRLxNR1Q/edit#gid=1188492957).

We added the tokens to the `theme` package, updated the `SpacingKeys` type and fix every usage of those tokens inside of PIE React.

---

### TextField

- New styling
- better targeted `data-testid`s
- improved structure and animations
- new `width` and `onSuffixClick` props alongside better defaults for props
- Improved documentation, examples, and playground

---

### Button

**Component**

- Updated Button based [on new Designs](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=727%3A0)
- Created `small-alt` size, only really used for the primary variant.
- **[BREAKING]** Deleted the `<InverseButton />` component, it is now just a variant (`inverse` and `inverse-ghost`)
- **[BREAKING]** Removed the `elementRef` property, now the Button just used the `React.forwardRef` approach.
- _[Note]: The Spinner styles when Loading are a bit weird because we need to update Spinner to the new designs first._

**Storybook**

- Adjusted the Stories for this Component
  - Playground Story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
  - Overview Docs that shows the most relevant content from the design docs.
- Examples will be done later, need to adjust some other components first (like Spinner).

**Testing**

- Adjusted testing to cover all variants.

---

## Stepper

### Component

- Component was created based on [new designs](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=14600%3A118645);

### Storybook

- All the use cases and styles were added to the documentation;

### The testing cases are covering:

- Render correctly with initial props (it checks if the minus button is disabled when the value minimum)
- Show error message
- Show optional text
- Disable the max button when the value is maximum

---

### Tag

The file structure of the Component has also been changed to follow the new file structure:

- Types are declared on a types.d.ts file
- Stories have been moved to a stories folder
- Tag.tsx has been renamed to index.tsx
- tag folder has been renamed Tag

---

### Spinner

**Component**

- Updated Spinner based [on new Designs](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=13245%3A73046)
- **[BREAKING]** Removed the `primary` variant, now it's just `brand`.

**Storybook**

- Adjusted the Stories for this Component
  - Playground Story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
  - Overview Docs that shows the most relevant content from the design docs.

**Testing**

- Created simple testing for rendering these components.

---

### Card

**Component**

- Updated Card based [on new Designs](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=742%3A326)
- **[BREAKING]** Removed padding from Cards, this might look weird if you were relying on it. A quick fix is to just wrap your children using the `<CardContent />` component.
- **[BREAKING]** Removed the `outline` prop, added `variants` for cards.
- Added `<CardContent />`, `<CardHeader />` and `<CardActions />` components.
- Added `interactive` variant to add `:hover`, `:active`, `:focus` and `:disabled` styles.

**Storybook**

- Adjusted the Stories for this Component
  - Playground Story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
  - This Component had no Design Documentation so I haven't created an Overview Doc.
- Created three set of examples for using Cards.

**Testing**

- Created very simple testing for rendering the Card and make sure it won't break.

### Misc

- Adjusted the imports for the `jest-extend-expect` to be done in the `test-utils` instead of every test file.

---

## Dropdown

### Component

- [BREAKING] Change the component name from `SelectField` to `Dropdown`
- Update Dropdown based on [new design](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=11135%3A133210)
- Added `width` prop
- Move icons color to consume alias values

### Storybook

- Examples story covering most of the customization to the `Dropdown` component
- Playground story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
- Overview story adding the most relevant content from the design docs.

### Misc

- Improvements to the global `StoryWrapper`

---

## Tooltip

This includes:

- Adding documentation based on designs.
- Adding `nonStaticWidth` functionality.
- Migrating to new storybook format.
- Updating the design to match PIE 2.0
- Fixing onBlur functionality
- Updating the file structure

---

## Skeleton

## Component

Component was created based on [new designs](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=876%3A1231);

---

## Toast

### Component

- [BREAKING] `ToastDefault` has been renamed to `Toast`
- Spacing changes such as padding and spacing between message and buttons
- Better support to dark mode
- Export enums for better consistency out of the box

### Storybook

- Overview story adding the most relevant content from the design docs.
- Examples story covering most of the customization to the Toast component

## Chip

#### Component

- Update Chip based on [new design](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A-PIE-2.0-Global-%E2%80%93-Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=733%3A1358)
- Remove `closeIcon` prop
- Change `onDelete` to `onRemove`

#### Storybook

- Examples story covering most of the customization to the `Chip` component
- Playground story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
- Overview story adding the most relevant content from the design docs.

### Misc

- Improvements to the global `DosDonts` component

## Notification

### Folder structure

We decided to create a new folder called `Messaging` and move the components below to it given that they have basically the same purpose. So, the folder structure changed from:

```
|_ src
   |_ components
       |_ [...]
       |_ Banner
       |_ MessageProvider
       |_ NotificationBanner
       |_ Toast
```

to

```
|_ src
   |_ components
       |_ [...]
       |_ Messaging
           |_ Banner
           |_ MessageProvider
           |_ Notification
           |_ Toast
```

##### Banner vs Notification

I realized that the Notification and Banner are basically the same with just two style differences:

```
- Side padding;
- Round border;
```

To reduce the amount of code:

- The `messagingContent.tsx` file was created so both components can point to it given they have exactly the same structure;
- To differentiate one from another, the `componentName` property was created to handle the specifications of the style.

###### Break changes

- Banner

  - Property name from `type` to `variant`;

- Notification
  - Filename from `NotificationBanner.tsx` to `index.tsx`;
  - Folder name from `NotificationBanner` to `Notification`;
  - Property name from `primaryButton` to `primaryAction`;
  - Property name from `secondaryButton` to `secondaryAction`;
  - `iconSize` property removal;
  - Property name from `hasCloseButton` to `showClose`;

## Modal

### Component

[BREAKING CHANGE] `regular` is not part of sizes anymore. The current sizes are `small` | `medium` | `large`
[BREAKING CHANGE] `ModalAlert` and `ModalAcknowledge` components were deprecated in favor of `action` prop in the `Modal` component. action 'acknowledge' will replace ModalAcknowledge and action 'confirm' will replace ModalAlert
[BREAKING CHANGE] `title` prop is not a string anymore now has to be an object that contains text and mode. e.g:

```
{ title: { text: 'I am a modal', mode: 'stacked'}}
<Modal title={{ text: 'I am a modal', mode: 'stacked'}}  />
```

[BREAKING CHANGE] `submitBtn` and `cancelBtn` props were deprecated in favor of primaryAction and dismissAction in order to match with our new standards

New customizations into Modal's API

- pinnedFooter
- size
- position
- action
- variant
- hideCloseIcon
- title
- primaryAction
- dismissAction
- stackedActionButtons
- isLoading

### Storybook

- Overview story adding the most relevant content from the design docs.
- Playground containing all customizations available onto Modal's API

### Misc

`MockModal` component has been created exclusively to support Modal's documentation on Storybook making easy to render the component without any side-effects.

`CustomCanvas` has been created to make flexible how we add components to storybook pages.

`CanvasRow` and `CanvasColumn` inherits the same customizations from CustomCanvas

`CanvasModal` has been created to support Modal components rendering in the storybook pages

`StoryDivider` has been created and replaced in a couple of pages in order to avoid code repetition

## Searchable Dropdown

#### Component

- [BREAKING] Change the component name from `SearchableSelect` to `SearchableDropdown`
- Update component based on [new design]. (https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A--PIE-2.0-Global---Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=11135%3A133210) NOTE: This component has not being added to the latest PIE Designs. We will match it with the same behavior and styling as the dropdown.
- Added `width` prop

#### Testing

- Added testing coverage to component [IN PROGRESS]

#### Storybook

- Examples story covering most of the customization to the `SearchableDropdown` component
- Playground story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
- Overview story adding the most relevant content from the design docs.

## Link

This PR creates the `Link` component based on the [new design for PIE v2.0](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A-PIE-2.0-Global-%E2%80%93-Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=2163%3A13005). Since it's a new component. there are no breaking changes.

## Testing

- Run `yarn storybook:react` and access `http://localhost:6006/?path=/story/components-link--playground`

## Storybook

- Examples story covering most of the customization to the `Link` component
- Playground story using Storybook's Controls. Controls are also named and have descriptions to explain the API.
- Overview story adding the most relevant content from the design docs.

## File Uploader

### Breaking changes

- `FIleUploader.tsx` file name to `index.tsx`;
- `FileUploader` folder name to `Uploader`;
- `description` prop removal;

### List Item

#### Component

- Update component based on [new design](https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%E2%9A%A1%EF%B8%8F%F0%9F%A7%8A-PIE-2.0-Global-%E2%80%93-Light-%F0%9F%A7%8A%E2%9A%A1%EF%B8%8F?node-id=742%3A318)
- Renamed both `primary` and `secondary` props to to `primaryText` and `secondaryText` respective.
- Updated the logic and typing for the `prefix` prop
- Implemented the possibility to have a custom `secondaryText`
- Implemented the possibility to have icons with custom colors for the `prefix`

### Storybook

- Added Examples covering most of the variations of the component
- Added a Playground with controls
- Added the documentation Overview.

## Tokens update

### Icons

- Added Flag icons

### Theme

- Updated global color tokens
- Updated alias color tokens
- Updated font size tokens

### PIE React

- Update dependencies
- Move Icons storybook to controls
- Change all font size tokens occurrences

### Misc

- Fix `Toast` Overview story name to fit the structure
- Fix Primary Button `color` property to use the correct token
