chore: Update segmented control visual design #12091
Annotations
2 errors and 3 warnings
Integration tests:
src/__integ__/themes.test.ts#L54
expect(received).resolves.toMatchSnapshot()
Snapshot name: `CSS Custom Properties match previous snapshot for mode "light" 1`
- Snapshot - 1
+ Received + 656
- {}
+ {
+ "border-active-width": "2px",
+ "border-code-editor-status-divider-width": "0px",
+ "border-container-sticky-width": "1px",
+ "border-container-top-width": "1px",
+ "border-control-focus-ring-shadow-spread": "1px",
+ "border-control-invalid-focus-ring-shadow-spread": "1px",
+ "border-divider-list-width": "1px",
+ "border-divider-section-width": "1px",
+ "border-dropdown-virtual-offset-width": "0px",
+ "border-invalid-width": "4px",
+ "border-item-width": "1px",
+ "border-line-chart-dash-array": "3 5",
+ "border-line-chart-line-join": "miter",
+ "border-line-chart-width": "2px",
+ "border-link-focus-ring-outline": "5px auto Highlight",
+ "border-link-focus-ring-shadow-spread": "0px",
+ "border-panel-header-width": "0px",
+ "border-panel-top-width": "0px",
+ "border-radius-alert": "2px",
+ "border-radius-badge": "16px",
+ "border-radius-button": "2px",
+ "border-radius-calendar-day-focus-ring": "2px",
+ "border-radius-chat-bubble": "2px",
+ "border-radius-code-editor": "0px",
+ "border-radius-container": "0px",
+ "border-radius-control-circular-focus-ring": "50%",
+ "border-radius-control-default-focus-ring": "2px",
+ "border-radius-dropdown": "0px",
+ "border-radius-dropzone": "0px",
+ "border-radius-flashbar": "0px",
+ "border-radius-input": "2px",
+ "border-radius-item": "0px",
+ "border-radius-popover": "2px",
+ "border-radius-tabs-focus-ring": "0px",
+ "border-radius-tiles": "2px",
+ "border-radius-token": "2px",
+ "border-radius-tutorial-panel-item": "2px",
+ "border-table-sticky-width": "0px",
+ "border-width-alert": "1px",
+ "border-width-field": "1px",
+ "border-width-popover": "1px",
+ "color-background-avatar-default": "#545b64",
+ "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+ "color-background-badge-icon": "#d13212",
+ "color-background-button-link-active": "#eaeded",
+ "color-background-button-link-hover": "#fafafa",
+ "color-background-button-normal-active": "#eaeded",
+ "color-background-button-normal-default": "#ffffff",
+ "color-background-button-normal-disabled": "#ffffff",
+ "color-background-button-normal-hover": "#fafafa",
+ "color-background-button-primary-active": "#12293b",
+ "color-background-button-primary-default": "#0073bb",
+ "color-background-button-primary-disabled": "#ffffff",
+ "color-background-button-primary-hover": "#0a4a74",
+ "color-background-calendar-current-date": "#f2f3f3",
+ "color-background-cell-shaded": "#f2f3f3",
+ "color-background-chat-bubble-incoming": "#f2f3f3",
+ "color-background-chat-bubble-outgoing": "transparent",
+ "color-background-code-editor-gutter-active-line-default": "#687078",
+ "color-background-code-editor-gutter-active-line-error": "#d13212",
+ "color-background-code-editor-gutter-default": "#f2f3f3",
+ "color-background-code-editor-loading": "#f2f3f3",
+ "color-background-code-editor-pane-item-hover": "#eaeded",
+ "color-background-code-editor-status-bar": "#f2f3f3",
+ "color-background-container-content": "#ffffff",
+ "color-background-container-header": "#fafafa",
+ "color-background-control-checked": "#0073bb",
+ "color-background-control-default": "#ffffff",
+ "color-background-control-disabled": "#d5dbdb",
+ "color-background-dropdown-item-default": "#ffffff",
+ "color-background-dropdown-item-dimmed": "transparent",
+ "color-background-dropdown-item-filter-match": "#f1faff",
+ "color-background-dropdown-item-hover": "#f2f3f3",
+ "color-background-dropdown-item-selected": "#f1faff",
+ "color-background-home-header": "#000000",
+ "color-background-input-default": "#ffffff",
+ "color-background-input-disabled": "#eaeded",
+ "co
|
Integration tests
Process completed with exit code 1.
|
Integration tests:
src/__integ__/themes.test.ts#L54
expect(received).resolves.toMatchSnapshot()
Snapshot name: `CSS Custom Properties match previous snapshot for mode "light" 1`
- Snapshot - 1
+ Received + 656
- {}
+ {
+ "border-active-width": "2px",
+ "border-code-editor-status-divider-width": "0px",
+ "border-container-sticky-width": "1px",
+ "border-container-top-width": "1px",
+ "border-control-focus-ring-shadow-spread": "1px",
+ "border-control-invalid-focus-ring-shadow-spread": "1px",
+ "border-divider-list-width": "1px",
+ "border-divider-section-width": "1px",
+ "border-dropdown-virtual-offset-width": "0px",
+ "border-invalid-width": "4px",
+ "border-item-width": "1px",
+ "border-line-chart-dash-array": "3 5",
+ "border-line-chart-line-join": "miter",
+ "border-line-chart-width": "2px",
+ "border-link-focus-ring-outline": "5px auto Highlight",
+ "border-link-focus-ring-shadow-spread": "0px",
+ "border-panel-header-width": "0px",
+ "border-panel-top-width": "0px",
+ "border-radius-alert": "2px",
+ "border-radius-badge": "16px",
+ "border-radius-button": "2px",
+ "border-radius-calendar-day-focus-ring": "2px",
+ "border-radius-chat-bubble": "2px",
+ "border-radius-code-editor": "0px",
+ "border-radius-container": "0px",
+ "border-radius-control-circular-focus-ring": "50%",
+ "border-radius-control-default-focus-ring": "2px",
+ "border-radius-dropdown": "0px",
+ "border-radius-dropzone": "0px",
+ "border-radius-flashbar": "0px",
+ "border-radius-input": "2px",
+ "border-radius-item": "0px",
+ "border-radius-popover": "2px",
+ "border-radius-tabs-focus-ring": "0px",
+ "border-radius-tiles": "2px",
+ "border-radius-token": "2px",
+ "border-radius-tutorial-panel-item": "2px",
+ "border-table-sticky-width": "0px",
+ "border-width-alert": "1px",
+ "border-width-field": "1px",
+ "border-width-popover": "1px",
+ "color-background-avatar-default": "#545b64",
+ "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+ "color-background-badge-icon": "#d13212",
+ "color-background-button-link-active": "#eaeded",
+ "color-background-button-link-hover": "#fafafa",
+ "color-background-button-normal-active": "#eaeded",
+ "color-background-button-normal-default": "#ffffff",
+ "color-background-button-normal-disabled": "#ffffff",
+ "color-background-button-normal-hover": "#fafafa",
+ "color-background-button-primary-active": "#12293b",
+ "color-background-button-primary-default": "#0073bb",
+ "color-background-button-primary-disabled": "#ffffff",
+ "color-background-button-primary-hover": "#0a4a74",
+ "color-background-calendar-current-date": "#f2f3f3",
+ "color-background-cell-shaded": "#f2f3f3",
+ "color-background-chat-bubble-incoming": "#f2f3f3",
+ "color-background-chat-bubble-outgoing": "transparent",
+ "color-background-code-editor-gutter-active-line-default": "#687078",
+ "color-background-code-editor-gutter-active-line-error": "#d13212",
+ "color-background-code-editor-gutter-default": "#f2f3f3",
+ "color-background-code-editor-loading": "#f2f3f3",
+ "color-background-code-editor-pane-item-hover": "#eaeded",
+ "color-background-code-editor-status-bar": "#f2f3f3",
+ "color-background-container-content": "#ffffff",
+ "color-background-container-header": "#fafafa",
+ "color-background-control-checked": "#0073bb",
+ "color-background-control-default": "#ffffff",
+ "color-background-control-disabled": "#d5dbdb",
+ "color-background-dropdown-item-default": "#ffffff",
+ "color-background-dropdown-item-dimmed": "transparent",
+ "color-background-dropdown-item-filter-match": "#f1faff",
+ "color-background-dropdown-item-hover": "#f2f3f3",
+ "color-background-dropdown-item-selected": "#f1faff",
+ "color-background-home-header": "#000000",
+ "color-background-input-default": "#ffffff",
+ "color-background-input-disabled": "#eaeded",
+ "co
|
Integration tests:
src/__integ__/themes.test.ts#L54
expect(received).resolves.toMatchSnapshot()
Snapshot name: `CSS Custom Properties match previous snapshot for mode "light" 1`
- Snapshot - 1
+ Received + 656
- {}
+ {
+ "border-active-width": "2px",
+ "border-code-editor-status-divider-width": "0px",
+ "border-container-sticky-width": "1px",
+ "border-container-top-width": "1px",
+ "border-control-focus-ring-shadow-spread": "1px",
+ "border-control-invalid-focus-ring-shadow-spread": "1px",
+ "border-divider-list-width": "1px",
+ "border-divider-section-width": "1px",
+ "border-dropdown-virtual-offset-width": "0px",
+ "border-invalid-width": "4px",
+ "border-item-width": "1px",
+ "border-line-chart-dash-array": "3 5",
+ "border-line-chart-line-join": "miter",
+ "border-line-chart-width": "2px",
+ "border-link-focus-ring-outline": "5px auto Highlight",
+ "border-link-focus-ring-shadow-spread": "0px",
+ "border-panel-header-width": "0px",
+ "border-panel-top-width": "0px",
+ "border-radius-alert": "2px",
+ "border-radius-badge": "16px",
+ "border-radius-button": "2px",
+ "border-radius-calendar-day-focus-ring": "2px",
+ "border-radius-chat-bubble": "2px",
+ "border-radius-code-editor": "0px",
+ "border-radius-container": "0px",
+ "border-radius-control-circular-focus-ring": "50%",
+ "border-radius-control-default-focus-ring": "2px",
+ "border-radius-dropdown": "0px",
+ "border-radius-dropzone": "0px",
+ "border-radius-flashbar": "0px",
+ "border-radius-input": "2px",
+ "border-radius-item": "0px",
+ "border-radius-popover": "2px",
+ "border-radius-tabs-focus-ring": "0px",
+ "border-radius-tiles": "2px",
+ "border-radius-token": "2px",
+ "border-radius-tutorial-panel-item": "2px",
+ "border-table-sticky-width": "0px",
+ "border-width-alert": "1px",
+ "border-width-field": "1px",
+ "border-width-popover": "1px",
+ "color-background-avatar-default": "#545b64",
+ "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+ "color-background-badge-icon": "#d13212",
+ "color-background-button-link-active": "#eaeded",
+ "color-background-button-link-hover": "#fafafa",
+ "color-background-button-normal-active": "#eaeded",
+ "color-background-button-normal-default": "#ffffff",
+ "color-background-button-normal-disabled": "#ffffff",
+ "color-background-button-normal-hover": "#fafafa",
+ "color-background-button-primary-active": "#12293b",
+ "color-background-button-primary-default": "#0073bb",
+ "color-background-button-primary-disabled": "#ffffff",
+ "color-background-button-primary-hover": "#0a4a74",
+ "color-background-calendar-current-date": "#f2f3f3",
+ "color-background-cell-shaded": "#f2f3f3",
+ "color-background-chat-bubble-incoming": "#f2f3f3",
+ "color-background-chat-bubble-outgoing": "transparent",
+ "color-background-code-editor-gutter-active-line-default": "#687078",
+ "color-background-code-editor-gutter-active-line-error": "#d13212",
+ "color-background-code-editor-gutter-default": "#f2f3f3",
+ "color-background-code-editor-loading": "#f2f3f3",
+ "color-background-code-editor-pane-item-hover": "#eaeded",
+ "color-background-code-editor-status-bar": "#f2f3f3",
+ "color-background-container-content": "#ffffff",
+ "color-background-container-header": "#fafafa",
+ "color-background-control-checked": "#0073bb",
+ "color-background-control-default": "#ffffff",
+ "color-background-control-disabled": "#d5dbdb",
+ "color-background-dropdown-item-default": "#ffffff",
+ "color-background-dropdown-item-dimmed": "transparent",
+ "color-background-dropdown-item-filter-match": "#f1faff",
+ "color-background-dropdown-item-hover": "#f2f3f3",
+ "color-background-dropdown-item-selected": "#f1faff",
+ "color-background-home-header": "#000000",
+ "color-background-input-default": "#ffffff",
+ "color-background-input-disabled": "#eaeded",
+ "co
|
Integration tests:
src/__integ__/themes.test.ts#L54
expect(received).resolves.toMatchSnapshot()
Snapshot name: `CSS Custom Properties match previous snapshot for mode "light" 1`
- Snapshot - 1
+ Received + 656
- {}
+ {
+ "border-active-width": "2px",
+ "border-code-editor-status-divider-width": "0px",
+ "border-container-sticky-width": "1px",
+ "border-container-top-width": "1px",
+ "border-control-focus-ring-shadow-spread": "1px",
+ "border-control-invalid-focus-ring-shadow-spread": "1px",
+ "border-divider-list-width": "1px",
+ "border-divider-section-width": "1px",
+ "border-dropdown-virtual-offset-width": "0px",
+ "border-invalid-width": "4px",
+ "border-item-width": "1px",
+ "border-line-chart-dash-array": "3 5",
+ "border-line-chart-line-join": "miter",
+ "border-line-chart-width": "2px",
+ "border-link-focus-ring-outline": "5px auto Highlight",
+ "border-link-focus-ring-shadow-spread": "0px",
+ "border-panel-header-width": "0px",
+ "border-panel-top-width": "0px",
+ "border-radius-alert": "2px",
+ "border-radius-badge": "16px",
+ "border-radius-button": "2px",
+ "border-radius-calendar-day-focus-ring": "2px",
+ "border-radius-chat-bubble": "2px",
+ "border-radius-code-editor": "0px",
+ "border-radius-container": "0px",
+ "border-radius-control-circular-focus-ring": "50%",
+ "border-radius-control-default-focus-ring": "2px",
+ "border-radius-dropdown": "0px",
+ "border-radius-dropzone": "0px",
+ "border-radius-flashbar": "0px",
+ "border-radius-input": "2px",
+ "border-radius-item": "0px",
+ "border-radius-popover": "2px",
+ "border-radius-tabs-focus-ring": "0px",
+ "border-radius-tiles": "2px",
+ "border-radius-token": "2px",
+ "border-radius-tutorial-panel-item": "2px",
+ "border-table-sticky-width": "0px",
+ "border-width-alert": "1px",
+ "border-width-field": "1px",
+ "border-width-popover": "1px",
+ "color-background-avatar-default": "#545b64",
+ "color-background-avatar-gen-ai": "radial-gradient(circle farthest-corner at top left,rgba(0, 150, 250, 1) -25%,rgba(0, 150, 250, 0) 55%),radial-gradient(circle farthest-corner at top right, rgba(216, 178, 255, 1) -10%, rgba(115, 0, 229, 1) 50%)",
+ "color-background-badge-icon": "#d13212",
+ "color-background-button-link-active": "#eaeded",
+ "color-background-button-link-hover": "#fafafa",
+ "color-background-button-normal-active": "#eaeded",
+ "color-background-button-normal-default": "#ffffff",
+ "color-background-button-normal-disabled": "#ffffff",
+ "color-background-button-normal-hover": "#fafafa",
+ "color-background-button-primary-active": "#12293b",
+ "color-background-button-primary-default": "#0073bb",
+ "color-background-button-primary-disabled": "#ffffff",
+ "color-background-button-primary-hover": "#0a4a74",
+ "color-background-calendar-current-date": "#f2f3f3",
+ "color-background-cell-shaded": "#f2f3f3",
+ "color-background-chat-bubble-incoming": "#f2f3f3",
+ "color-background-chat-bubble-outgoing": "transparent",
+ "color-background-code-editor-gutter-active-line-default": "#687078",
+ "color-background-code-editor-gutter-active-line-error": "#d13212",
+ "color-background-code-editor-gutter-default": "#f2f3f3",
+ "color-background-code-editor-loading": "#f2f3f3",
+ "color-background-code-editor-pane-item-hover": "#eaeded",
+ "color-background-code-editor-status-bar": "#f2f3f3",
+ "color-background-container-content": "#ffffff",
+ "color-background-container-header": "#fafafa",
+ "color-background-control-checked": "#0073bb",
+ "color-background-control-default": "#ffffff",
+ "color-background-control-disabled": "#d5dbdb",
+ "color-background-dropdown-item-default": "#ffffff",
+ "color-background-dropdown-item-dimmed": "transparent",
+ "color-background-dropdown-item-filter-match": "#f1faff",
+ "color-background-dropdown-item-hover": "#f2f3f3",
+ "color-background-dropdown-item-selected": "#f1faff",
+ "color-background-home-header": "#000000",
+ "color-background-input-default": "#ffffff",
+ "color-background-input-disabled": "#eaeded",
+ "co
|
Loading