Add support for hints (or extended descriptions) in local-settings pages

2 files changed, 7 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
index eacc7419c..66b937365 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
@@ -17,6 +17,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
     options: PropTypes.arrayOf(PropTypes.shape({
       value: PropTypes.string.isRequired,
       message: PropTypes.string.isRequired,
+      hint: PropTypes.string,
     })),
     settings: ImmutablePropTypes.map.isRequired,
     placeholder: PropTypes.string,
@@ -62,6 +63,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
               disabled={!enabled}
             />
             {opt.message}
+            {opt.hint && <span class='hint'>{opt.hint}</span>}
           </label>
         );
       });
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index 1adf54a1b..75e7d370d 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -28,6 +28,11 @@
     }
   }
 
+  span.hint {
+    display: block;
+    color: $lighter-text-color;
+  }
+
   h1 {
     font-size: 18px;
     font-weight: 500;