Update-Tabsbar Component

[HassanRaja533]

#9

@todo

• Do update in Tabsbar component
  • @input 📦 Github repo
  • Add STATE.js file in the project.
  • Update styles to add hover effect over buttons within Tabsbar.
  • @output 📦 Tabsbar Component from comment

---

• Do update in Tabs component
  • @input 📦 Figma
  • Ensured the component is fully responsive with flexible tab widths.
  • Styled the scrollbar to match the Figma design (thin white line).
  • Adjusted fonts to match visual reference (bold, overflow-safe).
  • @output 📦 Tabs Component from comment

---

• Do update in Tabs component
  • @input 📦 Figma
  • @input 📦 Comment
  • Updated icon spacing to prevent crowding near the edge.
  • Matched overall style of tabs, hat, and bar button to the Figma design.
  • Added hover effects to tabs and bar buttons for improved interactivity.
  • Implemented logic to highlight border, name, and ID when tab button is clicked.
  • Added logic to highlight border and icon when tab icon is clicked.
  • Ensured responsiveness of the component across all screen sizes.
  • Implemented a clean white scrollbar that appears on hover.
  • @output 📦 Tabs Component from comment

---

• Do update in Tabs component
  • @input 📦 Figma
  • @input 📦 Comment
  • Updated icon spacing to prevent crowding near the edge.
  • Matched overall style of tabs, hat, and bar button to the Figma design.
  • Added hover effects to tabs and bar buttons for improved interactivity.
  • Implemented logic to highlight border, name, and ID when tab button is clicked.
  • Added logic to highlight border and icon when tab icon is clicked.
  • Ensured responsiveness of the component across all screen sizes.
  • Implemented a clean white scrollbar that appears on hover.
  • @output 📦 Tabs Component from comment

---

• Do update in UI components
  • @input 📦 Figma
  • @input 📦 Feedback Comment
  • Merge repo with latest changes
  • Replace anonymous functions with named handlers (delete, iconClick, createButtonClick) – 10m
  • Add borders to styles for tabs bar, hat icon, and action bar to match the Figma design – 10m
  • Ensure responsiveness is not affected
  • @output 📦 UI Component from comment

---

• Do update in UI component
  • @input 📦 Figma
  • @input 📦 Previous Worklog Feedback Comment
  • Rename function names to follow coding standards
  • Update onclick buttons (delete, iconClick, createButtonClick) functionality for tabs handlers
  • Implement fade-in/out on tabs button during screen resize
  • Ensure responsiveness is not affected
  • @output 📦 UI Component from comment

[HassanRaja533]

Tasks

• Update Tabsbar component
  • done add STATE.js file to the project – 5m
  • done update styles to add hover effect over buttons in Tabsbar to do minor update – 5m
  • create issue and worklog
    • @output 📦 Tabsbar Component

---

Feedback

• Started updating the Tabsbar component: first added STATE.js, then applied style updates by adding hover effects over the buttons.

---

Proposal

• Include documentation specifying the purpose and intended use of the Tabsbar component. This will help ensure better implementation and future updates.

[serapath]

feedback 2025.07.12

Can you activate your github page and update the link in your fork so i can click it and see for myself any issues?

• https://hassanraja533.github.io/ui-components/

That link should work and show your verison of the ui-components

[HassanRaja533]

Tasks

• Update Tabs component
  • Refactor style to ensure responsive button layout – 15m
  • Align icon, text, and close button consistently – 15m
  • Apply updated font style, weight, and overflow handling – 5m
  • Improve scrollbar styling for modern UI feel -10m
  • create worklog 5m
    • @output 📦 Tabs Component

---

Feedback

• Applied major CSS improvements including responsive tab widths, Figma-matched thin white scrollbar, and bold, overflow-safe font styling.

[HassanRaja533]

Tasks

• Update Tabs component
  • @input 📦 Comment
  • Improved scrollbar design for tabs – 15m
  • create worklog 5m
    • @output 📦 Tabs Component
    • @output 📦 Github Page

---

Feedback

• Improved tab styling with a responsive layout that adapts to screen size, and a sleek white scrollbar that appears on hover, matching the Figma design.

[HassanRaja533]

Tasks

• Update Tabs component
  • @input 📦 Comment
  • Update icon style – 5m
  • Adjust the icon style so it doesn’t appear too compact or too close to the edge – 5m
  • Update the overall style of the tabs, hat, and bar button to match the Figma design – 20m
  • Add hover effects to tabs and the bar button – 5m
  • Add logic so that clicking on a tab’s button highlights its border, name, and ID – 15m
  • Add logic so that clicking on a tab’s icon highlights its border and the icon – 10m
  • Ensure the component is fully responsive – 15m
  • Create a worklog – 5m
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 GitHub Page

