c731dd308c
* 🎨 style: adjust z index of the date picker popover * 🎨 style: add new spacing and rename box shadow from calendar to dropdown * 🐛 fix: console error becasue button inside button * ♻️ refactor: rename shadow calendar to shador dropdown on calendar component * 🚀 perf: remove vscode settings inside `packages/frontend` * ⚡️ feat: create check radio icon and chevron down icon component * 🔧 chore: install `downshift` * ⚡️ feat: create select component * 🎨 style: adjust the popover position based on the user screen * ⚡️ feat: separate select item to be a component * ⚡️ feat: separate select value to be a component * ♻️ refactor: adjust style and refactor to a new component * ⚡️ feat: create a type for merge two interface but keep the last value * 🐛 fix: forward ref the component to fix console error * ⚡️ feat: add `hideValues` prop to hide the values when on multiple * 🐛 fix: no result not showing * ⚡️ feat: make the select to be controller component * ♻️ refactor: remove console log * ♻️ refactor: update pr review |
||
|---|---|---|
| .. | ||
| CalendarIcon.tsx | ||
| CheckIcon.tsx | ||
| CheckRadioIcon.tsx | ||
| CheckRoundFilledIcon.tsx | ||
| ChevronDownIcon.tsx | ||
| ChevronGrabberHorizontal.tsx | ||
| ChevronLeft.tsx | ||
| ChevronRight.tsx | ||
| CrossIcon.tsx | ||
| CustomIcon.tsx | ||
| EllipseIcon.tsx | ||
| EllipsesIcon.tsx | ||
| FolderIcon.tsx | ||
| GitIcon.tsx | ||
| GlobeIcon.tsx | ||
| index.ts | ||
| InfoRoundFilledIcon.tsx | ||
| InfoSquareIcon.tsx | ||
| LifeBuoyIcon.tsx | ||
| LoadingIcon.tsx | ||
| NotificationBellIcon.tsx | ||
| PencilIcon.tsx | ||
| PlusIcon.tsx | ||
| QuestionMarkRoundIcon.tsx | ||
| README.md | ||
| SearchIcon.tsx | ||
| SettingsSlidersIcon.tsx | ||
| SnowballIcon.tsx | ||
| WarningIcon.tsx | ||
1. What icons are compatible with this component?
- Viewbox "0 0 24 24": From where you're exporting from, please make sure the icon is using viewBox="0 0 24 24" before downloading/exporting. Not doing so will result in incorrect icon scaling
2. How to add a new icon?
2.1 Sanitising the icon
- Duplicate a current icon e.g. CrossIcon and rename it accordingly.
- Rename the function inside the new file you duplicated too
- Replace the markup with your SVG markup (make sure it complies with the above section's rule)
- Depending on the svg you pasted...
A. If the
<svg>has only 1 child, remove the<svg>parent entirely so you only have the path left B. If your component has more than 1 paths, rename<svg>tag with the<g>tag. Then, remove all attributes of this<g>tag so that it's just<g> - Usually, icons are single colored. If that's the case, replace all fill/stroke color with
currentColor. E.g.. Leave the other attributes without removing them. - If your icon has more than one colour, then it's up to you to decide whether we want to use tailwind to help set the fill and stroke colors
- Lastly, export your icon in
index.tsby following what was done for CrossIcon - Make sure to provide a name to the
<CustomIcon>component for accessibility sake - Done!
2.3 Use your newly imported icon
- You can change simply use
<BellIcon size="32" />to quickly change both width and height with the same value (square). For custom viewBox, width and height, simply provide all three props. - Coloring the icon: Simply add a className with text color. E.g.
<BellIcon className="text-gray-500" />