Rework Button component to pass its label via children content

This commit is contained in:
ErickSkrauch
2020-07-22 14:20:10 +03:00
parent 993d0cdedb
commit d84497ac28
17 changed files with 175 additions and 152 deletions

View File

@ -15,7 +15,6 @@ import ApplicationsList from './list';
const labels = defineMessages({
addNew: 'Add new',
authorization: 'Authorization',
});
type Props = {
@ -123,10 +122,11 @@ function Loader({ noApps }: { noApps: boolean }) {
<LinkButton
to="/dev/applications/new"
data-e2e="newApp"
label={labels.addNew}
color={COLOR_GREEN}
className={styles.emptyStateActionButton}
/>
>
<Message {...labels.addNew} />
</LinkButton>
</div>
</div>
);
@ -145,12 +145,9 @@ function Guest() {
</div>
</div>
<LinkButton
to="/login"
label={labels.authorization}
color={COLOR_BLUE}
className={styles.emptyStateActionButton}
/>
<LinkButton to="/login" color={COLOR_BLUE} className={styles.emptyStateActionButton}>
<Message key="authorization" defaultMessage="Authorization" />
</LinkButton>
</div>
);
}

View File

@ -20,10 +20,7 @@ const messages = defineMessages({
minecraftServer: 'Minecraft server',
creatingApplication: 'Creating an application',
createApplication: 'Create application',
updatingApplication: 'Updating an application',
updateApplication: 'Update application',
});
type TypeToForm = Record<
@ -115,12 +112,13 @@ export default class ApplicationForm extends React.Component<{
</div>
{!!FormComponent && (
<Button
color={COLOR_GREEN}
block
label={isUpdate ? messages.updateApplication : messages.createApplication}
type="submit"
/>
<Button color={COLOR_GREEN} block type="submit">
{isUpdate ? (
<Message key="updateApplication" defaultMessage="Update application" />
) : (
<Message key="createApplication" defaultMessage="Create application" />
)}
</Button>
)}
</div>
</Form>

View File

@ -16,15 +16,15 @@ const ACTION_DELETE = 'delete';
const actionButtons = [
{
type: ACTION_REVOKE_TOKENS,
label: messages.revokeAllTokens,
label: <Message {...messages.revokeAllTokens} />,
},
{
type: ACTION_RESET_SECRET,
label: messages.resetClientSecret,
label: <Message {...messages.resetClientSecret} />,
},
{
type: ACTION_DELETE,
label: messages.delete,
label: <Message {...messages.delete} />,
},
];
@ -122,13 +122,14 @@ export default class ApplicationItem extends React.Component<
{actionButtons.map(({ type, label }) => (
<Button
key={type}
label={label}
color={COLOR_BLACK}
className={styles.appActionButton}
disabled={!!selectedAction && selectedAction !== type}
onClick={this.onActionButtonClick(type)}
small
/>
>
{label}
</Button>
))}
</div>
@ -160,12 +161,13 @@ export default class ApplicationItem extends React.Component<
</div>
<div className={styles.appActionsButtons}>
<Button
label={messages.cancel}
color={COLOR_BLACK}
className={styles.appActionButton}
onClick={this.onActionButtonClick(null)}
small
/>
>
<Message {...messages.cancel} />
</Button>
<div className={styles.continueActionButtonWrapper}>
{isActionPerforming ? (
<div className={styles.performingAction}>
@ -193,12 +195,13 @@ export default class ApplicationItem extends React.Component<
</div>
<div className={styles.appActionsButtons}>
<Button
label={messages.cancel}
color={COLOR_BLACK}
className={styles.appActionButton}
onClick={this.onActionButtonClick(null)}
small
/>
>
<Message {...messages.cancel} />
</Button>
<div className={styles.continueActionButtonWrapper}>
{isActionPerforming ? (
<div className={styles.performingAction}>
@ -206,13 +209,14 @@ export default class ApplicationItem extends React.Component<
</div>
) : (
<Button
label={messages.delete}
color={COLOR_RED}
className={styles.appActionButton}
onClick={this.onSubmitDelete}
data-testid="delete-app"
small
/>
>
<Message {...messages.delete} />
</Button>
)}
</div>
</div>

View File

@ -49,10 +49,11 @@ export default class ApplicationsList extends React.Component<Props, State> {
<LinkButton
to="/dev/applications/new"
data-e2e="newApp"
label={messages.addNew}
color={COLOR_GREEN}
className={styles.appsListAddNewAppBtn}
/>
>
<Message {...messages.addNew} />
</LinkButton>
</div>
<div className={styles.appsListContainer}>
{applications.map((app) => (