Update dropshadows to the latest Kolibri Design System guidelines

MisRob commented 2 months ago

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Blocks

https://github.com/learningequality/kolibri-design-system/issues/725

Summary

Locate all Kolibri components that use dropshadows and update their style to follow the updated KDS guidelines in the "Elevation and shadow > Drop shadows" documentation section.

For example, this BottomAppBar ’s dropshadow

https://github.com/learningequality/kolibri/blob/a06464bbf78d2af5f753a62a77443372c1481b09/kolibri/core/assets/src/views/BottomAppBar.vue#L37-L39

needs to be changed to %dropshadow-2dp.

Note that some components have dropshadows that are not defined via %dropshadow-... , for example https://github.com/learningequality/kolibri/blob/a06464bbf78d2af5f753a62a77443372c1481b09/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/index.vue#L373

These need to be replaced by appropriate %dropshadow-... as well.

Guidance

See https://github.com/learningequality/kolibri-design-system/blob/9d2a147de7e81c945ca0eab7ffb2c4719fd2bb06/lib/styles/definitions.scss#L59-L157 for all dropshadows to search for. However, use only %dropshadow-1dp, %dropshadow-2dp, and %dropshadow-6dp for all updated places. The remaining ones will be removed in accordance with the new guidelines later on.
Preview components as you work

Out Of Scope

Kolibri Design System K components will be resolved in the scope of https://github.com/learningequality/kolibri-design-system/issues/724.

Acceptance Criteria

[ ] There are no occurrences of %dropshadow-… usage other than 1dp, 2dp, and 6dp in the whole Kolibri codebase, nor are there any drop shadow styles defined in ways different from %dropshadow-....
[ ] If it shows that some places are not suitable for such refactoring (vendored styles, perhaps?), these are reported in a pull request for discussion.

Suraj-kumar00 commented 2 months ago

Hi @MisRob, How have you been? Can I get the starting point I mean hints to understand it better. I'm aware of contributing but I'm asking about getting started to solve this issue. Can you help me with that I would love to solve this issue.

MisRob commented 2 months ago

Hi @Suraj-kumar00, good to hear from you! All good, thank you.

I've tried to describe that in the Summary section in quite detail together with some examples. So after you have understood the linked documentation, one way to approach it would be to try to update the BottomAppBar as suggested and then gradually locate other components that use deprecated dropshadows. You could also try to reformulate for me what's your understanding of the steps of the task for you, and ask questions. I can then confirm, or elaborate on points that are not clear.

MisRob commented 2 months ago

@Suraj-kumar00 Another way to formulate it, if that helps, would be that in Kolibri, it is currently allowed to use 24 drop shadows depths: %dropshadow-1dp, %dropshadow-2dp, %dropshadow-3dp,... up to %dropshadow-24dp, and there are also other various custom dropshadow styles. And now we need to refactor all these places to use only 3 dropshadows: %dropshadow-1dp, %dropshadow-2dp, and %dropshadow-6dp. Which of these values should be used exactly depends on the type of component (card, bar, tooltip..) and it is explained in the linked documentation.

MisRob commented 2 months ago

@Suraj-kumar00 One last one, it's also fine to work gradually in a draft PR if that helps and have someone to give feedback at a first few refactored places so you can be more certain before proceeding to other places ;)

Suraj-kumar00 commented 2 months ago

Thanks for the elaboration @MisRob, So that means I'm assigned to do this work right?

MisRob commented 2 months ago

I can assign you now, yes

lokesh-sagi125 commented 2 months ago

hey @MisRob if @Suraj-kumar00 has not made much progress on this issue can you assign me to this?

MisRob commented 2 months ago

Hi @lokesh-sagi125, thank you, let's wait a day or two if we hear from @Suraj-kumar00 if he works on it. Meanwhile I will assign you the other issue you asked for.

Suraj-kumar00 commented 2 months ago

Hi @MisRob, yes I'm active, pardon me for not updating.

Getting some issues in the local development but so far I have done the local development I'll update you when I get any issues. The work is in progress soon I will open a draft pull request.

MisRob commented 2 months ago

Sure, thanks for the update @Suraj-kumar00. No pressure time-wise, take all the time you wish. Just please let us know in case you'd eventually decided not to work on it.

Getting some issues in the local development

If you mean some problems with the development server, we're glad to help. You can post on GitHub Discussions.

Suraj-kumar00 commented 2 months ago

Hi @MisRob I opened the draft pull request!

MisRob commented 2 months ago

Thanks @Suraj-kumar00, I just answered your questions there.

ayudixit commented 1 month ago

Hello Hello, Hope everybody is doing great. I have just made few these changes but i am unable to fork as it is showing i am not a member of this organization kindly assign or help me out for this thing.

My Commit Name: #12552//All Kolibri components that use dropshadows updated My Commit Id: 7e78a8a6103db04f0ea185cf781f4cf91a37c99b

AlexVelezLl commented 1 month ago

Hey @ayudixit! Thanks for your interest in contributing to this issue. Unfortunately, this issue is already assigned to someone else. You can see the list of unassigned "help wanted" or "good first issue" issues across all repositories.

For the problems you are experiencing with the fork, please open a new item in our discussions list and add all the details/screenshots of the issue. Thank you! :)

ayudixit commented 1 month ago

Sure @AlexVelezLl sir, Thank you for navigating me.

Rahul-web-hub commented 2 weeks ago

Hi @MisRob , could you please assign this issue to me? I would like to work on it. Thanks!

lokesh-sagi125 commented 2 weeks ago

hey @AlexVelezLl if @Suraj-kumar00 is inactive can you assign this issue to me since i worked on a similar issue in KDS and this issue is blocking another issue for me , thanks:)

Suraj-kumar00 commented 2 weeks ago

hey @AlexVelezLl if @Suraj-kumar00 is inactive can you assign this issue to me since i worked on a similar issue in KDS and this issue is blocking another issue for me , thanks:)

Hi @lokesh-sagi125, how have you been? Aren't you able to see that I have already raised the PR? It's under review currently. And I would like to @MisRob to please review the changes that I have made after suggestions of the reviewers.

MisRob commented 2 weeks ago

Hi @Suraj-kumar00, thank you for following up. @marcellamaki is taking care of the review so I will let her to give it the final confirmation. Please allow us several days, we're reviewing many other PRs in the queue. If we don't get back in a week or so, then it's a good time to send a reminder. Thank you for your patience.

MisRob commented 2 weeks ago

Hi @Rahul-web-hub, thank you for volunteering. As mentioned, this is already nearly resolved. There are other contributing opportunities in three repositories. See the contributing guidelines including links to issues suitable for contribution for each repository here:

You can also see the list of unassigned "help wanted" or "good first issue" issues across all repositories.

MisRob commented 2 weeks ago

Hi @lokesh-sagi125, feel free to open a PR for https://github.com/learningequality/kolibri-design-system/issues/725, and we will take care of merging it in KDS after @Suraj-kumar00's work is merged in Kolibri. Thanks everybody for collaboration.

AlexVelezLl commented 1 week ago

Closed by #12630

learningequality / kolibri