appsmithorg
[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code
check the code here - https://github.com/appsmithorg/appsmith/blob/release/app/client/src/constants/DefaultTheme.tsx#L345
Problem
Currently, for generic type value in theme for example colors: any, when we need to add something like
color: ${props.theme.colors.dropdown.header.text}; using styled-components
We do not get an auto-complete prediction for such cases and also if wrote theme objects value reference incorrectly no error is generated.
Expected
- To see predictions when referring to theme objects value :
Example
`props.theme.colors.dropdown.hea`
-- header
-- heading
- See error when incorrectly used theme object
Example
const theme = {
colors: {
primary: "#FFFFFF"
}
};
// demo component
const Wrapper = styled.div`
color: ${props => props.theme.colors.incorrectPrimary}; // Should show error - no incorrectPrimary is defined
`
Solution
Ideally, we could generate the Colors type from the union of theme object's colors value & dark and light theme's color values.
Greetings @parul5sahoo, thanks for showing interest 🎉 , This is all yours. Assigning this to you now.
Please don't forget to read the Contribution Guidelines. Would appreciate it if you can open a PR within the next 4 days.
Thanks @Rishabh-Rathod ! Given this issue begins with a [Task] tag should I name the new branch that I commit changes to as "Task/ImproveStyledComponentsthemeAutocomplete" or something of the sort? Or should it begin with "/fix" or "/feature"?
@parul5sahoo you can name it
chore/theme-autocomplete-enhancement-6843
@Rishabh-Rathod Hey, I have created a PR with a possible solution and that enables autocomplete features and subsequently solves the second part of the issue as well. Do let me know if this looks fine.
@Tallon66 sorry we are late looking at your comment; If you are available please raise a PR for this in the next 2 days and let us know here.
@Bisht13 I see you have a few other issue assigned, If the above person does not get back in 48hrs, Ill assign this to you
@abhisheksharma886 please pick this up. Apologies for the late response here. Assigning this to you. Please raise the PR soon and let us know here, we will take it ahead for a review
Greetings @Thackermahima, thanks for showing interest 🎉 , This is all your. Assigning this to you now.
Please don't forget to read the Contribution Guidelines. Would appreciate if you can open a PR within the next 2 days and let me know here.
@rishabhrathod01 Hello can i pick up?
@definitelynotchirag Could you please share, what would be your approach to solve this?
