feat(button): add icon alone UIKit VitaminButton type, and refactor i…

…con management (#75) * feat(button) : add icon alone button type, and refactor icon management * feat(button) : add icon alone button type, and refactor icon management - swiftlint fixes * feat(button) : add icon alone button type - fix whitespaces in README * feat(button): add icon alone UIKit VitaminButton type - PR reviews Co-authored-by: Florent LOTTHÉ <[email protected]> * feat(button): add icon alone UIKit VitaminButton type - PR reviews Co-authored-by: Florent LOTTHÉ <[email protected]> Co-authored-by: Florent LOTTHÉ <[email protected]>
Decathlon · Jul 26, 2022 · fd92229 · fd92229
1 parent 5ef8e35
commit fd92229
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 45 deletions.
diff --git a/Showcase/Application/UIKit/Components/Button/Cell/ButtonTableViewCell.swift b/Showcase/Application/UIKit/Components/Button/Cell/ButtonTableViewCell.swift
@@ -19,21 +19,52 @@ final class ButtonTableViewCell: UITableViewCell {
             largeButton.size = .large
         }
     }
+    @IBOutlet weak var mediumIconAloneButton: VitaminButton! {
+        didSet {
+            mediumIconAloneButton.size = .medium
+        }
+    }
+
+    @IBOutlet weak var largeIconAloneButton: VitaminButton! {
+        didSet {
+            largeIconAloneButton.size = .large
+        }
+    }
 
     func update(for style: VitaminButton.Style, isEnabled: Bool) {
         mediumButton.style = style
         largeButton.style = style
+        mediumIconAloneButton.style = style
+        largeIconAloneButton.style = style
 
         mediumButton.setTitle("\(style)", for: .normal)
         largeButton.setTitle("\(style)", for: .normal)
-        mediumButton.setLeadingImage(Vitamix.Line.Logos.apple.image, for: .normal, renderingMode: .alwaysTemplate)
-        largeButton.setTrailingImage(
-            Vitamix.Line.System.arrowRightS.image,
-            for: .normal,
-            renderingMode: .alwaysTemplate)
+
+        mediumButton.setIconType(
+            .trailing(
+                image: Vitamix.Line.Logos.apple.image,
+                renderingMode: .alwaysTemplate),
+            for: .normal)
+        largeButton.setIconType(
+            .leading(
+                image: Vitamix.Line.System.arrowRightS.image,
+                renderingMode: .alwaysTemplate),
+            for: .normal)
+        mediumIconAloneButton.setIconType(
+            .alone(
+                image: Vitamix.Line.Logos.apple.image,
+                renderingMode: .alwaysTemplate),
+            for: .normal)
+        largeIconAloneButton.setIconType(
+            .alone(
+                image: Vitamix.Line.System.arrowRightS.image,
+                renderingMode: .alwaysTemplate),
+            for: .normal)
 
         mediumButton.isEnabled = isEnabled
         largeButton.isEnabled = isEnabled
+        mediumIconAloneButton.isEnabled = isEnabled
+        largeIconAloneButton.isEnabled = isEnabled
 
         contentView.backgroundColor = style.needsReversedBackground ?
         VitaminColor.Core.Background.brandPrimary :

diff --git a/Showcase/Application/UIKit/Components/Button/Cell/ButtonTableViewCell.xib b/Showcase/Application/UIKit/Components/Button/Cell/ButtonTableViewCell.xib
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19519"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
         <capability name="Stack View standard spacing" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -18,21 +18,41 @@
                 <rect key="frame" x="0.0" y="0.0" width="414" height="284"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="bnP-7f-vgf">
+                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="bnP-7f-vgf">
                         <rect key="frame" x="20" y="20" width="374" height="244"/>
                         <subviews>
-                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="riL-iH-YB3" customClass="VitaminButton" customModule="Vitamin">
-                                <rect key="frame" x="160" y="0.0" width="54" height="118"/>
+                            <button opaque="NO" contentMode="scaleToFill" verticalHuggingPriority="251" contentHorizontalAlignment="center" contentVerticalAlignment="center" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="riL-iH-YB3" customClass="VitaminButton" customModule="Vitamin">
+                                <rect key="frame" x="160" y="0.0" width="54" height="34"/>
                                 <state key="normal" title="Button">
                                     <color key="titleColor" systemColor="labelColor"/>
                                 </state>
                             </button>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="wmJ-0t-lzC" customClass="VitaminButton" customModule="Vitamin">
-                                <rect key="frame" x="160" y="126" width="54" height="118"/>
+                                <rect key="frame" x="160" y="42" width="54" height="34"/>
                                 <state key="normal" title="Button">
                                     <color key="titleColor" systemColor="labelColor"/>
                                 </state>
                             </button>
+                            <stackView opaque="NO" contentMode="center" alignment="center" spacing="30" translatesAutoresizingMaskIntoConstraints="NO" id="MUK-Sd-UPa">
+                                <rect key="frame" x="118" y="84" width="138" height="160"/>
+                                <subviews>
+                                    <button opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" contentHorizontalAlignment="center" contentVerticalAlignment="center" adjustsImageWhenHighlighted="NO" adjustsImageWhenDisabled="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="mB3-mr-Qcw" customClass="VitaminButton" customModule="Vitamin">
+                                        <rect key="frame" x="0.0" y="63" width="54" height="34"/>
+                                        <fontDescription key="fontDescription" type="system" pointSize="18"/>
+                                        <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
+                                        <state key="normal" title="Button">
+                                            <color key="titleColor" systemColor="labelColor"/>
+                                        </state>
+                                    </button>
+                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="3T1-Vu-Y5d" customClass="VitaminButton" customModule="Vitamin">
+                                        <rect key="frame" x="84" y="63" width="54" height="34"/>
+                                        <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
+                                        <state key="normal" title="Button">
+                                            <color key="titleColor" systemColor="labelColor"/>
+                                        </state>
+                                    </button>
+                                </subviews>
+                            </stackView>
                         </subviews>
                     </stackView>
                 </subviews>
@@ -45,7 +65,9 @@
             </tableViewCellContentView>
             <connections>
                 <outlet property="largeButton" destination="wmJ-0t-lzC" id="Jm9-4K-gse"/>
+                <outlet property="largeIconAloneButton" destination="3T1-Vu-Y5d" id="1hz-1n-NL9"/>
                 <outlet property="mediumButton" destination="riL-iH-YB3" id="sYZ-in-0qP"/>
+                <outlet property="mediumIconAloneButton" destination="mB3-mr-Qcw" id="6WS-0R-SL8"/>
             </connections>
             <point key="canvasLocation" x="-123" y="1"/>
         </tableViewCell>

diff --git a/Sources/VitaminUIKit/Components/Button/README.md b/Sources/VitaminUIKit/Components/Button/README.md
@@ -22,3 +22,39 @@ A good example of that would be to make your button stretched to fit its parent'
 Note: `VitaminButton` styles its title as  `TextStyle.xxxbutton`, so make sure you setup the Roboto fonts properly.
 
 If you create your button through Storyboard or Xib, do not forget to set its type to `Custom` (instead of `System`, which is the default value). If not set to `Custom`, `VitaminButton` may act oddly in some circumstances.
+
+### Icon management
+You can put an icon from Vitamin icons library in your button, or also have a square button with only one icon.
+
+To achieve this, `VitaminButton` provides you with a `setIconType(:for:)` method.
+You can have different icons, or even different icon types per state.
+
+`IconType` has four cases:
+- `.leading`: icon will be put before your button label
+- `.trailing`: icon will be put after your button label
+- `.alone`: button will be squared, an icon will be centered, and no button label will be displayed
+- `.none`: no icon will be displayed in your button
+
+For `.leading`, `.trailing` and `.alone`, you must provide:
+- an `UIImage` from Vitamin icons library (but will work with any `UIImage`)
+- an optional `UIImage.RenderingMode`: if you provide one, image will be resized using this rendering mode, if not, image will be used as is (with unexpected behaviour if your image has a wrong size)
+
+If you do not specify specific icon type for a specific state, the one for `.normal` state will be chosen.
+And by default, the icon type for `.normal` state is `.none`.
+
+Note: squareness of VitaminButton with `.alone` is handled through intrisicSize, it is not guaranteed if you apply constants that could impact width and height of button.
+
+```swift
+import Vitamin
+
+// This button will have a white background with a dark border
+// and an apple logo before text (in every state, since only .normal state has been set)
+let button = VitaminButton(style: .secondary)
+button.setIconType(.trailing(image: Vitamix.Line.Logos.apple.image, renderingMode: .alwaysTemplate), for: .normal)
+
+// This button will be square, have a blue background and a white icon centered
+// icon will be an Apple logo in normal state, and an Android logo in .highlighted state
+let button2 = VitaminButton(style: .primary)
+button2.setIconType(.trailing(image: Vitamix.Line.Logos.apple.image, renderingMode: .alwaysTemplate), for: .normal)
+button2.setIconType(.trailing(image: Vitamix.Line.Logos.android.image, renderingMode: .alwaysTemplate), for: .highlighted)
+```
diff --git a/Sources/VitaminUIKit/Components/Button/VitaminButton+Deprecated.swift b/Sources/VitaminUIKit/Components/Button/VitaminButton+Deprecated.swift
@@ -0,0 +1,25 @@
+//
+//  Vitamin iOS
+//  Apache License 2.0
+//
+
+import UIKit
+
+extension VitaminButton {
+    @available(*, deprecated, message: "Use setIconType(:for:) instead")
+    public func setLeadingImage(_ image: UIImage, for state: UIControl.State) {
+        setIconType(.leading(image: image, renderingMode: nil), for: state)
+    }
+    @available(*, deprecated, message: "Use setIconType(:for:) instead")
+    public func setTrailingImage(_ image: UIImage, for state: UIControl.State) {
+        setIconType(.trailing(image: image, renderingMode: nil), for: state)
+    }
+    @available(*, deprecated, message: "Use setIconType(:for:) instead")
+    public func setLeadingImage(_ image: UIImage, for state: UIControl.State, renderingMode: UIImage.RenderingMode) {
+        setIconType(.leading(image: image, renderingMode: renderingMode), for: state)
+    }
+    @available(*, deprecated, message: "Use setIconType(:for:) instead")
+    public func setTrailingImage(_ image: UIImage, for state: UIControl.State, renderingMode: UIImage.RenderingMode) {
+        setIconType(.trailing(image: image, renderingMode: renderingMode), for: state)
+    }
+}