Merge pull request #440 from sronveaux/fix-geocoder-width

Fix header title getting truncated and change geocoder flex width behaviour

Author: sronveaux

app-starter/components/AppHeader.vue

@@ -12,8 +12,6 @@
     <!-- slot to inject components after the title text -->
     <slot name="wgu-tb-after-title"></slot>
 
-    <v-spacer></v-spacer>
-
     <!-- slot to inject components before the auto-generated buttons (by config) -->
     <slot name="wgu-tb-before-auto-buttons"></slot>
 

docs/module-configuration.md

@@ -46,7 +46,10 @@ Module identifier: `wgu-geocoder`
 
 | Property           | Meaning   | Example |
 |--------------------|:---------:|---------|
-| rounded            | Adds a border radius to the input. | `"rounded": true` |
+| width              | The width of the text input field. | `"width": 400` |
+| minWidth          | The minimum width of the text input field. Only applies if the `width` property is not defined. Defaults to `175` | `"minWidth": 175` |
+| maxWidth          | The maximum width of the text input field. Only applies if the `width` property is not defined. Defaults to `300` | `"maxWidth": 300` |
+| rounded            | Adds a border radius to the text input field. | `"rounded": true` |
 | autofocus          | Enables autofocus  | `"autofocus": true` |
 | clearable          | Add input clear functionality.  | `"clearable": true` |
 | persistentHint     | Forces hint to always be visible.  | `"persistentHint": true` |

src/components/geocoder/Geocoder.vue

@@ -5,7 +5,9 @@
       class="wgu-geocoder-combo wgu-solo-field"
       variant="outlined"
       density="compact"
-      width="320"
+      :width="width"
+      :min-width="width ? undefined : minWidth"
+      :max-width="width ? undefined : maxWidth"
       :list-props="{ nav: true, density: 'compact' }"
       :color="isPrimaryDarkWithLightTheme ? 'white' : 'accent'"
       :theme="isDarkTheme ? 'dark' : 'light'"
@@ -47,6 +49,9 @@ export default {
   name: 'wgu-geocoder-input',
   props: {
     icon: { type: String, required: false, default: 'md:search' },
+    width: { type: Number, required: false, default: undefined },
+    minWidth: { type: Number, required: false, default: 175 },
+    maxWidth: { type: Number, required: false, default: 300 },
     rounded: { type: Boolean, required: false, default: true },
     autofocus: { type: Boolean, required: false, default: true },
     clearable: { type: Boolean, required: false, default: true },

tests/unit/specs/components/geocoder/Geocoder.spec.js

@@ -44,6 +44,9 @@ describe('geocoder/Geocoder.vue', () => {
 
     it('has correct default props', () => {
       expect(vm.icon).to.equal('md:search');
+      expect(vm.width).to.be.undefined;
+      expect(vm.minWidth).to.equal(175);
+      expect(vm.maxWidth).to.equal(300);
       expect(vm.rounded).to.be.true;
       expect(vm.autofocus).to.be.true;
       expect(vm.clearable).to.be.true;
@@ -137,6 +140,61 @@ describe('geocoder/Geocoder.vue', () => {
     });
   });
 
+  describe('configured width', () => {
+    describe('width property is not defined', () => {
+      beforeEach(() => {
+        const moduleProps = {
+          target: 'toolbar',
+          minWidth: 50,
+          maxWidth: 100
+        };
+
+        comp = createWrapper({ props: moduleProps });
+        vm = comp.vm;
+      });
+
+      it('combobox width is undefined', () => {
+        const comboBox = comp.findComponent({ name: 'v-combobox' });
+
+        expect(comboBox.props('width')).to.be.undefined;
+      });
+
+      it('combobox maxWidth and minWidth are assigned correctly', () => {
+        const comboBox = comp.findComponent({ name: 'v-combobox' });
+
+        expect(comboBox.props('maxWidth')).to.equal(100);
+        expect(comboBox.props('minWidth')).to.equal(50);
+      });
+    });
+
+    describe('width property is defined', () => {
+      beforeEach(() => {
+        const moduleProps = {
+          target: 'toolbar',
+          width: 75,
+          minWidth: 50,
+          maxWidth: 100
+        };
+
+        comp = createWrapper({ props: moduleProps });
+        vm = comp.vm;
+      });
+
+      it('combobox maxWidth and minWidth are undefined', () => {
+        const comboBox = comp.findComponent({ name: 'v-combobox' });
+
+        expect(comboBox.props('maxWidth')).to.be.undefined;
+        expect(comboBox.props('minWidth')).to.be.undefined;
+      });
+
+      it('combobox width is assigned correctly', () => {
+        const comboBox = comp.findComponent({ name: 'v-combobox' });
+
+        expect(comboBox.props('width')).to.equal(75);
+      });
+    });
+  });
+
   describe('methods - search', () => {
     let map;
     let axiosMock;