Skip to content

Commit 693a5bd

Browse files
reidbarberreidbarber
authored
fix disclosure chevron appearance when title wraps (#8222)
1 parent c1fd8af commit 693a5bd

File tree

5 files changed

+71
-0
lines changed

5 files changed

+71
-0
lines changed

‎packages/@adobe/spectrum-css-temp/components/accordion/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ governing permissions and limitations under the License.
3333

3434
.spectrum-Accordion-itemIndicator {
3535
display: block;
36+
flex-shrink: 0;
3637

3738
padding-inline-start: var(--spectrum-accordion-icon-gap);
3839
padding-inline-end: var(--spectrum-accordion-icon-gap);

‎packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,26 @@ export const Quiet = {
9999
render: Template,
100100
args: {isQuiet: true}
101101
};
102+
103+
export const WithWrappingTitle = {
104+
render: (args) => (
105+
<Accordion maxWidth="size-3000" {...args}>
106+
<Disclosure id="files">
107+
<DisclosureTitle>
108+
Long long long long long long long long long long long long long long long long wrapping title
109+
</DisclosureTitle>
110+
<DisclosurePanel>
111+
Files content
112+
</DisclosurePanel>
113+
</Disclosure>
114+
<Disclosure id="people">
115+
<DisclosureTitle>
116+
People
117+
</DisclosureTitle>
118+
<DisclosurePanel>
119+
People content
120+
</DisclosurePanel>
121+
</Disclosure>
122+
</Accordion>
123+
)
124+
};

‎packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,14 @@ export const Quiet = {
4646
render: Template,
4747
args: {isQuiet: true}
4848
};
49+
50+
export const WrappingTitle = (args) => (
51+
<Disclosure maxWidth="size-3000" {...args}>
52+
<DisclosureTitle>
53+
Long long long long long long long long long long long long long long long long wrapping title
54+
</DisclosureTitle>
55+
<DisclosurePanel>
56+
Files content
57+
</DisclosurePanel>
58+
</Disclosure>
59+
);

‎packages/@react-spectrum/accordion/stories/Accordion.stories.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,26 @@ export const WithDisabledDisclosure: AccordionStory = {
8888
</Accordion>
8989
)
9090
};
91+
92+
export const WithWrappingTitle: AccordionStory = {
93+
render: (args) => (
94+
<Accordion maxWidth="size-3000" {...args}>
95+
<Disclosure id="files">
96+
<DisclosureTitle>
97+
Long long long long long long long long long long long long long long long long wrapping title
98+
</DisclosureTitle>
99+
<DisclosurePanel>
100+
Files content
101+
</DisclosurePanel>
102+
</Disclosure>
103+
<Disclosure id="people">
104+
<DisclosureTitle>
105+
People
106+
</DisclosureTitle>
107+
<DisclosurePanel>
108+
People content
109+
</DisclosurePanel>
110+
</Disclosure>
111+
</Accordion>
112+
)
113+
};

‎packages/@react-spectrum/accordion/stories/Disclosure.stories.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,16 @@ export const Default: DisclosureStory = {
4242
</Disclosure>
4343
)
4444
};
45+
46+
export const WrappingTitle: DisclosureStory = {
47+
render: (args) => (
48+
<Disclosure maxWidth="size-3000" {...args}>
49+
<DisclosureTitle>
50+
Long long long long long long long long long long long long long long long long wrapping title
51+
</DisclosureTitle>
52+
<DisclosurePanel>
53+
Files content
54+
</DisclosurePanel>
55+
</Disclosure>
56+
)
57+
};

0 commit comments

Comments
 (0)