Merge pull request #1024 from sharetribe/improve-bundling-order

Improve bundling order

src/components/Button/Button.css

@@ -7,14 +7,14 @@
   padding: 0;
 }
 
-.primaryButton {
+.primaryButtonRoot {
   @apply --marketplaceButtonStylesPrimary;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;
 }
 
-.secondaryButton {
+.secondaryButtonRoot {
   @apply --marketplaceButtonStylesSecondary;
 
   /* We must lift up the text from the center since it looks better with
@@ -23,35 +23,15 @@
   padding: 0 0 2px 0;
 }
 
-.inlineTextButton {
+.inlineTextButtonRoot {
   @apply --marketplaceLinkStyles;
 }
 
-.inlineButton {
-  display: inline-block;
-
-  /* fill colors should be in sync with marketplace color palette */
-  background-color: transparent;
-
-  /* border-width should be in sync with marketplace strike-widths */
-  border-width: 0px;
-
-  /* Font configuration */
-  text-decoration: none;
-
-  /* Hovers */
-  &:enabled {
-    cursor: pointer;
-  }
-  &:enabled:hover,
-  &:enabled:active {
-    background-color: transparent;
-    text-decoration: underline;
-  }
-  &:disabled {
-    background-color: transparent;
-    cursor: auto;
-  }
+.primaryButton {
+  /* Class handle for primary button state styles */
+}
+.secondaryButton {
+  /* Class handle for secondary button state styles */
 }
 
 .inProgress {

src/components/Button/Button.example.js

@@ -157,7 +157,7 @@ const ButtonsComponent = () => {
       </a>
 
       <h3>Button with custom styles:</h3>
-      <Button className={css.customButton}>Click me</Button>
+      <Button rootClassName={css.customButton}>Click me</Button>
     </div>
   );
 };

src/components/Button/Button.js

@@ -69,11 +69,20 @@ Button.propTypes = {
 
 export default Button;
 
-export const PrimaryButton = props => <Button {...props} rootClassName={css.primaryButton} />;
+export const PrimaryButton = props => {
+  const classes = classNames(props.rootClassName || css.primaryButtonRoot, css.primaryButton);
+  return <Button {...props} rootClassName={classes} />;
+};
 PrimaryButton.displayName = 'PrimaryButton';
 
-export const SecondaryButton = props => <Button {...props} rootClassName={css.secondaryButton} />;
+export const SecondaryButton = props => {
+  const classes = classNames(props.rootClassName || css.secondaryButtonRoot, css.secondaryButton);
+  return <Button {...props} rootClassName={classes} />;
+};
 SecondaryButton.displayName = 'SecondaryButton';
 
-export const InlineTextButton = props => <Button {...props} rootClassName={css.inlineTextButton} />;
+export const InlineTextButton = props => {
+  const classes = classNames(props.rootClassName || css.inlineTextButtonRoot, css.inlineTextButton);
+  return <Button {...props} rootClassName={classes} />;
+};
 InlineTextButton.displayName = 'InlineTextButton';

src/components/ManageListingCard/ManageListingCard.css

@@ -154,10 +154,6 @@
 }
 
 .menuContent {
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-
   position: absolute;
   right: 0;
   z-index: var(--zIndexPopup);
@@ -168,6 +164,7 @@
 }
 
 .menuItem {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   color: var(--matterColorLight);
   font-weight: var(--fontWeightMedium);
@@ -273,6 +270,7 @@
 }
 
 .title {
+  @apply --marketplaceLinkStyles;
   /* Font */
   @apply --marketplaceH3FontStyles;
   color: var(--matterColor);

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();

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"

src/components/MenuContent/MenuContent.css

@@ -1,10 +1,6 @@
 @import '../../marketplace.css';
 
 .root {
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-
   position: absolute;
   z-index: var(--zIndexPopup);
 
@@ -15,6 +11,12 @@
   transition: var(--transitionStyleButton);
 }
 
+.isClosed {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .isOpen {
   visibility: visible;
   opacity: 1;

src/components/MenuContent/MenuContent.js

@@ -22,7 +22,8 @@ const MenuContent = props => {
   } = props;
 
   const rootClass = rootClassName || css.root;
-  const classes = classNames(rootClass, className, { [css.isOpen]: isOpen });
+  const openClasses = isOpen ? css.isOpen : css.isClosed;
+  const classes = classNames(rootClass, className, openClasses);
   const contentClasses = classNames(contentClassName || css.content);
 
   const arrowPositionStyle =

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>
   );

src/components/ModalMissingInformation/ModalMissingInformation.css

@@ -20,6 +20,7 @@
 }
 
 .helperLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceModalHelperLink;
 }
 

src/components/SearchFiltersMobile/SearchFiltersMobile.css

@@ -30,6 +30,19 @@
 }
 
 .filtersButton {
+  @apply --marketplaceButtonStylesSecondary;
+  @apply --marketplaceTinyFontStyles;
+  font-weight: var(--fontWeightBold);
+
+  height: 35px;
+  min-height: 35px;
+  padding: 0 18px;
+  margin: 0 9px 0 0;
+  border-radius: 4px;
+}
+
+.filtersButtonSelected {
+  @apply --marketplaceButtonStyles;
   @apply --marketplaceTinyFontStyles;
   font-weight: var(--fontWeightBold);
 

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -9,7 +9,6 @@ import routeConfiguration from '../../routeConfiguration';
 import { parseDateFromISO8601, stringifyDateToISO8601 } from '../../util/dates';
 import { createResourceLocatorString } from '../../util/routes';
 import {
-  SecondaryButton,
   ModalInMobile,
   Button,
   PriceFilter,
@@ -204,16 +203,8 @@ class SearchFiltersMobileComponent extends Component {
       { count: resultsCount }
     );
 
-    const filtersButton =
-      selectedFiltersCount > 0 ? (
-        <Button className={css.filtersButton} onClick={this.openFilters}>
-          <FormattedMessage id="SearchFilters.filtersButtonLabel" className={css.mapIconText} />
-        </Button>
-      ) : (
-        <SecondaryButton className={css.filtersButton} onClick={this.openFilters}>
-          <FormattedMessage id="SearchFilters.filtersButtonLabel" className={css.mapIconText} />
-        </SecondaryButton>
-      );
+    const filtersButtonClasses =
+      selectedFiltersCount > 0 ? css.filtersButtonSelected : css.filtersButton;
 
     const categoryLabel = intl.formatMessage({
       id: 'SearchFiltersMobile.categoryLabel',
@@ -284,7 +275,9 @@ class SearchFiltersMobileComponent extends Component {
           {searchInProgress ? loadingResults : null}
         </div>
         <div className={css.buttons}>
-          {filtersButton}
+          <Button rootClassName={filtersButtonClasses} onClick={this.openFilters}>
+            <FormattedMessage id="SearchFilters.filtersButtonLabel" className={css.mapIconText} />
+          </Button>
           <div className={css.mapIcon} onClick={onMapIconClick}>
             <FormattedMessage id="SearchFilters.openMapView" className={css.mapIconText} />
           </div>