add buttonClass attribute

Author: congmingwudi

datasets/mapping.yml

@@ -1,45 +1 @@
-Insert Accounts:
-  sf_object: Account
-  table: Account
-  fields:
-    Name: Name
-    Description: Description
-    BillingStreet: BillingStreet
-    BillingCity: BillingCity
-    BillingState: BillingState
-    BillingPostalCode: BillingPostalCode
-    BillingCountry: BillingCountry
-    ShippingStreet: ShippingStreet
-    ShippingCity: ShippingCity
-    ShippingState: ShippingState
-    ShippingPostalCode: ShippingPostalCode
-    ShippingCountry: ShippingCountry
-    Phone: Phone
-    Fax: Fax
-    Website: Website
-    NumberOfEmployees: NumberOfEmployees
-    AccountNumber: AccountNumber
-    Site: Site
-    Type: Type
-Insert Contacts:
-  sf_object: Contact
-  table: Contact
-  fields:
-    Salutation: Salutation
-    FirstName: FirstName
-    LastName: LastName
-    Email: Email
-    Phone: Phone
-    MobilePhone: MobilePhone
-    OtherPhone: OtherPhone
-    HomePhone: HomePhone
-    Title: Title
-    Birthdate: Birthdate
-    MailingStreet: MailingStreet
-    MailingCity: MailingCity
-    MailingState: MailingState
-    MailingPostalCode: MailingPostalCode
-    MailingCountry: MailingCountry
-  lookups:
-    AccountId:
-      table: accounts
+{}

datasets/sample.sql

@@ -0,0 +1,2 @@
+BEGIN TRANSACTION;
+COMMIT;

force-app/main/default/aura/RC_FlowButton/RC_FlowButton.cmp

@@ -5,9 +5,10 @@
     <!-- component styling -->
     <aura:attribute name="buttonLabel" type="String" access="global" default="Create Contact"/>
     <aura:attribute name="variant" type="String" access="global" default="BRAND" description="BASE, NEUTRAL, BRAND, BRAND-OUTLINE, DESTRUCTIVE, DESTRUCTIVE-TEXT, INVERSE, and SUCCESS"/>
-    <aura:attribute name="class" type="String" access="global" default="slds-size_12-of-12" description="css class"/>
+    <aura:attribute name="class" type="String" access="global" default="slds-size_12-of-12" description="component css class. If this component launches an inline flow, this class will control the area that contains the flow."/>
     <aura:attribute name="padding" type="String" access="global" default="10px 10px 10px 10px" description="style padding: top right bottom left"/>
     <aura:attribute name="horizontalAlign" type="String" access="global" default="" description="center, space, spread, end" />
+    <aura:attribute name="buttonClass" type="String" access="global" default="" description="CSS class applied to the button (example: slds-align_absolute-center)"/>
 
     <!-- component actions -->
     <aura:attribute name="flowToLaunch" type="String" access="global" description="Flow API Name. If empty, the button is used to fire the flow action."/>
@@ -36,8 +37,9 @@
 
                 <aura:if isTrue="{!v.showButton}">
                     <lightning:button label="{!v.buttonLabel}" 
-                        class="slds-size_12-of-12"
-                        variant="{!v.variant}" onclick="{!c.handleNavigation}"/>
+                                      class="{!v.buttonClass}"
+                                      variant="{!v.variant}" 
+                                      onclick="{!c.handleNavigation}"/>
                 </aura:if>
 
                 <aura:if isTrue="{!v.showFlow}">

force-app/main/default/aura/RC_FlowButton/RC_FlowButton.design

@@ -5,9 +5,10 @@
     <!-- component styling -->
 	<design:attribute name="buttonLabel" label="Button Label" />
     <design:attribute name="variant" label="Button Variant" description="BASE, NEUTRAL, BRAND, BRAND-OUTLINE, DESTRUCTIVE, DESTRUCTIVE-TEXT, INVERSE, and SUCCESS" />
-    <design:attribute name="class" label="CSS class" description="default: slds-size_12-of-12" />
+    <design:attribute name="class" label="Component CSS class" description="Component CSS class (default: slds-size_12-of-12). If this component launches an inline flow, this class will control the area that contains the flow. " />
     <design:attribute name="padding" label="Style Padding" description="padding format: top right bottom left; default: 10px 10px 10px 10px" />
     <design:attribute name="horizontalAlign" label="Horizontal Align" description="center, space, spread, end"/>
