Skip to content

Update Toggle component styles #36535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
avatus merged 1 commit into from
Jan 11, 2024
Merged

Update Toggle component styles #36535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/packages/design/src/Alert/Alert.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const kind = props => {
};
case 'success':
return {
background: theme.colors.success,
background: theme.colors.success.main,
color: theme.colors.text.primaryInverse,
};
default:
Expand Down
2 changes: 1 addition & 1 deletion web/packages/design/src/Alert/Alert.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ describe('design/Alert', () => {
test('"kind" success renders bg == theme.colors.success', () => {
const { container } = render(<Success />);
expect(container.firstChild).toHaveStyle({
background: theme.colors.success,
background: theme.colors.success.main,
});
});
});
7 changes: 6 additions & 1 deletion web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,15 @@ exports[`rendering of CardSuccess components 1`] = `
display: inline-flex;
align-items: center;
justify-content: center;
color: #00BFA5;
margin-bottom: 16px;
}

.c2 color {
main: #00BFA6;
hover: #33CCB8;
active: #66D9CA;
}

<div
class="c0 c1"
width="540px"
Expand Down
2 changes: 1 addition & 1 deletion web/packages/design/src/Label/Label.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const kind = ({ kind, theme }) => {

if (kind === 'success') {
return {
backgroundColor: theme.colors.success,
backgroundColor: theme.colors.success.main,
color: theme.colors.text.primaryInverse,
};
}
Expand Down
2 changes: 1 addition & 1 deletion web/packages/design/src/LabelState/LabelState.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const kinds = ({ theme, kind, shadow }) => {
}

if (kind === 'success') {
styles.background = theme.colors.success;
styles.background = theme.colors.success.main;
styles.color = theme.colors.text.primaryInverse;
}

Expand Down
2 changes: 1 addition & 1 deletion web/packages/design/src/LabelState/LabelState.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const colors = {
info: theme.colors.spotBackground[0],
warning: theme.colors.warning.main,
danger: theme.colors.error.main,
success: theme.colors.success,
success: theme.colors.success.main,
};

describe('design/LabelState', () => {
Expand Down
24 changes: 23 additions & 1 deletion web/packages/design/src/Toggle/Toggle.story.tsx
View file
Open in desktop
Copy link
Copy Markdown
Member

@ravicious ravicious Jan 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A small change to make it easier to check both toggle states at the same time.

toggle-row

(To apply the patch, you can copy it and then pbpaste | git apply)

diff --git a/web/packages/design/src/Toggle/Toggle.story.tsx b/web/packages/design/src/Toggle/Toggle.story.tsx
index 7df1570011..ec23c98ed6 100644
--- a/web/packages/design/src/Toggle/Toggle.story.tsx
+++ b/web/packages/design/src/Toggle/Toggle.story.tsx
@@ -28,7 +28,16 @@ export default {
 };
 
 export const Default = () => {
-  const [toggled, setToggled] = useState(false);
+  return (
+    <Flex flexDirection="column" gap={4}>
+      <ToggleRow initialToggled={false} />
+      <ToggleRow initialToggled={true} />
+    </Flex>
+  );
+};
+
+const ToggleRow = (props: { initialToggled: boolean }) => {
+  const [toggled, setToggled] = useState(props.initialToggled);
 
   function toggle(): void {
     setToggled(wasToggled => !wasToggled);

Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,16 @@ export default {
};

export const Default = () => {
const [toggled, setToggled] = useState(false);
return (
<Flex flexDirection="column" gap={4}>
<ToggleRow initialToggled={false} />
<ToggleRow initialToggled={true} />
</Flex>
);
};

const ToggleRow = (props: { initialToggled: boolean }) => {
const [toggled, setToggled] = useState(props.initialToggled);

function toggle(): void {
setToggled(wasToggled => !wasToggled);
Expand All @@ -44,6 +53,19 @@ export const Default = () => {
<Text>Disabled</Text>
<Toggle disabled={true} onToggle={toggle} isToggled={toggled} />
</div>
<div>
<Text>Enabled (large)</Text>
<Toggle onToggle={toggle} isToggled={toggled} size="large" />
</div>
<div>
<Text>Disabled (large)</Text>
<Toggle
disabled={true}
onToggle={toggle}
isToggled={toggled}
size="large"
/>
</div>
</Flex>
);
};
91 changes: 76 additions & 15 deletions web/packages/design/src/Toggle/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,24 @@ export function Toggle({
children,
disabled,
className,
size = 'small',
}: {
isToggled: boolean;
onToggle: () => void;
children?: ReactNode;
disabled?: boolean;
className?: string;
size?: 'small' | 'large';
}) {
return (
<StyledWrapper disabled={disabled} className={className}>
<StyledInput
checked={isToggled}
onChange={onToggle}
disabled={disabled}
size={size}
/>
<StyledSlider />
<StyledSlider size={size} />
{children}
</StyledWrapper>
);
Expand All @@ -56,44 +59,102 @@ const StyledWrapper = styled.label`
}
`;

const size = props => {
switch (props.size) {
case 'large':
return {
track: {
width: 40,
height: 20,
},
circle: {
width: 14,
height: 14,
transform: 'translate(3px, -50%)',
},
translate: 'translate(23px, -50%)',
};
default:
// small
return {
track: {
width: 32,
height: 16,
},
circle: {
width: 12,
height: 12,
transform: 'translate(2px, -50%)',
},
translate: 'translate(18px, -50%)',
};
}
};

const StyledSlider = styled.div`
width: 32px;
height: 12px;
border-radius: 12px;
background: ${props => props.theme.colors.levels.surface};
// the slider 'track'
${props => size(props).track};
border-radius: 10px;
cursor: inherit;
flex-shrink: 0;
background: ${props => props.theme.colors.buttons.secondary.default};
transition: background 0.15s ease-in-out;

