Convert Body component to use size="" prop

5 years ago · f0f10ab2b4
14 changed files with 57 additions and 60 deletions
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@ -38,7 +38,7 @@
      <header>
        <div class="text">
          <Heading xs>{title}</Heading>
-          <Body xxs><slot name="description" /></Body>
+          <Body size="XXS"><slot name="description" /></Body>
        </div>
        <div class="buttons">
          <slot name="buttons" />
--- a/packages/bbui/src/Typography/Body.svelte
+++ b/packages/bbui/src/Typography/Body.svelte
@ -1,29 +1,11 @@
 <script>
    import "@spectrum-css/typography/dist/index-vars.css"
-
-    // Sizes
-    export let xxxl = false;
-    export let xxl = false;
-    export let xl = false;
-    export let l = false;
-    export let m = false;
-    export let s = false;
-    export let xs = false;
-    export let xxs = false;
-
+    
+    export let size = "M";
    export let serif = false;
-    $: useDefault = ![xxxl, xxl, xl, l, m, s, xs, xxs].includes(true)
 </script>

-<p class="spectrum-Body"
+<p class="spectrum-Body class:spectrum-Body--size{size}"
    class:spectrum-Body--serif={serif}
-    class:spectrum-Body--sizeXXXL={xxxl}
-    class:spectrum-Body--sizeXXL={xxl}
-    class:spectrum-Body--sizeXL={xl}
-    class:spectrum-Body--sizeL={l}
-    class:spectrum-Body--sizeM={m || useDefault}
-    class:spectrum-Body--sizeS={s}
-    class:spectrum-Body--sizeXS={xs}
-    class:spectrum-Body--sizeXXS={xxs}>
    <slot />
 </p>
--- a/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
@ -102,7 +102,7 @@
    return viewTable.schema[field].type === "number"
  }

