Material UI implementation #21

gverni · 2019-05-15T13:36:52Z

Material UI theme implementation. Feel free to contribute.

TODO / check

Close #14

To override buttons background color

The variable have been introduced in sweetalert version 8.11.1

gverni · 2019-05-23T18:05:36Z

I've been wrestling with the close button for the past couple of days. Unfortunately when the font-size is increased, the × character moves slightly down and that's what you get when you hover on the close button:

(the X is not centred)

I don't really like the effect, so I may drop completely the hover style (need to check if this is mandatory on material) or replace the × with an SVG. @limonte would you be in favour of this latter (i.e. use SVG for close button)?

gverni · 2019-05-23T18:38:20Z

Thanks @limonte! I pushed it in 2e0a5de. Any help is appreciated.

P.s. Sorry I pushed them from the wrong account and I had to force push them again

limonte · 2019-05-23T20:03:28Z

I've been wrestling with the close button for the past couple of days. Unfortunately when the font-size is increased, the × character moves slightly down and that's what you get when you hover on the close button:

The same issue is happening for the default style, but it's not obvious because there's no background color on the close button.

Decreasing the line-height from 1.2 to 1.15 seems to fix the vertical alignment for me (Chrome and Firefox on Linux). Does it help for you as well?

gverni · 2019-05-24T14:47:34Z

Decreasing the line-height from 1.2 to 1.15 seems to fix the vertical alignment for me (Chrome and Firefox on Linux). Does it help for you as well?

On chrome on macOS line-height seems to have no effect at all on buttons. On the other hand It applies correctly to div. Maybe the user agent stylesheet is different between browsers / OSs.

Here you can find a codepen with the following elements:

<div class="swal-close-manual">&times;</div>
<button class="swal-close-manual">&times;</button>

For both the swal-close-manual is setting line-height: 0.6; but on my browser this is applied only to div:

Could you have a try on linux? Or did I misunderstand your suggestion?

Using CSS background property, the circle on hover is slightly misaligned. To workaround that, an SVG circle is used as background image. The circle is then moved slightly down to be centered around the X.

gverni · 2019-05-28T08:34:54Z

On chrome on macOS line-height seems to have no effect at all on buttons.

@limonte I tried a different approach in 579040e. I'm here using an SVG circle as background image, with a position offset down (background-position top set at 115%). What do you think of it?

limonte · 2019-05-29T07:22:19Z

@limonte I tried a different approach in 579040e. I'm here using an SVG circle as background image, with a position offset down (background-position top set at 115%). What do you think of it?

Good day @gverni!

the solution looks complex for its task
the vertical alignment is still broken in Chrome on Linux:

gverni · 2019-05-29T08:30:17Z

the vertical alignment is still broken in Chrome on Linux:

Thanks @limonte for checking. I'll try some different approach and let you know.

gverni · 2019-05-29T09:07:48Z

the solution looks complex for its task

@limonte just to check: in general, are you ok with using SVG inside CSS? I'm asking because this is what I used to style the select element in c655575. Let me know if you are against it in principle because I may have to use them to style other elements for material ui.

limonte · 2019-05-29T11:24:01Z

@limonte just to check: in general, are you ok with using SVG inside CSS?

Yup, I'm fine with SVG inside CSS. What I don't like is so-called magic numbers, which are hard to understand and maintain:

gverni · 2019-05-29T11:27:22Z

What I don't like is so-called magic numbers, which are hard to understand and maintain

Fair enough @limonte 😉 I'll definitely avoid that. I'm setting up a linux machine so I'll avoid bothering you for testing (unfortunately Sauce Labs doesn't support latest version for Chrome/Firefox on Linux)

There are a lot of "magic number" so we need to review this

gverni · 2019-06-11T15:41:38Z

@limonte I added styling for radio element. Note that there are some magic numbers (I can review them later) and also i'm not using any Swal2 SCSS variables. What do you think of this approach?

In general for forms elements, I found difficult to style them without using background images (as in c655575) or pseudo element (as in 9e342dd)

limonte · 2019-06-11T16:07:33Z

@gverni I totally understand difficulties you're facing, Material theme is the most complex theme to implement.

I'm alright with the PR so far, all those small details you mentioned could be improved later if needed.

Previous code was adding the radio control also for checkboxes

gverni · 2019-06-20T14:06:15Z

@Yairsaenz7 note that I just pushed a fix for a bug I introduced for the radio button and that was affecting the checkboxes as well. Please pull the latest commit on this PR.

Added using engine pseudo-elements

Need to be same color as `focus`

gverni · 2019-09-08T09:41:00Z

Couple of considerations on the last commits (be76d8e & c691cc0):

