The scope is to create a token for a group of elements. Like Page Header, Control group (Input, Switch, Radio, Check, Select), Button Group, Headline and Subtext.

Requires design for Figma Component.

The scope is to create a more effective component documentation template for other designers to use when creating or contributing to design systems.

To create a POC for modal height, should we use VH or pixels?

Design + Documentation

Is there an existing issue for this?

• I have searched the existing issues

Description

Steps To Reproduce

I found it when I was making a new Wds button widget v2. I had to add custom css to override the styles but ideally the use of important in css should be avoided.

Public Sample App

No response

Version

1.9.26

Is there an existing issue for this?

• I have searched the existing issues

Description

Multi-select component is not very intuitive by the UI. The options selected and the hover state have very minimal differentiation. Neither do we have checkboxes alongside options, like we did in the old DS component implementation. We could also think of adding a check or cross icon to the options that are selected:
Ref: https://demo.mobiscroll.com/select/multiple-select

Steps To Reproduce

1. Go to Multi-select component on storybook
2. Notice when you open the dropdown its not intuitive that its a multi-select dropdown till you actually interact with the dropdown
3. On the other hand, once you select options, notice that the selected option bg color and the hover state of any option is not much distinctive.

Public Sample App

No response

Version

Self Hosted - latest

Is there an existing issue for this?

• I have searched the existing issues

SubTasks

We have multiple drag and drop libraries in the package.json file in the main codebase. react-dnd is actually no longer necessary in the main codebase, so I was hoping to remove this throughout our codebases.

There are 3 other alternatives which we can consider

• react-beautiful-dnd (included in the main codebase)
• react-use-gesture (can be upgraded to @use-gesture/react)
• uppy (this is probably lazy loaded for the filepicker widget, and may not be one of the options)

Create documentation for the modal with various sizes.

Create action list component

Design + Documentation

Is there an existing issue for this?

• I have searched the existing issues

SubTasks

No response

POD Level designs are undertaken by individual designers and reviewed., There appears to be no requirement for new container variants. However, our focus lies in contemplating potential enhancements to the design spacing. Designs are here

As the next step, a Notion document has been prepared to explain the structure of spacing tokens and the various controls available for improving the spacing between elements. The Notion document outlining the spacing review can be found here.

Documentation Link
https://www.notion.so/appsmith/Collapsible-8f367eec7cd14dd7889f740a33086ae7?pvs=4

Is there an existing issue for this?

• I have searched the existing issues

Description

This came up when I was working on ticket, where we want filters and search input to clear on landing the templates page again after the first time.

This is occurring because, the SearchInput is not rendering again in :
https://github.com/appsmithorg/design-system/blob/release/packages/design-system/src/SearchInput/SearchInput.tsx

And can be fixed by adding this to SearchInput:

useEffect(() => {
      setValue(props.value || "");
    }, [props.value]);

Not sure if this is the case with other types of inputs as well

Steps To Reproduce

I noticed that was not picking values from props once it got rendered. Flow on my UI was like this:

1. I went to /templates page, entered a search query
2. From the filtered list of templates clicked on one of them, reached template detail page.
3. from here I click back(& expect the RESET_TEMPLATE_FILTER action to run on mount)
4. It does, but just before that, store already had previously entered search query
   a. with this value the input rendered itself
   b. after my action ran, it emptied the query from store
   c. but input did not clear it

Public Sample App

No response

Version

Appsmith v1.9.22-SNAPSHOT

To Analyse the current workflow and provide a better handoff solution

Description

Today list component has a space between two list items. There is should be no space at all

Objective

Migrate existing design system components from appsmith & appsmith-ee

Success Metrics

Requirements

Documentation

Assumptions

• ADS should work for Appsmith only, not supporting any developer outside Appsmith for a year.
• Release in chunks ie one component at a time.
• All duplicate components will be merged into a single component

Checklist/Process for releasing migrated component

1. Notify in #tech-team, #general, and #design system channel, when the component is picked for migration for the week.
2. Add label Design System Pod
3. Create branch name: feature/migrate-{component-name} in both design-system, appsmith & appsmith-ee repo.
4. PR title → Feature: Migration {component name} in both design-system appsmith & appsmith-ee repo.
5. Check migrated components are working appsmith & appsmith-ee
6. Github repo locally before releasing the design-system NPM version.
7. Create a storybook for component
8. QA sign-off in design-system Github repo.
9. Create release notes in design-system Github repo
10. Release the new NPM version.
11. Update the design-system npm version in appsmith & appsmith-ee Github repo in feature/migrate-{component-name} branch
12. Change migrated component import in appsmith & appsmith-ee repo.
13. Remove migrated component code from appsmith & appsmith-ee repo.
14. Raise PR & create DP for review in appsmith & appsmith-ee repo.
15. QA sign off

