Merge branch 'main' of https://github.com/PeculiarVentures/peculiar-ui …

…into mariktar/add-render-custom-tags-to-autocomplete
PeculiarVentures · Oct 24, 2024 · a48aa50 · a48aa50
2 parents d48737c + 9b7d39e
commit a48aa50
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 31 deletions.
diff --git a/packages/color/package.json b/packages/color/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/color",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": "PeculiarVentures Team",
   "description": "Library for color manipulation and conversion in JavaScript.",
   "keywords": [

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.6.7",
+  "version": "1.0.0",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -48,7 +48,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@peculiar/color": "^0.1.3",
+    "@peculiar/color": "^0.1.4",
     "@popperjs/core": "^2.11.7",
     "@types/flat": "^5.0.2",
     "@types/react-transition-group": "^4.4.5",

diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -101,7 +101,7 @@ export type AutocompleteOwnProps<
   /**
    * Render the tags elements.
    */
-  renderTags?: (
+  renderTag?: (
     options: T[],
     getTagProps: UseAutocompleteReturnType<T, Multiple>['getTagProps'],
   ) => React.ReactNode;
@@ -336,19 +336,11 @@ const AutocompletePopover = styled(Popper)(
 );
 
 const AutocompleteTag = styled(Chip)<{
-  tagsLength: number,
-  limitTags: number,
   size: AutocompleteOwnProps<any>['size'],
 }>((props) => ({
   label: 'Autocomplete-tag',
   borderRadius: '3px',
   margin: 0,
-  ...(props.tagsLength === 1 && {
-    maxWidth: 'calc(100% - var(--pv-size-base))',
-  }),
-  ...(props.tagsLength > 1 && props.limitTags > 0 && {
-    maxWidth: `calc(${100 / props.limitTags}% - var(--pv-size-base))`,
-  }),
   ...(props.size === 'small' && {
     height: 'var(--pv-size-base-5)',
   }),
@@ -432,7 +424,7 @@ export const Autocomplete = <
     errorText,
     renderRoot: renderRootProp,
     renderOption: renderOptionProp,
-    renderTags: renderTagsProp,
+    renderTag: renderTagsProp,
     getLimitTagsText = (more) => `${more} more`,
     groupBy,
     onCreate,
@@ -519,7 +511,7 @@ export const Autocomplete = <
     </li>
   );
 
-  const defaultRenderTags: AutocompleteOwnProps<T, Multiple>['renderTags'] = (
+  const defaultRenderTags: AutocompleteOwnProps<T, Multiple>['renderTag'] = (
     options,
     getTagsProps,
   ) => options.map((o, index) => (
@@ -528,9 +520,7 @@ export const Autocomplete = <
       color="secondary"
       variant="contained"
       size={size}
-      limitTags={limitTags}
       disabled={disabled}
-      tagsLength={(value as T[]).length}
     >
       {getOptionLabel(o)}
     </AutocompleteTag>

diff --git a/packages/react-components/src/Chip/__snapshots__/chip.test.tsx.snap b/packages/react-components/src/Chip/__snapshots__/chip.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`<Chip /> should have custom delete icon 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   background-color: var(--pv-color-secondary);
   color: var(--pv-color-secondary-contrast);
 }
@@ -49,7 +50,6 @@ exports[`<Chip /> should have custom delete icon 1`] = `
 }
 
 .emotion-2 {
-  margin-left: var(--pv-size-base);
   display: inherit;
 }
 
@@ -133,6 +133,7 @@ exports[`<Chip /> should have delete icon 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   background-color: var(--pv-color-secondary);
   color: var(--pv-color-secondary-contrast);
 }
@@ -150,7 +151,6 @@ exports[`<Chip /> should have delete icon 1`] = `
 }
 
 .emotion-2 {
-  margin-left: var(--pv-size-base);
   display: inherit;
 }
 
@@ -235,6 +235,7 @@ exports[`<Chip /> should pass className 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   background-color: var(--pv-color-secondary);
   color: var(--pv-color-secondary-contrast);
 }
@@ -295,6 +296,7 @@ exports[`<Chip /> should render with default styles 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   background-color: var(--pv-color-secondary);
   color: var(--pv-color-secondary-contrast);
 }
@@ -355,6 +357,7 @@ exports[`<Chip /> variants & colors variant "contained, color "default" 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   background-color: var(--pv-color-gray-4);
   color: var(--pv-color-black);
 }
@@ -415,6 +418,7 @@ exports[`<Chip /> variants & colors variant "contained, color "secondary" 1`] =
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   background-color: var(--pv-color-secondary);
   color: var(--pv-color-secondary-contrast);
 }
@@ -475,6 +479,7 @@ exports[`<Chip /> variants & colors variant "contained, color "wrong" 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   background-color: var(--pv-color-wrong);
   color: var(--pv-color-wrong-contrast);
 }
@@ -535,6 +540,7 @@ exports[`<Chip /> variants & colors variant "outlined, color "default" 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   border-color: var(--pv-color-gray-6);
   color: var(--pv-color-black);
 }
@@ -595,6 +601,7 @@ exports[`<Chip /> variants & colors variant "outlined, color "secondary" 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   border-color: var(--pv-color-secondary-tint-2);
   color: var(--pv-color-secondary);
 }
@@ -655,6 +662,7 @@ exports[`<Chip /> variants & colors variant "outlined, color "wrong" 1`] = `
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
+  gap: var(--pv-size-base);
   border-color: var(--pv-color-wrong-tint-2);
   color: var(--pv-color-wrong);
 }

diff --git a/packages/react-components/src/Chip/chip.tsx b/packages/react-components/src/Chip/chip.tsx
@@ -81,6 +81,7 @@ const ChipRoot = styled('div', {
   alignItems: 'center',
   whiteSpace: 'nowrap',
   textDecoration: 'none',
+  gap: 'var(--pv-size-base)',
   ...(props.disabled && {
     pointerEvents: 'none',
   }),
@@ -204,12 +205,10 @@ const ChipDeleteIcon = styled('span')({
 });
 
 const ChipStartContent = styled('span')({
-  marginRight: 'var(--pv-size-base)',
   display: 'inherit',
 });
 
 const ChipEndContent = styled('span')({
-  marginLeft: 'var(--pv-size-base)',
   display: 'inherit',
 });
 

diff --git a/packages/react-components/src/Select/select.tsx b/packages/react-components/src/Select/select.tsx
@@ -275,22 +275,17 @@ const SelectPopover = styled(Popover)({
 const SelectTagsList = styled('div')({
   overflow: 'hidden',
   width: '100%',
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(0, max-content))',
+  gap: 'var(--pv-size-base)',
 });
 
 const SelectTag = styled(Chip)<{
-  tagsLength: number,
-  limitTags: number,
   size: SelectOwnProps<any>['size'],
 }>((props) => ({
   label: 'Select-tag',
   borderRadius: '3px',
-  margin: '0 var(--pv-size-base) 0 0',
-  ...(props.tagsLength === 1 && {
-    maxWidth: 'calc(100% - var(--pv-size-base))',
-  }),
-  ...(props.tagsLength > 1 && props.limitTags && {
-    maxWidth: `calc(${100 / props.limitTags}% - var(--pv-size-base))`,
-  }),
+  margin: 0,
   ...(props.size === 'small' && {
     height: 'var(--pv-size-base-5)',
   }),
@@ -425,8 +420,6 @@ Multiple extends boolean | undefined = false,
                 color="secondary"
                 variant="contained"
                 size={size}
-                limitTags={limitTags}
-                tagsLength={value.length}
               >
                 {getOptionLabel(v)}
               </SelectTag>