Design - tabContainer

[Mehrabbruno]

@todo

111

• [x] Design - tabsContiainer_v0.0.1
  • @input 📦 tab_v0.0.1 from #112
  • @input 📦 collapsedTabsPopover_v0.0.1 from #121
  • [x] Collapsed tabs counter CTA
  • [x] Action List CTA
  • [x] Add tabs CTA
  • [x] Record an explanatory video for Tab Container Component and add it in the header description
  • @output 📦 tabContainer_v0.0.1 from comment
    • next #111

[Mehrabbruno]

Task

• done Design - tabsContiainer_v0.0.1 - 1min
  • done Collapsed tabs counter CTA - 1min
  • done Action List CTA - 1min
  • done Add tabs CTA - 1min
  • done Record an explanatory video for Tab Container Component and add it in the header description - 1min
  • @output 📦 tabContainer_v0.0.1

---

Worklog

Worklog 1 2022.10.21

---

Feedback

---

Proposals

[serapath]

feedback 2022.10.14

1. all worklog comments above are missing the link to the youtube screencast worklog video.
2. also the last one misses the done label in front of the sub task
3. all of them are missing the time spent per task behind the task
4. some worklogs are meant to "propose" new tasks (e.g. "Set the border radius...") to be worked on in future worklogs after they got approved in a feedback comment :-)

---

i noticed one thing that we might need to improve, so if you are now learning and going through the codecamp lessons, that is great

but let me show you on one example

david for example is currently working on the design of a website, but once he finishes i would let him go through your TWM issue and your videos to learn how we use figma and then adopt that style too, so we should really make things "perfect" for others to learn from that example

So, one rule that is not well presented in that screenshot (but it's similar to other issues), is that every @input should be a sub bullet point to exactly the * [ ] example task do XYZ that actually needs it as an input. In the example above this means something like:

* [x] design tabsContainer
  * [x] #112 (= design tab)
  * [x] import and integrate designed tab
    * `@input` :package: [`tab_v0.0.1`](#link_to_figma) from #112
  * [x] #121 (=design collapsedTabsPopover)
  * [x] add collapsed tab counter CTA for collapsedTabsPopover
    * `@input` :package: [`collapsedTabsPopover_v0.0.1`](#link_to_figma) from #121
  * [x] add action list CTA
  * [x] add tabs CTA
  * [x] submit worklog
  * `@output` :package: [`tabContainer_v0.0.1`](#link_to_figma) from [`comment`](#link_to_comment)
    * next #111

so, the record explanatory video i assume is the worklog and generally all the project management overhead. This is the part that you can add as a textual todo in terms of submit worklog (see above) to capture the time it takes to record the video, post the comment, update your timelog hackmd, etc.. But it is a generic activity for every task, so that is why this should not create an output. The screencast worklogs are the only type of output that only exist in worklog comments and get linked, because it is part of our general project management process and not part of the project TWM itself, but i agree a generic submit worklog todo that you can log time on should be included every time you do a worklog. that makes sense, so it can even appear multiple times to capture the effort.

the main different to the way you did it above is, that

1. you have issue #121 and issue #112 linked as todos to actually craete the tab_v0.0.1 and collpsedTabsPopuver_v0.0.1, because they are needed so they need to be made first.
2. then once that is done, and the output figmas for each of them exists as a file, we need to add todos to actuall integrate them into the desgin for the tabsContainer, which is
   • [ ] import and integrate design tab
   • [ ] add collapsed tab counter CTA

and then in the end you just have the output of the "design - tabContainer" task issue itself

every single issue should be structured like that instead of the way you did it.

result: => so less indentation => inputs are directly associated with the specific one or more sub issues where they are actually needed

...but it is minor changes, you already did it mostly correct :slight_smile:

so could you adapt that?

[serapath]

feedback 2022.10.22

Here you mentioned clicking on the numbers (2) will show the remaining tabs popover so you can select one and i like it and the same goes for left and right side and those numbers only show up if the user opens many tabs.

But I think the hamburger menu was earlier described as having that function. Do you think we can remove the hamburger menu, because indeed, the user can just click the numbers? That would be cool - one less menu or button to worry about :-)

[Mehrabbruno]

Feedback 2022.10.24

But I think the hamburger menu was earlier described as having that function

The hamburger menu was intended for actions like split-screens. The counter for to toggle collapsedTabsPopover and hamburger menu to toggle actionTabsPopover

[serapath]

feedback 2022.10.26

But I think the hamburger menu was earlier described as having that function

The hamburger menu was intended for actions like split-screens. The counter for to toggle collapsedTabsPopover and hamburger menu to toggle actionTabsPopover

Do you have an example to show the hamburger menu in action and how it works and looks? I don't recall that from any figma component that show cases it. Can you share the link? if we don't have it yet we should make another iteration on a component to show how that would work.