4

The code snippet below is directly out of the Dreamhouse app's MapCard component. It's supposed to show the close icon (X) at the top right conner of the dialog box. It works like a charm when it is executed under Summer 17 but not in Winter 18. Does anybody have any insight into this issue?

<div class="slds-modal__header">
    <lightning:buttonIcon class="slds-button slds-button--icon-inverse slds-modal__close" variant="border-filled" onclick="{!c.closeDialog}" size="large" iconName="utility:close" />
</div>
Improve this question
4
  • Sorry this is my first post and for some reason the code snippet did not show up in the original message. Here's another attempt.
    – Ha Doan
    Commented Oct 11, 2017 at 21:48
  • <div class="slds-modal__header"> <lightning:buttonIcon class="slds-button slds-button--icon-inverse slds-modal__close" variant="border-filled" onclick="{!c.closeDialog}" size="large" iconName="utility:close" /> </div>
    – Ha Doan
    Commented Oct 11, 2017 at 21:48
  • 2
    Hi, and welcome to SFSE! To format code, use the Format Code button, or press Ctrl-K/Cmd-K on your keyboard to format the code properly. I've fixed it for you this time. You can read the help topic on other things you can do, like italics, bold, and more, by clicking on the ? icon in the question/answer editor.
    – sfdcfox ♦
    Commented Oct 11, 2017 at 22:00
  • I am seeing this same issue in Winter '18. The console output shows "Icon category "utility" does not map to a known icon asset. Make sure you are using a valid icon name"
    – Fred B
    Commented Oct 18, 2017 at 21:55

1 Answer 1

Reset to default
0

Update:

I looked at the dreamhouse git,

https://github.com/dreamhouseapp/dreamhouse-sfdx/blob/master/force-app/main/default/aura/MapCard/MapCard.cmp

The app has CSS which is modified/custom built in the style component to accommodate the developer needs

eg:slds_modal__close

If you want to purely copy paste, I will not recommend it without understanding what a CSS does. Let me explain what is happening here when you copy their CSS from the app

I took your code for the component

I copy pasted the CSS from the app 

.THIS .slds-modal__close {
    position: absolute;
    top: 100px;
    right: 5%;
}

When you look at it first time you will assume the button is not rendering, but the button renders at the corner of the screen.

enter image description here

Personal suggestion : Take out all the class attributes you have in your code Rework your way up by adding classes and position the button as required.The component is working as expected

You are missing required value "alternativeText,

https://developer.salesforce.com/docs/atlas.en-us.208.0.lightning.meta/lightning/aura_compref_lightning_buttonIcon.htm?search_text=lightning:buttonIcon

Also

Usage Considerations When using lightning:buttonIcon in a standalone app, extend force:slds to resolve the icon resources correctly

try this

    <lightning:buttonIcon  alternativeText="Close window." variant="border-filled" onclick="{!c.closeDialog}" size="large" iconName="utility:close" />

removed class attribute as pointed out by @sfdcfox

Improve this answer
13
  • Just tried that, and BTW, one of those classes is also causing the button to break. Removing the class attribute seems to clear things up.
    – sfdcfox ♦
    Commented Oct 11, 2017 at 22:17
  • Thanks Rao and sfdcfox for your suggestions. I did tried both of your suggestions but still it did not.
    – Ha Doan
    Commented Oct 12, 2017 at 0:09
  • @ha Doan can you please clearly show what errors you are seeing? It is jard to guess what you are facing
    – Rao
    Commented Oct 12, 2017 at 0:26
  • @Rao Here's the JavaScript error message. I hope it helps. /components/one-tmp-primitive-icon.js:3 <one-tmp-primitive-icon> Icon category "utility" does not map to a known icon asset. Make sure you are using a valid icon name. getDefaultAssetPath @ /components/one-tmp-primitive-icon.js:3
    – Ha Doan
    Commented Oct 12, 2017 at 22:59
  • are you on Lightning environment ? can you post your updated component with the fix suggested in the answer?
    – Rao
    Commented Oct 12, 2017 at 23:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .