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

fix: AccordionItemHeader to take full width #2357

Merged
merged 7 commits into from
Sep 19, 2024
Merged

fix: AccordionItemHeader to take full width #2357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bd4702d
fix: accordion wrapper
Akshay090 Sep 10, 2024
4601169
Create spotty-glasses-talk.md
Akshay090 Sep 13, 2024
78e8590
chore: update snapshot
Akshay090 Sep 19, 2024
3edf7ef
add back react native snapshot
Akshay090 Sep 19, 2024
b7d38b9
add back react native snapshot
Akshay090 Sep 19, 2024
bd2b990
add back react native snapshot
Akshay090 Sep 19, 2024
cf3e3d0
fix: native snapshots
saurabhdaware Sep 19, 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
5 changes: 5 additions & 0 deletions .changeset/spotty-glasses-talk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@razorpay/blade": patch
---

fix: AccordionItemHeader to take full width
45 changes: 36 additions & 9 deletions ...ges/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,9 +399,12 @@ exports[`<Accordion /> should render 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -953,9 +956,12 @@ exports[`<Accordion /> should render 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -1507,9 +1513,12 @@ exports[`<Accordion /> should render 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -2110,9 +2119,12 @@ exports[`Deprecated <Accordion /> should render 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -2664,9 +2676,12 @@ exports[`Deprecated <Accordion /> should render 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -3218,9 +3233,12 @@ exports[`Deprecated <Accordion /> should render 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -3820,9 +3838,12 @@ exports[`Deprecated <Accordion /> should render deprecated API 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -4374,9 +4395,12 @@ exports[`Deprecated <Accordion /> should render deprecated API 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down Expand Up @@ -4928,9 +4952,12 @@ exports[`Deprecated <Accordion /> should render deprecated API 1`] = `
data-blade-component="box"
style={
[
{},
{
"width": "100%",
},
]
}
width="100%"
/>
</View>
</View>
Expand Down
6 changes: 3 additions & 3 deletions packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button type="button" aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup Route?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button type="button" aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup QR Codes?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;
exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button type="button" aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup Route?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx mhVFF"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button type="button" aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 ekfgOX"><div data-blade-component="accordion-item-header" class="BaseBox-bmPWx dozxZd"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx cqLAOk"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO ibEuPD" data-blade-component="text">How can I setup QR Codes?</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gJhLSN"><div data-blade-component="box" class="BaseBox-bmPWx mhVFF"></div></div></div></div></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx mhVFF"><div data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="accordion-item-body" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;

exports[`<Accordion /> should render Accordion on server 2`] = `
.c0.c0.c0.c0.c0 {
Expand Down Expand Up @@ -442,7 +442,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down Expand Up @@ -590,7 +590,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down
12 changes: 6 additions & 6 deletions packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ exports[`<Accordion /> should render 1`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down Expand Up @@ -586,7 +586,7 @@ exports[`<Accordion /> should render 1`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down Expand Up @@ -734,7 +734,7 @@ exports[`<Accordion /> should render 1`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down Expand Up @@ -1228,7 +1228,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down Expand Up @@ -1376,7 +1376,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down Expand Up @@ -1524,7 +1524,7 @@ exports[`Deprecated <Accordion /> should render 1`] = `
data-blade-component="base-box"
>
<div
class=""
class="c2"
data-blade-component="box"
/>
</div>
Expand Down
Loading
Loading