Skip to content

feat(segment): implement iOS 13 segment with animation#19036

Merged
liamdebeasi merged 105 commits into
masterfrom
feat-segment-design
Jan 14, 2020
Merged

feat(segment): implement iOS 13 segment with animation#19036
liamdebeasi merged 105 commits into
masterfrom
feat-segment-design

Conversation

@brandyscarney

@brandyscarney brandyscarney commented Aug 7, 2019

Copy link
Copy Markdown
Member

🔍 READY FOR REVIEW 🔍

Docs PR: ionic-team/ionic-docs#1072

Dev Build

5.0.0-dev.201911072022.7909b12

Changes

Closes #18663

  • Converts Segment to shadow
  • Enables gesture to swipe between segment buttons
  • Adds indicator transition to slide the indicator between buttons
  • Updates global theme variables
  • Removes activated state, now handled by the gesture
  • Updates iOS to latest iOS 13 UI
  • Ensures customization is working for the buttons and indicator
  • Updates the e2e tests
  • Full list of changes: https://gist.github.com/brandyscarney/e6cfe43c359bb2c932e12f8d615e1669

Screenshots

iOS

old new
old basic new basic
old colors new colors
old custom new custom
old spec new spec
old toolbar new toolbar

Material Design

old new
old basic new basic
old colors new colors
old custom new custom
old spec new spec
old toolbar new toolbar

@ionitron-bot ionitron-bot Bot added package: angular @ionic/angular package package: core @ionic/core package labels Aug 7, 2019
Comment thread core/src/components/segment/segment.tsx Outdated
Comment thread core/src/components/segment/segment.tsx Outdated
@brandyscarney brandyscarney changed the base branch from master to next August 27, 2019 14:53

@liamdebeasi liamdebeasi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to disable scrolling while swiping on iOS? If I hold down and swipe horizontally I can also scroll vertically.

Comment thread core/src/components/segment/segment.tsx Outdated

const { x, y } = pointerCoord(detail.event);

ripple.addRipple(x, y).then(remove => remove());

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I'm actually trying this on an Android device and the ripple is being applied to the starting element not the ending element.

Steps to repro:

  1. Load the Basic test on Android.
  2. Start on "Free" and and swipe to "Top".
  3. Release finger. Notice that the ripple is applied to "Free" and not "Top".

@liamdebeasi liamdebeasi merged commit dc66ce4 into master Jan 14, 2020
@liamdebeasi liamdebeasi deleted the feat-segment-design branch January 14, 2020 16:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: iOS 13 Segmented Control

5 participants