-  const fieldChanged = filter => ev => {
+  const fieldChanged = (filter) => (ev) => {
    // reset if type changed
    if (
      filter.key &&
@ -113,15 +113,16 @@
    }
  }

-  const getOptionLabel = x => x.name
-  const getOptionValue = x => x.key
+  const getOptionLabel = (x) => x.name
+  const getOptionValue = (x) => x.key
 </script>

 <ModalContent
  title="Filter"
  confirmText="Save"
  onConfirm={saveView}
-  size="large">
+  size="large"
+>
  {#if view.filters.length}
    <div class="input-group-row">
      {#each view.filters as filter, idx}
@ -133,41 +134,48 @@
            options={CONJUNCTIONS}
            placeholder={null}
            {getOptionLabel}
-            {getOptionValue} />
+            {getOptionValue}
+          />
        {/if}
        <Select
          bind:value={filter.key}
          on:change={fieldChanged(filter)}
-          options={fields} />
+          options={fields}
+        />
        <Select
          bind:value={filter.condition}
          options={CONDITIONS}
          {getOptionLabel}
-          {getOptionValue} />
+          {getOptionValue}
+        />
        {#if filter.key && isMultipleChoice(filter.key)}
          <Select
            bind:value={filter.value}
            options={fieldOptions(filter.key)}
-            getOptionLabel={x => x.toString()} />
+            getOptionLabel={(x) => x.toString()}
+          />
        {:else if filter.key && isDate(filter.key)}
          <DatePicker
            bind:value={filter.value}
-            placeholder={filter.key || fields[0]} />
+            placeholder={filter.key || fields[0]}
+          />
        {:else if filter.key && isNumber(filter.key)}
          <Input
            bind:value={filter.value}
            placeholder={filter.key || fields[0]}
-            type="number" />
+            type="number"
+          />
        {:else}
          <Input
            placeholder={filter.key || fields[0]}
-            bind:value={filter.value} />
+            bind:value={filter.value}
+          />
        {/if}
        <Icon hoverable name="Close" on:click={() => removeFilter(idx)} />
      {/each}
    </div>
  {:else}
-    <Body s>Add a filter to get started.</Body>
+    <Body size="S">Add a filter to get started.</Body>
  {/if}
  <div slot="footer">
    <Button secondary on:click={addFilter}>Add Filter</Button>
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@ -30,7 +30,7 @@
 </script>

 <ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
-  <Body s>Specify the minimum access level role for this data.</Body>
+  <Body size="S">Specify the minimum access level role for this data.</Body>
  <div class="row">
    <Label extraSmall grey>Level</Label>
    <Label extraSmall grey>Role</Label>
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@ -39,12 +39,14 @@
      <div
        class="integration hoverable"
        class:selected={integration.type === integrationType}
-        on:click={() => selectIntegration(integrationType)}>
+        on:click={() => selectIntegration(integrationType)}
+      >
        <svelte:component
          this={ICONS[integrationType]}
          height="50"
-          width="50"/>
-        <Body xs>{integrationType}</Body>
+          width="50"
+        />
+        <Body size="XS">{integrationType}</Body>
      </div>
    {/each}
  </div>
@ -53,7 +55,7 @@
 <style>
  .integration-list {
    display: grid;
-    grid-template-columns: repeat( auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: var(--spectrum-alias-grid-baseline);
  }

--- a/packages/builder/src/components/common/ConfirmDialog.svelte
+++ b/packages/builder/src/components/common/ConfirmDialog.svelte
@ -20,7 +20,7 @@

 <Modal bind:this={modal} on:hide={onCancel}>
  <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
-    <Body s>
+    <Body size="S">
      {body}
      <slot />
    </Body>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
@ -3,7 +3,7 @@
 </script>

 <div class="root">
-  <Body s>This action doesn't require any additional settings.</Body>
+  <Body size="S">This action doesn't require any additional settings.</Body>
 </div>

 <style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
@ -17,18 +17,18 @@
  $: schemaFields = getSchemaFields(parameters?.tableId)
  $: tableOptions = $tables.list || []

-  const getSchemaFields = tableId => {
+  const getSchemaFields = (tableId) => {
    const { schema } = getSchemaForDatasource({ type: "table", tableId })
    return Object.values(schema || {})
  }

-  const onFieldsChanged = e => {
+  const onFieldsChanged = (e) => {
    parameters.fields = e.detail
  }
 </script>

 <div class="root">
-  <Body s>
+  <Body size="S">
    Choosing a Data Source will automatically use the data it provides, but it's
    optional.<br />
    You can always add or override fields manually.
@ -39,21 +39,24 @@
      bind:value={parameters.providerId}
      options={dataProviderComponents}
      placeholder="None"
-      getOptionLabel={option => option._instanceName}
-      getOptionValue={option => option._id} />
+      getOptionLabel={(option) => option._instanceName}
+      getOptionValue={(option) => option._id}
+    />

    <Label small>Table</Label>
    <Select
      bind:value={parameters.tableId}
      options={tableOptions}
-      getOptionLabel={option => option.name}
-      getOptionValue={option => option._id} />
+      getOptionLabel={(option) => option.name}
+      getOptionValue={(option) => option._id}
+    />

    {#if parameters.tableId}
      <SaveFields
        parameterFields={parameters.fields}
        {schemaFields}
-        on:change={onFieldsChanged} />
+        on:change={onFieldsChanged}
+      />
    {/if}
  </div>
 </div>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@ -40,7 +40,7 @@
  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
  <DrawerContent slot="body">
    <Layout>
-      <Body s>
+      <Body size="S">
        {#if !Object.keys(tempValue || {}).length}
          Add your first filter column.
        {:else}
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@ -36,7 +36,7 @@
      <Button secondary on:click={newQueryParameter}>Add Param</Button>
    {/if}
  </div>
-  <Body s>
+  <Body size="S">
    {#if !bindable}
      Parameters come in two parts: the parameter name, and a default/fallback
      value.
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -137,7 +137,7 @@
    <Divider />
    <div class="config">
      <Heading s>Fields</Heading>
-      <Body s>Fill in the fields specific to this query.</Body>
+      <Body size="S">Fill in the fields specific to this query.</Body>
      <IntegrationQueryEditor
        {datasource}
        {query}
@ -160,7 +160,7 @@
        <Button secondary on:click={previewQuery}>Run Query</Button>
      </ButtonGroup>
    </div>
-    <Body s>
+    <Body size="S">
      Below, you can preview the results from your query and change the schema.
    </Body>
    <section class="viewer">
--- a/packages/builder/src/components/start/BuilderSettingsModal.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsModal.svelte
@ -63,14 +63,15 @@
  <ThemeEditor />
  <Divider noMargin noGrid />
  <Heading xs>Hosting</Heading>
-  <Body s>
+  <Body size="S">
    This section contains settings that relate to the deployment and hosting of
    apps made in this builder.
  </Body>
  <Toggle
    text="Self hosted"
    on:change={updateSelfHosting}
-    bind:value={selfhosted} />
+    bind:value={selfhosted}
+  />
  {#if selfhosted}
    <Input bind:value={hostingInfo.hostingUrl} label="Hosting URL" />
    <Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
@ -78,12 +79,13 @@
  {/if}
  <Divider noMargin noGrid />
  <Heading xs>Analytics</Heading>
-  <Body s>
+  <Body size="S">
    If you would like to send analytics that help us make budibase better,
    please let us know below.
  </Body>
  <Toggle
    text="Send Analytics To Budibase"
    value={!analyticsDisabled}
-    on:change={toggleAnalytics} />
+    on:change={toggleAnalytics}
+  />
 </ModalContent>
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -25,8 +25,8 @@
      {#each templates as template}
        <div class="templates-card">
          <Heading black small>{template.name}</Heading>
-          <Body medium grey>{template.category}</Body>
-          <Body lh small black>{template.description}</Body>
+          <Body size="M" grey>{template.category}</Body>
+          <Body size="S" black>{template.description}</Body>
          <div><img src={template.image} width="100%" /></div>
          <div class="card-footer">
            <Button secondary on:click={() => onSelect(template)}>
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -52,7 +52,7 @@
        />
        <Heading m>{datasource.name}</Heading>
      </header>
-      <Body small grey lh>{integration.description}</Body>
+      <Body size="S" grey lh>{integration.description}</Body>
      <Divider />
      <div class="container">
        <div class="config-header">