&:hover {
background: ${props => props.theme.colors.buttons.secondary.hover};
}

&:active {
background: ${props => props.theme.colors.buttons.secondary.active};
}

// the slider 'circle'
&:before {
content: '';
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 16px;
height: 16px;
border-radius: 16px;
background: ${props => props.theme.colors.brand};
${props => size(props).circle};
border-radius: 14px;
background: ${props => props.theme.colors.interactionHandle};
box-shadow: ${props => props.theme.boxShadow[0]};
transition: transform 0.05s ease-in;
}
`;

const StyledInput = styled.input.attrs({ type: 'checkbox' })`
opacity: 0;
position: absolute;
cursor: inherit;
z-index: -1;

&:checked + ${StyledSlider} {
background: ${props => props.theme.colors.spotBackground[1]};

&:before {
transform: translate(16px, -50%);
transform: ${props => size(props).translate};
}
}

&:enabled:checked + ${StyledSlider} {
background: ${props => props.theme.colors.success.main};

&:hover {
background: ${props => props.theme.colors.success.hover};
}

&:active {
background: ${props => props.theme.colors.success.active};
}
}

&:disabled + ${StyledSlider} {
background: ${props => props.theme.colors.levels.surface};
background: ${props => props.theme.colors.spotBackground[0]};

&:before {
background: ${props => props.theme.colors.grey[700]};
opacity: 0.36;
box-shadow: none;
}
}

&:disabled:checked + ${StyledSlider} {
background: ${props => props.theme.colors.interactive.tonal.success[2]};
}
`;
12 changes: 11 additions & 1 deletion web/packages/design/src/theme/themes/bblpTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ const colors: ThemeColors = {
'rgba(255,160,40, 0.18)',
'rgba(255,160,40, 0.25)',
],
success: [
'rgba(0, 162, 35, 0.1)',
'rgba(0, 162, 35, 0.18)',
'rgba(0, 162, 35, 0.25)',
],
neutral: neutralColors,
},
},
Expand Down Expand Up @@ -434,7 +439,12 @@ const colors: ThemeColors = {
},

link: '#66ABFF',
success: '#00BFA5',

success: {
main: '#00A223',
hover: '#35D655',
active: '#00851C',
},

dataVisualisation: dataVisualisationColors,
};
Expand Down
12 changes: 11 additions & 1 deletion web/packages/design/src/theme/themes/darkTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ const colors: ThemeColors = {
'rgba(159,133,255, 0.18)',
'rgba(159,133,255, 0.25)',
],
success: [
'rgba(0, 191, 166, 0.1)',
'rgba(0, 191, 166, 0.18)',
'rgba(0, 191, 166, 0.25)',
],
neutral: neutralColors,
},
},
Expand Down Expand Up @@ -165,6 +170,12 @@ const colors: ThemeColors = {
active: '#FFA19A',
},

success: {
main: '#00BFA6',
hover: '#33CCB8',
active: '#66D9CA',
},

warning: {
main: '#FFAB00',
hover: '#FFBC33',
Expand Down Expand Up @@ -434,7 +445,6 @@ const colors: ThemeColors = {
},

link: '#009EFF',
success: '#00BFA5',

dataVisualisation: dataVisualisationColors,
};
Expand Down
12 changes: 11 additions & 1 deletion web/packages/design/src/theme/themes/lightTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,11 @@ const colors: ThemeColors = {
'rgba(81,47,201, 0.18)',
'rgba(81,47,201, 0.25)',
],
success: [
'rgba(0, 125, 107, 0.1)',
'rgba(0, 125, 107, 0.18)',
'rgba(0, 125, 107, 0.25)',
],
neutral: neutralColors,
},
},
Expand Down Expand Up @@ -158,6 +163,12 @@ const colors: ThemeColors = {

progressBarColor: '#007D6B',

success: {
main: '#007D6B',
hover: '#006456',
active: '#004B40',
},

error: {
main: '#CC372D',
hover: '#A32C24',
Expand Down Expand Up @@ -433,7 +444,6 @@ const colors: ThemeColors = {
},

link: '#0073BA',
success: '#007D6B',

dataVisualisation: dataVisualisationColors,
};
Expand Down
1 change: 1 addition & 0 deletions web/packages/design/src/theme/themes/sharedStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const sharedStyles: SharedStyles = {
export const sharedColors: SharedColors = {
dark: '#000000',
light: '#FFFFFF',
interactionHandle: '#FFFFFF',
grey: {
...blueGrey,
},
Expand Down
9 changes: 8 additions & 1 deletion web/packages/design/src/theme/themes/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export type ThemeColors = {
tonal: {
primary: string[];
neutral: string[];
success: string[];
};
};

Expand Down Expand Up @@ -136,6 +137,12 @@ export type ThemeColors = {
active: string;
};

success: {
main: string;
hover: string;
active: string;
};

notice: {
background: string;
};
Expand Down Expand Up @@ -183,7 +190,6 @@ export type ThemeColors = {
};

link: string;
success: string;

dataVisualisation: DataVisualisationColors;
accessGraph: AccessGraphColors;
Expand Down Expand Up @@ -242,6 +248,7 @@ interface AccessGraphEdgeColors {
export type SharedColors = {
dark: string;
light: string;
interactionHandle: string;
grey: typeof blueGrey;
subtle: string;
bgTerminal: string;
Expand Down
Loading