diff --git a/packages/big-design/src/components/Checkbox/Checkbox.tsx b/packages/big-design/src/components/Checkbox/Checkbox.tsx
index 530f44d62..6aeeff239 100644
--- a/packages/big-design/src/components/Checkbox/Checkbox.tsx
+++ b/packages/big-design/src/components/Checkbox/Checkbox.tsx
@@ -77,11 +77,11 @@ class RawCheckbox extends React.PureComponent {
private renderLabel() {
const htmlFor = this.getInputId();
- const { label, theme } = this.props;
+ const { disabled, label, theme } = this.props;
if (typeof label === 'string') {
return (
-
+
{label}
);
diff --git a/packages/big-design/src/components/Checkbox/spec.tsx b/packages/big-design/src/components/Checkbox/spec.tsx
index c5dcb619d..cb6c746f1 100644
--- a/packages/big-design/src/components/Checkbox/spec.tsx
+++ b/packages/big-design/src/components/Checkbox/spec.tsx
@@ -113,3 +113,11 @@ test('theme prop overrides default theme', () => {
expect(container.querySelector('label')).toHaveStyle(`background-color: red`);
});
+
+test('displays text greyed out when disabled', () => {
+ const { container } = render();
+
+ const labels = container.querySelectorAll('label');
+
+ expect(labels[1]).toHaveStyle('color: #B4BAD1');
+});
diff --git a/packages/big-design/src/components/Checkbox/styled.tsx b/packages/big-design/src/components/Checkbox/styled.tsx
index 2f56ce0c9..c5139de84 100644
--- a/packages/big-design/src/components/Checkbox/styled.tsx
+++ b/packages/big-design/src/components/Checkbox/styled.tsx
@@ -1,6 +1,6 @@
import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
import { hideVisually } from 'polished';
-import styled, { DefaultTheme, StyledComponent } from 'styled-components';
+import styled, { css, DefaultTheme, StyledComponent } from 'styled-components';
import { StyleableText } from '../Typography/private';
@@ -9,6 +9,10 @@ interface StyledCheckboxProps {
isIndeterminate?: boolean;
}
+export interface StyledLabelProps {
+ disabled?: boolean;
+}
+
export const CheckboxContainer = styled.div`
align-items: center;
display: flex;
@@ -45,9 +49,15 @@ export const StyledCheckbox = styled.label`
export const StyledLabel = styled(StyleableText).attrs({
as: 'label',
-})>`
+}) & StyledLabelProps>`
margin-left: ${({ theme }) => theme.spacing.medium};
-` as StyledComponent<'label', DefaultTheme>;
+
+ ${({ disabled, theme }) =>
+ disabled &&
+ css`
+ color: ${theme.colors.secondary40};
+ `}
+` as StyledComponent<'label', DefaultTheme, StyledLabelProps>;
StyledCheckbox.defaultProps = { theme: defaultTheme };
StyledLabel.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/Chip/Chip.tsx b/packages/big-design/src/components/Chip/Chip.tsx
index 644c8f5d8..0e5b4e75e 100644
--- a/packages/big-design/src/components/Chip/Chip.tsx
+++ b/packages/big-design/src/components/Chip/Chip.tsx
@@ -2,17 +2,19 @@ import { CloseIcon } from '@bigcommerce/big-design-icons';
import { ThemeInterface } from '@bigcommerce/big-design-theme';
import React, { memo } from 'react';
+import { MarginProps } from '../../mixins';
import { Text } from '../Typography';
import { StyledChip, StyledCloseButton } from './styled';
-export interface ChipProps {
+export interface ChipProps extends MarginProps {
theme?: ThemeInterface;
onDelete?(): void;
}
-export const Chip: React.FC = memo(({ children, onDelete, theme }) => {
+export const Chip: React.FC = memo(({ children, onDelete, theme, ...rest }) => {
const label = typeof children === 'string' ? children : null;
+ const ariaLabel = label ? { 'aria-label': `Remove ${label}` } : {};
const handleOnDelete = (event: React.SyntheticEvent) => {
event.preventDefault();
@@ -25,6 +27,7 @@ export const Chip: React.FC = memo(({ children, onDelete, theme }) =>
const renderDeleteButton = () =>
onDelete && (
}
@@ -40,6 +43,7 @@ export const Chip: React.FC = memo(({ children, onDelete, theme }) =>
margin="xxSmall"
borderRadius="normal"
theme={theme}
+ {...rest}
>
{label}
diff --git a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
index 3d781823b..a13795167 100644
--- a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
@@ -165,6 +165,7 @@ exports[`renders with close button if onRemove is present 1`] = `
Test