Skip to content

Commit 2f00a25

Browse files
romario-adoberomario-adobe
committed
css fixes
1 parent 6996f04 commit 2f00a25

File tree

13 files changed

+29208
-446
lines changed

13 files changed

+29208
-446
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,5 @@ dist
129129
.yarn/build-state.yml
130130
.yarn/install-state.gz
131131
.pnp.*
132+
133+
storybook-static

‎.storybook/main.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,24 @@ import type { StorybookConfig } from "@storybook/react-vite";
22

33
const config: StorybookConfig = {
44
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5+
56
addons: [
67
"@storybook/addon-links",
78
"@storybook/addon-essentials",
89
"@storybook/addon-onboarding",
910
"@storybook/addon-interactions",
11+
"@chromatic-com/storybook"
1012
],
13+
1114
framework: {
1215
name: "@storybook/react-vite",
1316
options: {},
1417
},
15-
docs: {
16-
autodocs: "tag",
17-
},
18+
19+
docs: {},
20+
21+
typescript: {
22+
reactDocgen: "react-docgen-typescript"
23+
}
1824
};
1925
export default config;

‎README.md‎

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ function BasicMovieSelection() {
5656
<div>
5757
<h1>Basic Movie Selection</h1>
5858
<ReactInputTags
59-
tags={selectedTags}
60-
onChange={handleTagsChange}
59+
tags={selectedMovies}
60+
onChange={handleMoviesChange}
6161
options={movieOptions}
6262
/>
6363
</div>
@@ -149,8 +149,75 @@ A boolean flag that determines whether users can create new tags. When set to tr
149149

150150
### style
151151
An object defining custom CSS classes for various components of the tag selector, including mainContainer, tag, input, optionContainer, option, and selectedOption.
152+
```css
153+
/* styles.css */
154+
155+
.custom-main-container {
156+
display: flex;
157+
flex-wrap: wrap;
158+
align-items: center;
159+
padding: 8px;
160+
border: 1px solid #ccc;
161+
border-radius: 4px;
162+
}
163+
164+
.custom-tag {
165+
background-color: #007bff;
166+
color: white;
167+
padding: 4px 8px;
168+
margin: 4px;
169+
border-radius: 16px;
170+
display: flex;
171+
align-items: center;
172+
}
173+
174+
.custom-tag button {
175+
background: none;
176+
border: none;
177+
color: white;
178+
margin-left: 8px;
179+
cursor: pointer;
180+
font-size: 16px;
181+
}
182+
183+
.custom-input {
184+
flex: 1;
185+
min-width: 120px;
186+
border: none;
187+
outline: none;
188+
padding: 4px;
189+
margin: 4px;
190+
font-size: 16px;
191+
}
192+
193+
.custom-option-container {
194+
position: absolute;
195+
background-color: white;
196+
border: 1px solid #ccc;
197+
max-height: 150px;
198+
overflow-y: auto;
199+
width: 300px; /* Adjust as needed */
200+
margin-top: 4px;
201+
z-index: 1000;
202+
}
203+
204+
.custom-option {
205+
padding: 8px;
206+
cursor: pointer;
207+
}
208+
209+
.custom-option:hover {
210+
background-color: #f0f0f0;
211+
}
212+
213+
.custom-selected-option {
214+
background-color: #e9ecef;
215+
}
216+
```
152217

153218
```typescript
219+
import './styles.css';
220+
154221
interface StyleInterface {
155222
mainContainer?: string;
156223
tag?: string;

‎example/index.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
font-family: 'Inter', sans-serif;
88
}
99

10-
.main-container{
11-
height: 200px;
10+
.main-container-1{
11+
height: 100px;
1212
/* border: 1px solid red; */
1313
}
1414

15-
.tag {
16-
/* background-color: red; */
17-
font-size: 15px;
15+
.tag-1 {
16+
background-color: #38393c;
17+
font-size: 12px;
1818
}
1919

20-
.input {
20+
.input-1 {
2121
/* background-color: black;
2222
color: white; */
23-
font-size: 15px;
23+
font-size: 12px;
2424
}

‎example/index.tsx‎

Lines changed: 72 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,78 @@
1-
import React, { useState } from "react"
2-
import ReactInputTags from '../src'
3-
import { TagInterface } from "../src/ReactInputTags"
4-
import './index.css'
1+
import React, { useState } from "react";
2+
import ReactInputTags from "../src";
3+
import { TagInterface } from "../src/ReactInputTags";
4+
import "./index.css";
55

6-
function addReadOnlyToTags(tag: TagInterface): Boolean{
7-
if (typeof tag.value === "string" && tag.value.startsWith("t")) {
8-
return true;
9-
}
10-
return false;
6+
function addReadOnlyToTags(tag: TagInterface): Boolean {
7+
if (typeof tag.value === "string" && tag.value.startsWith("t")) {
8+
return true;
9+
}
10+
return false;
1111
}
1212

1313
export default function () {
14-
15-
const [tags, setTags] = useState<TagInterface[]>([])
16-
const onChange = (newTags: TagInterface[], newTag?: TagInterface) => {
17-
console.log(newTags)
18-
if(newTag){
19-
const isTrue = addReadOnlyToTags(newTag);
20-
if(isTrue){
21-
const tagIndex = newTags.findIndex((tag_) => tag_.value === newTag.value)
22-
newTags[tagIndex].readOnly = true;
23-
}
24-
}
25-
setTags(newTags)
14+
const [tags, setTags] = useState<TagInterface[]>([
15+
{ label: "Happy", value: "happy" },
16+
// { label: "Sad", value: "sad" },
17+
{ label: "Excited", value: "excited" },
18+
{ label: "Angry", value: "angry" },
19+
// { label: "Surprised", value: "surprised" },
20+
{ label: "Content", value: "content" },
21+
{ label: "Inspired", value: "inspired" },
22+
// { label: "Nervous", value: "nervous" },
23+
{ label: "Relaxed", value: "relaxed" },
24+
]);
25+
const onChange = (newTags: TagInterface[], newTag?: TagInterface) => {
26+
console.log(newTags);
27+
if (newTag) {
28+
const isTrue = addReadOnlyToTags(newTag);
29+
if (isTrue) {
30+
const tagIndex = newTags.findIndex((tag_) => tag_.value === newTag.value);
31+
newTags[tagIndex].readOnly = true;
32+
}
2633
}
27-
28-
const options = [
29-
{
30-
label: "Happy",
31-
value: "happy"
32-
},
33-
{
34-
label: "Sad",
35-
value: "sad"
36-
},
37-
{
38-
label: "Negative",
39-
value: "negative"
40-
},
41-
{
42-
label: "Happy",
43-
value: "happy"
44-
},
45-
{
46-
label: "Sad",
47-
value: "sad"
48-
},
49-
{
50-
label: "Negative",
51-
value: "negative"
52-
},
53-
{
54-
label: "Happy",
55-
value: "happy"
56-
},
57-
{
58-
label: "Sad",
59-
value: "sad"
60-
},
61-
{
62-
label: "Negative",
63-
value: "negative"
64-
},
65-
{
66-
label: "Happy",
67-
value: "happy"
68-
},
69-
{
70-
label: "Sad",
71-
value: "sad"
72-
},
73-
{
74-
label: "Negative",
75-
value: "negative"
76-
},
77-
{
78-
label: "Happy",
79-
value: "happy"
80-
},
81-
{
82-
label: "Sad",
83-
value: "sad"
84-
},
85-
{
86-
label: "Negative",
87-
value: "negative"
88-
},
89-
]
34+
setTags(newTags);
35+
};
9036

91-
return (
92-
<div className="example-container">
93-
<ReactInputTags
94-
tags={tags}
95-
onChange={onChange}
96-
options={options}
97-
creatable={true}
98-
style={{
99-
mainContainer: 'main-container',
100-
tag: 'tag',
101-
input: 'input',
102-
optionContainer: 'option-container',
103-
option: 'option',
104-
selectedOption: 'selected-option'
105-
}} />
106-
</div>
107-
)
108-
}
37+
const options = [
38+
{ label: "Happy", value: "happy" },
39+
{ label: "Sad", value: "sad" },
40+
{ label: "Excited", value: "excited" },
41+
{ label: "Angry", value: "angry" },
42+
{ label: "Surprised", value: "surprised" },
43+
{ label: "Bored", value: "bored" },
44+
{ label: "Confused", value: "confused" },
45+
{ label: "Anxious", value: "anxious" },
46+
{ label: "Content", value: "content" },
47+
{ label: "Curious", value: "curious" },
48+
{ label: "Frustrated", value: "frustrated" },
49+
{ label: "Hopeful", value: "hopeful" },
50+
{ label: "Inspired", value: "inspired" },
51+
{ label: "Nervous", value: "nervous" },
52+
{ label: "Relaxed", value: "relaxed" },
53+
{ label: "Lonely", value: "lonely" },
54+
{ label: "Jealous", value: "jealous" },
55+
{ label: "Proud", value: "proud" },
56+
{ label: "Shy", value: "shy" },
57+
{ label: "Grateful", value: "grateful" },
58+
];
59+
60+
return (
61+
<div className="example-container">
62+
<ReactInputTags
63+
tags={tags}
64+
onChange={onChange}
65+
options={options}
66+
creatable={true}
67+
style={{
68+
mainContainer: "main-container-1",
69+
tag: "tag-1",
70+
input: "input-1",
71+
optionContainer: "option-container",
72+
option: "option",
73+
selectedOption: "selected-option",
74+
}}
75+
/>
76+
</div>
77+
);
78+
}

0 commit comments

Comments
 (0)