refactor(AI): update ToggleSwitch size to 'xs' (#8500)

This commit is contained in:
naman-bruno
2026-07-06 23:13:51 +05:30
committed by GitHub
parent 143cb5fe33
commit 06ca9b9521
5 changed files with 11 additions and 9 deletions

View File

@@ -75,7 +75,7 @@ const AutocompletePane = ({
</span>
</div>
<ToggleSwitch
size="m"
size="xs"
isOn={enabled}
handleToggle={() => onToggleEnabled(!enabled)}
data-testid="ai-autocomplete-enabled-toggle"

View File

@@ -148,7 +148,7 @@ const SecurityPane = ({
</span>
</div>
<ToggleSwitch
size="m"
size="xs"
isOn={redactHeaders}
handleToggle={() => onToggleRedactHeaders(!redactHeaders)}
data-testid="ai-security-headers-toggle"
@@ -163,7 +163,7 @@ const SecurityPane = ({
</span>
</div>
<ToggleSwitch
size="m"
size="xs"
isOn={redactBody}
handleToggle={() => onToggleRedactBody(!redactBody)}
data-testid="ai-security-body-toggle"
@@ -178,7 +178,7 @@ const SecurityPane = ({
</span>
</div>
<ToggleSwitch
size="m"
size="xs"
isOn={redactResponse}
handleToggle={() => onToggleRedactResponse(!redactResponse)}
data-testid="ai-security-response-toggle"
@@ -193,7 +193,7 @@ const SecurityPane = ({
</span>
</div>
<ToggleSwitch
size="m"
size="xs"
isOn={redactVariables}
handleToggle={() => onToggleRedactVariables(!redactVariables)}
data-testid="ai-security-variables-toggle"

View File

@@ -344,7 +344,7 @@ const AI = () => {
</div>
</div>
<ToggleSwitch
size="m"
size="xs"
isOn={formik.values.enabled}
handleToggle={() => formik.setFieldValue('enabled', !formik.values.enabled)}
/>
@@ -370,7 +370,7 @@ const AI = () => {
const providerToggle = (
<ToggleSwitch
size="s"
size="xs"
isOn={providerEnabled}
handleToggle={() =>
formik.setFieldValue(`providers.${id}.enabled`, !providerEnabled)}
@@ -426,7 +426,7 @@ const AI = () => {
const providerToggle = (
<ToggleSwitch
size="s"
size="xs"
isOn={providerEnabled}
handleToggle={() =>
formik.setFieldValue(`providers.${providerId}.enabled`, !providerEnabled)}

View File

@@ -40,7 +40,7 @@ const AppCodeEditor = ({ item, collection }) => {
When enabled, replaces the request/response panes with the app view for this request.
</p>
</div>
<ToggleSwitch isOn={enabled} handleToggle={onToggle} size="m" data-testid="app-enable-toggle" />
<ToggleSwitch isOn={enabled} handleToggle={onToggle} size="xs" data-testid="app-enable-toggle" />
</div>
<div className="flex-1 app-editor relative" data-testid="app-code-editor">

View File

@@ -15,8 +15,10 @@ const getSizeValues = (size = 'm') => switchSizes[size] || switchSizes.m;
export const Switch = styled.div`
position: relative;
display: inline-block;
flex-shrink: 0;
width: ${(props) => getSizeValues(props.size).width}px;
height: ${(props) => getSizeValues(props.size).height}px;
min-width: ${(props) => getSizeValues(props.size).width}px;
border-radius: ${(props) => getSizeValues(props.size).height}px;
`;