Skip to content

fix(components): cascade mode from parent to child components #19369

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 26 commits into from
Oct 8, 2019
Merged

fix(components): cascade mode from parent to child components #19369

merged 26 commits into from
Oct 8, 2019

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Sep 16, 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 #18285

In order to set the mode for child components you have to set it on each child:

<ion-segment mode="md">
  <ion-segment-button mode="md">
     This is MD
  </ion-segment>
  <ion-segment-button mode="md">
     This is MD
  </ion-segment>
  <ion-segment-button mode="md">
     This is MD
  </ion-segment>
</ion-segment>

What is the new behavior?

  • Allows you to set the mode on a parent and have it inherited by children
<ion-segment mode="md">
  <ion-segment-button>
     This is MD
  </ion-segment>
  <ion-segment-button>
     This is MD
  </ion-segment>
  <ion-segment-button>
     This is MD
  </ion-segment>
</ion-segment>

Does this introduce a breaking change?

  • Yes
  • No

This is considered breaking since users may not be expecting it but I think it is an improvement overall.

Other information

@liamdebeasi
Copy link
Contributor

One small thing I noticed:

image

The fill for the ios button is gone when doing Mode: segment md, button ios. Is this intentional? If so, I imagine the fill is dependent on the mode of the parent segment?

@brandyscarney
Copy link
Member Author

@liamdebeasi Yes, because ios and md styles are so different if you switch the mode on the button it will look broken without extra styling, but it is adding the proper mode so it is working correctly in that aspect. Segment sets the variables for the segment-button in the segment component.

@brandyscarney brandyscarney mentioned this pull request Sep 24, 2019
Closed
@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 brandyscarney mentioned this pull request Sep 27, 2019
Closed
brandyscarney and others added 11 commits September 27, 2019 17:01
@brandyscarney
Merge branch 'next' into fix-mode-cascade
96f2623
@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
Merge branch 'next' into fix-mode-cascade
03cdc92
@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">
```
@brandyscarney
Merge branch 'next' into fix-mode-cascade
dd1ba41
@brandyscarney
chore: clean build
4b9d6b9
@brandyscarney
fix(title): update with next
3ad0c8b
@brandyscarney
Copy link
Member Author

This is ready to merge when the build passes.

@brandyscarney brandyscarney merged commit 55462d7 into next Oct 8, 2019
@brandyscarney brandyscarney deleted the fix-mode-cascade branch October 8, 2019 19:47
brandyscarney added a commit that referenced this pull request Oct 8, 2019
@brandyscarney
feat(components): cascade mode from parent to child components (#19369)
d42b83c 
fixes #18285
brandyscarney added a commit that referenced this pull request Oct 9, 2019
@brandyscarney
feat(components): cascade mode from parent to child components (#19369)
fa825c9 
fixes #18285
brandyscarney added a commit that referenced this pull request Oct 10, 2019
@brandyscarney
feat(components): cascade mode from parent to child components (#19369)
3dd5f05 
fixes #18285
elylucas pushed a commit that referenced this pull request Oct 30, 2019
@brandyscarney @elylucas
feat(components): cascade mode from parent to child components (#19369)
910d598 
fixes #18285
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brandyscarney @liamdebeasi @manucorporat