In-app help content

mathesar_ui/src/component-library/checkbox-group/CheckboxGroup.svelte

@@ -27,4 +27,5 @@
     checked={set.has(option.value)}
     disabled={option.disabled}
   />
+  <slot slot="label" />
 </FieldsetGroup>

mathesar_ui/src/component-library/dropdown/Dropdown.svelte

@@ -1,13 +1,5 @@
 <script lang="ts">
   import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
-  import {
-    portal,
-    popper,
-    Button,
-    Icon,
-    clickOffBounds,
-  } from '@mathesar-component-library';
-  import type { Appearance, Size } from '@mathesar-component-library/types';
   import type { Placement } from '@popperjs/core/lib/enums';
   import {
     createEventDispatcher,
@@ -17,6 +9,12 @@
     tick,
   } from 'svelte';
   import { derived } from 'svelte/store';
+  import type { Appearance, Size } from '@mathesar-component-library-dir/types';
+  import Button from '@mathesar-component-library-dir/button/Button.svelte';
+  import Icon from '@mathesar-component-library-dir/icon/Icon.svelte';
+  import portal from '@mathesar-component-library-dir/common/actions/portal';
+  import popper from '@mathesar-component-library-dir/common/actions/popper';
+  import clickOffBounds from '@mathesar-component-library-dir/common/actions/clickOffBounds';
   import { AccompanyingElements } from './AccompanyingElements';
 
   const dispatch = createEventDispatcher();

mathesar_ui/src/component-library/help/Help.scss

@@ -0,0 +1,17 @@
+button.dropdown.trigger.no-arrow.help-trigger {
+  padding: 0;
+}
+
+.help-trigger-content {
+  color: #39a0f5;
+  svg {
+    vertical-align: text-top;
+  }
+}
+
+.dropdown.help-content {
+  max-width: min(80vw, 40rem);
+  background: #ecf7ff;
+  border: solid 0.05rem #39a0f5;
+  padding: 0.5rem;
+}

mathesar_ui/src/component-library/help/Help.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+  import Dropdown from '@mathesar-component-library-dir/dropdown/Dropdown.svelte';
+  import Icon from '@mathesar-component-library-dir/icon/Icon.svelte';
+</script>
+
+<Dropdown
+  ariaLabel="Help"
+  placement="auto"
+  showArrow={false}
+  triggerAppearance="ghost"
+  triggerClass="help-trigger"
+  contentClass="help-content"
+>
+  <span slot="trigger" class="help-trigger-content">
+    <Icon data={faQuestionCircle} />
+  </span>
+  <slot slot="content" />
+</Dropdown>

mathesar_ui/src/component-library/help/__meta__/Help.stories.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Help from '../Help.svelte';
+
+  const meta = {
+    title: 'Components/Help',
+  };
+</script>
+
+<Meta {...meta} />
+
+<Story name="Basic">
+  <ul>
+    <li>
+      A small amount of content. <Help>I'm helpful!</Help>
+    </li>
+    <li>
+      A large amount of content.
+
+      <Help>
+        <h2>How to make a pizza</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta id
+          eius cumque, dolor deserunt suscipit distinctio ab, hic dignissimos
+          iure fuga dolorem officia animi non atque quod voluptas velit illo!
+        </p>
+        <h3>Roll the dough</h3>
+        <p>Yada yada</p>
+        <h3>Apply your toppings</h3>
+        <ul>
+          <li>Asparagus</li>
+          <li>Broccoli</li>
+          <li>Cheese</li>
+        </ul>
+        <h3>Cook!</h3>
+        <p>🍕</p>
+      </Help>
+    </li>
+  </ul>
+</Story>

mathesar_ui/src/component-library/index.ts

@@ -18,6 +18,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as CancelOrProceedButtonPair } from './cancel-or-proceed-button-pair/CancelOrProceedButtonPair.svelte';
 export { default as Checkbox } from './checkbox/Checkbox.svelte';
 export { default as CheckboxGroup } from './checkbox-group/CheckboxGroup.svelte';
+export { default as Help } from './help/Help.svelte';
 export { default as Icon } from './icon/Icon.svelte';
 export { InputGroup, InputGroupText } from './input-group';
 export { default as Label } from './label/Label.svelte';

mathesar_ui/src/component-library/radio-group/RadioGroup.svelte

@@ -11,4 +11,5 @@
 
 <FieldsetGroup {isInline} {options} {label} let:option on:change>
   <Radio bind:group={value} value={option.value} disabled={option.disabled} />
+  <slot slot="label" />
 </FieldsetGroup>

mathesar_ui/src/component-library/styles.scss

@@ -21,6 +21,7 @@
 @import 'spinner-area/SpinnerArea.scss';
 
 @import 'dropdown/Dropdown.scss';
+@import 'help/Help.scss';
 @import 'file-upload/FileUpload.scss';
 @import 'notification/Notification.scss';
 @import 'pagination/Pagination.scss';

mathesar_ui/src/components/Null.svelte

@@ -3,9 +3,9 @@
 <style>
   span {
     font-size: 90%;
-    padding: 1px 4px;
-    background: #f4f4f4;
+    padding: 0.02em 0.3em;
+    background: rgba(0, 0, 0, 0.08);
     border-radius: 3px;
-    color: #888;
+    color: rgba(0, 0, 0, 0.7);
   }
 </style>

mathesar_ui/src/pages/schemas/Schemas.svelte

@@ -8,6 +8,7 @@
   import { modal } from '@mathesar/stores/modal';
   import SchemaRow from './schema-row/SchemaRow.svelte';
   import AddEditSchema from './AddEditSchema.svelte';
+  import SchemasHelp from './__help__/SchemasHelp.svelte';
 
   export let database: string;
 
