Update dropshadows to the latest Kolibri Design System guidelines

[MisRob]

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

Blocks

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

Related

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

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]

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]

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]

@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]

@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]

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

[MisRob]

I can assign you now, yes

[lokesh-sagi125]

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

[MisRob]

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]

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]

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]

Hi @MisRob I opened the draft pull request!

[MisRob]

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

[ayudixit]

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]

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]

Sure @AlexVelezLl sir, Thank you for navigating me.

[Rahul-web-hub]

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

[lokesh-sagi125]

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]

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]

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]

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:

• Kolibri Contributing Guidelines
• Kolibri Design System Contributing Guidelines
• Studio Contributing Guidelines

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

[MisRob]

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]

Closed by #12630