feat(rna): add DefaultContent and override styles #3009

calebpollman · 2022-11-17T20:33:39Z

Description of changes

Add DefaultContent component to align component structure and styling across RNA subcomponents, as well as lay out the groundwork for passing style on the subcomponents

Issue #, if available

NA

Description of how you validated changes

Manually tested, unit tests

Checklist

PR description included
yarn test passes
Tests are updated
No side effects or sideEffects field updated
Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

changeset-bot · 2022-11-17T20:33:41Z

⚠️ No Changeset found

Latest commit: f5f1d84

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

calebpollman · 2022-11-18T00:34:31Z

examples/react-native/src/App/App.tsx

+// import Example from '../features/Authenticator/Demo/Example';
+import Example from '../features/Authenticator/Styles/Example';
 // import { Demo as InAppDemo } from '../features/InAppMessaging';


Moving forward we will use this structure for RN Example apps so we have a consistent import structure for using .env variables to dynamically load Example apps

calebpollman · 2022-11-18T00:35:28Z

examples/react-native/src/features/Authenticator/Styles/Example.tsx

+  return <Button onPress={signOut}>Sign Out</Button>;
+}
+
+function App() {


Just noting this example is not complete and will be used for the style prop handling example

calebpollman · 2022-11-18T00:36:34Z

packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx

+      <Button
+        onPress={resendCode}
+        variant="secondary"
+        style={styles.buttonSecondary}
+      >
+        {getResendCodeText()}
+      </Button>


Moved this outside the Footer to align it with the other subcomponents

calebpollman · 2022-11-18T00:38:02Z

packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx

-      <FormFields isPending={isPending} fields={fieldsWithHandlers} />
-      {error ? <ErrorMessage>{error}</ErrorMessage> : null}
-      <Button onPress={handleFormSubmit} style={styles.buttonPrimary}>
-        {isPending ? 'Verifying...' : getVerifyText()}


Removed the Verifying... to align with other Authenticator implementations

calebpollman · 2022-11-18T00:39:30Z

packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx

+function useThemedStyles<Style>(getStyle: (theme: StrictTheme) => Style) {
+  const theme = useTheme();
+  return useMemo(() => getStyle(theme), [getStyle, theme]);
+}


Will move this to this to live with theming in a follow up, needs to be able to handle additional params

calebpollman · 2022-11-18T00:40:24Z

packages/react-native/src/Authenticator/common/DefaultContent/styles.ts

+    buttonPrimary: {
+      marginVertical: space.medium,
+    },
+    buttonPrimaryLabel: {}, // themed value only


These empty objects are temporary until we have added subcomponent theming support

calebpollman · 2022-11-18T00:41:58Z

packages/react-native/src/Authenticator/common/DefaultContent/types.ts

+  'error' | 'Footer' | 'isPending'
+> & {
+  buttons: DefaultButtons;
+  body?: React.ReactNode;


This needs to be retyped/refactored so it can handle style props for subcomponents that require unique content, for example SetupTOTP

calebpollman · 2022-11-18T00:42:46Z

packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx

+  return censoredVal;
+};
+
+const DefaultFormFields: DefaultRadioFormFieldsComponent = ({


This should have been named DefaultRadioFormFields, will address in a follow up PR

calebpollman · 2022-11-18T00:43:42Z

packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx

+  level = 3,
+  ...rest
+}: DefaultHeaderProps): JSX.Element | null {
+  return children ? (


Only render the Heading when a child is provided to prevent whitespace from being rendered

calebpollman · 2022-11-18T00:45:58Z

packages/ui/src/i18n/dictionaries/authenticator/defaultTexts.ts

@@ -19,6 +19,7 @@ export const defaultTexts = {
  ENTER_USERNAME: 'Enter your username',
  FAMILY_NAME: 'Family Name',
  GIVEN_NAME: 'Given Name',
+  FORGOT_PASSWORD: 'Forgot Password?',


Added a "short" version to improve the layout of the secondary buttons in the SignIn component:

ioanabrooks · 2022-11-18T00:42:46Z

packages/react-native/src/primitives/ErrorMessage/styles.ts

@@ -16,7 +16,6 @@ export const getThemedStyles = (theme: StrictTheme): ErrorMessageStyles => {
      flexDirection: 'row',
      paddingHorizontal: space.xs,
      paddingVertical: space.xl,
-      width: '100%',


Nice catch!

ioanabrooks · 2022-11-18T00:43:54Z

packages/react-native/src/Authenticator/common/DefaultFormFields/types.ts

+  fieldErrorStyle?: FieldErrorsProps['style'];
+  fieldLabelStyle?: StyleProp<TextStyle>;
+  fieldStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;


can we piggyback a fieldRequiredStyle? :) I can add it as follow-up as well.

Yes! Good call (separate PR preferred)

packages/react-native/src/Authenticator/Defaults/VerifyUser/__tests__/VerifyUser.spec.tsx

examples/react-native/storybook/stories/Authenticator.stories.tsx

ioanabrooks · 2022-11-18T00:47:04Z

examples/react-native/index.js

@@ -9,7 +9,7 @@ import { name as appName } from './app.json';
 import { setupStorybook } from './storybook';

 //TODO: replace with env var
-const initStorybook = false;
+const initStorybook = true;


Assuming this should not go in

calebpollman · 2022-11-18T00:48:09Z

packages/react-native/src/Authenticator/common/DefaultContent/styles.ts

+    buttonPrimaryLabel: {}, // themed value only
+    buttonSecondary: {
+      marginVertical: space.xs,
+      minWidth: '50%',


This is to allow the secondary buttons to "stack" if scenarios where button labels are long-ish

dbanksdesign

LGTM

feat(rna): add DefaultContent and override styles

00c35cc

calebpollman added the run-tests Adding this label will trigger tests to run label Nov 17, 2022

github-actions bot removed the run-tests Adding this label will trigger tests to run label Nov 17, 2022

calebpollman temporarily deployed to ci November 17, 2022 20:53 Inactive

Merge branch 'rna/main' into rna/add-rna-styles

8e6f6e0

dbanksdesign previously approved these changes Nov 18, 2022

View reviewed changes

calebpollman marked this pull request as ready for review November 18, 2022 00:32

calebpollman requested a review from a team as a code owner November 18, 2022 00:32

calebpollman commented Nov 18, 2022

View reviewed changes

calebpollman temporarily deployed to ci November 18, 2022 00:38 Inactive

calebpollman commented Nov 18, 2022

View reviewed changes

ioanabrooks reviewed Nov 18, 2022

View reviewed changes

calebpollman commented Nov 18, 2022

View reviewed changes

address feedback

f5f1d84

calebpollman dismissed dbanksdesign’s stale review via f5f1d84 November 18, 2022 01:03

ioanabrooks approved these changes Nov 18, 2022

View reviewed changes

calebpollman had a problem deploying to ci November 18, 2022 01:22 Failure

calebpollman had a problem deploying to ci November 18, 2022 01:22 Error

calebpollman temporarily deployed to ci November 18, 2022 01:22 Inactive

calebpollman temporarily deployed to ci November 18, 2022 02:22 Inactive

calebpollman had a problem deploying to ci November 18, 2022 02:22 Error

calebpollman temporarily deployed to ci November 18, 2022 02:22 Inactive

dbanksdesign approved these changes Nov 18, 2022

View reviewed changes

calebpollman temporarily deployed to ci November 18, 2022 03:09 Inactive

calebpollman merged commit b2a6e02 into rna/main Nov 18, 2022

calebpollman deleted the rna/add-rna-styles branch November 18, 2022 03:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(rna): add DefaultContent and override styles #3009

feat(rna): add DefaultContent and override styles #3009

calebpollman commented Nov 17, 2022 •

edited

Loading

changeset-bot bot commented Nov 17, 2022 •

edited

Loading

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022 •

edited

Loading

calebpollman Nov 18, 2022

calebpollman Nov 18, 2022 •

edited

Loading

ioanabrooks Nov 18, 2022

ioanabrooks Nov 18, 2022

calebpollman Nov 18, 2022

ioanabrooks Nov 18, 2022 •

edited

Loading

calebpollman Nov 18, 2022

dbanksdesign left a comment

feat(rna): add DefaultContent and override styles #3009

feat(rna): add DefaultContent and override styles #3009

Conversation

calebpollman commented Nov 17, 2022 • edited Loading

Description of changes

Issue #, if available

Description of how you validated changes

Checklist

changeset-bot bot commented Nov 17, 2022 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calebpollman Nov 18, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calebpollman Nov 18, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ioanabrooks Nov 18, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dbanksdesign left a comment

Choose a reason for hiding this comment

calebpollman commented Nov 17, 2022 •

edited

Loading

changeset-bot bot commented Nov 17, 2022 •

edited

Loading

calebpollman Nov 18, 2022 •

edited

Loading

calebpollman Nov 18, 2022 •

edited

Loading

ioanabrooks Nov 18, 2022 •

edited

Loading