Add SegmentControl as global component & add Button and FormInput xlarge variant

changelog/entries/unreleased/feature/add_button_xlarge_variant.json

@@ -0,0 +1,7 @@
+{
+  "type": "feature",
+  "message": "Add button xlarge type variant.",
+  "issue_number": null,
+  "bullet_points": [],
+  "created_at": "2025-01-29"
+}

web-frontend/modules/core/assets/scss/abstracts/_button.scss

@@ -18,6 +18,10 @@ $button-large-height: 44px;
 $button-large-top-bottom-padding: 12px;
 $button-large-right-left-padding: 20px;
 
+$button-xlarge-height: 52px;
+$button-xlarge-top-bottom-padding: 14px;
+$button-xlarge-right-left-padding: 20px;
+
 @mixin button-size(
   $height: $button-regular-height,
   $padding-top-bottom: $button-regular-top-bottom-padding,

web-frontend/modules/core/assets/scss/components/button.scss

@@ -120,6 +120,16 @@
   );
 }
 
+.button--xlarge {
+  font-size: 16px;
+
+  @include button-size(
+    $button-xlarge-height,
+    $button-xlarge-top-bottom-padding,
+    $button-xlarge-right-left-padding
+  );
+}
+
 .button__icon {
   font-size: 16px;
 

web-frontend/modules/core/assets/scss/components/form_input.scss

@@ -19,6 +19,10 @@
     height: 44px;
   }
 
+  &.form-input--xlarge {
+    height: 52px;
+  }
+
   &:active,
   &:focus,
   &:focus-within {
@@ -79,6 +83,10 @@
     @extend %ellipsis;
   }
 
+  .form-input--xlarge & {
+    font-size: 16px;
+  }
+
   .form-input--icon-left & {
     padding-left: 8px;
   }

web-frontend/modules/core/components/Button.vue

@@ -36,7 +36,7 @@ export default {
       type: String,
       default: 'regular',
       validator(value) {
-        return ['small', 'regular', 'large', 'tiny'].includes(value)
+        return ['small', 'regular', 'large', 'tiny', 'xlarge'].includes(value)
       },
     },
     /**

web-frontend/modules/core/components/FormInput.vue

@@ -10,6 +10,7 @@
       'form-input--disabled': disabled,
       'form-input--small': size === 'small',
       'form-input--large': size === 'large',
+      'form-input--xlarge': size === 'xlarge',
       'form-input--suffix': hasSuffixSlot,
       'form-input--no-controls': removeNumberInputControls,
     }"
@@ -82,7 +83,7 @@ export default {
       type: String,
       required: false,
       validator: function (value) {
-        return ['regular', 'small', 'large'].includes(value)
+        return ['regular', 'small', 'large', 'xlarge'].includes(value)
       },
       default: 'regular',
     },

web-frontend/modules/core/plugins/global.js

@@ -40,6 +40,7 @@ import FormRow from '@baserow/modules/core/components/FormRow'
 import Logo from '@baserow/modules/core/components/Logo'
 import ReadOnlyForm from '@baserow/modules/core/components/ReadOnlyForm'
 import FormSection from '@baserow/modules/core/components/FormSection'
+import SegmentControl from '@baserow/modules/core/components/SegmentControl'
 
 import lowercase from '@baserow/modules/core/filters/lowercase'
 import uppercase from '@baserow/modules/core/filters/uppercase'
@@ -109,6 +110,7 @@ function setupVue(Vue) {
   Vue.component('Logo', Logo)
   Vue.component('ReadOnlyForm', ReadOnlyForm)
   Vue.component('FormSection', FormSection)
+  Vue.component('SegmentControl', SegmentControl)
 
   Vue.filter('lowercase', lowercase)
   Vue.filter('uppercase', uppercase)

web-frontend/modules/database/components/onboarding/DatabaseStep.vue

@@ -36,12 +36,11 @@
 
 <script>
 import { requiredIf } from 'vuelidate/lib/validators'
-import SegmentControl from '@baserow/modules/core/components/SegmentControl'
 import AirtableImportForm from '@baserow/modules/database/components/airtable/AirtableImportForm.vue'
 
 export default {
   name: 'DatabaseStep',
-  components: { AirtableImportForm, SegmentControl },
+  components: { AirtableImportForm },
   data() {
     return {
       types: [

web-frontend/stories/Button.stories.mdx

@@ -29,7 +29,7 @@ import Button from '@baserow/modules/core/components/Button'
         size: {
             control: {
                 type: 'radio',
-                options: ['tiny', 'small', 'regular', 'large'],
+                options: ['tiny', 'small', 'regular', 'large', 'xlarge'],
             },
             defaultValue: 'regular',
         },

web-frontend/stories/FormInput.stories.mdx

@@ -34,7 +34,7 @@ import FormInput from '@baserow/modules/core/components/FormInput'
         size: {
             control: {
                 type: 'select',
-                options: ['small', 'regular', 'large'],
+                options: ['small', 'regular', 'large', 'xlarge'],
             },
             defaultValue: 'regular',
         },