Increase theme-bility in Ionic 4

[wstidolph]

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
Can't theme or modify layout for the amplify UI components with Ionic 4 because they're inside the Shadow DOM so CSS selectors don't apply. Similarly, there are hardcoded strings and string builders (e.g., from greeting.component.core.ts there is:

 this.greeting = this.signedIn
      ? "Hello " + authState.user.username
      : "";

as well as "Sign in " and "sign out" etc - these strings should be replaceable.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?
Not sure, I'm new to this: possibly best to expose the fixed strings and such using slots, and define a slew of CSS4 variables for styling?

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

"aws-amplify": "^1.0.3",
"aws-amplify-angular": "^1.0.1",
"@ionic/angular": "4.0.0-alpha.11",

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[haverchuck]

@wstidolph I know it's been awhile since you posted this issue, but we've come back to it since we've now implemented CSS modules in amplify.

We now have a beta feature where you can pass in a classOverrides object, which consists of key/value pairs. Each key is one of our internal classnames, and each value is an array of your own classes.

So for example, you can pass in:

classOverrides: {
   sectionHeader: ['class1']
}

This will add class1 to the classes for the sectionHeader in a component.

To test out this beta feature, you would need to install:

    "aws-amplify-angular": "2.1.7-beta.0",
    "@aws-amplify/ui": "1.0.16-beta.0

Draft documentation can be found here.

Would love to here any feedback you might have!

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

aws-amplify/amplify-js#3279

[wlee221]

Hello, we'll be closing this as the newer version of aws-amplify-angular and @aws-amplify/ui-angular provide APIs for customization.

For latest @next angular ui components, please see: https://ui.docs.amplify.aws/ui/getting-started/installation?platform=angular. Thanks!