Skip to content

Commit

Permalink
Merge pull request #204 from mapbox/control-label-support-jsx
Browse files Browse the repository at this point in the history 
Support a JSX for a control file select label
  • Loading branch information
@tristen
tristen authored Jan 30, 2023
2 parents 688bbdf + c757225 commit 6e209b3
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 115 deletions.
4 changes: 1 addition & 3 deletions src/components/button/__snapshots__/button.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,7 @@ exports[`Link with outline and icon text, extra padding renders as expected 1`]
bug
</span>
</span>
<span>
Go do things
</span>
Go do things
</span>
</a>
</div>
Expand Down
120 changes: 51 additions & 69 deletions src/components/control-file/__snapshots__/control-file.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,30 @@ exports[`ControlFile all options renders as expected 1`] = `
type="button"
>
<span
class="txt-truncate"
class="flex flex--center-cross"
>
<span
class="flex flex--center-cross"
class="mr6"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
class="mr6"
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
harddrive
</span>
</span>
<span>
Select an image
harddrive
</span>
</span>
Select an image
</span>
</button>
<input
Expand Down Expand Up @@ -99,36 +93,30 @@ exports[`ControlFile basic renders as expected 1`] = `
type="button"
>
<span
class="txt-truncate"
class="flex flex--center-cross"
>
<span
class="flex flex--center-cross"
class="mr6"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
class="mr6"
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
harddrive
</span>
</span>
<span>
Select a file
harddrive
</span>
</span>
Select a file
</span>
</button>
<input
Expand Down Expand Up @@ -170,36 +158,30 @@ exports[`ControlFile disabled renders as expected 1`] = `
type="button"
>
<span
class="txt-truncate"
class="flex flex--center-cross"
>
<span
class="flex flex--center-cross"
class="mr6"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
class="mr6"
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
harddrive
</span>
</span>
<span>
Select a file
harddrive
</span>
</span>
Select a file
</span>
</button>
<input
Expand Down
12 changes: 5 additions & 7 deletions src/components/control-file/control-file.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ReactElement, useRef } from 'react';
import React, { ReactElement, ReactNode, useRef } from 'react';
import PropTypes from 'prop-types';
import omit from '../utils/omit';
import ControlWrapper from '../control-wrapper';
Expand All @@ -12,7 +12,7 @@ interface Props extends Omit<InputProps, 'value' | 'onChange'> {
optional?: boolean;
disabled?: boolean;
validationError?: ReactElement | string;
displayValue?: string;
displayValue?: ReactNode;
themeControlFile?: string;
themeControlWrapper?: string;
}
Expand Down Expand Up @@ -94,11 +94,9 @@ export default function ControlFile({
className={`${themeControlFile} relative`}
onClick={onButtonClick}
>
<span className="txt-truncate">
<IconText iconBefore="harddrive">
{displayValue}
</IconText>
</span>
<IconText iconBefore="harddrive">
{displayValue}
</IconText>
</button>
<input {...inputProps} {...extraProps} />
</div>
Expand Down
17 changes: 17 additions & 0 deletions src/components/control-file/examples/control-file-example-custom-display-value.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
Basic.
*/
import React from 'react';
import ControlFile from '../control-file';

export default function Example() {
return (
<ControlFile
id="name"
displayValue={<span className="w180 txt-truncate">A long truncated display value</span>}
onChange={(value, id) => {
console.log(value, id);
}}
/>
);
}
40 changes: 17 additions & 23 deletions src/components/form/__snapshots__/form.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,36 +242,30 @@ exports[`Form all controls renders as expected 1`] = `
type="button"
>
<span
class="txt-truncate"
class="flex flex--center-cross"
>
<span
class="flex flex--center-cross"
class="mr6"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
class="mr6"
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
<svg
aria-hidden="true"
class="events-none icon"
data-testid="icon-harddrive"
focusable="false"
style="width: 18px; height: 18px;"
>
<use
xlink:href="#icon-harddrive"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>
</svg>
<span
style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
>
harddrive
</span>
</span>
<span>
Select a file
harddrive
</span>
</span>
Select a file
</span>
</button>
<input
Expand Down
16 changes: 4 additions & 12 deletions src/components/icon-text/__snapshots__/icon-text.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,7 @@ exports[`IconText both icons renders 1`] = `
check
</span>
</span>
<span>
What
</span>
What
<span
class="ml6"
>
Expand Down Expand Up @@ -62,9 +60,7 @@ exports[`IconText icon after renders 1`] = `
<span
class="flex flex--center-cross"
>
<span>
Next
</span>
Next
<span
class="ml6"
>
Expand Down Expand Up @@ -118,9 +114,7 @@ exports[`IconText icon before renders 1`] = `
clipboard
</span>
</span>
<span>
Copy
</span>
Copy
</span>
</div>
</body>
Expand Down Expand Up @@ -154,9 +148,7 @@ exports[`IconText inline flex parent renders 1`] = `
</span>
</span>
<span>
<span>
Inline
</span>
Inline
</span>
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon-text/icon-text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function IconText({
return (
<span className={`${inline ? 'inline-flex' : 'flex'} flex--center-cross`}>
{before}
<span>{children}</span>
{children}
{after}
</span>
);
Expand Down

0 comments on commit 6e209b3

Please sign in to comment.