Skip to content

Commit 6a5394b

Browse files
authored
add support for 'none' BorderSizeValue to hide border (#5012)
1 parent d5186e1 commit 6a5394b

File tree

3 files changed

+27
-4
lines changed

3 files changed

+27
-4
lines changed

packages/@react-spectrum/utils/src/styleProps.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,10 @@ function borderColorValue(value: BorderColorValue, version = 5) {
165165
return `var(--spectrum-alias-border-color-${value}, ${colorValue(value as ColorValue, 'border', version)})`;
166166
}
167167

168-
function borderSizeValue(value: BorderSizeValue) {
169-
return `var(--spectrum-alias-border-size-${value})`;
168+
function borderSizeValue(value?: BorderSizeValue | null) {
169+
return value && value !== 'none'
170+
? `var(--spectrum-alias-border-size-${value})`
171+
: '0';
170172
}
171173

172174
function borderRadiusValue(value: BorderRadiusValue) {

packages/@react-spectrum/utils/test/styleProps.test.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {dimensionValue} from '../';
13+
import {convertStyleProps, dimensionValue, viewStyleProps} from '../';
1414

1515

1616
describe('styleProps', function () {
@@ -67,4 +67,24 @@ describe('styleProps', function () {
6767
});
6868
});
6969
});
70+
71+
describe('borderSizeValue', function () {
72+
it('should default to 0 if base is undefined', function () {
73+
let style = convertStyleProps({borderEndWidth: {S: 'thin'}}, viewStyleProps, 'ltr', ['base']);
74+
expect(style.borderRightWidth).toBe('0');
75+
style = convertStyleProps({borderEndWidth: {S: 'thin'}}, viewStyleProps, 'ltr', ['S', 'base']);
76+
expect(style.borderRightWidth).toBe('var(--spectrum-alias-border-size-thin)');
77+
style = convertStyleProps({borderEndWidth: {S: 'thin'}}, viewStyleProps, 'ltr', ['M', 'S', 'base']);
78+
expect(style.borderRightWidth).toBe('var(--spectrum-alias-border-size-thin)');
79+
});
80+
81+
it('should accept "none" to unset the border size', function () {
82+
let style = convertStyleProps({borderEndWidth: {S: 'thick', M: 'none', L: 'thin'}}, viewStyleProps, 'ltr', ['S', 'base']);
83+
expect(style.borderRightWidth).toBe('var(--spectrum-alias-border-size-thick)');
84+
style = convertStyleProps({borderEndWidth: {S: 'thick', M: 'none', L: 'thin'}}, viewStyleProps, 'ltr', ['M', 'S', 'base']);
85+
expect(style.borderRightWidth).toBe('0');
86+
style = convertStyleProps({borderEndWidth: {S: 'thick', M: 'none', L: 'thin'}}, viewStyleProps, 'ltr', ['L', 'M', 'S', 'base']);
87+
expect(style.borderRightWidth).toBe('var(--spectrum-alias-border-size-thin)');
88+
});
89+
});
7090
});

packages/@react-types/shared/src/dna.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -475,7 +475,8 @@ export type BorderSizeValue =
475475
| 'thin'
476476
| 'thick'
477477
| 'thicker'
478-
| 'thickest';
478+
| 'thickest'
479+
| 'none';
479480

480481
export type BorderRadiusValue =
481482
| 'xsmall'

0 commit comments

Comments
 (0)