Skip to content

feat(overlays): add global backdrop opacity variable for animations #19533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 19 commits into from
Oct 8, 2019
Merged

feat(overlays): add global backdrop opacity variable for animations #19533

merged 19 commits into from
Oct 8, 2019

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Oct 2, 2019 •
edited
Loading

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Issue Number: fixes #16446

What is the new behavior?

  • Adds --backdrop-opacity as a component level variable to all overlays
  • Adds --ion-backdrop-opacity to change the overlays backdrop opacity globally
  • This removes the need to customize the entire animation

Does this introduce a breaking change?

  • Yes
  • No

Other information

liamdebeasi and others added 13 commits September 27, 2019 15:51
@liamdebeasi @brandyscarney
refactor(toast): remove showCloseButton and closeButtonText (#18957)
8f68646 
* Remove close button

* update tests

* update tests

* add build
@manucorporat @brandyscarney
refactor(): deprecate web component controllers (#19109)
76f1747
@brandyscarney
refactor(nav): remove nav-push, nav-pop nav-root (#19240)
e334d73 
BREAKING CHANGES

Removes ion-nav-pop, ion-nav-push and ion-nav-set-root in favor of using ion-nav-link with router-direction
@brandyscarney
refactor(scss): remove scss (#19292)
6450aff 
BREAKING CHANGES

Removes `scss` files from the distributed files. Please use CSS variables for theming instead.
@brandyscarney
refactor(themes): update to new ionic colors (#19279)
7f4cf08 
BREAKING CHANGES

The Ionic default colors have been updated to the following:

primary:         #3880ff
secondary:       #3dc2ff
tertiary:        #5260ff
success:         #2dd36f
warning:         #ffc409
danger:          #eb445a
light:           #f4f5f8
medium:          #92949c
dark:            #222428

`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
@brandyscarney
refactor(css): remove CSS util attributes (#18956)
04862df 
BREAKING CHANGES

Removes all CSS utility attributes. Please use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities
@brandyscarney
refactor(skeleton-text): remove width property (#18936)
7c3db79 
BREAKING CHANGES

Skeleton text's `width` property has been removed. Please use CSS instead to set the width.
@brandyscarney
refactor(anchor): remove anchor in favor of router-link (#18935)
e7cd197 
BREAKING CHANGES

The deprecated `ion-anchor` component has been removed in favor using `ion-router-link`. It should still only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.
@brandyscarney
refactor(searchbar): remove boolean values from showCancelButton (#18953
508e186 
)

BREAKING CHANGES

The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`. The following should change:

```
<ion-searchbar show-cancel-button>
<ion-searchbar show-cancel-button="true">
<ion-searchbar show-cancel-button="false">
```

becomes

```
<ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="never">
```
@liamdebeasi
refactor(): remove no-border references, add ion-no-border class (#18954
d9f6119 
)

* remove no border ref

* change to dispaly

* update usage
@liamdebeasi
refactor(): remove [main] from split-pane (#19511)
02d7841
@liamdebeasi
refactor(): remove deprecated swipeEnable (#19526)
30bd8fd
@brandyscarney
feat(overlays): add ion-backdrop-opacity global variable
08b22da 
fixes #16446
@ionitron-bot ionitron-bot bot added package: angular @ionic/angular package package: core @ionic/core package labels Oct 2, 2019
@brandyscarney brandyscarney requested review from liamdebeasi and manucorporat and removed request for manucorporat October 2, 2019 17:05
@brandyscarney brandyscarney changed the base branch from master to next October 2, 2019 17:05
@brandyscarney brandyscarney mentioned this pull request Oct 2, 2019
Closed
@brandyscarney brandyscarney mentioned this pull request Oct 7, 2019
Closed
@brandyscarney brandyscarney merged commit 60e1c4d into next Oct 8, 2019
@brandyscarney brandyscarney deleted the feat-backdrop-opacity branch October 8, 2019 20:42
brandyscarney added a commit that referenced this pull request Oct 8, 2019
@brandyscarney
feat(overlays): add global backdrop opacity variable for animations (#…
4dcabf4 
…19533)

adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
brandyscarney added a commit that referenced this pull request Oct 9, 2019
@brandyscarney
feat(overlays): add global backdrop opacity variable for animations (#…
df63ca7 
…19533)

adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
brandyscarney added a commit that referenced this pull request Oct 10, 2019
@brandyscarney
feat(overlays): add global backdrop opacity variable for animations (#…
bd22926 
…19533)

adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
elylucas pushed a commit that referenced this pull request Oct 30, 2019
@brandyscarney @elylucas
feat(overlays): add global backdrop opacity variable for animations (#…
b24f18d 
…19533)

adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
@ShaggyDude
Copy link

Does this work now? I'm in the latest ionic 5 and it doesn't appear to work there?

@lincolnthree
Copy link

lincolnthree commented Aug 4, 2020 •
edited
Loading

Works here.
In your root stylesheet:

:root {
  --ion-backdrop-opacity: 1;
}

@lincolnthree
Copy link

What doesn't work, however, is backdrop opacity on the ion-menu component. It does not seem to be integrated there.

@ShaggyDude
Copy link

lincolnthree is correct. Is there a way to make it work in ion-menu?

@alexandre-khoury
Copy link

same question here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@manucorporat manucorporat Awaiting requested review from manucorporat

1 more reviewer

@liamdebeasi liamdebeasi liamdebeasi left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

package: angular @ionic/angular package package: core @ionic/core package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@brandyscarney @ShaggyDude @lincolnthree @alexandre-khoury @liamdebeasi @manucorporat