d2iq/ui-kit

D2iQ UI Kit

ui-kit's Issues

Refactor the InteractionModeEngine class to be functional

Description

The InteractionModeEngine is meant to house the functions to add a className to components which will add styles when active with keyboard navigation. For example, the button components will have an outline when they are navigated with the keyboard only. It is meant to prevent these styles on hover with the mouse.

Acceptance Criteria

Refactor the InteractionModeEngine away from a class. Some discovery will be required here.
Questions to answer:

• Is there a better way to integrate these behaviors?
• Could this be a hook instead?
• Could these functions be broken out?

Overall, how can this be moved away from a class component while retaining its functionality?

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor ToggleWrapper from a class to a function component

Description

This issue is related to refactoring the ToggleWrapper component.

Acceptance Criteria

Refactor the component from a class component to a function component.

Feel free to contribute other improvements to the component while refactoring if you notice any.

I don't believe that you will need to refactor the ToggleContent, ToggleInputList, or ToggleBoxStoryHelper along with this. If you would like, you can include the refactor for those components as well.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor DropdownContents from a class component to a function component

Description

This issue is related to refactoring the DropdownContents Component.

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor ToggleInputList component from a class to a function component

Description

This issue is related to refactoring the ToggleInputList.tsx file.

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Migrate Toast and Toaster component tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the Toast.test.tsx and Toaster.test.tsx file tests.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Update the `svgo` dependency

Description

We are a major version behind on svgo. Update the svgo dependency to the latest version.
Since it is a major version upgrade, there may be some things to fix. I suggest reading over the release notes to see what has changed to ensure there is not a breaking change. This dependency is used for our component library icons, be sure that they are working as expected.

Please use the exact version. For example, ^3.0.2 🚫 | 3.0.2 ✅

svgo 2.8.0 → 3.0.2

---

Contribution Guide

If this is your first time contributing to UI Kit, please review the How to Contribute guide beforehand.

Refactor TextInput related components from classes to functional components

Description

This issue is related to refactoring the TextInput related components.
Refactoring will require changes to the TextInput, TextInputWithIcon, TextInputWithButtons and TextInputWithBadges as well. Failures will happen if all of these are not refactored so this task will be a bit more involved than the other open issues.

Kudos for taking on this task!

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Migrate DropdownMenu component tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the DropdownMenu.test.tsx file tests.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: <component_name> test.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Bug Fix - Sortable Table header chevron should be clickable

Description

The chevron next to the table header column should be clickable. Currently, the table headers will only sort when the header text is clicked on but the user should also be able to click on the chevron/arrow, it is created with ::after which is part of the issue.

See this story to explore the buggy behavior - https://dcos-labs.github.io/ui-kit/?path=/story/data-listing-table--sortable-columns

Here is a video example of this behavior - https://www.loom.com/share/aeaca229f721458ba5c6487286ec7b9d

Acceptance Criteria

The chevron/arrow next to the table headers that are sortable should be clickable.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor ButtonBase Component

Description

This issue is related to refactoring the ButtonBase Component.

Acceptance Criteria

Refactor the ButtonBase component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: buttonbase component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor ToggleInputList and ToggleBoxGroup tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the ToggleInputList.test.tsx, and ToggleBoxGroup.test.tsx.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771. Or you can find many code examples throughout other component tests using react testing library within the codebase.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Add className properties to components

Description

We'd like to have access to className as a property on our components to pass in custom style overrides.
You'll need to add it to the component in a sensible location and include a type definition for it.

Refer to the use of className in the Box component as an example.

Acceptance Criteria

Go through the components and add an optional className property if it doesn't already exist.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, feat: brief explanation of changes made.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor DialogModal Component

Description

This issue is related to refactoring the DialogModal Component.

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.
Components may require updates to wrapping or related components.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Migrate TextInputWithBadgesTypeahedStoryHelper from a class to a function component

Description

