aws-amplify / aws-amplify/amplify-ui

Allow Divider Styling

Open
#6,430 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Authenticator feature-request
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

On which framework/platform would you like to see this feature implemented?

React Native

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

My React Native application only uses social logins. I noticed that there's a line below these buttons that has no way of being styled (other than the label in it). The Divider component exposes a lineStyles prop, is there any way that can be exposed to the FederatedLoginButtons component like the dividerLabelStyles prop is?

After looking at the Divider component's styles, I tried using the theme's tokens.border.secondary and token.borderWidths.small, but neither of these worked. If there is a way to style it via the theme, let me know! Otherwise, I would definitely love a way to pass styles to the Divider's line through the FederatedLoginButtons component

Please describe a solution you'd like.

No response

We love contributors! Is this something you'd be interested in working on?
  • 👋 I may be able to implement this feature request.
  • ⚠️ This feature might incur a breaking change.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the React Native Authenticator's FederatedLoginButtons and compare its divider usage with the Divider component's lineStyles and dividerLabelStyles props. Trace the component's public props and verify that line styling can be passed through while preserving the existing divider label behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
authentication, frontend, mobile
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.