@@ -67,15 +68,9 @@
   </section>
 
   <div class="container">
-    <h2>Schemas ({$schemas.data.size})</h2>
+    <h2>Schemas ({$schemas.data.size}) <SchemasHelp /></h2>
     <TextInput placeholder="Find a schema..." bind:value={filterQuery} />
 
-    <!-- TODO Move the p below into a help popover when we have a popover component -->
-    <p>
-      Schemas are collections of database objects such as tables and views. They
-      are best when used to organize data for a specific project.
-    </p>
-
     <ul class="schema-list">
       {#each displayList as schema (schema.id)}
         <li>

mathesar_ui/src/pages/schemas/__help__/SchemasHelp.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Help } from '@mathesar-component-library';
+</script>
+
+<Help>
+  Schemas are collections of database objects such as tables and views. They are
+  best when used to organize data for a specific project.
+</Help>

mathesar_ui/src/sections/table-view/constraints/NewUniqueConstraintModal.svelte

@@ -18,6 +18,9 @@
   import ColumnName from '@mathesar/components/ColumnName.svelte';
   import { toast } from '@mathesar/stores/toast';
   import Form from '@mathesar/components/Form.svelte';
+  import UniqueConstraintsHelp from './__help__/UniqueConstraintsHelp.svelte';
+  import ConstraintNameHelp from './__help__/ConstraintNameHelp.svelte';
+  import UniqueConstraintColumnsHelp from './__help__/UniqueConstraintColumnsHelp.svelte';
 
   export let controller: ModalController;
 
@@ -129,24 +132,24 @@
   }
 </script>
 
-<ControlledModal title="New Unique Constraint" {controller} on:open={init}>
+<ControlledModal {controller} on:open={init}>
+  <span slot="title">New Unique Constraint <UniqueConstraintsHelp /></span>
   <Form>
     <FormField>
-      <CheckboxGroup
-        label="Columns"
-        options={columnsOptions}
-        bind:values={constraintColumnIds}
-      />
+      <CheckboxGroup options={columnsOptions} bind:values={constraintColumnIds}>
+        Columns <UniqueConstraintColumnsHelp />
+      </CheckboxGroup>
     </FormField>
 
     <FormField>
       <RadioGroup
-        label="Set Constraint Name"
         options={namingStrategyOptions}
         bind:value={namingStrategy}
         isInline
         on:change={handleNamingStrategyChange}
-      />
+      >
+        Set Constraint Name <ConstraintNameHelp />
+      </RadioGroup>
     </FormField>
 
     {#if namingStrategy === 'manual'}

mathesar_ui/src/sections/table-view/constraints/TableConstraints.svelte

@@ -21,6 +21,7 @@
   import { modal } from '@mathesar/stores/modal';
   import NewUniqueConstraintModal from './NewUniqueConstraintModal.svelte';
   import TableConstraint from './TableConstraint.svelte';
+  import ConstraintHelp from './__help__/ConstraintHelp.svelte';
 
   export let controller: ModalController;
 
@@ -38,14 +39,14 @@
   // for the more specific update.
   $: shouldShowLoadingSpinner = isEmpty && isLoading;
   $: countText = isEmpty ? '' : ` (${constraints.length as number})`;
-  $: title = `Table Constraints${countText as string}`;
 
   function remove(constraint: Constraint) {
     return (constraintsDataStore as ConstraintsDataStore).remove(constraint.id);
   }
 </script>
 
-<ControlledModal {controller} {title}>
+<ControlledModal {controller}>
+  <span slot="title">Table Constraints{countText} <ConstraintHelp /></span>
   <div class="table-constraints">
     {#if shouldShowLoadingSpinner}
       <Icon data={faSpinner} spin={true} />

mathesar_ui/src/sections/table-view/constraints/__help__/ConstraintHelp.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Help } from '@mathesar/component-library';
+</script>
+
+<Help>
+  Constraints help you keep your data clean by rejecting invalid data before it
+  gets entered.
+</Help>

mathesar_ui/src/sections/table-view/constraints/__help__/ConstraintNameHelp.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Help } from '@mathesar-component-library';
+</script>
+
+<Help>
+  <p>
+    At the database level, each constraint must have a unique name across all
+    the constraints, tables, views, and indexes within the schema.
+  </p>
+  <p>
+    In Mathesar however, the name of the constraint will likely never be
+    relevant, &mdash; so we recommend allowing Mathesar to automatically
+    generate constraint names when adding new constraints.
+  </p>
+</Help>

mathesar_ui/src/sections/table-view/constraints/__help__/UniqueConstraintColumnsHelp.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Help } from '@mathesar-component-library';
+  import Identifier from '@mathesar/components/Identifier.svelte';
+</script>
+
+<Help>
+  <p>
+    A unique constraint set for <strong>multiple columns</strong> will consider
+    records as duplicate only if the values for <em>all</em> columns within the constraint
+    are identical.
+  </p>
+  <p>
+    For example, in a <Identifier>People</Identifier> table with
+    <Identifier>First name</Identifier> and
+    <Identifier>Last name</Identifier> columns, you could add a unique constraint
+    on both columns to prevent duplicate people. This constraint would allow people
+    to have the same <Identifier>First name</Identifier>
+    or the same <Identifier>Last name</Identifier>, but not both.
+  </p>
+</Help>

mathesar_ui/src/sections/table-view/constraints/__help__/UniqueConstraintsHelp.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Help } from '@mathesar-component-library';
+  import Null from '@mathesar/components/Null.svelte';
+</script>
+
+<Help>
+  <p>Unique constraints reject duplicate records before they get entered.</p>
+  <p>Special behavior:</p>
+  <ul>
+    <li>
+      <Null /> values are always considered unique.
+    </li>
+  </ul>
+</Help>