+    <design:attribute name="buttonClass" label="Button CSS class" description="CSS class applied to the button (example: slds-align_absolute-center)"/>
 
     <!-- component actions -->
     <design:attribute name="flowToLaunch" label="Flow to Launch (API Name)" description="Flow API Name. If empty, the button is used to fire the flow action." />

force-app/main/default/aura/RC_FlowButtonApp/RC_FlowButtonApp.app

@@ -8,28 +8,40 @@
 
     <c:RC_FlowButton buttonLabel="Submit" variant="success" />
 
-    <p>Set CSS class. For example, control size with SLDS classes: slds-size_3-of-12</p>
+    <p>Set padding around the button. For example, "50px 50px 50px 50px" (format: top right bottom left) </p>
 
     <c:RC_FlowButton buttonLabel="Submit" variant="brand" 
-                     class="slds-size_3-of-12"
+                     padding="50px 50px 50px 50px"
                      buttonFlowAction="NEXT" 
                      />
-    
-    <p>Set padding around the button. For example, "50px 50px 50px 50px" (format: top right bottom left) </p>
+
+    <p>Set CSS for button to center it using SLDS class "slds-align_absolute-center slds-size_3-of-12"</p>
 
     <c:RC_FlowButton buttonLabel="Submit" variant="brand" 
-                     class="slds-size_6-of-12" padding="50px 50px 50px 50px"
+                     buttonClass="slds-align_absolute-center slds-size_3-of-12"
                      buttonFlowAction="NEXT" 
                      />
 
-    <p>Set horizontal alignment to center button.</p>
+    <p>Set CSS for button to center it and size it using SLDS class "slds-align_absolute-center"</p>
 
     <c:RC_FlowButton buttonLabel="Submit" variant="brand" 
-                     padding="20px 100px 20px 100px"
-                     horizontalAlign="center"
+                     buttonClass="slds-align_absolute-center"
+                     buttonFlowAction="NEXT" 
+                     />
+    
+    <p>Set CSS for button to position to the right using SLDS class "slds-float_right"</p>
+    
+    <c:RC_FlowButton buttonLabel="Submit" variant="brand" 
+                     buttonClass="slds-float_right"
+                     buttonFlowAction="NEXT" 
+                     />
+    
+    <p>Set CSS for button to make it fill the width of the component width: "slds-size_12-of-12"</p>
+    
+    <c:RC_FlowButton buttonLabel="Submit" variant="brand" 
+                     buttonClass="slds-size_12-of-12"
                      buttonFlowAction="NEXT" 
                      />
-
 
     <p>Launch Flow Inline</p>
 

force-app/main/default/flexipages/RC_Account_Record_Page.flexipage-meta.xml

@@ -58,6 +58,10 @@
     </flexiPageRegions>
     <flexiPageRegions>
         <componentInstances>
+            <componentInstanceProperties>
+                <name>buttonClass</name>
+                <value>slds-size_12-of-12</value>
+            </componentInstanceProperties>
             <componentInstanceProperties>
                 <name>buttonClicked</name>
                 <value>false</value>
@@ -99,7 +103,7 @@
             </componentInstanceProperties>
             <componentInstanceProperties>
                 <name>variant</name>
-                <value>brand</value>
+                <value>BRAND</value>
             </componentInstanceProperties>
             <componentName>RC_FlowButton</componentName>
         </componentInstances>

force-app/main/default/flexipages/Test_Flow_Button.flexipage-meta.xml

@@ -13,6 +13,10 @@
             <componentName>flexipage:richText</componentName>
         </componentInstances>
         <componentInstances>
+            <componentInstanceProperties>
+                <name>buttonClass</name>
+                <value>slds-size_6-of-12</value>
+            </componentInstanceProperties>
             <componentInstanceProperties>
                 <name>buttonClicked</name>
                 <value>false</value>
@@ -71,6 +75,10 @@
             <componentName>flexipage:richText</componentName>
         </componentInstances>
         <componentInstances>
+            <componentInstanceProperties>
+                <name>buttonClass</name>
+                <value>slds-size_12-of-12</value>
+            </componentInstanceProperties>
             <componentInstanceProperties>
                 <name>buttonClicked</name>
                 <value>false</value>