Refactored className usage for InlineTextButton

They are changed to use rootClassName for consistency and protection against future bundling order changes.
2026-07-26 06:47:17 +10:00 · 2019-02-19 14:40:56 +02:00 · 2019-02-19 14:40:56 +02:00 · b1eb69f6d3
commit b1eb69f6d3
parent d2b1db828e
22 changed files with 32 additions and 18 deletions
--- a/src/components/ManageListingCard/ManageListingCard.css
+++ b/src/components/ManageListingCard/ManageListingCard.css
@ -164,6 +164,7 @@
 }

 .menuItem {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceH5FontStyles;
  color: var(--matterColorLight);
  font-weight: var(--fontWeightMedium);
@ -269,6 +270,7 @@
 }

 .title {
+  @apply --marketplaceLinkStyles;
  /* Font */
  @apply --marketplaceH3FontStyles;
  color: var(--matterColor);
--- a/src/components/ManageListingCard/ManageListingCard.js
+++ b/src/components/ManageListingCard/ManageListingCard.js
@ -219,7 +219,7 @@ export const ManageListingCardComponent = props => {
              <MenuContent rootClassName={css.menuContent}>
                <MenuItem key="close-listing">
                  <InlineTextButton
-                    className={menuItemClasses}
+                    rootClassName={menuItemClasses}
                    onClick={event => {
                      event.preventDefault();
                      event.stopPropagation();
@ -315,7 +315,7 @@ export const ManageListingCardComponent = props => {
        <div className={css.mainInfo}>
          <div className={css.titleWrapper}>
            <InlineTextButton
-              className={titleClasses}
+              rootClassName={titleClasses}
              onClick={event => {
                event.preventDefault();
                event.stopPropagation();
--- a/src/components/ManageListingCard/snapshots/ManageListingCard.test.js.snap
+++ b/src/components/ManageListingCard/snapshots/ManageListingCard.test.js.snap
@ -78,8 +78,8 @@ exports[`ManageListingCard matches snapshot 1`] = `
              rootClassName=""
            >
              <InlineTextButton
-                className=""
                onClick={[Function]}
+                rootClassName=""
              >
                <FormattedMessage
                  id="ManageListingCard.closeListing"
@ -109,8 +109,8 @@ exports[`ManageListingCard matches snapshot 1`] = `
    <div>
      <div>
        <InlineTextButton
-          className=""
          onClick={[Function]}
+          rootClassName=""
        >
          <span
            key="1"
--- a/src/components/ModalMissingInformation/EmailReminder.js
+++ b/src/components/ModalMissingInformation/EmailReminder.js
@ -17,7 +17,7 @@ const EmailReminder = props => {
  const email = user.id ? <span className={css.email}>{user.attributes.email}</span> : '';

  const resendEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={onResendVerificationEmail}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={onResendVerificationEmail}>
      <FormattedMessage id="ModalMissingInformation.resendEmailLinkText" />
    </InlineTextButton>
  );
--- a/src/components/ModalMissingInformation/ModalMissingInformation.css
+++ b/src/components/ModalMissingInformation/ModalMissingInformation.css
@ -20,6 +20,7 @@
 }

 .helperLink {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceModalHelperLink;
 }

--- a/src/components/SearchFiltersPanel/SearchFiltersPanel.css
+++ b/src/components/SearchFiltersPanel/SearchFiltersPanel.css
@ -16,6 +16,7 @@
 }

 .resetAllButton {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceH5FontStyles;
  font-weight: var(--fontWeightMedium);
  color: var(--matterColorAnti);
@ -33,6 +34,7 @@
 }

 .cancelButton {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceH5FontStyles;
  font-weight: var(--fontWeightMedium);
  color: var(--matterColorAnti);
@ -50,6 +52,7 @@
 }

 .applyButton {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceH5FontStyles;
  font-weight: var(--fontWeightMedium);

--- a/src/components/SearchFiltersPanel/SearchFiltersPanel.js
+++ b/src/components/SearchFiltersPanel/SearchFiltersPanel.js
@ -158,13 +158,13 @@ class SearchFiltersPanelComponent extends Component {
      <div className={classes}>
        <div className={css.filtersWrapper}>{/* Add filters here */}</div>
        <div className={css.footer}>
-          <InlineTextButton className={css.resetAllButton} onClick={this.resetAll}>
+          <InlineTextButton rootClassName={css.resetAllButton} onClick={this.resetAll}>
            <FormattedMessage id={'SearchFiltersPanel.resetAll'} />
          </InlineTextButton>
-          <InlineTextButton className={css.cancelButton} onClick={this.cancelFilters}>
+          <InlineTextButton rootClassName={css.cancelButton} onClick={this.cancelFilters}>
            <FormattedMessage id={'SearchFiltersPanel.cancel'} />
          </InlineTextButton>
-          <InlineTextButton className={css.applyButton} onClick={this.applyFilters}>
+          <InlineTextButton rootClassName={css.applyButton} onClick={this.applyFilters}>
            <FormattedMessage id={'SearchFiltersPanel.apply'} />
          </InlineTextButton>
        </div>
--- a/src/components/TabNavHorizontal/TabNavHorizontal.css
+++ b/src/components/TabNavHorizontal/TabNavHorizontal.css
@ -23,6 +23,7 @@
 }

 .tabContent {
+  @apply --marketplaceLinkStyles;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
--- a/src/components/TabNavHorizontal/TabNavHorizontal.js
+++ b/src/components/TabNavHorizontal/TabNavHorizontal.js
@ -43,7 +43,7 @@ const Tab = props => {
  return (
    <div className={className}>
      {isButton ? (
-        <InlineTextButton className={buttonClasses} onClick={onClick}>
+        <InlineTextButton rootClassName={buttonClasses} onClick={onClick}>
          {text}
        </InlineTextButton>
      ) : (
--- a/src/components/TopbarDesktop/TopbarDesktop.css
+++ b/src/components/TopbarDesktop/TopbarDesktop.css
@ -304,6 +304,7 @@
 }

 .logoutButton {
+  @apply --marketplaceLinkStyles;
  /* Font is specific to this component */
  @apply --marketplaceH4FontStyles;
  font-size: 14px;
--- a/src/components/TopbarDesktop/TopbarDesktop.js
+++ b/src/components/TopbarDesktop/TopbarDesktop.js
@ -100,7 +100,7 @@ const TopbarDesktop = props => {
          </NamedLink>
        </MenuItem>
        <MenuItem key="logout">
-          <InlineTextButton className={css.logoutButton} onClick={onLogout}>
+          <InlineTextButton rootClassName={css.logoutButton} onClick={onLogout}>
            <span className={css.menuItemBorder} />
            <FormattedMessage id="TopbarDesktop.logout" />
          </InlineTextButton>
--- a/src/components/TopbarMobileMenu/TopbarMobileMenu.css
+++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.css
@ -55,6 +55,7 @@
 }

 .logoutButton {
+  @apply --marketplaceLinkStyles;
  /* Logout font is smaller and gray since the action is not recommended. */
  @apply --marketplaceH3FontStyles;
  color: var(--matterColorAnti);
--- a/src/components/TopbarMobileMenu/TopbarMobileMenu.js
+++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.js
@ -81,7 +81,7 @@ const TopbarMobileMenu = props => {
        <span className={css.greeting}>
          <FormattedMessage id="TopbarMobileMenu.greeting" values={{ displayName }} />
        </span>
-        <InlineTextButton className={css.logoutButton} onClick={onLogout}>
+        <InlineTextButton rootClassName={css.logoutButton} onClick={onLogout}>
          <FormattedMessage id="TopbarMobileMenu.logoutLink" />
        </InlineTextButton>
        <NamedLink
--- a/src/components/UserCard/UserCard.css
+++ b/src/components/UserCard/UserCard.css
@ -59,6 +59,7 @@
 }

 .showMore {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceH4FontStyles;
  margin: 0 0 0 5px;
 }
@ -116,6 +117,7 @@
 }

 .contact {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceH4FontStyles;
  margin: 0;
 }
--- a/src/components/UserCard/UserCard.js
+++ b/src/components/UserCard/UserCard.js
@ -42,7 +42,7 @@ class ExpandableBio extends Component {
      this.setState({ expand: true });
    };
    const showMore = (
-      <InlineTextButton className={css.showMore} onClick={handleShowMoreClick}>
+      <InlineTextButton rootClassName={css.showMore} onClick={handleShowMoreClick}>
        <FormattedMessage id="UserCard.showFullBioLink" />
      </InlineTextButton>
    );
@ -86,7 +86,7 @@ const UserCard = props => {
  const separator = isCurrentUser ? null : <span className={css.linkSeparator}>•</span>;

  const contact = (
-    <InlineTextButton className={css.contact} onClick={handleContactUserClick}>
+    <InlineTextButton rootClassName={css.contact} onClick={handleContactUserClick}>
      <FormattedMessage id="UserCard.contactUser" />
    </InlineTextButton>
  );
--- a/src/containers/AuthenticationPage/AuthenticationPage.css
+++ b/src/containers/AuthenticationPage/AuthenticationPage.css
@ -122,6 +122,7 @@

 /* Helper links */
 .modalHelperLink {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceModalHelperLink;
 }

--- a/src/containers/AuthenticationPage/AuthenticationPage.js
+++ b/src/containers/AuthenticationPage/AuthenticationPage.js
@ -157,7 +157,7 @@ export class AuthenticationPageComponent extends Component {
    const email = <span className={css.email}>{user.attributes.email}</span>;

    const resendEmailLink = (
-      <InlineTextButton className={css.modalHelperLink} onClick={onResendVerificationEmail}>
+      <InlineTextButton rootClassName={css.modalHelperLink} onClick={onResendVerificationEmail}>
        <FormattedMessage id="AuthenticationPage.resendEmailLinkText" />
      </InlineTextButton>
    );
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@ -383,6 +383,7 @@
 }

 .contactLink {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceH4FontStyles;
  margin: 0;
 }
--- a/src/containers/ListingPage/SectionHeading.js
+++ b/src/containers/ListingPage/SectionHeading.js
@ -45,7 +45,7 @@ const SectionHeading = props => {
          {showContactUser ? (
            <span className={css.contactWrapper}>
              <span className={css.separator}>•</span>
-              <InlineTextButton className={css.contactLink} onClick={onContactUser}>
+              <InlineTextButton rootClassName={css.contactLink} onClick={onContactUser}>
                <FormattedMessage id="ListingPage.contactUser" />
              </InlineTextButton>
            </span>
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@ -52,6 +52,7 @@
 }

 .helperLink {
+  @apply --marketplaceLinkStyles;
  @apply --marketplaceModalHelperLink;
 }

--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@ -45,13 +45,13 @@ export const PasswordRecoveryPageComponent = props => {
  });

  const resendEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={() => onSubmitEmail(submittedEmail)}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={() => onSubmitEmail(submittedEmail)}>
      <FormattedMessage id="PasswordRecoveryPage.resendEmailLinkText" />
    </InlineTextButton>
  );

  const fixEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={onRetypeEmail}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={onRetypeEmail}>
      <FormattedMessage id="PasswordRecoveryPage.fixEmailLinkText" />
    </InlineTextButton>
  );
--- a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js
@ -193,7 +193,7 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
                <React.Fragment>
                  <InlineTextButton
                    type="button"
-                    className={css.fieldArrayAdd}
+                    rootClassName={css.fieldArrayAdd}
                    onClick={() => push('company.additionalOwners', undefined)}
                  >
                    <span className={css.additionalOwnerLabel}>