Merge pull request #132 from glorious-codes/select_improvement

Select improvement
glorious-codes · Aug 9, 2022 · cad4cef · cad4cef
2 parents 131f1e4 + b1b287c
commit cad4cef
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@glorious/taslonic",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A glorious UI library available for React and Vue",
   "files": [
     "react/**",

diff --git a/src/base/services/button/button.js b/src/base/services/button/button.js
@@ -13,7 +13,7 @@ _public.buildCssClasses = ({ theme, block } = {}) => {
     cssClasses,
     baseCssClass
   );
-  propBasedCssClassService.handleBooleanProp(
+  propBasedCssClassService.handleBooleanProps(
     { block },
     isValidBooleanProp,
     cssClasses,

diff --git a/src/base/services/field/field.js b/src/base/services/field/field.js
@@ -5,7 +5,7 @@ const _public = {};
 _public.buildCssClasses = ({ required, block, element } = {}) => {
   const baseCssClass = getBaseCssClass();
   const cssClasses = [baseCssClass, buildRequiredCssClass(required, element, baseCssClass)];
-  propBasedCssClassService.handleBooleanProp(
+  propBasedCssClassService.handleBooleanProps(
     { block },
     isValidBooleanProp,
     cssClasses,

diff --git a/src/base/services/form-control/form-control.js b/src/base/services/form-control/form-control.js
@@ -8,7 +8,7 @@ _public.buildCssClasses = ({ errorMessage, block } = {}) => {
   const baseCssClass = getBaseCssClass();
   const cssClasses = [baseCssClass];
   handleInvalidCssClass(errorMessage, cssClasses, baseCssClass);
-  propBasedCssClassService.handleBooleanProp(
+  propBasedCssClassService.handleBooleanProps(
     { block },
     isValidBooleanProp,
     cssClasses,

diff --git a/src/base/services/prop-based-css-class/prop-based-css-class.js b/src/base/services/prop-based-css-class/prop-based-css-class.js
@@ -5,11 +5,12 @@ _public.handleProp = (propValue, isValidPropValue, currentCssClasses, baseCssCla
     currentCssClasses.push(`${baseCssClass}-${propValue}`);
 };
 
-_public.handleBooleanProp = (prop, isValidBooleanProp, currentCssClasses, baseCssClass) => {
-  const [ propName ] = Object.keys(prop);
-  const propValue = prop[propName];
-  if(shouldAppendBoolenPropCssClass(propName, propValue, isValidBooleanProp))
-    currentCssClasses.push(`${baseCssClass}-${propName}`);
+_public.handleBooleanProps = (props, isValidBooleanProp, currentCssClasses, baseCssClass) => {
+  Object.entries(props).forEach(([propName, propValue]) => {
+    if(shouldAppendBoolenPropCssClass(propName, propValue, isValidBooleanProp)) {
+      currentCssClasses.push(`${baseCssClass}-${propName}`);
+    }
+  });
 };
 
 function shouldAppendBoolenPropCssClass(propName, propValue, isValidBooleanProp){

diff --git a/src/base/services/prop-based-css-class/prop-based-css-class.test.js b/src/base/services/prop-based-css-class/prop-based-css-class.test.js
@@ -44,7 +44,7 @@ describe('Prop Based Css Class Service', () => {
     const baseCssClass = 't-base';
     const currentCssClasses = [baseCssClass];
     const isValidBooleanProp = prop => ['block'].includes(prop);
-    propBaseCssClassService.handleBooleanProp(
+    propBaseCssClassService.handleBooleanProps(
       { block: true },
       isValidBooleanProp,
       currentCssClasses,
@@ -57,7 +57,7 @@ describe('Prop Based Css Class Service', () => {
     const baseCssClass = 't-base';
     const currentCssClasses = [baseCssClass];
     const isValidBooleanProp = prop => ['block'].includes(prop);
-    propBaseCssClassService.handleBooleanProp(
+    propBaseCssClassService.handleBooleanProps(
       { block: 'true' },
       isValidBooleanProp,
       currentCssClasses,
@@ -70,7 +70,7 @@ describe('Prop Based Css Class Service', () => {
     const baseCssClass = 't-base';
     const currentCssClasses = [baseCssClass];
     const isValidBooleanProp = prop => ['block'].includes(prop);
-    propBaseCssClassService.handleBooleanProp(
+    propBaseCssClassService.handleBooleanProps(
       { block: false },
       isValidBooleanProp,
       currentCssClasses,
@@ -83,7 +83,7 @@ describe('Prop Based Css Class Service', () => {
     const baseCssClass = 't-base';
     const currentCssClasses = [baseCssClass];
     const isValidBooleanProp = prop => ['block'].includes(prop);
-    propBaseCssClassService.handleBooleanProp(
+    propBaseCssClassService.handleBooleanProps(
       {},
       isValidBooleanProp,
       currentCssClasses,
@@ -96,7 +96,7 @@ describe('Prop Based Css Class Service', () => {
     const baseCssClass = 't-base';
     const currentCssClasses = [baseCssClass];
     const isValidBooleanProp = prop => ['block'].includes(prop);
-    propBaseCssClassService.handleBooleanProp(
+    propBaseCssClassService.handleBooleanProps(
       { lowered: true },
       isValidBooleanProp,
       currentCssClasses,

diff --git a/src/base/services/select/select.js b/src/base/services/select/select.js
@@ -2,11 +2,11 @@ import propBasedCssClassService from '@base/services/prop-based-css-class/prop-b
 
 const _public = {};
 
-_public.buildWrapperCssClasses = ({ disabled } = {}) => {
+_public.buildWrapperCssClasses = ({ disabled, multiple } = {}) => {
   const wrapperBaseCssClass = getWrapperBaseCssClass();
   const cssClasses = [wrapperBaseCssClass];
-  propBasedCssClassService.handleBooleanProp(
-    { disabled },
+  propBasedCssClassService.handleBooleanProps(
+    { disabled, multiple },
     isValidBooleanProp,
     cssClasses,
     wrapperBaseCssClass
@@ -19,7 +19,7 @@ function getWrapperBaseCssClass(){
 }
 
 function isValidBooleanProp(propName){
-  return ['disabled'].includes(propName);
+  return ['disabled', 'multiple'].includes(propName);
 }
 
 export default _public;
diff --git a/src/base/services/select/select.test.js b/src/base/services/select/select.test.js
@@ -10,4 +10,9 @@ describe('Select Service', () => {
     const cssClasses = selectService.buildWrapperCssClasses({ disabled: true });
     expect(cssClasses).toEqual('t-select-wrapper t-select-wrapper-disabled');
   });
+
+  it('should wrapper append disabled modifier css class if it has been given as true', () => {
+    const cssClasses = selectService.buildWrapperCssClasses({ multiple: true });
+    expect(cssClasses).toEqual('t-select-wrapper t-select-wrapper-multiple');
+  });
 });
diff --git a/src/base/styles/form-control.styl b/src/base/styles/form-control.styl
@@ -48,16 +48,17 @@ select-arrow()
   .t-select-wrapper
     position relative
     select
-      padding-top 9px
-      padding-right 30px
-      padding-bottom 9px
+      padding 9px
       line-height $font-size-lg
-    &:before
-      select-arrow()
-      transform rotate(-135deg) translate(-60%, -60%)
-    &:after
-      select-arrow()
-      transform rotate(45deg) translate(-50%, -50%)
+    &:not(.t-select-wrapper-multiple)
+      select
+        padding 9px 30px 9px 9px
+      &:before
+        select-arrow()
+        transform rotate(-135deg) translate(-60%, -60%)
+      &:after
+        select-arrow()
+        transform rotate(45deg) translate(-50%, -50%)
     &.t-select-wrapper-disabled
       &:before
         border-color $color-grey

diff --git a/src/react/components/select/select.js b/src/react/components/select/select.js
@@ -9,6 +9,7 @@ export const Select = ({
   block,
   disabled,
   required,
+  multiple,
   children,
   ...rest
 }) => {
@@ -20,8 +21,8 @@ export const Select = ({
       validations={validations}
       formControlElSelector="select"
     >
-      <span className={selectService.buildWrapperCssClasses({ disabled })}>
-        <select disabled={disabled} {...rest}>
+      <span className={selectService.buildWrapperCssClasses({ disabled, multiple })}>
+        <select disabled={disabled} multiple={multiple} {...rest}>
           { placeholder && <option value="">{placeholder}</option> }
           { children }
         </select>

diff --git a/src/vue/components/select/select.html b/src/vue/components/select/select.html
@@ -10,6 +10,7 @@
       :name="name"
       :autofocus="autofocus"
       :disabled="disabled"
+      :multiple="multiple"
       v-bind="$attrs"
       v-on="{...$listeners, input: () => {}}"
     >

diff --git a/src/vue/components/select/select.js b/src/vue/components/select/select.js
@@ -14,12 +14,13 @@ export const tSelect = {
     autofocus: { type: Boolean },
     block: { type: Boolean },
     required: { type: Boolean },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    multiple: { type: Boolean }
   },
   computed: {
     wrapperCssClasses(){
-      const { disabled } = this;
-      return selectService.buildWrapperCssClasses({ disabled });
+      const { disabled, multiple } = this;
+      return selectService.buildWrapperCssClasses({ disabled, multiple });
     }
   },
   template