Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

md-colors is broken with default theme in dialog #10276

Closed
mohammadrafigh opened this issue Jan 18, 2017 · 15 comments
Closed

md-colors is broken with default theme in dialog #10276

mohammadrafigh opened this issue Jan 18, 2017 · 15 comments
Assignees
Labels
- Lots of Comments has: Pull Request A PR has been created to address this issue P2: required Issues that must be fixed. resolution: fixed severity: regression This issue is related to a regression type: bug ui: theme
Milestone

Comments

@mohammadrafigh
Copy link
Contributor

mohammadrafigh commented Jan 18, 2017

Actual Behavior:

  • What is the issue? *

using md-colors with default theme inside dialog throws this in 1.1.3:
mdColors: couldn't find '' in the palettes.

  • What is the expected behavior?
    the default color palette should be applied with warning color.

CodePen (or steps to reproduce the issue): *

CodePen

Angular Versions: *

  • Angular Version: 1.3.20, 1.5.8, 1.5.11
  • Angular Material Version: release: version 1.1.3

Additional Information:

  • Browser Type: * Chromium
  • Browser Version: * 55.0.2883.87
  • OS: * Ubuntu 16.10
  • Stack Traces: mdColors: couldn't find '' in the palettes.
@Schweigi
Copy link

It's definitely broken since Angular-Mateiral v1.1.3. Adding the term default as prefix to the color will work as a workaround in the meantime.

Example:
md-colors="{color:'warn'}" => md-colors="{color:'default-warn'}"

@jbabaei
Copy link

jbabaei commented Jul 1, 2017

Excellent. very good

@kylekatarnls
Copy link
Contributor

kylekatarnls commented Aug 3, 2017

If it can help to debug, I added a breakpoint here:

    function applyThemeColors(element, colorExpression) {
      try {
        if (colorExpression) {
          // Assign the calculate RGBA color values directly as inline CSS
           element.css(interpolateColors(colorExpression));
        }
      } catch (e) {
        $log.error(e.message);
      }

    }

colorExpression = primary in the page.
colorExpression = -primary in the dialog.

@codymikol
Copy link
Contributor

codymikol commented Jan 18, 2018

This is definitely still an issue, any updates on this?

I actually figured out how this can be fixed, I'm looking into making a PR now

codymikol pushed a commit to codymikol/material that referenced this issue Jan 18, 2018
Assert that md-dialog-container will not be given an md-theme attribute if the child it is propagated from does not contain a theme itself.

Issue: angular#10276
codymikol pushed a commit to codymikol/material that referenced this issue Jan 18, 2018
Assert that md-dialog-container will be given the md-theme attribute of the child it is propogated from given that it has an md-theme.

Issue: angular#10276
codymikol pushed a commit to codymikol/material that referenced this issue Jan 18, 2018
Only append an md-theme attribute if the md-dialog is propagated from an element that contains an md-theme.

Issue: angular#10276
@codymikol
Copy link
Contributor

I made a PR #11078

For anyone looking for a workaround to this issue, if you set the md-theme property inside of your dialog content to either default or the specific theme you want to use, this will stop md-colors from breaking.

@Splaktar Splaktar added - Lots of Comments severity: regression This issue is related to a regression type: bug ui: theme P2: required Issues that must be fixed. has: Pull Request A PR has been created to address this issue labels Mar 1, 2018
@Splaktar Splaktar added this to the 1.1.8 milestone Mar 1, 2018
@Splaktar Splaktar self-assigned this Mar 1, 2018
@Splaktar
Copy link
Contributor

Splaktar commented Mar 1, 2018

Updated CodePen for 1.1.7. Issue still occurs.

codymikol pushed a commit to codymikol/material that referenced this issue Mar 1, 2018
Only append an md-theme attribute if the md-dialog is propagated from an element that contains an md-theme.

Fixes angular#10276
@thorvx
Copy link

thorvx commented Mar 14, 2018

Same issue.

Related issue: #525

@Splaktar
Copy link
Contributor

The PR to fix this is going through the presubmit process (there was unfortunately a delay in that process) and then hopefully it will pass and be able to be merged.

@akvaliya
Copy link

akvaliya commented Apr 9, 2018

@Splaktar Is this issue resolved yet? I am facing it when dynamic theme is generated.

@codymikol
Copy link
Contributor

@akvaliya This was fixed in 1.1.8

@garretwilson
Copy link

I just ran into this with AngularJS 1.6.4. "{color:'accent'}" seems to work on the main page, but in an mdDialog I had to use "{color:'default-accent'}" to get it to work.

@Splaktar
Copy link
Contributor

@garretwilson which version of AngularJS Material are you using?

@Splaktar
Copy link
Contributor

@garretwilson this is fixed in 1.1.8. Here's the CodePen above updated for 1.1.8 that shows this working without the need to add default-.

@garretwilson
Copy link

Ah, I'm using 1.1.3. Thanks for the info; we'll update in our next iteration.

@garretwilson
Copy link

Yep, v1.1.8 seems to have fixed it, thanks.

chmelevskij pushed a commit to chmelevskij/material that referenced this issue Jun 19, 2018
Only append an md-theme attribute if the md-dialog is propagated from an element that contains an md-theme.

Fixes angular#10276
Splaktar pushed a commit that referenced this issue Jul 31, 2018
Only append an md-theme attribute if the md-dialog is propagated from an element that contains an md-theme.

Fixes #10276
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
- Lots of Comments has: Pull Request A PR has been created to address this issue P2: required Issues that must be fixed. resolution: fixed severity: regression This issue is related to a regression type: bug ui: theme
Projects
None yet
Development

No branches or pull requests

9 participants