8000 Edit position and style of 'Show more' (#704) · nsavas2000/python-editor-v3@820677d · GitHub
[go: up one dir, main page]
Skip to content

Commit 820677d

Browse files
microbit-robertmicrobit-robert
authored
Edit position and style of 'Show more' (microbit-foundation#704)
Show more/less now stays above the expanded/collapsed content, and has been re-styled to match other hyperlinks in the present in the toolkits. This improves accessibility on two grounds: text doesn't appear before current screenreader cursor (so you miss it) and text contrast of "Show more" is now adequate. It's also less visually confusing for sighted users as the button doesn't move. Closes microbit-foundation#688
1 parent 7b6f8cd commit 820677d

File tree

3 files changed

+18
-22
lines changed

3 files changed

+18
-22
lines changed

‎src/documentation/api/ApiNode.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ const ApiNodeSelf = ({
157157
)}
158158
{(hasDocStringDetail || hasSignatureDetail) && (
159159
<>
160+
<ShowMoreButton onClick={onToggleShowMore} isOpen={showMore} />
160161
{hasDocStringDetail && (
161162
// Avoid VStack spacing here so the margin animates too.
162163
<Collapse in={showMore} style={{ marginTop: 0 }}>
@@ -167,7 +168,6 @@ const ApiNodeSelf = ({
167168
/>
168169
</Collapse>
169170
)}
170-
<ShowMoreButton onClick={onToggleShowMore} isOpen={showMore} />
171171
</>
172172
)}
173173
</VStack>

‎src/documentation/common/ShowMoreButton.tsx

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,27 @@
33
*
44
* SPDX-License-Identifier: MIT
55
*/
6-
import { Button, ButtonProps } from "@chakra-ui/button";
6+
import { Link, LinkProps } from "@chakra-ui/react";
77
import { FormattedMessage } from "react-intl";
8+
import ExpandCollapseIcon from "../../common/ExpandCollapseIcon";
89

9-
interface ShowMoreButtonProps extends ButtonProps {
10+
interface ShowMoreLinkProps extends LinkProps {
1011
isOpen: boolean;
1112
}
1213

13-
const ShowMoreButton = ({ isOpen, ...props }: ShowMoreButtonProps) => (
14-
<Button
15-
// Design is medium but we don't have 500 weight.
16-
fontWeight="semibold"
17-
fontSize="14px"
18-
variant="unstyled"
19-
size="sm"
20-
color="gray.800"
21-
opacity="0.6"
22-
textTransform="uppercase"
23-
// These should be factored out if we reuse elsewhere
24-
pl={3}
25-
pr={3}
26-
width="max-content"
14+
const ShowMoreButton = ({ isOpen, ...props }: ShowMoreLinkProps) => (
15+
<Link
2716
{...props}
17+
as="button"
18+
color="brand.600"
19+
textAlign="left"
20+
_hover={{
21+
textDecoration: "none",
22+
}}
2823
>
2924
<FormattedMessage id={isOpen ? "show-less" : "show-more"} />
30-
</Button>
25+
<ExpandCollapseIcon open={isOpen} ml={1} />
26+
</Link>
3127
);
3228

3329
export default ShowMoreButton;

‎src/documentation/referenc C6A3 e/ReferenceTopicEntry.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ const ReferenceTopicEntry = ({
104104
)}
105105
{hasDetail && (
106106
<>
107+
<ShowMoreButton
108+
onClick={disclosure.onToggle}
109+
isOpen={disclosure.isOpen}
110+
/>
107111
{/* Avoid Stack spacing here so the margin animates too. */}
108112
<Collapse in={disclosure.isOpen} style={{ marginTop: 0 }}>
109113
<Stack
@@ -119,10 +123,6 @@ const ReferenceTopicEntry = ({
119123
/>
120124
</Stack>
121125
</Collapse>
122-
<ShowMoreButton
123-
onClick={disclosure.onToggle}
124-
isOpen={disclosure.isOpen}
125-
/>
126126
</>
127127
)}
128128
</Stack>

0 commit comments

Comments
 (0)
0