Merge pull request #2274 from hypothesis/one-liners

Add utility classes for one-liners

src/sidebar/components/annotation-document-info.js

@@ -15,8 +15,8 @@ export default function AnnotationDocumentInfo({ annotation }) {
   }
 
   return (
-    <div className="annotation-document-info">
-      <div className="annotation-document-info__title">
+    <div className="annotation-document-info u-layout-row u-horizontal-rhythm">
+      <div className="annotation-document-info__title u-color-text--muted">
         on &quot;
         {documentInfo.titleLink ? (
           <a href={documentInfo.titleLink}>{documentInfo.titleText}</a>
@@ -26,7 +26,7 @@ export default function AnnotationDocumentInfo({ annotation }) {
         &quot;
       </div>
       {documentInfo.domain && (
-        <div className="annotation-document-info__domain">
+        <div className="annotation-document-info__domain u-color-text--muted">
           ({documentInfo.domain})
         </div>
       )}

src/sidebar/components/annotation-header.js

@@ -80,7 +80,7 @@ export default function AnnotationHeader({
             )}
             <span className="annotation-header__timestamp-created">
               <Timestamp
-                className="annotation-header__timestamp-created-link"
+                className="annotation-header__timestamp-created-link u-color-text--muted"
                 href={annotationLink}
                 timestamp={annotation.created}
               />

src/sidebar/components/annotation-license.js

@@ -9,7 +9,7 @@ export default function AnnotationLicense() {
   return (
     <div className="annotation-license">
       <a
-        className="annotation-license__link"
+        className="annotation-license__link u-layout-row u-color-text--muted"
         href="http://creativecommons.org/publicdomain/zero/1.0/"
         title="View more information about the Creative Commons Public Domain dedication"
         target="_blank"

src/sidebar/components/annotation-share-control.js

@@ -101,7 +101,7 @@ function AnnotationShareControl({
             </div>
           </div>
           <div className="annotation-share-panel__content">
-            <div className="annotation-share-panel__input">
+            <div className="annotation-share-panel__input u-layout-row">
               <input
                 aria-label="Use this URL to share this annotation"
                 className="annotation-share-panel__form-input"

src/sidebar/components/annotation-share-info.js

@@ -26,7 +26,7 @@ function AnnotationShareInfo({ annotation }) {
   );
 
   return (
-    <div className="annotation-share-info">
+    <div className="annotation-share-info u-layout-row--align-baseline">
       {linkToGroup && (
         <a
           className="annotation-share-info__group"

src/sidebar/components/annotation.js

@@ -123,7 +123,7 @@ function Annotation({
       )}
 
       {isEditing && (
-        <div className="annotation__form-actions">
+        <div className="annotation__form-actions u-layout-row">
           <AnnotationPublishControl
             annotation={annotation}
             isDisabled={isEmpty}
@@ -135,7 +135,7 @@ function Annotation({
 
       {!isCollapsedReply && (
         <footer className="annotation__footer">
-          <div className="annotation__controls">
+          <div className="annotation__controls u-layout-row">
             {shouldShowReplyToggle && (
               <Button
                 className="annotation__reply-toggle"

src/sidebar/components/new-note-btn.js

@@ -27,7 +27,7 @@ function NewNoteButton({ annotationsService, settings }) {
   };
 
   return (
-    <div className="new-note-button">
+    <div className="u-layout-row--justify-right">
       <Button
         buttonText="New note"
         className="button--primary"

src/sidebar/components/share-annotations-panel.js

@@ -68,7 +68,7 @@ function ShareAnnotationsPanel({ analytics, toastMessenger }) {
               <p>Use this link to share these annotations with anyone:</p>
             )}
           </div>
-          <div className="share-annotations-panel__input">
+          <div className="u-layout-row">
             <input
               aria-label="Use this URL to share these annotations"
               className="share-annotations-panel__form-input"
@@ -97,11 +97,7 @@ function ShareAnnotationsPanel({ analytics, toastMessenger }) {
             )}{' '}
             <span>
               Private (
-              <SvgIcon
-                name="lock"
-                inline
-                className="share-annotations-panel__icon--inline"
-              />{' '}
+              <SvgIcon name="lock" inline className="u-icon--inline" />{' '}
               <em>Only Me</em>) annotations are only visible to you.
             </span>
           </p>

src/sidebar/components/top-bar.js

@@ -101,7 +101,7 @@ function TopBar({
       {!isSidebar && (
         <div className="top-bar__inner content">
           <StreamSearchInput />
-          <div className="top-bar__expander" />
+          <div className="u-stretch" />
           <Button
             className="top-bar__icon-button"
             icon="help"
@@ -116,7 +116,7 @@ function TopBar({
       {isSidebar && (
         <div className="top-bar__inner content">
           <GroupList className="GroupList" auth={auth} />
-          <div className="top-bar__expander" />
+          <div className="u-stretch" />
           {pendingUpdateCount > 0 && (
             <Button
               className="top-bar__icon-button top-bar__icon-button--refresh"

src/styles/sidebar/components/annotation-document-info.scss

-@use "../../variables" as var;
-@use "../../mixins/layout";
-
-.annotation-document-info {
-  @include layout.row;
-  @include layout.horizontal-rhythm;
-  color: var.$color-text-light;
-}

src/styles/sidebar/components/annotation-header.scss

@@ -39,10 +39,6 @@
     }
   }
 
-  &__timestamp-created-link {
-    color: var.$color-text-light;
-  }
-
   &__highlight-icon {
     @include utils.icon--small;
     color: var.$color-text-light;

src/styles/sidebar/components/annotation-license.scss

@@ -7,11 +7,6 @@
   @include utils.border-top;
   padding-top: var.$layout-margin--small;
 
-  &__link {
-    @include layout.row;
-    color: var.$color-text-light;
-  }
-
   &__icon {
     @include utils.icon--xsmall;
     // Need a tiny space between license icons

src/styles/sidebar/components/annotation-share-control.scss

@@ -17,10 +17,6 @@
   width: 275px;
   cursor: default;
 
-  &__input {
-    @include layout.row;
-  }
-
   &__icon-button {
     @include buttons.button--input;
     padding: var.$layout-margin--xsmall var.$layout-margin--small;

src/styles/sidebar/components/annotation-share-info.scss

@@ -3,8 +3,6 @@
 @use "../../mixins/utils";
 
 .annotation-share-info {
-  @include layout.row($align: baseline);
-
   &__group,
   &__private {
     @include layout.row($align: baseline);

src/styles/sidebar/components/annotation.scss

@@ -28,17 +28,9 @@
     @include buttons.button--link;
   }
 
-  &__controls {
-    @include layout.row;
-  }
-
   &__actions {
     margin-left: auto;
   }
-
-  &__form-actions {
-    @include layout.row;
-  }
 }
 
 // FIXME move me

src/styles/sidebar/components/help-panel.scss

 @use "../../mixins/buttons";
-@use "../../mixins/layout";
 @use "../../mixins/molecules";
 @use "../../mixins/utils";
 @use "../../variables" as var;

src/styles/sidebar/components/new-note.scss

-@use "../../variables" as var;
-@use "../../mixins/layout";
-
-.new-note-button {
-  @include layout.row(right);
-}

src/styles/sidebar/components/share-annotations-panel.scss

@@ -12,28 +12,11 @@
     font-weight: 500;
   }
 
-  &__input {
-    display: flex;
-  }
-
   &__form-input {
     @include forms.form-input--with-button;
   }
 
-  &__icon--inline {
-    width: 1em;
-    height: 1em;
-  }
-
   &__icon-button {
     @include buttons.button--input;
   }
-
-  .share-annotations-panel-links {
-    @include molecules.footer-links;
-
-    &__icon {
-      @include utils.icon--large;
-    }
-  }
 }

src/styles/sidebar/components/top-bar.scss

@@ -105,9 +105,3 @@
   margin-right: auto;
   white-space: nowrap;
 }
-
-// an expander which adds spacing between the groups list
-// and the toolbar icons (in the new top-bar design)
-.top-bar__expander {
-  flex-grow: 1;
-}

src/styles/sidebar/sidebar.scss

@@ -15,7 +15,6 @@
 // ----------
 @use './components/annotation';
 @use './components/annotation-body';
-@use './components/annotation-document-info';
 @use './components/annotation-header';
 @use './components/annotation-license';
 @use './components/annotation-publish-control';
@@ -38,7 +37,6 @@
 @use './components/menu-item';
 @use './components/menu-section';
 @use './components/moderation-banner';
-@use './components/new-note';
 @use './components/search-status-bar';
 @use './components/selection-tabs';
 @use './components/share-annotations-panel';

src/styles/util.scss

 @use "./mixins/a11y";
 @use "./mixins/layout";
+@use "./mixins/utils";
+@use './variables' as var;
 
-// Utility classes for layout
-.u-stretch {
-  flex-grow: 1;
-}
+// Utility classes
+// Use these classes on elements that don't require additional styling
 
+// Layout
+
+// Establish a flex container with a horizontal flow
 .u-layout-row {
   @include layout.row;
 }
 
+// Establish a row flex container that aligns its children to (vertical) center
 .u-layout-row--align-center,
 .u-layout-row--align-middle {
   @include layout.row($align: center);
 }
 
+// Establish a row flex container that aligns its children along the baseline
+.u-layout-row--align-baseline {
+  @include layout.row($align: baseline);
+}
+
+// Establish a row flex container justifies its children right
+.u-layout-row--justify-right {
+  @include layout.row($justify: right);
+}
+
+// Use this class to make an element in a flex container "stretchy" and grow
+// when there is extra space available.
+.u-stretch {
+  flex-grow: 1;
+}
+
+// Put equal, standard spacing between children horizontally
+.u-horizontal-rhythm {
+  @include layout.horizontal-rhythm;
+}
+
+// Put equal standard spacing between children vertically
 .u-vertical-rhythm {
   @include layout.vertical-rhythm;
 }
 
+// Icons
+
+// These utilities establish dimensions appropriate for icon elements
+
+// Use for inline icons to size according to text content
+.u-icon--inline {
+  @include utils.icon--inline;
+}
+
+.u-icon--large {
+  @include utils.icon--large;
+}
+
+// Misc
+
+// Make element content invisible except to assistive technology
 .u-screen-reader-only {
   @include a11y.screen-reader-only;
 }
+
+// Use on elements for a de-emphasized, muted text color
+.u-color-text--muted {
+  color: var.$color-text-light;
+}