{"action":"created","issue":{"url":"https://api.github.com/repos/material-components/material-components-ios/issues/6621","repository_url":"https://api.github.com/repos/material-components/material-components-ios","labels_url":"https://api.github.com/repos/material-components/material-components-ios/issues/6621/labels{/name}","comments_url":"https://api.github.com/repos/material-components/material-components-ios/issues/6621/comments","events_url":"https://api.github.com/repos/material-components/material-components-ios/issues/6621/events","html_url":"https://github.com/material-components/material-components-ios/pull/6621","id":410565623,"node_id":"MDExOlB1bGxSZXF1ZXN0MjUzMjgwMzYy","number":6621,"title":"[Cards] [Ripple] Integrate the new ripple and states into the Cards component","user":{"login":"yarneo","id":4066863,"node_id":"MDQ6VXNlcjQwNjY4NjM=","avatar_url":"https://avatars2.githubusercontent.com/u/4066863?v=4","gravatar_id":"","url":"https://api.github.com/users/yarneo","html_url":"https://github.com/yarneo","followers_url":"https://api.github.com/users/yarneo/followers","following_url":"https://api.github.com/users/yarneo/following{/other_user}","gists_url":"https://api.github.com/users/yarneo/gists{/gist_id}","starred_url":"https://api.github.com/users/yarneo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yarneo/subscriptions","organizations_url":"https://api.github.com/users/yarneo/orgs","repos_url":"https://api.github.com/users/yarneo/repos","events_url":"https://api.github.com/users/yarneo/events{/privacy}","received_events_url":"https://api.github.com/users/yarneo/received_events","type":"User","site_admin":false},"labels":[{"id":824189294,"node_id":"MDU6TGFiZWw4MjQxODkyOTQ=","url":"https://api.github.com/repos/material-components/material-components-ios/labels/[Cards]","name":"[Cards]","color":"eeeeee","default":false},{"id":1178438787,"node_id":"MDU6TGFiZWwxMTc4NDM4Nzg3","url":"https://api.github.com/repos/material-components/material-components-ios/labels/[Ripple]","name":"[Ripple]","color":"ededed","default":false},{"id":273191333,"node_id":"MDU6TGFiZWwyNzMxOTEzMzM=","url":"https://api.github.com/repos/material-components/material-components-ios/labels/cla:%20yes","name":"cla: yes","color":"c2e0c6","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2019-02-15T01:28:05Z","updated_at":"2019-02-19T23:03:42Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/material-components/material-components-ios/pulls/6621","html_url":"https://github.com/material-components/material-components-ios/pull/6621","diff_url":"https://github.com/material-components/material-components-ios/pull/6621.diff","patch_url":"https://github.com/material-components/material-components-ios/pull/6621.patch"},"body":"**Overview**\r\nThis PR integrates the new Ripple component and its state support into our existing Cards and CardCells components. It does so in an opt in form, where you must have MaterialComponentsBeta installed for one to have Cards use the new behavior. The PR also includes 2 examples showcasing the new behavior with MDCCard and MDCCardCollectionCell.\r\n\r\n**Resolves**: #6463\r\n\r\n**Acceptance Criteria:**\r\n* The Cards have an opt in property (as ripple is in beta) to be able to activate the ripple and its states support in Cards. It will fallback to the existing (legacy) implementation by default.\r\n* An MDC example that showcases the work for Cards.\r\n* Interaction and animation with the card should follow the guidelines from the updated cards design doc.\r\n\r\n**Implementation Explained**\r\nThis is a pioneer PR, trying to converge a beta component into a ready component. To do so we had to have our Card component not be aware of the existence of the beta component Ripple, but we needed the Ripple component to be able to plug in to the Card component.\r\n\r\nTo achieve this I created a few different things:\r\n1. A ripple delegate that plugs into MDCCard and MDCCardCollectionCell that consists of methods that should be invoked in the component where the Ripple work needs to be inserted. A check for the existence of the delegate and the corresponding delegate method is checked in the Card component before invoked. This allows us to identify if Ripple should be used or not.\r\n\r\n2. A MDCCard+Private and MDCCardCollectionCell+Private categories that expose the RippleView property in the implementation files of the Card component, and also exposing other methods that the Ripple integration needs to invoke but aren't exposed in the original Card header files.\r\n\r\n3. An MDCCard+Ripple and MDCCardCollectionCell+Ripple categories under beta, that implement the delegate introduced in 1. and have knowledge and access to the beta component Ripple. This is where the actual implementation of the ripple integration sits.\r\n\r\n4. Lastly, we need a way to set card.rippleDelegate = self for the +Ripple categories. However, there are a few issues in achieving this. If we create a BOOL property like `shouldIntegrateRipple`, we would need to be able to switch the state from `YES` to `NO` and back correctly. The state is very complicated when you have states, ripple vs ink, etc. Therefore the best way to do this is not to allow users to trigger a BOOL, but to have a separate initializer for `initWithRipple`. However, CardCollectionCells are reused and the dequeue method calls `initWithFrame` and we can't ask it to invoke `initWithRippleandFrame` instead. Therefore, I added performSelector logic in the init methods of the Card component that checks to see if the Cards+Ripple category is apparent (meaning Beta is integrated in the framework), and if so initializes the Ripple. Happy to find alternatives if better ones are offered."},"comment":{"url":"https://api.github.com/repos/material-components/material-components-ios/issues/comments/465348030","html_url":"https://github.com/material-components/material-components-ios/pull/6621#issuecomment-465348030","issue_url":"https://api.github.com/repos/material-components/material-components-ios/issues/6621","id":465348030,"node_id":"MDEyOklzc3VlQ29tbWVudDQ2NTM0ODAzMA==","user":{"login":"material-automation","id":19738546,"node_id":"MDQ6VXNlcjE5NzM4NTQ2","avatar_url":"https://avatars2.githubusercontent.com/u/19738546?v=4","gravatar_id":"","url":"https://api.github.com/users/material-automation","html_url":"https://github.com/material-automation","followers_url":"https://api.github.com/users/material-automation/followers","following_url":"https://api.github.com/users/material-automation/following{/other_user}","gists_url":"https://api.github.com/users/material-automation/gists{/gist_id}","starred_url":"https://api.github.com/users/material-automation/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/material-automation/subscriptions","organizations_url":"https://api.github.com/users/material-automation/orgs","repos_url":"https://api.github.com/users/material-automation/repos","events_url":"https://api.github.com/users/material-automation/events{/privacy}","received_events_url":"https://api.github.com/users/material-automation/received_events","type":"User","site_admin":false},"created_at":"2019-02-19T23:03:42Z","updated_at":"2019-02-19T23:03:42Z","author_association":"NONE","body":"The following files are not in any BUILD targets:\n\n```\ncomponents/Cards/src/MDCCard+Ripple.h\ncomponents/Cards/src/MDCCard+Ripple.m\ncomponents/Cards/src/MDCCard.h\ncomponents/Cards/src/MDCCard.m\ncomponents/Cards/src/MDCCardCollectionCell+Ripple.h\ncomponents/Cards/src/MDCCardCollectionCell+Ripple.m\ncomponents/Cards/src/MDCCardCollectionCell.h\ncomponents/Cards/src/MDCCardCollectionCell.m\ncomponents/Cards/src/private/MDCCard+Private.h\ncomponents/Cards/src/private/MDCCardCollectionCell+Private.h\n```\n\n\n<!-- identifier: bazel-rule-coverage -->"}}
{"actor":{"display_login":"material-automation"}}