This issue is related to refactoring the TextInputWithBadgesTypeahedStoryHelper.tsx file. (wow that's a doozy of a filename!)

Acceptance Criteria

Refactor the component from a class component to a function component.

Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: buttonbase component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Update `fork-ts-checker-webpack-plugin` to the latest version

Description

We are a major version behind on fork-ts-checker-webpack-plugin. Update the fork-ts-checker-webpack-plugin dependency to the latest version.
Since it is a major version upgrade, there may be some things to fix. I suggest reading over the release notes to see what has changed to ensure there is not a breaking change. Make sure that our Webpack build is working as expected with this update.

Please use the exact version. For example, ^8.0.0 🚫 | 8.0.0 ✅

fork-ts-checker-webpack-plugin 6.4.0 → 8.0.0

---

Contribution Guide

If this is your first time contributing to UI Kit, please review the How to Contribute guide beforehand.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Refactor Expandable component tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the Expandable.test.tsx file.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771. Or you can find many code examples throughout other component tests using react testing library within the codebase.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor the use of deprecated `onKeyPress`

Description

We have uses of onKeyPress in the application that need to be updated. It is used in the Clickable, ButtonCard, and TextInputWithBadges components. Keydown is an alternative to keypress.

Resource for Keyboard Events: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
Resource for Keyboard Events in React: https://reactjs.org/docs/events.html#keyboard-events

Acceptance Criteria

Update anywhere that onKeyPress is used.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Migrate Typeahead component test from Enzyme to React Testing Library

Description

This issue is related to refactoring the Typeahead related tests.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>-test
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: <component_name> test.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Update to Webpack 5

Description

We'd like to update from Webpack 4 to Webpack 5.

The new version of Storybook (7) is in alpha testing and set to release soon. With this new version, Webpack 5 will be suggested. Upgrading Webpack will allow for build optimizations, such as lazy compilation and filesystem caching.

There may be some caveats to this update alongside Storybook and some research to be done there to resolve any issue while updating.

More info: https://storybook.js.org/docs/react/builders/webpack#webpack-5

Acceptance Criteria

Update to Webpack 5

Clean up our existing Webpack setup. Can it be consolidated into 1 file instead of 2?

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Update `downshift` to the latest version

Description

We are a major version behind on downshift. Update the downshift dependency to the latest version.
Since it is a major version upgrade, there may be some things to fix. I suggest reading over the release notes to see what has changed to ensure there is not a breaking change. Run regression tests on the components.

Please use the exact version. For example, ^7.3.2 🚫 | 7.3.2 ✅

downshift 6.1.12 → 7.3.2

---

Contribution Guide

If this is your first time contributing to UI Kit, please review the How to Contribute guide beforehand.

Create this as an npm module

Are there any plans to make this available as an NPM module? It's so much quicker/easier/more normal to install via NPM/Yarn.

Refactor ToggleBoxGroup Component

Description

This issue is related to refactoring the ToggleBoxGroup Component.

Acceptance Criteria

Refactor the component from a class component to a function component.

This will likely require refactoring the ToggleBoxGroupStoryHelper as well.

Feel free to contribute other improvements to the component while refactoring if you come across any opportunities.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Update `babel-loader` to the latest version

Description

We are a major version behind on babel-loader. Update the babel-loader dependency to the latest version. Please use the exact version. For example, ^9.1.2 🚫 | 9.1.2 ✅

babel-loader 8.2.5 → 9.1.2

---

Contribution Guide

If this is your first time contributing to UI Kit, please review the How to Contribute guide beforehand.

Refactor FormFieldWrapper Component

Description

This issue is related to refactoring the FormFieldWrapper Component.

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you come across any opportunities.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Update the `@testing-library/react` dependency

Description

We are a major version behind on React Testing Library. Update the dependency to the latest version -> 14.0.0. If there are any issue with our unit tests, please fix them.

@testing-library/react 13.4.0 → 14.0.0

---

Contribution Guide

Please review the How to Contribute guide beforehand.

Render components to sketch

To enable designers to directly use our frontend components in sketch we could try to use https://github.com/airbnb/react-sketchapp

Migrate Popover component tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the Popover.test.tsx file tests.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor TextInput Component

Description

This issue is related to refactoring the TextInput related components.

Refactoring will require the TextInput and other text input components such as TextInputWithIcon, TextInputWithButtons and TextInputWithBadges as well.

Thank you to @XoMute for the initial discovery.

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor the use of `defaultProps` to instead use fallback default values

Description

In older versions of React, we had an explicit defaultProps property we could apply to components.

We still have some references to defaultProps throughout UI Kit that should be updated to use fallbacks like the other components. This may require some component refactoring.

For example:

const HeadingText1 = (props: HeadingTextProps) => (
  <Text weight="medium" size="xl" data-cy="headingText1" {...props} />
);

HeadingText1.defaultProps = {
  align: "inherit",
  color: themeTextColorPrimary,
  wrap: "wrap",
  tag: "h3"
};

can be refactored to:

const HeadingText1 = ({
  align = "inherit",
  color = themeTextColorPrimary,
  wrap = "wrap",
  tag = "h3",
  ...props
}: HeadingTextProps) => (
  <Text weight="medium" size="xl" data-cy="headingText1" {...props} />
);

Acceptance Criteria

Update anywhere that defaultProps is used and opt for fallback defaults set where props are destructured.

---

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form, and it will be reviewed by the UI Team.

Refactor TextInput related components tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the TextInput.test.tsx, TextInputWithButtons.test.tsx, Textarea.test.tsx and TextInputWithBadges.test.tsx files.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771. Or you can find many code examples throughout other component tests using react testing library within the codebase.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Migrate Table component tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the tablev2.test.tsx test file.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor Clickable Component

Description

This issue is related to refactoring the Clickable Component.

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor TextArea from a class component to a functional component

Description

This issue is related to refactoring the TextArea component.

Acceptance Criteria

Refactor the component from a class component to a function component.

Feel free to contribute other improvements to the component while refactoring if you come across any opportunities.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

CSS fix for table column re-sizer

Description

When a user clicks on the column re-sizer, a vertical gray line (center aligned to the re-sizer) should appear to indicate the boundary of the column being resized.
The gray line is the same gray as what we use on the table row border.

Here is a design example:

Contribution Guide

Please review the How to Contribute Guide beforehand.

Fix extra characters added by style dictionary

Description

We use style dictionary to create design token documentation. Design tokens are formatted into tables displaying their name and value. We should run this every time we update any design tokens.

To update the design token documentation, run: npm run build:design-token-docs

After running this command to build the new design token docs, there are some issues that can be seen when comparing the changes.
Somewhere a : is inserted that shouldn’t be. It also doesn’t seem to be appropriately updating the token tables based on changes.

I’m not sure if this broke along the way with some updates to the function, with dependency updates, or something else. We haven’t created any new design tokens and had the chance to use this function to encounter this issue until now.

Acceptance Criteria

Fix the style dictionary bugs.

---

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, fix: <insert what was fixed>.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form, and it will be reviewed by the UI Team.

Migrate Tooltip component test from using enzyme to react testing library

Description

This issue is related to refactoring the Tooltip related tests.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: <component_name> test.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Migrate Modal component tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the Modal.test.tsx file.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Investigate increasing developer productivity with pull requests environments

I would like to make life easier for DCOS Labs UI Kit maintainers by implementing Uffizzi previews.
Disclaimer: I work on Uffizzi
Uffizzi is a Open Source full stack previews engine and is free for DCOS Labs UI Kit. This will provide maintainers with previews of PRs made to the DCOS Labs UI Kit github repo which would be deployed in the cloud. This will allow them to review and get PRs merged faster.

TODO:

• Intial POC

Refactor tests from Enzyme to React Testing Library for fieldList

Description

This issue is related to refactoring the fieldList.test.tsx file.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor DropdownContents from a class component to a function component

Description

This issue is related to refactoring the DropdownContents Component.

Acceptance Criteria

Refactor the component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/<component_name>
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: button component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Migrate Overlay from a class component to a function component

Description

This issue is related to refactoring the Overlay.tsx file.

Acceptance Criteria

Refactor the Overlay component from a class component to a function component.

Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: buttonbase component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Migrate SelectInput component tests from Enzyme to React Testing Library

Description

This issue is related to refactoring the SelectInput.test.tsx related tests.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: <component_name> test.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Update from Webpack 4 to Vite

Description

We'd like to update from Webpack 4 to Vite. This will lead to faster build times.

The new version of Storybook (7) is in beta testing and set to release soon. With this new version, Vite or Webpack 5 will be suggested. Upgrading our builder will allow for build optimizations, such as lazy compilation and filesystem caching.

There may be some caveats to this update alongside Storybook and some research to be done there to resolve any issue while updating.

Acceptance Criteria

Migrate from Webpack 4 to Vite.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Update `wait-on` dependency to the latest version

Description

We are a major version behind on wait-on. Update the wait-on dependency to the latest version.
Since it is a major version upgrade, there may be some things to fix. I suggest reading over the release notes to see what has changed to ensure there is not a breaking change. Run regression tests on the components and run the tests.

Please use the exact version. For example, ^ 7.0.1 🚫 | 7.0.1 ✅

wait-on 6.0.1 → 7.0.1

---

Contribution Guide

If this is your first time contributing to UI Kit, please review the How to Contribute guide beforehand.

Refactor tests from Enzyme to React Testing Library for Clickable and CodeSnippet components

Description

This issue is related to refactoring the Clickable.test.tsx and CodeSnippet.test.tsx files.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor button from a class component to a function component

Description

This issue is related to refactoring the ButtonBase Component.

Acceptance Criteria

Refactor the ButtonBase component from a class component to a function component.
Feel free to contribute other improvements to the component while refactoring if you notice any.

Refer to other components to keep formatting consistent. For example, reference the Badge, BadgeButton, or Tabs components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: buttonbase component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor the InfoBox Component

Description

This issue is related to refactoring the InfoBox Component.

Acceptance Criteria

Please refactor the InfoBox component from a class component to a function component.
Refer to other components to keep formatting consistent. For example, reference the Card, Breadcrumb, or Typeahead components.

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch. Please adhere to branch formatting, for example <your_initials>/refactor/infobox
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing be sure to prefix with the appropriate conventional commit type. For example, refactor: infobox component.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready to review" label when complete.

Refactor tests from Enzyme to React Testing Library for Dropdownable and DropdownMenuItem components

Description

This issue is related to refactoring the Dropdownable.test.tsx and DropdownMenuItem.test.tsx files.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.

Refactor tests from Enzyme to React Testing Library for PromoBanner, Pagination, and SegmentedControl components

Description

This issue is related to refactoring the promos.test.tsx, pagination.test.tsx and SegmentedControl.test.tsx files.

We've recently been migrating our tests from Jest + Enzyme to Jest + testing-library/react to support a full migration to React 18.

You may refer to this previous PR beginning the migration for code examples - #771. Or you can find many code examples throughout other component tests using react testing library within the codebase.

Acceptance Criteria

Refactor the test to use React Testing Library instead of Enzyme (which is no longer supported with React 18).

More information: Migrate from Enzyme

How to Contribute

Please review the contributing documentation beforehand.

Steps to Contribute:

1. Fork the repository.
2. Clone it to your local system.
3. Create a new branch.
4. Make your changes. Make sure that tests are still passing. To update snapshot tests, run npm run test -- -u and include the updated tests in your commit.
5. Commit your changes. When committing prefix your commit message with the appropriate conventional commit type. For example, refactor: <component_name> tests.
6. Push up your changes. In GitHub, click the compare & pull request button to begin drafting your pull request.
7. Fill out the pull request form and attach the "ready for review" label when complete.