List of all components in existing design system

Out of Scope

• Community user support
• Extending any component functionality
• Fixing any known issue present in appsmith & appsmith-ee repo.

Developer Handoff Document in Figma

No response

RACI matrix

| ------------- | ------------- |
| Responsible | @albinAppsmith |
| Accountable | @albinAppsmith |
| Consulted | @rohitagarwal88, @jsartisan , @keyurparalkar , @yaldram |
| Informed | @rohitagarwal88 |

Is there an existing issue for this?

• I have searched the existing issues

Description

When I click on a radio button, there is no visual indication of the click event on the UI.

It works when I'm on the radio group.

Steps To Reproduce

Go to https://design-system.appsmith.com/?path=/docs/design-system-radio--documentation

Public Sample App

No response

Version

Official Doc

Is there an existing issue for this?

• I have searched the existing issues

SubTasks

No response

Is there an existing issue for this?

• I have searched the existing issues

SubTasks

More context on the slack thread here.

TL;DR -

Arrow directions before

Arrow directions after

The goal is to update the token based on the Notion document and then update it in Zeplin. https://www.notion.so/appsmith/Design-Token-9c6b7faaec24476abca93bf5d0d8b3b3?pvs=4

To create an extensive guideline for the designers on how to use the Container component with examples.

Create tokens for spacing guideline

As nobody accounted for the /apps page, I will be picking up this page to update it based on the spacing containers.

Is there an existing issue for this?

• I have searched the existing issues

SubTasks

• Rollup set up
• NPM packaging set up
• ESlint configurations
• Yarn workspace configuration
• Babel configurations
• NPM account set up

Is there an existing issue for this?

• I have searched the existing issues

Summary

Hi,

I saw one of the feature that appsmith is that it lacks tooling to build components (A design system builder part of appsmith). I wanted to share a demo how it can be done, however I'm not able to find directions for frontend build. could you please direct me.

Alternatively I think isolating frontend from the backend will allow for more collaboration from contributors. For local development it is not necessary that appsmith needs backend, its a UI tool, use client side for persistence.

Why should this be worked on?

Appsmith has a good grip since it already has user base and developers use it. In the road map or the final place the vision could be is in the direction of design to code. There are huge solutions available for design to code, but most of them lacks the code readability of the generated content from the designs, very hard to grasp.
An alternative approach is to build a lite version of design tool, with code generation based on component architecture. A catch is that, component philosophy mentioned here scales to generate code targeting any framework that supports component based development.

Targeted user base - Designers, frontend developers

Objectives

• Make typography consistent across the app using semantic tokens
• Make it easier for designers and developer to pick the right type styles
• Reduce the overall font size of the app to make better use of available screen space

Is there an existing issue for this?

• I have searched the existing issues

Description

If we change the options passed to the TreeDropdown, the updated options are not getting reflected in the component.

Steps To Reproduce

1. Pass the options prop, and try to update it using another state.
2. The changes won't get reflected.

Public Sample App

No response

Version

1.8.16

Scope:
Colours - Audit and update semantic Tokens for the complimentary colours.

Primary: Orange aka Premium
Warning: Yellow
Information: Blue
Success: Green
Purple: Special

We need to decide if we should use a different shade of orange for our premium brand and keep it separate from the regular brand.

Update the Token Studio with new colors and make sure all other components dependent on these colors are also updated. This includes callouts, toast, input errors, and button, Link "Primary".

Create a documentation for Action List

Is there an existing issue for this?

• I have searched the existing issues

SubTasks

No response

Is there an existing issue for this?

• I have searched the existing issues

Summary

Scope out places where this is being already used and consider all use cases.
Add required style configurations

Why should this be worked on?

We're working on Peek overlay for appsmith entities.
And we want to use this component there.

Is there an existing issue for this?

• I have searched the existing issues

SubTasks

• Update storybook to the latest version.
• Update rollup to the latest version.
• Update the rollup plugins to the latest version.
• Update other build dependencies to the latest version.
• Remove all the resolutions if possible.

Is there an existing issue for this?

• I have searched the existing issues

Description

• disabled state doesn't prevent click
• disabled state shows cursor pointer for some areas of the button
• height and width property accept size in different format ("100", "100px")

Steps To Reproduce

Get started page issue
appsmithorg/appsmith#13093

For now, we've added temporary fix. (only to prevent click event)
appsmithorg/appsmith#21183

Public Sample App

No response

Version

Cloud

Allow to parameter to work with onClick.
Slack thread : https://theappsmith.slack.com/archives/C0293DVQACW/p1692167522335429

To see if the process can be simplified by a specify app.
Book a demo with the team to know more about the process