Based on material-UI spec, the focus colour should be slightly darker than the hover. The active seems to be similar color as the focus
Added SCSS variable $swal2-button-focus-background. We may want to add this back to the main SA2 SCSS
Side effect of the commit is that the action button(s) looks darker on modal opening (since they are autofocused)

The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned

gverni · 2019-09-29T11:34:04Z

In order to keep alignment of the hover background, the font-family for close button have been changed to Arial. Below how the serif is rendered vs the arial on macOS:

Arial
Serif

gverni · 2019-09-29T11:35:32Z

After 4 and half months, this PR is (finally) ready for review...

Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2

Need to be same color as `focus`

The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned

gverni · 2019-09-29T16:41:24Z

OK.. now it's ready (had to merge some critical changes from master)

maicol07 · 2019-10-17T16:01:52Z

Is this completed? @gverni and @limonte

gverni · 2019-10-17T16:27:36Z

@maicol07 development is completed, but we need some more testing and feed-back. Feel free to try it out and give us your feed-back!

maicol07 · 2019-10-17T16:28:40Z

How can I test?

# [2.2.0](v2.1.0...v2.2.0) (2019-10-17) ### Features * Material UI theme ([#21](#21)) ([77e5513](77e5513))

limonte · 2019-10-17T16:59:58Z

🎉 This PR is included in version 2.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

* Add material-ui folder and files * Add confirm button style * Add cancel button style * Replace "none" with 0 opacity color To override buttons background color * Use new flex justify variable The variable have been introduced in sweetalert version 8.11.1 * Set color for disabled buttons * Upgrade sweetalert2 dependency version * Add hover for close button * Add style for select * Implement hover background for close Using CSS background property, the circle on hover is slightly misaligned. To workaround that, an SVG circle is used as background image. The circle is then moved slightly down to be centered around the X. * Add error icon for text box * Add radio input styling There are a lot of "magic number" so we need to review this * Adjust poisition of swal2-label stylying for radio Previous code was adding the radio control also for checkboxes * Add style for range / slider Added using engine pseudo-elements * Apply material UI style to checkbox Apply material UI style to checkbox * Fix merge issue * Fix label padding merge issue Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2 * Implement focus for action buttons * Darken active action button background Need to be same color as `focus` * Set font-family for the close button The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned * Merge conflicts with master * Fix label padding merge issue Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2 * Implement focus for action buttons * Darken active action button background Need to be same color as `focus` * Set font-family for the close button The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned * fix lint errors * remove .sass-lint.yml

# [2.2.0](v2.1.0...v2.2.0) (2019-10-17) ### Features * Material UI theme ([#21](#21)) ([9a7b7cc](9a7b7cc))

* Add material-ui folder and files * Add confirm button style * Add cancel button style * Replace "none" with 0 opacity color To override buttons background color * Use new flex justify variable The variable have been introduced in sweetalert version 8.11.1 * Set color for disabled buttons * Upgrade sweetalert2 dependency version * Add hover for close button * Add style for select * Implement hover background for close Using CSS background property, the circle on hover is slightly misaligned. To workaround that, an SVG circle is used as background image. The circle is then moved slightly down to be centered around the X. * Add error icon for text box * Add radio input styling There are a lot of "magic number" so we need to review this * Adjust poisition of swal2-label stylying for radio Previous code was adding the radio control also for checkboxes * Add style for range / slider Added using engine pseudo-elements * Apply material UI style to checkbox Apply material UI style to checkbox * Fix merge issue * Fix label padding merge issue Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2 * Implement focus for action buttons * Darken active action button background Need to be same color as `focus` * Set font-family for the close button The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned * Merge conflicts with master * Fix label padding merge issue Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2 * Implement focus for action buttons * Darken active action button background Need to be same color as `focus` * Set font-family for the close button The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned * fix lint errors * remove .sass-lint.yml

# [2.2.0](v2.1.0...v2.2.0) (2019-10-17) ### Features * Material UI theme ([#21](#21)) ([a782cac](a782cac))

gverni added 7 commits May 15, 2019 14:33

Add material-ui folder and files

4622a10

Add confirm button style

250f421

Add cancel button style

d5bc578

Replace "none" with 0 opacity color

25cdb63

To override buttons background color

Use new flex justify variable

b190101

The variable have been introduced in sweetalert version 8.11.1

Set color for disabled buttons

73cf0cd

Upgrade sweetalert2 dependency version

910e311

gverni force-pushed the feat/material-ui branch from a0b10eb to 2b1c014 Compare May 23, 2019 19:09

Add hover for close button

2e0a5de

gverni force-pushed the feat/material-ui branch from 2b1c014 to 2e0a5de Compare May 23, 2019 19:12

gverni added 2 commits May 28, 2019 09:06

Add style for select

c655575

Implement hover background for close