---

Worklog

• Worklog 4

---

Feedback

• Updated the Tabs component to match the Figma design by improving overall styling, spacing, and responsiveness; added hover effects, click-based highlighting for tab buttons and icons, and implemented a sleek white scrollbar that appears on hover.

[HassanRaja533]

Tasks

• Update Tabs component
  • @input 📦 Comment
  • Update icon style – 5m
  • Adjust the icon style so it doesn’t appear too compact or too close to the edge – 5m
  • Update the overall style of the tabs, hat, and bar button to match the Figma design – 20m
  • Add hover effects to tabs and the bar button – 5m
  • Add logic so that clicking on a tab’s button highlights its border, name, and ID – 15m
  • Add logic so that clicking on a tab’s icon highlights its border and the icon – 10m
  • Ensure the component is fully responsive – 15m
  • Create a worklog – 5m
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 GitHub Page

---

Worklog

• Worklog 5

---

Feedback

-Updated the Tabs component to match the Figma design by improving overall styling, spacing, and responsiveness. Added hover effects, click-based highlighting for tab buttons and icons, implemented a sleek white scrollbar that appears on hover, and incorporated feedback.

[serapath]

feedback 2025.07.31

• First of all, your code includes ; again and does not comply with standardx formatting.
• Second, all event listener, e.g. element.onclick = onclick should always be a function name and then later you define function onclick (event) { ... } to say what it does. dont use anonymous functions.

Then the top border here over the hat icon is double while the top border over the tabs is single and the top border over the actionbar does not exist. Basically, we have fallbacks and overrides to fix things and define styling of sub component instances to make the theme compatible across all components. I guess for every component, e.g.

• tabsbar should only have a grey vertical separator line, but not top or bottom or left border
• theme-widget needs also the top border, but as said across actionbar, hat icon, tabs, etc...

Just check wireframes and make it look the same.

Please as said, use your future worklog to make a plan and use wireframes and/or screenshots (like i do here in my feedback commend) as @input to the various tasks to plan how you responsively fix all components until they look like the wireframes etc... and add them as "proposal" in your next worklog.

[HassanRaja533]

Tasks

• Update UI component
  • @input 📦 Feedback Comment
  • Merge repo with latest changes – 5m
  • Replace anonymous functions with named handlers (delete, iconClick, createButtonClick) – 10m
  • Add borders to styles for tabs bar, hat icon, and action bar to match the Figma design – 10m
  • Ensure responsiveness is not affected - 5m
  • Create a worklog – 5m
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 GitHub Page

---

Worklog

• Worklog 6

---

Feedback

• Replace anonymous functions with handlers, merge latest, update Tabs styling, and adjust borders to match Figma to incorporate PR feedback

[HassanRaja533]

Tasks

• Update UI component
  • @input 📦 Previous Worklog Comment Feedback
  • Renamed function names to follow coding standards – 5m
  • Updated onclick button functionality for tabs - 15m
  • Implemented fade-in/out on tabs button during screen resize - 15m
  • Ensure responsiveness is not affected - 5m
  • Create a worklog – 5m
    • @output 📦 Tabs Component
    • @output 📦 Tabs Component
    • @output 📦 GitHub Page

---

Worklog

• Worklog 7

---

Feedback

• Replaced anonymous functions with handlers to improve readability and maintainability, and updated Tabs styling and borders to align with Figma designs and latest PR feedback.

[serapath]

feedback 2025.08.19

Okay, so better, but still. When a browser event handler fires, such as the handler function you assign to .onclick = ..., then you receive a "click event" as an argument to that handler function call.

You have:

function on_icon_click(id) {
    current_id = id
    // ...

But it should be:

function on_icon_click (event) {
    // ...

You don't need "current_id" variable. It is never used for anything.

Same with:

function on_close_click(event,id) {
  // ...

should be

function on_close_click (event) {
  // ...

But what is worse - when you should just fix the naming:

// Attach named event listeners (feedback ✅)
icon_el.onclick = onIconClick
name_el.onclick = onNameClick
close_btn.onclick = onCloseClick

to

icon_el.onclick = on_icon_click
name_el.onclick = on_name_click
close_btn.onclick = on_close_click

you turned it into anonymous inline functions again

icon_el.onclick = () => on_icon_click(id)
name_el.onclick = () => on_name_click(id)
close_btn.onclick = (e) => on_close_click(e, id)

the previous version was okay, just the naming was wrong.

Are you using LLMs for this work? Why are you doing this?

Please try to focus more on improving things according to the coding conventions we do.
You are getting better, but the more work and focus you put in, the faster you will improve :-)