db9d572424
## Description Why did this PR appear? I wanted to replace the icons from `ads-old` with the icons from `ads`. After that, I had to fix some affected components in `ads-old` and in the main app. In the process, I discovered that a large amount of code is simply not being used. ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10419944222> > Commit: 86491f43aff37e34468fb7dc32722b9ef2ec60c9 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10419944222&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 16 Aug 2024 13:28:03 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Improved precision in UI element targeting for enhanced test reliability. - Broadened icon options within the FilePickerComponent for greater flexibility. - **Improvements** - Shifted component imports to a centralized design system for better consistency. - Simplified prop structures for the Button component to enhance clarity. - Enhanced validation utilities available for form handling and input validation. - **Bug Fixes** - Enhanced robustness of element locators, reducing potential UI interaction issues. - **Refactor** - Adjusted component properties to align with updated design guidelines, promoting semantic usage. - Consolidated exports to emphasize type definitions and utility functions for better maintainability. - **Chores** - Cleaned up imports and updated code structure for improved maintainability. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|---|---|---|
| .. | ||
| src | ||
| .eslintrc.json | ||
| .prettierignore | ||
| CHANGELOG.md | ||
| Component-Migration-Checklist.md | ||
| CONTRIBUTING.md | ||
| jest.config.js | ||
| jest.setup.ts | ||
| package.json | ||
| README.md | ||
| story_template.txt | ||
| tsconfig.json | ||
Appsmith Design System - old (deprecated)
UI Design system of Appsmith
Install
npm install @appsmith/design-system-old
or
yarn add @appsmithorg/design-system-old
Including CSS
Add css import in the root index css file
@import "~@appsmithorg/design-system-old/build/css/design-system-old.css";
Usage
import { TooltipComponent } from "@appsmithorg/design-system-old";
<TooltipComponent content="Some useful content 🤷🏽♂️">
Hover here 😁
</TooltipComponent>
Contribute
🚫 This package is closed for contributions. We welcome contributions to the
design-systempackage.
git clone https://github.com/appsmithorg/design-system.git
Get all dependencies with
cd design-system/packages/design-system-old
yarn install
Then run storybook in development and watch mode with
yarn run design-system:storybook
Any stories you write within design-system/packages/design-system-old/src/** will show up here.
To use your local version of the package, run
yarn link
in this repository, then copy instruction it outputs into the root directory of the repository you want to use this package in. Run
yarn install
again to be able to import the components using
import { TooltipComponent } from "@appsmithorg/design-system-old";
Create story template
yarn create-story -f <folder-name>
'folder-name' is the folder which holds the component which the story template is being created. This should be under 'src' folder.
Happy playground testing!