Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NDS-1017] feat: TabStepper #837

Merged
merged 12 commits into from
Dec 18, 2024
Merged

[NDS-1017] feat: TabStepper #837

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
05f357d
feat(tabs): change tabId to id
kostasdano Oct 17, 2024
be52a1a
feat(tabstepper): implementation
kostasdano Oct 17, 2024
fb82893
feat: types
kostasdano Oct 17, 2024
ad3a9a3
feat(tabstepper): styles
kostasdano Oct 17, 2024
2c68abb
feat(tabstepper): documentation
kostasdano Oct 17, 2024
14ded55
feat: snaps
kostasdano Oct 17, 2024
b250db9
Merge branch 'feat/NDS-87_tabs_v5' into feat/NDS-1017_tabstepper
kostasdano Dec 16, 2024
414f1eb
feat: update tokens
kostasdano Dec 16, 2024
761adbb
feat: pr comments
kostasdano Dec 16, 2024
fd174f5
Merge branch 'feat/NDS-87_tabs_v5' into feat/NDS-1017_tabstepper
kostasdano Dec 18, 2024
10ea460
feat: change focus paddings
kostasdano Dec 18, 2024
c0d4dbe
Merge branch 'master' into feat/NDS-1017_tabstepper
kostasdano Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
540 changes: 540 additions & 0 deletions src/__storyshots__/Updated Components/Tabs/TabStepper-Playground.snap
View file
Open in desktop

Large diffs are not rendered by default.

254 changes: 254 additions & 0 deletions src/__storyshots__/Updated Components/Tabs/TabStepper-SimpleTabStepper.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}

.emotion-1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.emotion-1 [role='tab'] {
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}

.emotion-1 [role='tab']:not([data-selected]):hover {
background: #F2F4FF;
-webkit-transition: background ease-in-out 0.2s;
transition: background ease-in-out 0.2s;
}

.emotion-1 [role='tab'][data-focus-visible]:after {
content: '';
position: absolute;
border-radius: 0.25rem;
border: 0.25rem solid #A566FF;
}

.emotion-1 [role='tab'][data-status='warning'] [data-role='title'] {
color: #FF4D8D;
}

.emotion-1 [role='tab'][data-selected]:not([data-status='warning']) [data-role='title'] {
color: #194DCC;
}

.emotion-1[data-orientation='horizontal'] {
gap: 1.25rem;
border-bottom: 0.125rem solid rgba(200,206,255,0.70);
}

.emotion-1[data-orientation='horizontal'] [role='tab'] {
padding: 0.25rem;
}

.emotion-1[data-orientation='horizontal'] [role='tab']:after {
inset: -8px -12px;
}

.emotion-1[data-orientation='horizontal'] [role='tab'][data-selected] {
border-bottom: 0.125rem solid #175BF5;
margin-bottom: -0.125rem;
}

.emotion-1[data-orientation='horizontal'] [role='tab'][data-selected][data-status='warning'] {
border-color: #FF4D8D;
}

.emotion-1[data-orientation='vertical'] {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 1rem;
border-left: 0.125rem solid rgba(200,206,255,0.70);
}

.emotion-1[data-orientation='vertical'] [role='tab'][data-focus-visible]:after {
inset: -4px -2px;
}

.emotion-1[data-orientation='vertical'] [role='tab'] {
padding: 0.5rem 0.75rem;
}

.emotion-1[data-orientation='vertical'] [role='tab'][data-selected] {
border-left: 0.125rem solid #175BF5;
margin-left: -0.125rem;
}

.emotion-1[data-orientation='vertical'] [role='tab'][data-selected][data-status='warning'] {
border-color: #FF4D8D;
}

.emotion-2 {
cursor: pointer;
}

.emotion-3 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.25rem;
padding: 0.25rem;
}

.emotion-4 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
font-family: Roboto;
font-weight: 700;
line-height: 1.25rem;
font-size: 0.875rem;
letter-spacing: 0.015625rem;
}

.emotion-5 {
font-family: Roboto;
font-weight: 400;
line-height: 1rem;
font-size: 0.75rem;
letter-spacing: 0.015625rem;
color: #52567a;
}

<div>
<div
class="emotion-0"
data-orientation="horizontal"
data-rac=""
>
<div
aria-orientation="horizontal"
class="emotion-1"
data-orientation="horizontal"
data-rac=""
id="react-aria-:test-id:"
role="tablist"
>
<div
aria-controls="react-aria-:test-id:-tabpanel-step_1"
aria-selected="true"
class="emotion-2"
data-key="step_1"
data-rac=""
data-selected="true"
data-status="pending"
id="react-aria-:test-id:-tab-step_1"
role="tab"
tabindex="0"
>
<div
class="emotion-3"
>
<div
class="emotion-4"
data-role="title"
data-testid="ictinus_tabstep_step_1_title"
>
Step 1
</div>
<div
class="emotion-5"
data-role="subtitle"
data-testid="ictinus_tabstep_step_1_subtitle"
>
This is subtitle for step 1
</div>
</div>
</div>
<div
aria-selected="false"
class="emotion-2"
data-key="step_2"
data-rac=""
data-status="pending"
id="react-aria-:test-id:-tab-step_2"
role="tab"
tabindex="-1"
>
<div
class="emotion-3"
>
<div
class="emotion-4"
data-role="title"
data-testid="ictinus_tabstep_step_2_title"
>
Step 2
</div>
<div
class="emotion-5"
data-role="subtitle"
data-testid="ictinus_tabstep_step_2_subtitle"
>
This is subtitle for step 2
</div>
</div>
</div>
<div
aria-selected="false"
class="emotion-2"
data-key="step_3"
data-rac=""
data-status="pending"
id="react-aria-:test-id:-tab-step_3"
role="tab"
tabindex="-1"
>
<div
class="emotion-3"
>
<div
class="emotion-4"
data-role="title"
data-testid="ictinus_tabstep_step_3_title"
>
Step 3
</div>
<div
class="emotion-5"
data-role="subtitle"
data-testid="ictinus_tabstep_step_3_subtitle"
>
This is subtitle for step 3
</div>
</div>
</div>
</div>
</div>
</div>
Loading
Loading