Skip to content

Commit

Permalink
Merge branch 'master' of github.com:xola/ui-kit
Browse files Browse the repository at this point in the history
* 'master' of github.com:xola/ui-kit:
  ComboBox fixes (#62)
  • Loading branch information
rushi committed Oct 15, 2021
2 parents f1810f2 + df38b64 commit 66f9ef9
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 17 deletions.
61 changes: 46 additions & 15 deletions src/components/Forms/ComboBox.css
Original file line number Diff line number Diff line change
@@ -1,43 +1,74 @@
/* Container */
.ui-combo-box__control {
@apply p-0 font-sans text-base leading-base;
@apply w-full border rounded placeholder-gray-dark hover:placeholder-gray-darker !text-gray-darker;
@apply disabled:text-gray disabled:bg-gray-lighter hover:bg-gray-lighter hover:border-black;
@apply border-gray-light;
@apply p-0 font-sans text-base leading-base !text-gray-dark; /* These don't do much, added just in case */
@apply !rounded !border-gray-light;
}

/* Container hover */
.ui-combo-box__control:hover {
@apply border-black !important;
@apply !border-black bg-gray-lighter;
}

.ui-combo-box__input-container {
@apply !text-gray-dark hover:text-gray-darker;
/* Container focus */
.ui-combo-box__control:focus-within {
@apply shadow-none !border-primary;
}

.border-danger .ui-combo-box__control {
@apply !border-danger;
}

/* Placeholder text color */
.ui-combo-box__placeholder {
@apply !text-gray-dark;
}

/* Placeholder hover */
.ui-combo-box__control:hover .ui-combo-box__placeholder {
@apply !text-gray-darker;
}

.ui-combo-box__control--is-focused {
@apply shadow-none outline-none ring-0 !border-primary;
/* Menu shadow */
.ui-combo-box__menu {
@apply !shadow-md;
}

/* Option focus */
.ui-combo-box__option--is-focused {
@apply !bg-primary-lighter;
@apply !bg-gray-lighter;
}

/* Option active */
.ui-combo-box__option--is-selected {
@apply !bg-primary;
@apply !bg-primary-light;
}

.ui-combo-box__input {
@apply focus:ring-0;
/* Input text color */
.ui-combo-box__input-container {
@apply !text-gray-dark;
}

.ui-combo-box__indicator-separator {
@apply hidden;
/* Input hover */
.ui-combo-box__control:hover .ui-combo-box__input-container {
@apply !text-gray-darker;
}

/* Dropdown icon size and color style */
.ui-combo-box__dropdown-indicator svg {
@apply w-3.5 h-3.5 text-black;
}

/* Dropdown icon disabled */
.ui-combo-box--is-disabled svg {
@apply text-gray;
}

/* Hide vertical separator */
.ui-combo-box__indicator-separator {
@apply hidden;
}

/* Hide weird border when search input is focused */
.ui-combo-box__input:focus {
box-shadow: none;
}
11 changes: 9 additions & 2 deletions src/components/Forms/ComboBox.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,17 @@ import React from "react";
import Select from "react-select";
import "./ComboBox.css";

export const ComboBox = ({ className, ...rest }) => {
return <Select className={clsx("ui-combo-box", className)} classNamePrefix="ui-combo-box" {...rest} />;
export const ComboBox = ({ className, isError, ...rest }) => {
return (
<Select
className={clsx("ui-combo-box", isError && "border-danger", className)}
classNamePrefix="ui-combo-box"
{...rest}
/>
);
};

ComboBox.propTypes = {
className: PropTypes.string,
isError: PropTypes.bool,
};

0 comments on commit 66f9ef9

Please sign in to comment.