579040e

Using CSS background property, the circle on hover is slightly misaligned. To workaround that, an SVG circle is used as background image. The circle is then moved slightly down to be centered around the X.

gverni mentioned this pull request Jun 4, 2019

Bootstrap theme #12

Closed

gverni added 2 commits June 11, 2019 13:42

Add error icon for text box

be8e0f6

Add radio input styling

9e342dd

There are a lot of "magic number" so we need to review this

Adjust poisition of swal2-label stylying for radio

76aacc2

Previous code was adding the radio control also for checkboxes

Add style for range / slider

d9faaf0

Added using engine pseudo-elements

gverni added 2 commits September 8, 2019 10:28

Implement focus for action buttons

be76d8e

Darken active action button background

c691cc0

Need to be same color as `focus`

Set font-family for the close button

cacf1e0

The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned

gverni marked this pull request as ready for review September 29, 2019 11:34

gverni added 7 commits September 29, 2019 12:39

Merge conflicts with master

f9c6ec0

Fix label padding merge issue

c2a67a7

Commit 7f14f5c (PR) was created without taking into consideration commit 76aacc2

Implement focus for action buttons

08835c1

Darken active action button background

085de86

Need to be same color as `focus`

Set font-family for the close button

3af37db

The serif font-family is not vertically aligned on macOS. Arial font-family is better vertically aligned

Merged from master

b024edf

fix lint errors

63f01ce

limonte added 2 commits October 17, 2019 19:40

remove .sass-lint.yml

575fcc7

Merge branch 'master' into feat/material-ui

8a4b501

limonte merged commit 77e5513 into master Oct 17, 2019

limonte deleted the feat/material-ui branch October 17, 2019 16:54

limonte pushed a commit that referenced this pull request Oct 17, 2019

chore(release): 2.2.0 [skip ci]

d6fc7e0

# [2.2.0](v2.1.0...v2.2.0) (2019-10-17) ### Features * Material UI theme ([#21](#21)) ([77e5513](77e5513))

limonte added the released label Oct 17, 2019

Basaingeal mentioned this pull request Oct 17, 2019

Release/v1.2.0 Basaingeal/Razor.SweetAlert2#212

Merged

limonte pushed a commit that referenced this pull request Nov 6, 2022

chore(release): 2.2.0 [skip ci]

03a3e00

# [2.2.0](v2.1.0...v2.2.0) (2019-10-17) ### Features * Material UI theme ([#21](#21)) ([9a7b7cc](9a7b7cc))

limonte pushed a commit that referenced this pull request Nov 6, 2022

chore(release): 2.2.0 [skip ci]

7addfd4

# [2.2.0](v2.1.0...v2.2.0) (2019-10-17) ### Features * Material UI theme ([#21](#21)) ([a782cac](a782cac))

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material UI implementation #21

Material UI implementation #21

gverni commented May 15, 2019 •

edited

gverni commented May 23, 2019

gverni commented May 23, 2019 •

edited

limonte commented May 23, 2019 •

edited

gverni commented May 24, 2019 •

edited

gverni commented May 28, 2019

limonte commented May 29, 2019

gverni commented May 29, 2019

gverni commented May 29, 2019

limonte commented May 29, 2019

gverni commented May 29, 2019

gverni commented Jun 11, 2019

limonte commented Jun 11, 2019

gverni commented Jun 20, 2019

gverni commented Sep 8, 2019

gverni commented Sep 29, 2019

gverni commented Sep 29, 2019

gverni commented Sep 29, 2019

maicol07 commented Oct 17, 2019

gverni commented Oct 17, 2019

maicol07 commented Oct 17, 2019

limonte commented Oct 17, 2019

Material UI implementation #21

Material UI implementation #21

Conversation

gverni commented May 15, 2019 • edited

gverni commented May 23, 2019

gverni commented May 23, 2019 • edited

limonte commented May 23, 2019 • edited

gverni commented May 24, 2019 • edited

gverni commented May 28, 2019

limonte commented May 29, 2019

gverni commented May 29, 2019

gverni commented May 29, 2019

limonte commented May 29, 2019

gverni commented May 29, 2019

gverni commented Jun 11, 2019

limonte commented Jun 11, 2019

gverni commented Jun 20, 2019

gverni commented Sep 8, 2019

gverni commented Sep 29, 2019

gverni commented Sep 29, 2019

gverni commented Sep 29, 2019

maicol07 commented Oct 17, 2019

gverni commented Oct 17, 2019

maicol07 commented Oct 17, 2019

limonte commented Oct 17, 2019

gverni commented May 15, 2019 •

edited

gverni commented May 23, 2019 •

edited

limonte commented May 23, 2019 •

edited

gverni commented May 24, 2019 •

edited