diff --git a/flow_apps/LightningStylingForFlows/.forceignore b/flow_apps/LightningStylingForFlows/.forceignore new file mode 100644 index 000000000..29af63a93 --- /dev/null +++ b/flow_apps/LightningStylingForFlows/.forceignore @@ -0,0 +1,3 @@ +**/jsconfig.json + +**/.eslintrc.json diff --git a/flow_apps/LightningStylingForFlows/README.md b/flow_apps/LightningStylingForFlows/README.md new file mode 100644 index 000000000..058e4738e --- /dev/null +++ b/flow_apps/LightningStylingForFlows/README.md @@ -0,0 +1,41 @@ +# Lightning Styling For Flows + +A Repository of Custom Labels and Examples of using the technique described in the UnofficialSF blog post "[Build Lightning Styled Screen Flows that Users Will Love](https://unofficialsf.com/build-lightning-styled-screen-flows-that-users-will-love/)" + +Be mindful of the 5000 Custom Label per org limit. This shouldn't eat too much into that, but it is a limit to be aware of. + +## Included Custom Labels +Each of the values in the CustomLabels file are prefixed with `FlowStyles` to make them easier to find when using them in the Flow resource picker. + +### Badges +- `FlowStyles_Badge` +- `FlowStyles_Badge_Dark` +- `FlowStyles_Badge_Error` +- `FlowStyles_Badge_Light` +- `FlowStyles_Badge_Success` +- `FlowStyles_Badge_Warning` + +### Box +- `FlowStyles_Box` +- `FlowStyles_Box_DarkBlue` +- `FlowStyles_Box_DarkBlueAlt` +- `FlowStyles_Box_Error` +- `FlowStyles_Box_Info` +- `FlowStyles_Box_Shaded` +- `FlowStyles_Box_Success` +- `FlowStyles_Box_Warning` + +### Scoped Notification +- `FlowStyles_Notification_Dark` +- `FlowStyles_Notification_Error` +- `FlowStyles_Notification_Light` +- `FlowStyles_Notification_Success` +- `FlowStyles_Notification_Warning` + +### Section Header/Title +- `FlowStyles_SectionTitle` + +## Example Flow +There is an example flow that demonstrates how to use this technique called `Lightning_Styling_For_Flows` + +![Screenshot of Example Screen Flow that incorporates the Lightning Design System](images/example-flow.png) \ No newline at end of file diff --git a/flow_apps/LightningStylingForFlows/config/project-scratch-def.json b/flow_apps/LightningStylingForFlows/config/project-scratch-def.json new file mode 100644 index 000000000..79c96935f --- /dev/null +++ b/flow_apps/LightningStylingForFlows/config/project-scratch-def.json @@ -0,0 +1,13 @@ +{ + "orgName": "Lightning Styling for Flows", + "edition": "Developer", + "features": ["EnableSetPasswordInApi"], + "settings": { + "lightningExperienceSettings": { + "enableS1DesktopEnabled": true + }, + "mobileSettings": { + "enableS1EncryptedStoragePref2": false + } + } +} diff --git a/flow_apps/LightningStylingForFlows/force-app/main/default/flows/Lightning_Styling_for_Flows.flow-meta.xml b/flow_apps/LightningStylingForFlows/force-app/main/default/flows/Lightning_Styling_for_Flows.flow-meta.xml new file mode 100644 index 000000000..7d9d0fc4f --- /dev/null +++ b/flow_apps/LightningStylingForFlows/force-app/main/default/flows/Lightning_Styling_for_Flows.flow-meta.xml @@ -0,0 +1,213 @@ + + + 55.0 + Default + + DarkBadge + String + SUBSTITUTE({!$Label.FlowStyles_Badge_Dark},'_BADGE_LABEL_','Dark Badge') + + + DefaultBadge + String + SUBSTITUTE({!$Label.FlowStyles_Badge},'_BADGE_LABEL_','Default') + + + ErrorBadge + String + SUBSTITUTE({!$Label.FlowStyles_Badge_Error},'_BADGE_LABEL_','Error Badge') + + + htmlEncodedCode + String + HTMLENCODE('<html>') & BR() & HTMLENCODE('<body></body>') & BR() & HTMLENCODE('</html>') + + + LightBadge + String + SUBSTITUTE({!$Label.FlowStyles_Badge_Light},'_BADGE_LABEL_','Light Badge') + + + SuccessBadge + String + SUBSTITUTE({!$Label.FlowStyles_Badge_Success},'_BADGE_LABEL_','Success Badge') + + + WarningBadge + String + SUBSTITUTE({!$Label.FlowStyles_Badge_Warning},'_BADGE_LABEL_','Warning Badge') + + Lightning Styling for Flows {!$Flow.CurrentDateTime} + + + BuilderType + + LightningFlowBuilder + + + + CanvasMode + + AUTO_LAYOUT_CANVAS + + + + OriginBuilderType + + LightningFlowBuilder + + + Flow + + Lightning_Styling_for_Flows_Example + + 176 + 134 + true + true + true + + Lightning_Styling_for_Flows_Example_Section1 + RegionContainer + + Lightning_Styling_for_Flows_Example_Section1_Column1 + Region + + BoxSectionHeaderDisplay + <p>{!$Label.FlowStyles_SectionTitle}</p><p>Box Styles</p> + DisplayText + + + PlainBoxDisplay + <p>{!$Label.FlowStyles_Box}</p><p>Here is some content that is contained within a plain box!</p><ul><li>Good for visually separating help or guidance text</li><li>You can still control the content from the Display Text rich text editor</li><li>This means you can <strong>still</strong> <em>apply</em> <u>rich</u> text formatting! </li></ul> + DisplayText + + + ShadedBox_Display + <p>{!$Label.FlowStyles_Box_Shaded}</p><p>Example of a box that uses a light shade theme</p> + DisplayText + + + InfoBoxDisplay + <p>{!$Label.FlowStyles_Box_Info}</p><p>Example of a box that uses a darker "info" shade theme</p> + DisplayText + + + DarkBlueBoxDisplay + <p><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68);">{!$Label.FlowStyles_Box_DarkBlue}</span></p><p>Example of a box that uses a dark blue "inverse" theme</p> + DisplayText + + + AlternateDarkBlueBoxDisplay + <p>{!$Label.FlowStyles_Box_DarkBlueAlt}</p><p>Example of a box that uses an alternative blue "inverse" theme</p> + DisplayText + + + width + + 6 + + + false + + + Lightning_Styling_for_Flows_Example_Section1_Column2 + Region + + NotificationsSectionHeaderDisplay + <p>{!$Label.FlowStyles_SectionTitle}</p><p>Notification Styles</p> + DisplayText + + + SuccessNotificationDisplay + <p>{!$Label.FlowStyles_Notification_Success}</p><p style="text-align: center;"><strong>Success Notification!</strong> Draw attention to a successful action</p> + DisplayText + + + WarningNotificationDisplay + <p>{!$Label.FlowStyles_Notification_Warning}</p><p style="text-align: center;"><strong>Warning Notification!</strong> Draw attention to a warning</p> + DisplayText + + + ErrorNotificationDisplay + <p>{!$Label.FlowStyles_Notification_Error}</p><p style="text-align: center;"><strong>Error Notification!</strong> Draw attention to an error message</p> + DisplayText + + + AddSpaceDisplay + <p><br></p><p><br></p> + DisplayText + + + BadgesSectionHeaderDisplay + <p>{!$Label.FlowStyles_SectionTitle}</p><p>Badges</p> + DisplayText + + + HelloBadgeDisplay + <p>{!$Label.FlowStyles_Box}</p><p>{!DefaultBadge}{!DarkBadge}{!LightBadge}{!SuccessBadge}{!WarningBadge}{!ErrorBadge}</p> + DisplayText + + + width + + 6 + + + false + + false + SectionWithoutHeader + + + ButtonLinksSectionHeaderDisplay + <p>{!$Label.FlowStyles_SectionTitle}</p><p>Links that look like Buttons</p> + DisplayText + + + ButtonsDisplay + <p><br></p><p style="text-align: center;">{!NeutralButtonLink} {!BrandButtonLink} {!OutlineBrandButtonLink}</p> + DisplayText + + true + true + + + 50 + 0 + + Lightning_Styling_for_Flows_Example + + + Active + + blockQuote + true + <blockquote>Hello my darling, hello my baby, hello my blockquote tag</blockquote> + + + BrandButtonLink + true + <a class="slds-button slds-button_brand" href="#">Brand Button Link</a> + + + formattedCode + true + <code>{!htmlEncodedCode}</code> + + + NeutralButtonLink + true + <a class="slds-button slds-button_neutral" href="#">Neutral Button Link</a> + + + OutlineBrandButtonLink + true + <a class="slds-button slds-button_outline-brand" href="#">Outline Brand Button Link</a> + + + SectionStyle + true + <div class="slds-section slds-section__title slds-theme_shade slds-p-horizontal_small"> + + diff --git a/flow_apps/LightningStylingForFlows/force-app/main/default/labels/CustomLabels.labels-meta.xml b/flow_apps/LightningStylingForFlows/force-app/main/default/labels/CustomLabels.labels-meta.xml new file mode 100644 index 000000000..f2c29506e --- /dev/null +++ b/flow_apps/LightningStylingForFlows/force-app/main/default/labels/CustomLabels.labels-meta.xml @@ -0,0 +1,156 @@ + + + + FlowStyles_Badge + en_US + true + FlowStyles_Badge + <span class="slds-badge">_BADGE_LABEL_</span> + + + FlowStyles_Badge_Dark + Flow Styles + en_US + true + FlowStyles_Badge_Dark + <span class="slds-badge slds-badge_inverse">_BADGE_LABEL_</span> + + + FlowStyles_Badge_Error + en_US + true + FlowStyles_Badge_Error + <span class="slds-badge slds-theme_error">_BADGE_LABEL_</span> + + + FlowStyles_Badge_Light + Flow Styles + en_US + true + FlowStyles_Badge_Light + <span class="slds-badge slds-badge_lightest">_BADGE_LABEL_</span> + + + FlowStyles_Badge_Success + Flow Styles + en_US + true + FlowStyles_Badge_Success + <span class="slds-badge slds-theme_success">_BADGE_LABEL_</span> + + + FlowStyles_Badge_Warning + Flow Styles + en_US + true + FlowStyles_Badge_Warning + <span class="slds-badge slds-theme_warning">_BADGE_LABEL_</span> + + + FlowStyles_Box + FlowStyles + en_US + true + FlowStyles_Box_Plain + <div class="slds-box slds-box_small"> + + + FlowStyles_Box_DarkBlue + Flow Styles + en_US + true + FlowStyles_Box_DarkBlue + <div class="slds-box slds-box_small slds-theme_inverse"> + + + FlowStyles_Box_DarkBlueAlt + Flow Styles + en_US + true + FlowStyles_Box_DarkBlueAlt + <div class="slds-box slds-box_small slds-theme_alt-inverse"> + + + FlowStyles_Box_Error + Flow Styles + en_US + true + FlowStyles_Box_Error + <div class="slds-box slds-box_small slds-theme_error"> + + + FlowStyles_Box_Info + Flow Styles + en_US + true + FlowStyles_Box_Info + <div class="slds-box slds-box_small slds-theme_info"> + + + FlowStyles_Box_Shaded + Flow Styles + en_US + true + FlowStyles_Box_Shaded + <div class="slds-box slds-box_small slds-theme_shade"> + + + FlowStyles_Box_Success + en_US + true + FlowStyles_Box_Success + <div class="slds-box slds-box_small slds-theme_success"> + + + FlowStyles_Box_Warning + Flow Styles + en_US + true + FlowStyles_Box_Warning + <div class="slds-box slds-box_small slds-theme_warning"> + + + FlowStyles_Notification_Dark + en_US + true + FlowStyles_Notification_Dark + <div class="slds-scoped-notification slds-scoped-notification_dark" role="status"> + + + FlowStyles_Notification_Error + en_US + true + FlowStyles_Notification_Error + <div class="slds-scoped-notification slds-theme_error" role="status"> + + + FlowStyles_Notification_Success + en_US + true + FlowStyles_Notification_Success + <div class="slds-scoped-notification slds-theme_success" role="status"> + + + FlowStyles_Notification_Warning + en_US + true + FlowStyles_Notification_Warning + <div class="slds-scoped-notification slds-theme_warning" role="status"> + + + FlowStyles_ScopedNotification_Light + Flow Styles + en_US + true + FlowStyles_ScopedNotification_Light + <div class="slds-scoped-notification slds-scoped-notification_light" role="status"> + + + FlowStyles_SectionTitle + Flow Styles + en_US + true + FlowStyles_SectionTitle + <div class="slds-section slds-section__title slds-theme_shade slds-p-horizontal_small slds-p-vertical_xxx-small"> + + diff --git a/flow_apps/LightningStylingForFlows/images/example-flow.png b/flow_apps/LightningStylingForFlows/images/example-flow.png new file mode 100644 index 000000000..c6989e0e1 Binary files /dev/null and b/flow_apps/LightningStylingForFlows/images/example-flow.png differ diff --git a/flow_apps/LightningStylingForFlows/sfdx-project.json b/flow_apps/LightningStylingForFlows/sfdx-project.json new file mode 100644 index 000000000..cf49434e3 --- /dev/null +++ b/flow_apps/LightningStylingForFlows/sfdx-project.json @@ -0,0 +1,13 @@ +{ + "packageDirectories": [ + { + "path": "force-app", + "default": true + } + ], + "name": "LightningStylingForFlows", + "namespace": "", + "sfdcLoginUrl": "https://login.salesforce.com", + "sourceApiVersion": "58.0" +} + \ No newline at end of file diff --git a/flow_screen_components/FlowScreenComponentsBasePack/.sf/config.json b/flow_screen_components/FlowScreenComponentsBasePack/.sf/config.json new file mode 100644 index 000000000..6b55581e9 --- /dev/null +++ b/flow_screen_components/FlowScreenComponentsBasePack/.sf/config.json @@ -0,0 +1,3 @@ +{ + "target-org": "FlowScreenComponentsBasePack" +} \ No newline at end of file