cancel
Showing results for 
Search instead for 
Did you mean: 
bbennett2
Community Champion

Use modal dialogs from style guide

Jump to solution

I'm trying to build a course resource that uses the styleguide modal dialogs. I'm familiar with HTML and JavaScript, but I can't quite figure out where to include the JavaScript portion of the modal. 

I did find a post on using the built-in classes, but the dialogs are limited to 300px wide, which isn't desirable at all. Any tips on how to implement modals with more flexibility? I am a Canvas Admin, so I can make changes to the Account settings if necessary.

1 Solution

Accepted Solutions
James
Community Champion

 @bbennett2 ,

The Canvas Style Guide is for developers of the Canvas software, not for end users, but it can be useful for people styling things like Canvas does provided people know that and are aware of the purpose and the limitations.

The modals in the Style Guide use ReactJS, which is not exposed to the browser like jQuery is. In other words do not attempt to do Modals the way they do, but come up with your own way of doing modals.

The post you found was made before Canvas decided to deprecate the enhanceable_content class for user content. Accordions have been removed and use of the other jQuery UI widgets mentioned throw a warning, but still work --- for the time being. You are now expected to supply your own JavaScript library if you want to use things like tabs and you should use the modals for that library.

There was a lot of discussion in the Community about this last year (2017). Part of the issue may be that the comments on the discussion you referred to goes on for pages, but unless you see the next links at the bottom, you may never get that far. It's not until page 5 that they start talking about the deprecation.

Here are two of the most definitive / useful threads, which are what I've summarized above.

View solution in original post

4 Replies
ericwerth
Community Coach
Community Coach

Hi  @bbennett2 .  I'm afraid that I cannot answer your question, however I am going to share this question with the https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=10a2132b-74a0-4698-ae08-...‌ and https://community.canvaslms.com/groups/admins?sr=search&searchId=a4791935-0c51-49e4-8269-cf6236e9e1a...‌ user groups in hopes that someone who reads this question will be able to provide some insight.

Good luck!

James
Community Champion

 @bbennett2 ,

The Canvas Style Guide is for developers of the Canvas software, not for end users, but it can be useful for people styling things like Canvas does provided people know that and are aware of the purpose and the limitations.

The modals in the Style Guide use ReactJS, which is not exposed to the browser like jQuery is. In other words do not attempt to do Modals the way they do, but come up with your own way of doing modals.

The post you found was made before Canvas decided to deprecate the enhanceable_content class for user content. Accordions have been removed and use of the other jQuery UI widgets mentioned throw a warning, but still work --- for the time being. You are now expected to supply your own JavaScript library if you want to use things like tabs and you should use the modals for that library.

There was a lot of discussion in the Community about this last year (2017). Part of the issue may be that the comments on the discussion you referred to goes on for pages, but unless you see the next links at the bottom, you may never get that far. It's not until page 5 that they start talking about the deprecation.

Here are two of the most definitive / useful threads, which are what I've summarized above.

View solution in original post

bbennett2
Community Champion

 @James ‌

That's what I was afraid of, but thanks for confirming. The styleguide classes for styling are all available and I've made significant use of tabs in many courses, so I'm a little disappointed the class selectors are being deprecated. I noticed the console warning yesterday and I need to stop relying on those page patterns.

I'm familiar with React so I thought there might be a way to access those objects to build custom dialogs at the course level. I did find a workaround using HTML inline styles for the modal function that doesn't reply on enhanceable_content classes, so I think I'm good for now. I'll look at adding some custom JS libraries because I know some other teachers would appreciate having more interactivity in their courses but have been limited so far.

James
Community Champion

I talked to a Canvas engineer in April 2017 about this -- it seemed that if they have a great library that they use for everything that it would be good to expose it to us so that we could do the same great things.

I don't know enough about React, but it was explained to me that it has a virtual DOM and the browser's DOM and writing from the virtual to the real one is super fast because it does a comparison and only writes the changes. What I left still unsure of is whether that would preclude us from using our own ReactJS because the React data IDs might conflict between Canvas' and ours.