Ionic 4: Action Sheet cssClass styles are not taking precedence

Bug Report

Ionic version:

Ionic cli [x] 4.8.0 @ionic/angular [x] 4.0.0

Current behavior:

Css class given to action sheet controller is not applied Here is a image https://imagebin.ca/v/4VAY5ipacINn

Expected behavior:

It should successfully apply css class to action sheet modal Here is a image https://imagebin.ca/v/4VAXiJ17wt4d

Steps to reproduce:

1. Use steps from docs to open a action sheet modal.
2. Create a class in your scss file, like the one below

.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

1. Now provide the css class name to cssClass attribute in options of action sheet controller as shown below

 const actionSheet = await this.actionSheetController.create({
      mode: 'md',
      cssClass: 'match-item-action-sheet red',
      buttons: [{ ...
      }]
    });

1. You can see your class is not applied to action sheet modal.

Related code:

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[brandyscarney]

Thanks for the feedback! As I stated at the beginning of my last comment, this issue is definitely a documentation issue. I get the frustration with the documentation, but saying “the docs are awful” is not something we can act on. The ionic-docs repository I linked above is a perfect place to create actionable documentation issues that we can improve upon.

After reviewing this issue I created my comment above to make sure I covered all of the use cases mentioned here and then added documentation via this PR to all of the scoped overlays to help clarify it. Reviewing the issue, commenting and adding the documentation took hours of my time, which is definitely important and needed to be done, but this takes away from time spent on bug fixes. This is why it’s so helpful when a documentation issue is created that states “Angular’s component level stylesheets don’t work for overlays” as this is something that we can review and add documentation for. When issues are created here stating it’s a bug we have to investigate it which is time consuming with so little of us and so many issues. This is why we often recommend asking support questions on the Ionic Forums as you are more likely to receive a faster response.

The plugin documentation is a community based effort, besides the enterprise plugins. We have outlined this in the Ionic Native docs here and here. Each one is maintained in its own repository. For example, Analytics Firebase is located on appfeels GitHub. While the usage on these is limited, the community plugins mostly serve as a listing to view the full documentation on their individual repositories.

based on personal experience and how ionic is trying to diversify far too quickly(react/vue)

I know it seems like a lot of resources are going into React and Vue support, but because our core components are now web components — these integrations are simply bindings on top of the components. The entire time that the React integration was being worked on most of the framework team was working on including support for Angular 9 / Ivy and adding features and fixes to the core Ionic components (which Ionic React benefited from, but it was not done specifically for that integration). The important part here is that the core components & Angular have not suffered as a result of that work. It has always been our ultimate goal to expand framework support though.

I tried bringing this matter privately to other people within ionic, however, all were ignored or quickly dismissed.

I’m not sure who it is you reached out to, and although I can’t speak for them personally, I can say with confidence that it wasn’t ignored or dismissed — at least not on purpose. Due to being a small company with a lot of moving parts, sometimes feedback falls through the cracks. I’ll make sure the issue surrounding the plugins documentation is brought up with the rest of team again though and if you’d like to reach out to the team directly outside of GitHub you can email us at help at ionic dot io.

[brandyscarney]

I’ve just reviewed this issue in its entirety. There are a few issues here which I’ll go over, but overall this is a documentation issue.

Targeting the wrong element

The below CSS from the main issue will never work as expected because the .action-sheet-group is what needs to be targeted. This is targeting the entire overlay:

/* DOES NOT work */
.match-item-action-sheet {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

So instead it would be this, which applies rounded borders only to the first group. The reason for first-of-type is because the cancel button is its own group and applying the border-top-*-radius to that group looks odd:

.match-item-action-sheet .action-sheet-group:first-of-type {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

Adding the CSS in the wrong place

Steps

1. ionic start myApp blank (Angular)

2. Add a button that opens an Action Sheet with a css class passed: cssClass: 'match-item-action-sheet', in home/home.page.ts

3. Confirmed that the class was added on the Action Sheet in devtools:

   

4. Observe that adding any CSS targeting it in the home/home.page.scss file does NOT show up in devtools:

   .match-item-action-sheet .action-sheet-group:first-of-type {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
   }
   

   

   ⚠️ This is due to the fact that the ion-action-sheet element is attached to the ion-app, outside of the current page structure. ⚠️

5. Move the CSS to the end of the global.scss file, notice it is now showing up in devtools and applying properly:

   

   ⚠️ This is due to global.scss being added as a global stylesheet in the Angular config ⚠️

   "styles": [
     {
       "input": "src/theme/variables.scss"
     },
     {
       "input": "src/global.scss"
     }
   ],
   

Using a lower CSS specificity

When using the CSS from this comment: https://github.com/ionic-team/ionic/issues/17300#issuecomment-575539790

.example ion-icon {
  color: blue;
}

If you inspect in devtools you’ll see that the CSS is there, but it isn’t being applied:

This is because the Scoped CSS selector .action-sheet-icon.sc-ion-action-sheet-md has a higher precedence. In order to fix this, you can update it to the following:

.example .action-sheet-icon {
  color: blue;
}

Notice it now takes precedence. I recently updated our documentation to add a badge to scoped components, you can see it in the upper right on Action Sheet here: https://ionicframework.com/docs/api/action-sheet

This links to the following glossary item: https://ionicframework.com/docs/reference/glossary#scoped

Which includes more info on specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

If you have any tips for improving our documentation on this, please let us know on the following repo: https://github.com/ionic-team/ionic-docs/issues

---

Please let me know if I missed anything. Thanks!