From dfdd35f6ff975b75037cb76565fe4e641b6dadb8 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Wed, 11 Dec 2024 16:56:46 +0200 Subject: [PATCH 01/16] feat(ui-components): replace toggle thumb with custom icon Add functionality to render a custom "SwitchOn" icon in the UIToggle's thumb element using ReactDOM. Updated styles and component structure to support this change and ensure compatibility. --- .../ui-components/src/components/Icons.tsx | 4161 ++++++++--------- .../src/components/UIToggle/UIToggle.tsx | 49 +- 2 files changed, 2120 insertions(+), 2090 deletions(-) diff --git a/packages/ui-components/src/components/Icons.tsx b/packages/ui-components/src/components/Icons.tsx index c547186d03..e29992c4b1 100644 --- a/packages/ui-components/src/components/Icons.tsx +++ b/packages/ui-components/src/components/Icons.tsx @@ -140,6 +140,7 @@ export enum UiIcons { Star = 'Star', StarActive = 'StarActive', Success = 'Success', + SwitchOn = 'SwitchOn', Table = 'Table', Tags = 'Tags', Task = 'Task', @@ -169,2092 +170,2082 @@ export enum UiIcons { ZoomIn = 'ZoomIn', ZoomOut = 'ZoomOut' } - +export const icons = { + [UiIcons.Add]: ( + + + + ), + [UiIcons.AddNewRow]: ( + + + + + + + + ), + [UiIcons.Advanced]: ( + + + + + + + + + + + ), + [UiIcons.AnalyticalListPage]: ( + + + + ), + [UiIcons.Annotation]: ( + + + + ), + [UiIcons.AnnotationModeler]: ( + + + + ), + [UiIcons.ArrowLeft]: ( + + + + ), + [UiIcons.ArrowRight]: ( + + + + ), + [UiIcons.ArrowUp]: ( + + + + ), + [UiIcons.ArrowDown]: ( + + + + ), + [UiIcons.Association]: ( + + + + ), + [UiIcons.Beginner]: ( + + + + ), + [UiIcons.BookBookmark]: ( + + + + ), + [UiIcons.Bulb]: ( + + + + ), + [UiIcons.Chart]: ( + + + + + + + + + + ), + [UiIcons.ChatBubbles]: ( + + + + + ), + [UiIcons.Calendar]: ( + + + + + + + + + + + + + + ), + [UiIcons.Chevron]: ( + + + + ), + [UiIcons.ChevronDown]: ( + + + + ), + [UiIcons.Clear]: ( + + + + ), + [UiIcons.Cleanup]: ( + + + + ), + [UiIcons.ClockLong]: ( + + + + + + + + + + + ), + [UiIcons.ClockMedium]: ( + + + + + + + + + + + + + ), + [UiIcons.ClockShort]: ( + + + + + + + + + + + + + + ), + [UiIcons.Close]: ( + + + + ), + [UiIcons.Code]: ( + + + + + + ), + [UiIcons.CodeSnippet]: ( + + + + ), + [UiIcons.ContractNodes]: ( + + + + + + + ), + [UiIcons.ContractNodesSmall]: ( + + + + + + + ), + [UiIcons.Copy]: ( + + + + ), + [UiIcons.CopyToClipboard]: ( + + + + + + ), + [UiIcons.CopyToClipboardLong]: ( + + + + + + + + + ), + [UiIcons.CollapseGroup]: ( + + + + + ), + [UiIcons.Columns]: ( + + + + ), + [UiIcons.ComplexType]: ( + + + + + ), + [UiIcons.ComplexTypeSmall]: ( + + + + + ), + [UiIcons.ConfirmationCheckSymbol]: ( + + + + ), + [UiIcons.CreateMockData]: ( + + + + ), + [UiIcons.CustomPage]: ( + + + + ), + [UiIcons.CustomFPMPage]: ( + + + + + + + + ), + [UiIcons.Data]: ( + + + + ), + [UiIcons.DataSource]: ( + + + + + + + + ), + [UiIcons.Edit]: ( + + + + ), + [UiIcons.Error]: ( + + + + ), + [UiIcons.Export]: ( + + + + + + ), + [UiIcons.ExpandGroup]: ( + + + + + ), + [UiIcons.ExpandNodes]: ( + + + + + + + + ), + [UiIcons.Eye]: ( + + + + ), + [UiIcons.Featured]: ( + + + + ), + [UiIcons.File]: ( + + + + ), + [UiIcons.FileImage]: ( + + + + + + ), + [UiIcons.FileVector]: ( + + + + + ), + [UiIcons.Filter]: ( + + + + ), + [UiIcons.FilterWithChevron]: ( + + + + ), + [UiIcons.Folder]: ( + + + + ), + [UiIcons.FolderOpened]: ( + + + + ), + [UiIcons.Footer]: ( + + + + ), + [UiIcons.ForeignKey]: ( + + + + + + ), + [UiIcons.ForeignKeySmall]: ( + + + + + ), + [UiIcons.FullscreenExpand]: ( + + + + + + ), + [UiIcons.FullscreenCollapse]: ( + + + + + + ), + [UiIcons.Ghost]: ( + + + + + + + ), + [UiIcons.GoLeft]: ( + + + + ), + [UiIcons.GoRight]: ( + + + + ), + [UiIcons.GoToKey]: ( + + + + + + + + + + ), + [UiIcons.GuidedDevelopment]: ( + + + + ), + [UiIcons.GuidedAnswers]: ( + + + + + ), + [UiIcons.Grabber]: ( + + + + + ), + [UiIcons.Graduate]: ( + + + + ), + [UiIcons.Header]: ( + + + + ), + [UiIcons.HelpAction]: ( + + + + + ), + [UiIcons.HideSmall]: ( + + + + + + ), + [UiIcons.Highlighter]: ( + + + + ), + [UiIcons.History]: ( + + + + + ), + [UiIcons.Home]: ( + + + + ), + [UiIcons.IdTag]: ( + + + + + + + + + ), + [UiIcons.Info]: ( + + + + + ), + [UiIcons.InfoBlue]: ( + + + + ), + [UiIcons.InfoWithChevron]: ( + + + + ), + [UiIcons.Intermediate]: ( + + + + ), + [UiIcons.Key]: ( + + + + ), + [UiIcons.KeySmall]: ( + + + + + ), + [UiIcons.Layout]: ( + + + + ), + [UiIcons.LayoutCentre]: ( + + + + ), + [UiIcons.LayoutLeft]: ( + + + + ), + [UiIcons.LayoutRight]: ( + + + + ), + [UiIcons.Legend]: ( + + + + ), + [UiIcons.Lightning]: ( + + + + ), + [UiIcons.Link]: ( + + + + + ), + [UiIcons.ListReportPage]: ( + + + + ), + [UiIcons.MainEntity]: ( + + + + ), + [UiIcons.MainEntitySmall]: ( + + + + + ), + [UiIcons.Manage]: ( + + + + + + + ), + [UiIcons.MeatballMenu]: ( + + + + ), + [UiIcons.MessageSent]: ( + + + + + ), + [UiIcons.Mission]: ( + + + + ), + [UiIcons.NoData]: ( + + + + + + + + + + + + ), + [UiIcons.NoResults]: ( + + + + + + + + ), + [UiIcons.NotEditable]: ( + + + + + ), + [UiIcons.ObjectPage]: ( + + + + ), + [UiIcons.OverviewPage]: ( + + + + ), + [UiIcons.PageLayout]: ( + + + + ), + [UiIcons.PageMap]: ( + + + + ), + [UiIcons.Preview]: ( + + + + ), + [UiIcons.ProjectValidation]: ( + + + + + + ), + [UiIcons.Pull]: ( + + + + + ), + [UiIcons.QuestionMark]: ( + + + + ), + [UiIcons.QuestionMarkWithChevron]: ( + + + + ), + [UiIcons.Redistribute]: ( + + + + ), + [UiIcons.Redo]: ( + + + + + + ), + [UiIcons.Refresh]: ( + + + + ), + [UiIcons.RefreshSmall]: ( + + + + ), + [UiIcons.RequestGuide]: ( + + + + + + + + ), + [UiIcons.Save]: ( + + + + ), + [UiIcons.SavePosition]: ( + + + + ), + [UiIcons.Search]: ( + + + + ), + [UiIcons.Sections]: ( + + + + ), + [UiIcons.ServiceManager]: ( + + + + + ), + [UiIcons.Settings]: ( + + + + + + ), + [UiIcons.SettingsHierarchy]: ( + + + + + + + + + + + ), + [UiIcons.SettingsWithChevron]: ( + + + + + + + ), + [UiIcons.Shape]: ( + + + + ), + [UiIcons.SidePanelRight]: ( + + + + ), + [UiIcons.Sparkles]: ( + + + + + ), + [UiIcons.Sort]: ( + + + + + + + + + ), + [UiIcons.Source]: ( + + + + ), + [UiIcons.Star]: ( + + + + ), + [UiIcons.StarActive]: ( + + + + ), + [UiIcons.Success]: ( + + + + ), + [UiIcons.SwitchOn]: ( + + + + ), + [UiIcons.Table]: ( + + + + ), + [UiIcons.Tags]: ( + + + + ), + [UiIcons.Task]: ( + + + + ), + [UiIcons.Terminal]: ( + + + + + + ), + [UiIcons.TestGuides]: ( + + + + + + + + ), + [UiIcons.ThumbsDown]: ( + + + + ), + [UiIcons.ThumbsUp]: ( + + + + ), + [UiIcons.ToTheTop]: ( + + + + ), + [UiIcons.TrashCan]: ( + + + + ), + [UiIcons.Ui5]: ( + + + + ), + [UiIcons.Undo]: ( + + + + + + ), + [UiIcons.Validate]: ( + + + + + + ), + [UiIcons.ValidateBig]: ( + + + + + + + ), + [UiIcons.ValidateError]: ( + + + + + + + ), + [UiIcons.ValidateInfo]: ( + + + + + + + ), + [UiIcons.ValidateWarning]: ( + + + + + + + ), + [UiIcons.ValueHelp]: ( + + + + + ), + [UiIcons.VerticalGrip]: ( + + + + ), + [UiIcons.ViewMockup]: ( + + + + ), + [UiIcons.Warning]: ( + + + + ), + [UiIcons.WarningBad]: ( + + + + + + + ), + [UiIcons.WarningSmall]: ( + + + + ), + [UiIcons.WorklistPage]: ( + + + + ), + [UiIcons.World]: ( + + + + ), + [UiIcons.WorldArrow]: ( + + + + + ), + [UiIcons.WorldWarning]: ( + + + + + ), + [UiIcons.ZoomIn]: ( + + + + ), + [UiIcons.ZoomOut]: ( + + + + ) +}; export function initIcons(): void { - registerIcons({ - icons: { - [UiIcons.Add]: ( - - - - ), - [UiIcons.AddNewRow]: ( - - - - - - - - ), - [UiIcons.Advanced]: ( - - - - - - - - - - - ), - [UiIcons.AnalyticalListPage]: ( - - - - ), - [UiIcons.Annotation]: ( - - - - ), - [UiIcons.AnnotationModeler]: ( - - - - ), - [UiIcons.ArrowLeft]: ( - - - - ), - [UiIcons.ArrowRight]: ( - - - - ), - [UiIcons.ArrowUp]: ( - - - - ), - [UiIcons.ArrowDown]: ( - - - - ), - [UiIcons.Association]: ( - - - - ), - [UiIcons.Beginner]: ( - - - - ), - [UiIcons.BookBookmark]: ( - - - - ), - [UiIcons.Bulb]: ( - - - - ), - [UiIcons.Chart]: ( - - - - - - - - - - ), - [UiIcons.ChatBubbles]: ( - - - - - ), - [UiIcons.Calendar]: ( - - - - - - - - - - - - - - ), - [UiIcons.Chevron]: ( - - - - ), - [UiIcons.ChevronDown]: ( - - - - ), - [UiIcons.Clear]: ( - - - - ), - [UiIcons.Cleanup]: ( - - - - ), - [UiIcons.ClockLong]: ( - - - - - - - - - - - ), - [UiIcons.ClockMedium]: ( - - - - - - - - - - - - - ), - [UiIcons.ClockShort]: ( - - - - - - - - - - - - - - ), - [UiIcons.Close]: ( - - - - ), - [UiIcons.Code]: ( - - - - - - ), - [UiIcons.CodeSnippet]: ( - - - - ), - [UiIcons.ContractNodes]: ( - - - - - - - ), - [UiIcons.ContractNodesSmall]: ( - - - - - - - ), - [UiIcons.Copy]: ( - - - - ), - [UiIcons.CopyToClipboard]: ( - - - - - - ), - [UiIcons.CopyToClipboardLong]: ( - - - - - - - - - ), - [UiIcons.CollapseGroup]: ( - - - - - ), - [UiIcons.Columns]: ( - - - - ), - [UiIcons.ComplexType]: ( - - - - - ), - [UiIcons.ComplexTypeSmall]: ( - - - - - ), - [UiIcons.ConfirmationCheckSymbol]: ( - - - - ), - [UiIcons.CreateMockData]: ( - - - - ), - [UiIcons.CustomPage]: ( - - - - ), - [UiIcons.CustomFPMPage]: ( - - - - - - - - ), - [UiIcons.Data]: ( - - - - ), - [UiIcons.DataSource]: ( - - - - - - - - ), - [UiIcons.Edit]: ( - - - - ), - [UiIcons.Error]: ( - - - - ), - [UiIcons.Export]: ( - - - - - - ), - [UiIcons.ExpandGroup]: ( - - - - - ), - [UiIcons.ExpandNodes]: ( - - - - - - - - ), - [UiIcons.Eye]: ( - - - - ), - [UiIcons.Featured]: ( - - - - ), - [UiIcons.File]: ( - - - - ), - [UiIcons.FileImage]: ( - - - - - - ), - [UiIcons.FileVector]: ( - - - - - ), - [UiIcons.Filter]: ( - - - - ), - [UiIcons.FilterWithChevron]: ( - - - - ), - [UiIcons.Folder]: ( - - - - ), - [UiIcons.FolderOpened]: ( - - - - ), - [UiIcons.Footer]: ( - - - - ), - [UiIcons.ForeignKey]: ( - - - - - - ), - [UiIcons.ForeignKeySmall]: ( - - - - - ), - [UiIcons.FullscreenExpand]: ( - - - - - - ), - [UiIcons.FullscreenCollapse]: ( - - - - - - ), - [UiIcons.Ghost]: ( - - - - - - - ), - [UiIcons.GoLeft]: ( - - - - ), - [UiIcons.GoRight]: ( - - - - ), - [UiIcons.GoToKey]: ( - - - - - - - - - - ), - [UiIcons.GuidedDevelopment]: ( - - - - ), - [UiIcons.GuidedAnswers]: ( - - - - - ), - [UiIcons.Grabber]: ( - - - - - ), - [UiIcons.Graduate]: ( - - - - ), - [UiIcons.Header]: ( - - - - ), - [UiIcons.HelpAction]: ( - - - - - ), - [UiIcons.HideSmall]: ( - - - - - - ), - [UiIcons.Highlighter]: ( - - - - ), - [UiIcons.History]: ( - - - - - ), - [UiIcons.Home]: ( - - - - ), - [UiIcons.IdTag]: ( - - - - - - - - - ), - [UiIcons.Info]: ( - - - - - ), - [UiIcons.InfoBlue]: ( - - - - ), - [UiIcons.InfoWithChevron]: ( - - - - ), - [UiIcons.Intermediate]: ( - - - - ), - [UiIcons.Key]: ( - - - - ), - [UiIcons.KeySmall]: ( - - - - - ), - [UiIcons.Layout]: ( - - - - ), - [UiIcons.LayoutCentre]: ( - - - - ), - [UiIcons.LayoutLeft]: ( - - - - ), - [UiIcons.LayoutRight]: ( - - - - ), - [UiIcons.Legend]: ( - - - - ), - [UiIcons.Lightning]: ( - - - - ), - [UiIcons.Link]: ( - - - - - ), - [UiIcons.ListReportPage]: ( - - - - ), - [UiIcons.MainEntity]: ( - - - - ), - [UiIcons.MainEntitySmall]: ( - - - - - ), - [UiIcons.Manage]: ( - - - - - - - ), - [UiIcons.MeatballMenu]: ( - - - - ), - [UiIcons.MessageSent]: ( - - - - - ), - [UiIcons.Mission]: ( - - - - ), - [UiIcons.NoData]: ( - - - - - - - - - - - - ), - [UiIcons.NoResults]: ( - - - - - - - - ), - [UiIcons.NotEditable]: ( - - - - - ), - [UiIcons.ObjectPage]: ( - - - - ), - [UiIcons.OverviewPage]: ( - - - - ), - [UiIcons.PageLayout]: ( - - - - ), - [UiIcons.PageMap]: ( - - - - ), - [UiIcons.Preview]: ( - - - - ), - [UiIcons.ProjectValidation]: ( - - - - - - ), - [UiIcons.Pull]: ( - - - - - ), - [UiIcons.QuestionMark]: ( - - - - ), - [UiIcons.QuestionMarkWithChevron]: ( - - - - ), - [UiIcons.Redistribute]: ( - - - - ), - [UiIcons.Redo]: ( - - - - - - ), - [UiIcons.Refresh]: ( - - - - ), - [UiIcons.RefreshSmall]: ( - - - - ), - [UiIcons.RequestGuide]: ( - - - - - - - - ), - [UiIcons.Save]: ( - - - - ), - [UiIcons.SavePosition]: ( - - - - ), - [UiIcons.Search]: ( - - - - ), - [UiIcons.Sections]: ( - - - - ), - [UiIcons.ServiceManager]: ( - - - - - ), - [UiIcons.Settings]: ( - - - - - - ), - [UiIcons.SettingsHierarchy]: ( - - - - - - - - - - - ), - [UiIcons.SettingsWithChevron]: ( - - - - - - - ), - [UiIcons.Shape]: ( - - - - ), - [UiIcons.SidePanelRight]: ( - - - - ), - [UiIcons.Sparkles]: ( - - - - - ), - [UiIcons.Sort]: ( - - - - - - - - - ), - [UiIcons.Source]: ( - - - - ), - [UiIcons.Star]: ( - - - - ), - [UiIcons.StarActive]: ( - - - - ), - [UiIcons.Success]: ( - - - - ), - [UiIcons.Table]: ( - - - - ), - [UiIcons.Tags]: ( - - - - ), - [UiIcons.Task]: ( - - - - ), - [UiIcons.Terminal]: ( - - - - - - ), - [UiIcons.TestGuides]: ( - - - - - - - - ), - [UiIcons.ThumbsDown]: ( - - - - ), - [UiIcons.ThumbsUp]: ( - - - - ), - [UiIcons.ToTheTop]: ( - - - - ), - [UiIcons.TrashCan]: ( - - - - ), - [UiIcons.Ui5]: ( - - - - ), - [UiIcons.Undo]: ( - - - - - - ), - [UiIcons.Validate]: ( - - - - - - ), - [UiIcons.ValidateBig]: ( - - - - - - - ), - [UiIcons.ValidateError]: ( - - - - - - - ), - [UiIcons.ValidateInfo]: ( - - - - - - - ), - [UiIcons.ValidateWarning]: ( - - - - - - - ), - [UiIcons.ValueHelp]: ( - - - - - ), - [UiIcons.VerticalGrip]: ( - - - - ), - [UiIcons.ViewMockup]: ( - - - - ), - [UiIcons.Warning]: ( - - - - ), - [UiIcons.WarningBad]: ( - - - - - - - ), - [UiIcons.WarningSmall]: ( - - - - ), - [UiIcons.WorklistPage]: ( - - - - ), - [UiIcons.World]: ( - - - - ), - [UiIcons.WorldArrow]: ( - - - - - ), - [UiIcons.WorldWarning]: ( - - - - - ), - [UiIcons.ZoomIn]: ( - - - - ), - [UiIcons.ZoomOut]: ( - - - - ) - } - }); + registerIcons({ icons }); initializeIcons(undefined, { disableWarnings: true }); } diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 6d6069cd4f..78a5b9ded3 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -1,10 +1,12 @@ import React from 'react'; - +import ReactDOM from 'react-dom'; import type { IToggleProps, IToggleStyleProps, IToggleStyles } from '@fluentui/react'; import { Toggle } from '@fluentui/react'; import type { UIComponentMessagesProps } from '../../helper/ValidationMessage'; import { getMessageInfo, MessageWrapper } from '../../helper/ValidationMessage'; +import { UIIcon } from '../UIIcon'; +import { renderToStaticMarkup } from 'react-dom/server'; export interface UIToggleProps extends IToggleProps, UIComponentMessagesProps { inlineLabelLeft?: boolean; @@ -92,6 +94,7 @@ const COLORS = { * @extends {React.Component} */ export class UIToggle extends React.Component { + private toggleRootRef: React.RefObject; /** * Initializes component properties. * @@ -99,6 +102,20 @@ export class UIToggle extends React.Component { */ public constructor(props: UIToggleProps) { super(props); + this.toggleRootRef = React.createRef(); + } + componentDidMount() { + this.replaceThumbWithIcon(); + } + + replaceThumbWithIcon() { + if (this.toggleRootRef.current) { + const thumbElement = (this.toggleRootRef.current as HTMLElement)?.querySelector('.ms-Toggle-thumb'); + + if (thumbElement) { + ReactDOM.render(, thumbElement); + } + } } /** @@ -115,6 +132,23 @@ export class UIToggle extends React.Component { return undefined; } + svgToDataUri() { + const icon = ( + + + + ); + // const icon = icons[UiIcons.ConfirmationCheckSymbol] as React.ReactElement; + const svgString = renderToStaticMarkup(icon); + + console.log('svgString', icon, svgString, `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgString)}`); + return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgString)}`; + } + /** * @returns {JSX.Element} */ @@ -195,7 +229,7 @@ export class UIToggle extends React.Component { height: sizeInfo?.circle.height, width: sizeInfo?.circle.width, borderWidth: sizeInfo?.circle.borderWidth, - background: COLORS.thumb.background, + backgroundPosition: 'center', ':hover': { backgroundColor: COLORS.thumb.background } @@ -203,11 +237,16 @@ export class UIToggle extends React.Component { }; }; - const toogleComponent = ; + const toggleComponent = ( +
+ +
+ ); + return messageInfo.message ? ( - {toogleComponent} + {toggleComponent} ) : ( - toogleComponent + toggleComponent ); } } From b32d0209dffcd26fb25c0da64cd61e2ff783d335 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Wed, 11 Dec 2024 17:50:25 +0200 Subject: [PATCH 02/16] feat(ui-toggle): add icon support for toggle states Introduce on/off icons for the UIToggle component. Updated logic to dynamically render the correct icon based on toggle state and included new SCSS for styling. --- .../ui-components/src/components/Icons.tsx | 6 +++ .../src/components/UIToggle/UIToggle.scss | 16 +++++++ .../src/components/UIToggle/UIToggle.tsx | 43 ++++++++----------- 3 files changed, 41 insertions(+), 24 deletions(-) create mode 100644 packages/ui-components/src/components/UIToggle/UIToggle.scss diff --git a/packages/ui-components/src/components/Icons.tsx b/packages/ui-components/src/components/Icons.tsx index e29992c4b1..26621d4848 100644 --- a/packages/ui-components/src/components/Icons.tsx +++ b/packages/ui-components/src/components/Icons.tsx @@ -140,6 +140,7 @@ export enum UiIcons { Star = 'Star', StarActive = 'StarActive', Success = 'Success', + SwitchOff = 'SwitchOff', SwitchOn = 'SwitchOn', Table = 'Table', Tags = 'Tags', @@ -1864,6 +1865,11 @@ export const icons = { /> ), + [UiIcons.SwitchOff]: ( + + + + ), [UiIcons.SwitchOn]: ( diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.scss b/packages/ui-components/src/components/UIToggle/UIToggle.scss new file mode 100644 index 0000000000..8580a28c6d --- /dev/null +++ b/packages/ui-components/src/components/UIToggle/UIToggle.scss @@ -0,0 +1,16 @@ +.ms-Toggle-thumb { + width: 13px; + height: 13px; + .ts-icon { + position: relative; + top: -14px; + left: -3px; + &--on { + top: -14px; + } + + &--off { + top: -16px; + } + } +} diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 78a5b9ded3..f343ab37e5 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -6,7 +6,8 @@ import { Toggle } from '@fluentui/react'; import type { UIComponentMessagesProps } from '../../helper/ValidationMessage'; import { getMessageInfo, MessageWrapper } from '../../helper/ValidationMessage'; import { UIIcon } from '../UIIcon'; -import { renderToStaticMarkup } from 'react-dom/server'; + +import './UIToggle.scss'; export interface UIToggleProps extends IToggleProps, UIComponentMessagesProps { inlineLabelLeft?: boolean; @@ -103,17 +104,30 @@ export class UIToggle extends React.Component { public constructor(props: UIToggleProps) { super(props); this.toggleRootRef = React.createRef(); + this.handleChange = this.handleChange.bind(this); + this.replaceThumbWithIcon = this.replaceThumbWithIcon.bind(this); } + componentDidMount() { this.replaceThumbWithIcon(); } - replaceThumbWithIcon() { + handleChange(event: React.MouseEvent, checked?: boolean) { + this.replaceThumbWithIcon(checked); + this.props.onChange?.(event, checked); + } + + replaceThumbWithIcon(checked?: boolean) { + const isSwitchOn = checked ?? this.props.defaultChecked; if (this.toggleRootRef.current) { const thumbElement = (this.toggleRootRef.current as HTMLElement)?.querySelector('.ms-Toggle-thumb'); if (thumbElement) { - ReactDOM.render(, thumbElement); + const className = isSwitchOn ? 'ts-icon--on' : 'ts-icon--off'; + ReactDOM.render( + , + thumbElement + ); } } } @@ -132,23 +146,6 @@ export class UIToggle extends React.Component { return undefined; } - svgToDataUri() { - const icon = ( - - - - ); - // const icon = icons[UiIcons.ConfirmationCheckSymbol] as React.ReactElement; - const svgString = renderToStaticMarkup(icon); - - console.log('svgString', icon, svgString, `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgString)}`); - return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgString)}`; - } - /** * @returns {JSX.Element} */ @@ -230,16 +227,14 @@ export class UIToggle extends React.Component { width: sizeInfo?.circle.width, borderWidth: sizeInfo?.circle.borderWidth, backgroundPosition: 'center', - ':hover': { - backgroundColor: COLORS.thumb.background - } + backgroundColor: COLORS.thumb.background } }; }; const toggleComponent = (
- +
); From 11ca5fb35d5a2b9349f746295b85b8a8702fc7db Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Wed, 11 Dec 2024 17:59:25 +0200 Subject: [PATCH 03/16] feat: add customizable colors for switch icons Introduce theme-based colors for 'SwitchOn' and 'SwitchOff' icons using `COLORS.thumbOn` and `COLORS.thumbOff`. This allows the icons to adapt to the current theme, improving UI consistency and flexibility. --- packages/ui-components/src/components/Icons.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/components/Icons.tsx b/packages/ui-components/src/components/Icons.tsx index 26621d4848..d7f6cab79e 100644 --- a/packages/ui-components/src/components/Icons.tsx +++ b/packages/ui-components/src/components/Icons.tsx @@ -7,7 +7,9 @@ const COLORS = { warning: 'var(--vscode-notificationsWarningIcon-foreground)', error: 'var( --vscode-notificationsErrorIcon-foreground)', info: 'var(--vscode-notificationsInfoIcon-foreground)', - focus: 'var(--vscode-focusBorder)' + focus: 'var(--vscode-focusBorder)', + thumbOn: 'var(--vscode-button-background)', + thumbOff: 'var(--vscode-button-secondaryBackground)' }; export enum UiIcons { @@ -1867,12 +1869,12 @@ export const icons = { ), [UiIcons.SwitchOff]: ( - + ), [UiIcons.SwitchOn]: ( - + ), [UiIcons.Table]: ( From e6af4ed235cd83bdb885e2915c11cafb86533235 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Thu, 12 Dec 2024 14:36:56 +0200 Subject: [PATCH 04/16] refactor: remove UIToggle.scss and inline styles This removes the UIToggle.scss file and replaces its styles with inline styles in the component logic. The change simplifies style handling by consolidating them into the TypeScript file, reducing dependencies and ensuring better control over dynamic styling. --- .../src/components/UIToggle/UIToggle.scss | 16 ------- .../src/components/UIToggle/UIToggle.tsx | 48 +++++++++++++++++-- .../test/unit/components/UIToggle.test.tsx | 12 ++--- 3 files changed, 47 insertions(+), 29 deletions(-) delete mode 100644 packages/ui-components/src/components/UIToggle/UIToggle.scss diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.scss b/packages/ui-components/src/components/UIToggle/UIToggle.scss deleted file mode 100644 index 8580a28c6d..0000000000 --- a/packages/ui-components/src/components/UIToggle/UIToggle.scss +++ /dev/null @@ -1,16 +0,0 @@ -.ms-Toggle-thumb { - width: 13px; - height: 13px; - .ts-icon { - position: relative; - top: -14px; - left: -3px; - &--on { - top: -14px; - } - - &--off { - top: -16px; - } - } -} diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index f343ab37e5..54aea2d169 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -7,8 +7,6 @@ import type { UIComponentMessagesProps } from '../../helper/ValidationMessage'; import { getMessageInfo, MessageWrapper } from '../../helper/ValidationMessage'; import { UIIcon } from '../UIIcon'; -import './UIToggle.scss'; - export interface UIToggleProps extends IToggleProps, UIComponentMessagesProps { inlineLabelLeft?: boolean; labelFlexGrow?: boolean; @@ -58,6 +56,45 @@ const TOGGLE_SIZES = new Map([ ] ]); +const getIconStyleKey = (size: UIToggleSize, isSwitchOn: boolean): string => { + return `${size}-${isSwitchOn ? 'on' : 'off'}`; +}; + +const ICON_STYLE = new Map([ + [ + getIconStyleKey(UIToggleSize.Standard, true), + { + position: 'relative', + top: -14, + left: -3 + } + ], + [ + getIconStyleKey(UIToggleSize.Standard, false), + { + position: 'relative', + top: -17, + left: -4 + } + ], + [ + getIconStyleKey(UIToggleSize.Small, true), + { + position: 'relative', + top: -15, + left: -3 + } + ], + [ + getIconStyleKey(UIToggleSize.Small, false), + { + position: 'relative', + top: -17, + left: -4 + } + ] +]); + const DISABLED_OPACITY = 0.4; const COLORS = { @@ -118,14 +155,15 @@ export class UIToggle extends React.Component { } replaceThumbWithIcon(checked?: boolean) { - const isSwitchOn = checked ?? this.props.defaultChecked; + const isSwitchOn = checked ?? this.props.defaultChecked ?? false; if (this.toggleRootRef.current) { const thumbElement = (this.toggleRootRef.current as HTMLElement)?.querySelector('.ms-Toggle-thumb'); if (thumbElement) { - const className = isSwitchOn ? 'ts-icon--on' : 'ts-icon--off'; + const style = ICON_STYLE.get(getIconStyleKey(this.props.size ?? UIToggleSize.Standard, isSwitchOn)); + console.log(style); ReactDOM.render( - , + , thumbElement ); } diff --git a/packages/ui-components/test/unit/components/UIToggle.test.tsx b/packages/ui-components/test/unit/components/UIToggle.test.tsx index 1ac544c92f..ae35d4fa2e 100644 --- a/packages/ui-components/test/unit/components/UIToggle.test.tsx +++ b/packages/ui-components/test/unit/components/UIToggle.test.tsx @@ -103,10 +103,8 @@ describe('', () => { `); expect(styles.thumb).toMatchInlineSnapshot(` Object { - ":hover": Object { - "backgroundColor": "var(--vscode-button-foreground)", - }, - "background": "var(--vscode-button-foreground)", + "backgroundColor": "var(--vscode-button-foreground)", + "backgroundPosition": "center", "borderWidth": undefined, "height": undefined, "width": undefined, @@ -147,10 +145,8 @@ describe('', () => { `); expect(styles.thumb).toMatchInlineSnapshot(` Object { - ":hover": Object { - "backgroundColor": "var(--vscode-button-foreground)", - }, - "background": "var(--vscode-button-foreground)", + "backgroundColor": "var(--vscode-button-foreground)", + "backgroundPosition": "center", "borderWidth": undefined, "height": undefined, "width": undefined, From fa2dfd7ff88789ab23424f96da60028893524334 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Thu, 12 Dec 2024 15:31:18 +0200 Subject: [PATCH 05/16] fix(ui-toggle): standardize default styles for UIToggle Updated UIToggle to include consistent default styles for the 'Standard' size, including dimensions and padding. Updated related tests to reflect these changes and ensure correctness. Added JSDoc comments to improve method documentation. --- .../test/unit/components/UIToggle.test.tsx | 42 +++++++++++++------ 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/ui-components/test/unit/components/UIToggle.test.tsx b/packages/ui-components/test/unit/components/UIToggle.test.tsx index ae35d4fa2e..6047db8d9e 100644 --- a/packages/ui-components/test/unit/components/UIToggle.test.tsx +++ b/packages/ui-components/test/unit/components/UIToggle.test.tsx @@ -25,12 +25,30 @@ describe('', () => { { name: 'Standard', size: UIToggleSize.Standard, - expect: {} + expect: { + margin: '0', + fontSize: 13, + padding: '', + height: 18, + width: 30, + innerPadding: '0 2px', + thumbHeight: 14, + thumbWidth: 14 + } }, { name: 'Default', size: undefined, - expect: {} + expect: { + margin: '0', + fontSize: 13, + padding: '', + height: 18, + width: 30, + innerPadding: '0 2px', + thumbHeight: 14, + thumbWidth: 14 + } }, { name: 'Small', @@ -90,15 +108,15 @@ describe('', () => { "background": "var(--vscode-titleBar-inactiveForeground)", "borderColor": "var(--vscode-contrastBorder, transparent)", "borderStyle": "dashed", - "height": undefined, - "padding": undefined, + "height": 18, + "padding": "0 2px", "selectors": Object { ":focus::after": Object { "border": "none !important", "outline": "1px solid var(--vscode-focusBorder) !important", }, }, - "width": undefined, + "width": 30, } `); expect(styles.thumb).toMatchInlineSnapshot(` @@ -106,8 +124,8 @@ describe('', () => { "backgroundColor": "var(--vscode-button-foreground)", "backgroundPosition": "center", "borderWidth": undefined, - "height": undefined, - "width": undefined, + "height": 14, + "width": 14, } `); }); @@ -132,15 +150,15 @@ describe('', () => { "background": "var(--vscode-button-background)", "borderColor": "var(--vscode-contrastBorder, transparent)", "borderStyle": "solid", - "height": undefined, - "padding": undefined, + "height": 18, + "padding": "0 2px", "selectors": Object { ":focus::after": Object { "border": "none !important", "outline": "1px solid var(--vscode-focusBorder) !important", }, }, - "width": undefined, + "width": 30, } `); expect(styles.thumb).toMatchInlineSnapshot(` @@ -148,8 +166,8 @@ describe('', () => { "backgroundColor": "var(--vscode-button-foreground)", "backgroundPosition": "center", "borderWidth": undefined, - "height": undefined, - "width": undefined, + "height": 14, + "width": 14, } `); }); From 5b19a8c548346a4339dd28b9d606612da9164843 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Thu, 12 Dec 2024 15:31:39 +0200 Subject: [PATCH 06/16] refactor(ui-toggle): make size info properties optional Updated UIToggleSizeInfo properties to be optional for flexibility. Improved documentation by adding JSDoc comments for key methods. Removed a leftover console.log statement for cleaner code. --- .../src/components/UIToggle/UIToggle.tsx | 63 ++++++++++++++----- 1 file changed, 49 insertions(+), 14 deletions(-) diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 54aea2d169..3d87797aa8 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -20,22 +20,39 @@ export enum UIToggleSize { } interface UIToggleSizeInfo { - width: number; - height: number; - padding: string; - margin: string; + width?: number; + height?: number; + padding?: string; + margin?: string; label: { - fontSize: number; - padding: string; + fontSize?: number; + padding?: string; }; circle: { - width: number; - height: number; - borderWidth: number; + width?: number; + height?: number; + borderWidth?: number; }; } const TOGGLE_SIZES = new Map([ + [ + UIToggleSize.Standard, + { + width: 30, + height: 18, + padding: '0 2px', + margin: '0', + label: { + fontSize: 13, + padding: '' + }, + circle: { + width: 14, + height: 14 + } + } + ], [ UIToggleSize.Small, { @@ -65,16 +82,16 @@ const ICON_STYLE = new Map([ getIconStyleKey(UIToggleSize.Standard, true), { position: 'relative', - top: -14, - left: -3 + top: -13, + left: -2 } ], [ getIconStyleKey(UIToggleSize.Standard, false), { position: 'relative', - top: -17, - left: -4 + top: -16, + left: -3 } ], [ @@ -145,15 +162,34 @@ export class UIToggle extends React.Component { this.replaceThumbWithIcon = this.replaceThumbWithIcon.bind(this); } + /** + * Lifecycle method called immediately after a component is mounted. + * Executes initialization logic such as DOM manipulations or fetching data. + * + * @return {void} This method does not return a value. + */ componentDidMount() { this.replaceThumbWithIcon(); } + /** + * Handles the change event triggered by the user interaction. + * + * @param {React.MouseEvent} event - The mouse event object associated with the interaction. + * @param {boolean} [checked] - An optional parameter indicating the current state of the interaction. + * @return {void} This method does not return a value. + */ handleChange(event: React.MouseEvent, checked?: boolean) { this.replaceThumbWithIcon(checked); this.props.onChange?.(event, checked); } + /** + * Replaces the thumb element of a toggle switch with an icon based on the toggle's state. + * + * @param {boolean} [checked] Optional. Represents the state of the toggle switch. If not provided, it checks `defaultChecked` prop or defaults to `false`. + * @return {void} Does not return a value. + */ replaceThumbWithIcon(checked?: boolean) { const isSwitchOn = checked ?? this.props.defaultChecked ?? false; if (this.toggleRootRef.current) { @@ -161,7 +197,6 @@ export class UIToggle extends React.Component { if (thumbElement) { const style = ICON_STYLE.get(getIconStyleKey(this.props.size ?? UIToggleSize.Standard, isSwitchOn)); - console.log(style); ReactDOM.render( , thumbElement From 851b352f7fe6fb3c82b7780723606fbf32a0740d Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Thu, 12 Dec 2024 16:43:46 +0200 Subject: [PATCH 07/16] feat: add new SVG icons and enhance UIToggle component Introduced SwitchOff and SwitchOn SVG icons. Updated the UIToggle component to include visual indicators for switch status, improving the user interface clarity. --- .changeset/strong-badgers-cross.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/strong-badgers-cross.md diff --git a/.changeset/strong-badgers-cross.md b/.changeset/strong-badgers-cross.md new file mode 100644 index 0000000000..6593380d43 --- /dev/null +++ b/.changeset/strong-badgers-cross.md @@ -0,0 +1,6 @@ +--- +'@sap-ux/ui-components': minor +--- + +Added new SVG icons: SwitchOff and SwitchOn. +Enhanced the UIToggle component by adding visual indicators to display the switch status. From e7149d3172d98eadc05b943fc82614253902dccb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 12 Dec 2024 14:51:56 +0000 Subject: [PATCH 08/16] Linting auto fix commit --- packages/ui-components/src/components/UIToggle/UIToggle.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 3d87797aa8..827e9e39da 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -166,7 +166,7 @@ export class UIToggle extends React.Component { * Lifecycle method called immediately after a component is mounted. * Executes initialization logic such as DOM manipulations or fetching data. * - * @return {void} This method does not return a value. + * @returns {void} This method does not return a value. */ componentDidMount() { this.replaceThumbWithIcon(); @@ -177,7 +177,7 @@ export class UIToggle extends React.Component { * * @param {React.MouseEvent} event - The mouse event object associated with the interaction. * @param {boolean} [checked] - An optional parameter indicating the current state of the interaction. - * @return {void} This method does not return a value. + * @returns {void} This method does not return a value. */ handleChange(event: React.MouseEvent, checked?: boolean) { this.replaceThumbWithIcon(checked); @@ -188,7 +188,7 @@ export class UIToggle extends React.Component { * Replaces the thumb element of a toggle switch with an icon based on the toggle's state. * * @param {boolean} [checked] Optional. Represents the state of the toggle switch. If not provided, it checks `defaultChecked` prop or defaults to `false`. - * @return {void} Does not return a value. + * @returns {void} Does not return a value. */ replaceThumbWithIcon(checked?: boolean) { const isSwitchOn = checked ?? this.props.defaultChecked ?? false; From f0e57f9286b496503bfb23c8b6f9d8b05c08843c Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Thu, 12 Dec 2024 17:05:39 +0200 Subject: [PATCH 09/16] refactor: remove unused icon definitions in Icons.tsx Removed over 2000 lines of unused or outdated icon definitions from the Icons.tsx file to improve maintainability and reduce code bloat. These icons were no longer being used across the project, and their removal cleans up the codebase. --- .../ui-components/src/components/Icons.tsx | 4180 +++++++++-------- 1 file changed, 2100 insertions(+), 2080 deletions(-) diff --git a/packages/ui-components/src/components/Icons.tsx b/packages/ui-components/src/components/Icons.tsx index d7f6cab79e..7cd8d358eb 100644 --- a/packages/ui-components/src/components/Icons.tsx +++ b/packages/ui-components/src/components/Icons.tsx @@ -173,2087 +173,2107 @@ export enum UiIcons { ZoomIn = 'ZoomIn', ZoomOut = 'ZoomOut' } -export const icons = { - [UiIcons.Add]: ( - - - - ), - [UiIcons.AddNewRow]: ( - - - - - - - - ), - [UiIcons.Advanced]: ( - - - - - - - - - - - ), - [UiIcons.AnalyticalListPage]: ( - - - - ), - [UiIcons.Annotation]: ( - - - - ), - [UiIcons.AnnotationModeler]: ( - - - - ), - [UiIcons.ArrowLeft]: ( - - - - ), - [UiIcons.ArrowRight]: ( - - - - ), - [UiIcons.ArrowUp]: ( - - - - ), - [UiIcons.ArrowDown]: ( - - - - ), - [UiIcons.Association]: ( - - - - ), - [UiIcons.Beginner]: ( - - - - ), - [UiIcons.BookBookmark]: ( - - - - ), - [UiIcons.Bulb]: ( - - - - ), - [UiIcons.Chart]: ( - - - - - - - - - - ), - [UiIcons.ChatBubbles]: ( - - - - - ), - [UiIcons.Calendar]: ( - - - - - - - - - - - - - - ), - [UiIcons.Chevron]: ( - - - - ), - [UiIcons.ChevronDown]: ( - - - - ), - [UiIcons.Clear]: ( - - - - ), - [UiIcons.Cleanup]: ( - - - - ), - [UiIcons.ClockLong]: ( - - - - - - - - - - - ), - [UiIcons.ClockMedium]: ( - - - - - - - - - - - - - ), - [UiIcons.ClockShort]: ( - - - - - - - - - - - - - - ), - [UiIcons.Close]: ( - - - - ), - [UiIcons.Code]: ( - - - - - - ), - [UiIcons.CodeSnippet]: ( - - - - ), - [UiIcons.ContractNodes]: ( - - - - - - - ), - [UiIcons.ContractNodesSmall]: ( - - - - - - - ), - [UiIcons.Copy]: ( - - - - ), - [UiIcons.CopyToClipboard]: ( - - - - - - ), - [UiIcons.CopyToClipboardLong]: ( - - - - - - - - - ), - [UiIcons.CollapseGroup]: ( - - - - - ), - [UiIcons.Columns]: ( - - - - ), - [UiIcons.ComplexType]: ( - - - - - ), - [UiIcons.ComplexTypeSmall]: ( - - - - - ), - [UiIcons.ConfirmationCheckSymbol]: ( - - - - ), - [UiIcons.CreateMockData]: ( - - - - ), - [UiIcons.CustomPage]: ( - - - - ), - [UiIcons.CustomFPMPage]: ( - - - - - - - - ), - [UiIcons.Data]: ( - - - - ), - [UiIcons.DataSource]: ( - - - - - - - - ), - [UiIcons.Edit]: ( - - - - ), - [UiIcons.Error]: ( - - - - ), - [UiIcons.Export]: ( - - - - - - ), - [UiIcons.ExpandGroup]: ( - - - - - ), - [UiIcons.ExpandNodes]: ( - - - - - - - - ), - [UiIcons.Eye]: ( - - - - ), - [UiIcons.Featured]: ( - - - - ), - [UiIcons.File]: ( - - - - ), - [UiIcons.FileImage]: ( - - - - - - ), - [UiIcons.FileVector]: ( - - - - - ), - [UiIcons.Filter]: ( - - - - ), - [UiIcons.FilterWithChevron]: ( - - - - ), - [UiIcons.Folder]: ( - - - - ), - [UiIcons.FolderOpened]: ( - - - - ), - [UiIcons.Footer]: ( - - - - ), - [UiIcons.ForeignKey]: ( - - - - - - ), - [UiIcons.ForeignKeySmall]: ( - - - - - ), - [UiIcons.FullscreenExpand]: ( - - - - - - ), - [UiIcons.FullscreenCollapse]: ( - - - - - - ), - [UiIcons.Ghost]: ( - - - - - - - ), - [UiIcons.GoLeft]: ( - - - - ), - [UiIcons.GoRight]: ( - - - - ), - [UiIcons.GoToKey]: ( - - - - - - - - - - ), - [UiIcons.GuidedDevelopment]: ( - - - - ), - [UiIcons.GuidedAnswers]: ( - - - - - ), - [UiIcons.Grabber]: ( - - - - - ), - [UiIcons.Graduate]: ( - - - - ), - [UiIcons.Header]: ( - - - - ), - [UiIcons.HelpAction]: ( - - - - - ), - [UiIcons.HideSmall]: ( - - - - - - ), - [UiIcons.Highlighter]: ( - - - - ), - [UiIcons.History]: ( - - - - - ), - [UiIcons.Home]: ( - - - - ), - [UiIcons.IdTag]: ( - - - - - - - - - ), - [UiIcons.Info]: ( - - - - - ), - [UiIcons.InfoBlue]: ( - - - - ), - [UiIcons.InfoWithChevron]: ( - - - - ), - [UiIcons.Intermediate]: ( - - - - ), - [UiIcons.Key]: ( - - - - ), - [UiIcons.KeySmall]: ( - - - - - ), - [UiIcons.Layout]: ( - - - - ), - [UiIcons.LayoutCentre]: ( - - - - ), - [UiIcons.LayoutLeft]: ( - - - - ), - [UiIcons.LayoutRight]: ( - - - - ), - [UiIcons.Legend]: ( - - - - ), - [UiIcons.Lightning]: ( - - - - ), - [UiIcons.Link]: ( - - - - - ), - [UiIcons.ListReportPage]: ( - - - - ), - [UiIcons.MainEntity]: ( - - - - ), - [UiIcons.MainEntitySmall]: ( - - - - - ), - [UiIcons.Manage]: ( - - - - - - - ), - [UiIcons.MeatballMenu]: ( - - - - ), - [UiIcons.MessageSent]: ( - - - - - ), - [UiIcons.Mission]: ( - - - - ), - [UiIcons.NoData]: ( - - - - - - - - - - - - ), - [UiIcons.NoResults]: ( - - - - - - - - ), - [UiIcons.NotEditable]: ( - - - - - ), - [UiIcons.ObjectPage]: ( - - - - ), - [UiIcons.OverviewPage]: ( - - - - ), - [UiIcons.PageLayout]: ( - - - - ), - [UiIcons.PageMap]: ( - - - - ), - [UiIcons.Preview]: ( - - - - ), - [UiIcons.ProjectValidation]: ( - - - - - - ), - [UiIcons.Pull]: ( - - - - - ), - [UiIcons.QuestionMark]: ( - - - - ), - [UiIcons.QuestionMarkWithChevron]: ( - - - - ), - [UiIcons.Redistribute]: ( - - - - ), - [UiIcons.Redo]: ( - - - - - - ), - [UiIcons.Refresh]: ( - - - - ), - [UiIcons.RefreshSmall]: ( - - - - ), - [UiIcons.RequestGuide]: ( - - - - - - - - ), - [UiIcons.Save]: ( - - - - ), - [UiIcons.SavePosition]: ( - - - - ), - [UiIcons.Search]: ( - - - - ), - [UiIcons.Sections]: ( - - - - ), - [UiIcons.ServiceManager]: ( - - - - - ), - [UiIcons.Settings]: ( - - - - - - ), - [UiIcons.SettingsHierarchy]: ( - - - - - - - - - - - ), - [UiIcons.SettingsWithChevron]: ( - - - - - - - ), - [UiIcons.Shape]: ( - - - - ), - [UiIcons.SidePanelRight]: ( - - - - ), - [UiIcons.Sparkles]: ( - - - - - ), - [UiIcons.Sort]: ( - - - - - - - - - ), - [UiIcons.Source]: ( - - - - ), - [UiIcons.Star]: ( - - - - ), - [UiIcons.StarActive]: ( - - - - ), - [UiIcons.Success]: ( - - - - ), - [UiIcons.SwitchOff]: ( - - - - ), - [UiIcons.SwitchOn]: ( - - - - ), - [UiIcons.Table]: ( - - - - ), - [UiIcons.Tags]: ( - - - - ), - [UiIcons.Task]: ( - - - - ), - [UiIcons.Terminal]: ( - - - - - - ), - [UiIcons.TestGuides]: ( - - - - - - - - ), - [UiIcons.ThumbsDown]: ( - - - - ), - [UiIcons.ThumbsUp]: ( - - - - ), - [UiIcons.ToTheTop]: ( - - - - ), - [UiIcons.TrashCan]: ( - - - - ), - [UiIcons.Ui5]: ( - - - - ), - [UiIcons.Undo]: ( - - - - - - ), - [UiIcons.Validate]: ( - - - - - - ), - [UiIcons.ValidateBig]: ( - - - - - - - ), - [UiIcons.ValidateError]: ( - - - - - - - ), - [UiIcons.ValidateInfo]: ( - - - - - - - ), - [UiIcons.ValidateWarning]: ( - - - - - - - ), - [UiIcons.ValueHelp]: ( - - - - - ), - [UiIcons.VerticalGrip]: ( - - - - ), - [UiIcons.ViewMockup]: ( - - - - ), - [UiIcons.Warning]: ( - - - - ), - [UiIcons.WarningBad]: ( - - - - - - - ), - [UiIcons.WarningSmall]: ( - - - - ), - [UiIcons.WorklistPage]: ( - - - - ), - [UiIcons.World]: ( - - - - ), - [UiIcons.WorldArrow]: ( - - - - - ), - [UiIcons.WorldWarning]: ( - - - - - ), - [UiIcons.ZoomIn]: ( - - - - ), - [UiIcons.ZoomOut]: ( - - - - ) -}; + export function initIcons(): void { - registerIcons({ icons }); + registerIcons({ + icons: { + [UiIcons.Add]: ( + + + + ), + [UiIcons.AddNewRow]: ( + + + + + + + + ), + [UiIcons.Advanced]: ( + + + + + + + + + + + ), + [UiIcons.AnalyticalListPage]: ( + + + + ), + [UiIcons.Annotation]: ( + + + + ), + [UiIcons.AnnotationModeler]: ( + + + + ), + [UiIcons.ArrowLeft]: ( + + + + ), + [UiIcons.ArrowRight]: ( + + + + ), + [UiIcons.ArrowUp]: ( + + + + ), + [UiIcons.ArrowDown]: ( + + + + ), + [UiIcons.Association]: ( + + + + ), + [UiIcons.Beginner]: ( + + + + ), + [UiIcons.BookBookmark]: ( + + + + ), + [UiIcons.Bulb]: ( + + + + ), + [UiIcons.Chart]: ( + + + + + + + + + + ), + [UiIcons.ChatBubbles]: ( + + + + + ), + [UiIcons.Calendar]: ( + + + + + + + + + + + + + + ), + [UiIcons.Chevron]: ( + + + + ), + [UiIcons.ChevronDown]: ( + + + + ), + [UiIcons.Clear]: ( + + + + ), + [UiIcons.Cleanup]: ( + + + + ), + [UiIcons.ClockLong]: ( + + + + + + + + + + + ), + [UiIcons.ClockMedium]: ( + + + + + + + + + + + + + ), + [UiIcons.ClockShort]: ( + + + + + + + + + + + + + + ), + [UiIcons.Close]: ( + + + + ), + [UiIcons.Code]: ( + + + + + + ), + [UiIcons.CodeSnippet]: ( + + + + ), + [UiIcons.ContractNodes]: ( + + + + + + + ), + [UiIcons.ContractNodesSmall]: ( + + + + + + + ), + [UiIcons.Copy]: ( + + + + ), + [UiIcons.CopyToClipboard]: ( + + + + + + ), + [UiIcons.CopyToClipboardLong]: ( + + + + + + + + + ), + [UiIcons.CollapseGroup]: ( + + + + + ), + [UiIcons.Columns]: ( + + + + ), + [UiIcons.ComplexType]: ( + + + + + ), + [UiIcons.ComplexTypeSmall]: ( + + + + + ), + [UiIcons.ConfirmationCheckSymbol]: ( + + + + ), + [UiIcons.CreateMockData]: ( + + + + ), + [UiIcons.CustomPage]: ( + + + + ), + [UiIcons.CustomFPMPage]: ( + + + + + + + + ), + [UiIcons.Data]: ( + + + + ), + [UiIcons.DataSource]: ( + + + + + + + + ), + [UiIcons.Edit]: ( + + + + ), + [UiIcons.Error]: ( + + + + ), + [UiIcons.Export]: ( + + + + + + ), + [UiIcons.ExpandGroup]: ( + + + + + ), + [UiIcons.ExpandNodes]: ( + + + + + + + + ), + [UiIcons.Eye]: ( + + + + ), + [UiIcons.Featured]: ( + + + + ), + [UiIcons.File]: ( + + + + ), + [UiIcons.FileImage]: ( + + + + + + ), + [UiIcons.FileVector]: ( + + + + + ), + [UiIcons.Filter]: ( + + + + ), + [UiIcons.FilterWithChevron]: ( + + + + ), + [UiIcons.Folder]: ( + + + + ), + [UiIcons.FolderOpened]: ( + + + + ), + [UiIcons.Footer]: ( + + + + ), + [UiIcons.ForeignKey]: ( + + + + + + ), + [UiIcons.ForeignKeySmall]: ( + + + + + ), + [UiIcons.FullscreenExpand]: ( + + + + + + ), + [UiIcons.FullscreenCollapse]: ( + + + + + + ), + [UiIcons.Ghost]: ( + + + + + + + ), + [UiIcons.GoLeft]: ( + + + + ), + [UiIcons.GoRight]: ( + + + + ), + [UiIcons.GoToKey]: ( + + + + + + + + + + ), + [UiIcons.GuidedDevelopment]: ( + + + + ), + [UiIcons.GuidedAnswers]: ( + + + + + ), + [UiIcons.Grabber]: ( + + + + + ), + [UiIcons.Graduate]: ( + + + + ), + [UiIcons.Header]: ( + + + + ), + [UiIcons.HelpAction]: ( + + + + + ), + [UiIcons.HideSmall]: ( + + + + + + ), + [UiIcons.Highlighter]: ( + + + + ), + [UiIcons.History]: ( + + + + + ), + [UiIcons.Home]: ( + + + + ), + [UiIcons.IdTag]: ( + + + + + + + + + ), + [UiIcons.Info]: ( + + + + + ), + [UiIcons.InfoBlue]: ( + + + + ), + [UiIcons.InfoWithChevron]: ( + + + + ), + [UiIcons.Intermediate]: ( + + + + ), + [UiIcons.Key]: ( + + + + ), + [UiIcons.KeySmall]: ( + + + + + ), + [UiIcons.Layout]: ( + + + + ), + [UiIcons.LayoutCentre]: ( + + + + ), + [UiIcons.LayoutLeft]: ( + + + + ), + [UiIcons.LayoutRight]: ( + + + + ), + [UiIcons.Legend]: ( + + + + ), + [UiIcons.Lightning]: ( + + + + ), + [UiIcons.Link]: ( + + + + + ), + [UiIcons.ListReportPage]: ( + + + + ), + [UiIcons.MainEntity]: ( + + + + ), + [UiIcons.MainEntitySmall]: ( + + + + + ), + [UiIcons.Manage]: ( + + + + + + + ), + [UiIcons.MeatballMenu]: ( + + + + ), + [UiIcons.MessageSent]: ( + + + + + ), + [UiIcons.Mission]: ( + + + + ), + [UiIcons.NoData]: ( + + + + + + + + + + + + ), + [UiIcons.NoResults]: ( + + + + + + + + ), + [UiIcons.NotEditable]: ( + + + + + ), + [UiIcons.ObjectPage]: ( + + + + ), + [UiIcons.OverviewPage]: ( + + + + ), + [UiIcons.PageLayout]: ( + + + + ), + [UiIcons.PageMap]: ( + + + + ), + [UiIcons.Preview]: ( + + + + ), + [UiIcons.ProjectValidation]: ( + + + + + + ), + [UiIcons.Pull]: ( + + + + + ), + [UiIcons.QuestionMark]: ( + + + + ), + [UiIcons.QuestionMarkWithChevron]: ( + + + + ), + [UiIcons.Redistribute]: ( + + + + ), + [UiIcons.Redo]: ( + + + + + + ), + [UiIcons.Refresh]: ( + + + + ), + [UiIcons.RefreshSmall]: ( + + + + ), + [UiIcons.RequestGuide]: ( + + + + + + + + ), + [UiIcons.Save]: ( + + + + ), + [UiIcons.SavePosition]: ( + + + + ), + [UiIcons.Search]: ( + + + + ), + [UiIcons.Sections]: ( + + + + ), + [UiIcons.ServiceManager]: ( + + + + + ), + [UiIcons.Settings]: ( + + + + + + ), + [UiIcons.SettingsHierarchy]: ( + + + + + + + + + + + ), + [UiIcons.SettingsWithChevron]: ( + + + + + + + ), + [UiIcons.Shape]: ( + + + + ), + [UiIcons.SidePanelRight]: ( + + + + ), + [UiIcons.Sparkles]: ( + + + + + ), + [UiIcons.Sort]: ( + + + + + + + + + ), + [UiIcons.Source]: ( + + + + ), + [UiIcons.Star]: ( + + + + ), + [UiIcons.StarActive]: ( + + + + ), + [UiIcons.Success]: ( + + + + ), + [UiIcons.SwitchOff]: ( + + + + ), + [UiIcons.SwitchOn]: ( + + + + ), + [UiIcons.Table]: ( + + + + ), + [UiIcons.Tags]: ( + + + + ), + [UiIcons.Task]: ( + + + + ), + [UiIcons.Terminal]: ( + + + + + + ), + [UiIcons.TestGuides]: ( + + + + + + + + ), + [UiIcons.ThumbsDown]: ( + + + + ), + [UiIcons.ThumbsUp]: ( + + + + ), + [UiIcons.ToTheTop]: ( + + + + ), + [UiIcons.TrashCan]: ( + + + + ), + [UiIcons.Ui5]: ( + + + + ), + [UiIcons.Undo]: ( + + + + + + ), + [UiIcons.Validate]: ( + + + + + + ), + [UiIcons.ValidateBig]: ( + + + + + + + ), + [UiIcons.ValidateError]: ( + + + + + + + ), + [UiIcons.ValidateInfo]: ( + + + + + + + ), + [UiIcons.ValidateWarning]: ( + + + + + + + ), + [UiIcons.ValueHelp]: ( + + + + + ), + [UiIcons.VerticalGrip]: ( + + + + ), + [UiIcons.ViewMockup]: ( + + + + ), + [UiIcons.Warning]: ( + + + + ), + [UiIcons.WarningBad]: ( + + + + + + + ), + [UiIcons.WarningSmall]: ( + + + + ), + [UiIcons.WorklistPage]: ( + + + + ), + [UiIcons.World]: ( + + + + ), + [UiIcons.WorldArrow]: ( + + + + + ), + [UiIcons.WorldWarning]: ( + + + + + ), + [UiIcons.ZoomIn]: ( + + + + ), + [UiIcons.ZoomOut]: ( + + + + ) + } + }); initializeIcons(undefined, { disableWarnings: true }); } From 764ca0ac0bc4a18f281df9ad8754644fdae54853 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Fri, 13 Dec 2024 14:03:05 +0200 Subject: [PATCH 10/16] feat(ui-toggle): update styles for hover and focus states Refined hover and focus styles for UIToggle component, improving visual consistency by aligning with updated design tokens. Updated color variables and positioning, introduced cleaner styles for checked/unchecked states, and unified border behavior. --- .../ui-components/src/components/Icons.tsx | 4 +- .../src/components/UIToggle/UIToggle.tsx | 75 ++++++++++++------- .../ui-components/stories/UIToggle.story.tsx | 3 + 3 files changed, 54 insertions(+), 28 deletions(-) diff --git a/packages/ui-components/src/components/Icons.tsx b/packages/ui-components/src/components/Icons.tsx index 7cd8d358eb..dee477b143 100644 --- a/packages/ui-components/src/components/Icons.tsx +++ b/packages/ui-components/src/components/Icons.tsx @@ -8,8 +8,8 @@ const COLORS = { error: 'var( --vscode-notificationsErrorIcon-foreground)', info: 'var(--vscode-notificationsInfoIcon-foreground)', focus: 'var(--vscode-focusBorder)', - thumbOn: 'var(--vscode-button-background)', - thumbOff: 'var(--vscode-button-secondaryBackground)' + thumbOn: 'var(--vscode-button-foreground)', + thumbOff: 'var(--vscode-button-secondaryForeground)' }; export enum UiIcons { diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 827e9e39da..ee3f07ac7b 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -49,7 +49,8 @@ const TOGGLE_SIZES = new Map([ }, circle: { width: 14, - height: 14 + height: 14, + borderWidth: 1 } } ], @@ -67,7 +68,7 @@ const TOGGLE_SIZES = new Map([ circle: { width: 10, height: 10, - borderWidth: 5 + borderWidth: 1 } } ] @@ -82,32 +83,32 @@ const ICON_STYLE = new Map([ getIconStyleKey(UIToggleSize.Standard, true), { position: 'relative', - top: -13, - left: -2 + top: -9, + left: 0 } ], [ getIconStyleKey(UIToggleSize.Standard, false), { position: 'relative', - top: -16, - left: -3 + top: -11, + left: 0 } ], [ getIconStyleKey(UIToggleSize.Small, true), { position: 'relative', - top: -15, - left: -3 + top: -11, + left: 0 } ], [ getIconStyleKey(UIToggleSize.Small, false), { position: 'relative', - top: -17, - left: -4 + top: -13, + left: 0 } ] ]); @@ -116,19 +117,19 @@ const DISABLED_OPACITY = 0.4; const COLORS = { pill: { - borderColor: 'var(--vscode-contrastBorder, transparent)', + borderColor: 'var(--vscode-editorWidget-border)', unchecked: { - background: 'var(--vscode-titleBar-inactiveForeground)', + background: 'var(--vscode-editorWidget-background)', hover: { - background: 'var(--vscode-editorHint-foreground)', - borderColor: 'var(--vscode-contrastActiveBorder, transparent)' + background: 'var(--vscode-editorWidget-background)', + borderColor: 'var(--vscode-editorWidget-border)' } }, checked: { - background: 'var(--vscode-button-background)', + background: 'var(--vscode-editorWidget-background)', hover: { - background: 'var(--vscode-button-hoverBackground)', - borderColor: 'var(--vscode-contrastActiveBorder, transparent)' + background: 'var(--vscode-editorWidget-background)', + borderColor: 'var(--vscode-editorWidget-border)' } }, focus: { @@ -136,7 +137,22 @@ const COLORS = { } }, thumb: { - background: 'var(--vscode-button-foreground)' + unchecked: { + background: 'var(--vscode-button-secondaryBackground)', + borderColor: 'var(--vscode-button-border)', + hover: { + borderColor: 'var(--vscode-button-border)', + background: 'var(--vscode-button-secondaryHoverBackground)' + } + }, + checked: { + background: 'var(--vscode-button-background)', + borderColor: 'var(--vscode-button-border)', + hover: { + borderColor: 'var(--vscode-button-border)', + background: 'var(--vscode-button-hoverBackground)' + } + } } }; @@ -263,9 +279,6 @@ export class UIToggle extends React.Component { background: COLORS.pill.checked.hover.background, borderColor: COLORS.pill.checked.hover.borderColor }, - [`:hover .ms-Toggle-thumb`]: { - backgroundColor: COLORS.thumb.background - }, ':disabled': { background: COLORS.pill.checked.background, borderColor: COLORS.pill.borderColor, @@ -273,14 +286,11 @@ export class UIToggle extends React.Component { }, ...(!styleProps.checked && { background: COLORS.pill.unchecked.background, - borderStyle: 'dashed', + borderStyle: 'solid', ':hover': { background: COLORS.pill.unchecked.hover.background, borderColor: COLORS.pill.unchecked.hover.borderColor }, - [`:hover .ms-Toggle-thumb`]: { - backgroundColor: COLORS.thumb.background - }, ':disabled': { background: COLORS.pill.unchecked.background, borderColor: COLORS.pill.borderColor, @@ -300,7 +310,20 @@ export class UIToggle extends React.Component { width: sizeInfo?.circle.width, borderWidth: sizeInfo?.circle.borderWidth, backgroundPosition: 'center', - backgroundColor: COLORS.thumb.background + borderColor: COLORS.thumb.checked.borderColor, + backgroundColor: COLORS.thumb.checked.background, + ':hover': { + backgroundColor: COLORS.thumb.checked.hover.background, + borderColor: COLORS.thumb.checked.hover.borderColor + }, + ...(!styleProps.checked && { + borderColor: COLORS.thumb.unchecked.borderColor, + backgroundColor: COLORS.thumb.unchecked.background, + ':hover': { + backgroundColor: COLORS.thumb.unchecked.hover.background, + borderColor: COLORS.thumb.unchecked.hover.borderColor + } + }) } }; }; diff --git a/packages/ui-components/stories/UIToggle.story.tsx b/packages/ui-components/stories/UIToggle.story.tsx index abae50ea84..af84b78493 100644 --- a/packages/ui-components/stories/UIToggle.story.tsx +++ b/packages/ui-components/stories/UIToggle.story.tsx @@ -6,6 +6,9 @@ import { UIToggle, UIToggleSize } from '../src/components/UIToggle'; export default { title: 'Basic Inputs/Toggle/Buttons' }; const stackTokens: IStackTokens = { childrenGap: 40 }; +localStorage.setItem('tsStorybookThemeCss', 'vscode-light.css'); +// localStorage.setItem('tsStorybookThemeCss', 'vscode-dark.css'); +// localStorage.setItem('tsStorybookThemeCss', 'vscode-hcb.css'); export const defaultUsage = (): JSX.Element => { return ( From b0e966b2788d95cd2a0bf169ab553064c6f54031 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Fri, 13 Dec 2024 15:10:33 +0200 Subject: [PATCH 11/16] fix(ui-toggle): improve hover styles and theme handling Refined hover styles for both checked and unchecked toggle states, ensuring proper application of colors and borders. Added fallback to `contrast` variables for better theme compatibility. Removed redundant localStorage theme settings in stories. --- .../src/components/UIToggle/UIToggle.tsx | 22 ++++++++++--------- .../ui-components/stories/UIToggle.story.tsx | 3 --- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index ee3f07ac7b..30e4c60bda 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -142,15 +142,15 @@ const COLORS = { borderColor: 'var(--vscode-button-border)', hover: { borderColor: 'var(--vscode-button-border)', - background: 'var(--vscode-button-secondaryHoverBackground)' + background: 'var(--vscode-contrastBorder, var(--vscode-button-secondaryHoverBackground))' } }, checked: { background: 'var(--vscode-button-background)', - borderColor: 'var(--vscode-button-border)', + borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border))', hover: { - borderColor: 'var(--vscode-button-border)', - background: 'var(--vscode-button-hoverBackground)' + borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border))', + background: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))' } } } @@ -287,6 +287,12 @@ export class UIToggle extends React.Component { ...(!styleProps.checked && { background: COLORS.pill.unchecked.background, borderStyle: 'solid', + // This is a bug: the best implementation approach is to set hover styles in the "thumb" section. + // However, the hover styles for the unchecked thumb don't work properly + ':hover .ms-Toggle-thumb': { + background: COLORS.thumb.unchecked.hover.background, + borderColor: COLORS.thumb.unchecked.hover.borderColor + }, ':hover': { background: COLORS.pill.unchecked.hover.background, borderColor: COLORS.pill.unchecked.hover.borderColor @@ -313,16 +319,12 @@ export class UIToggle extends React.Component { borderColor: COLORS.thumb.checked.borderColor, backgroundColor: COLORS.thumb.checked.background, ':hover': { - backgroundColor: COLORS.thumb.checked.hover.background, + background: COLORS.thumb.checked.hover.background, borderColor: COLORS.thumb.checked.hover.borderColor }, ...(!styleProps.checked && { borderColor: COLORS.thumb.unchecked.borderColor, - backgroundColor: COLORS.thumb.unchecked.background, - ':hover': { - backgroundColor: COLORS.thumb.unchecked.hover.background, - borderColor: COLORS.thumb.unchecked.hover.borderColor - } + backgroundColor: COLORS.thumb.unchecked.background }) } }; diff --git a/packages/ui-components/stories/UIToggle.story.tsx b/packages/ui-components/stories/UIToggle.story.tsx index af84b78493..abae50ea84 100644 --- a/packages/ui-components/stories/UIToggle.story.tsx +++ b/packages/ui-components/stories/UIToggle.story.tsx @@ -6,9 +6,6 @@ import { UIToggle, UIToggleSize } from '../src/components/UIToggle'; export default { title: 'Basic Inputs/Toggle/Buttons' }; const stackTokens: IStackTokens = { childrenGap: 40 }; -localStorage.setItem('tsStorybookThemeCss', 'vscode-light.css'); -// localStorage.setItem('tsStorybookThemeCss', 'vscode-dark.css'); -// localStorage.setItem('tsStorybookThemeCss', 'vscode-hcb.css'); export const defaultUsage = (): JSX.Element => { return ( From f8fc016f28f6b75710dad46077163e9a97c70dec Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Fri, 13 Dec 2024 17:10:05 +0200 Subject: [PATCH 12/16] fix: update UIToggle styles for consistency and clarity Adjusted UIToggle component styles to improve visual consistency, aligning with updated design tokens. Modified border widths, hover, and disabled states for both toggles and thumbs, ensuring they match the latest design guidelines. --- .../test/unit/components/UIToggle.test.tsx | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/packages/ui-components/test/unit/components/UIToggle.test.tsx b/packages/ui-components/test/unit/components/UIToggle.test.tsx index 6047db8d9e..5c8c687930 100644 --- a/packages/ui-components/test/unit/components/UIToggle.test.tsx +++ b/packages/ui-components/test/unit/components/UIToggle.test.tsx @@ -33,7 +33,8 @@ describe('', () => { width: 30, innerPadding: '0 2px', thumbHeight: 14, - thumbWidth: 14 + thumbWidth: 14, + borderWidth: 1 } }, { @@ -47,7 +48,8 @@ describe('', () => { width: 30, innerPadding: '0 2px', thumbHeight: 14, - thumbWidth: 14 + thumbWidth: 14, + borderWidth: 1 } }, { @@ -62,7 +64,7 @@ describe('', () => { innerPadding: '0 2px', thumbHeight: 10, thumbWidth: 10, - borderWidth: 5 + borderWidth: 1 } } ]; @@ -94,20 +96,21 @@ describe('', () => { expect(styles.pill).toMatchInlineSnapshot(` Object { ":disabled": Object { - "background": "var(--vscode-titleBar-inactiveForeground)", - "borderColor": "var(--vscode-contrastBorder, transparent)", + "background": "var(--vscode-editorWidget-background)", + "borderColor": "var(--vscode-editorWidget-border)", "opacity": 0.4, }, ":hover": Object { - "background": "var(--vscode-editorHint-foreground)", - "borderColor": "var(--vscode-contrastActiveBorder, transparent)", + "background": "var(--vscode-editorWidget-background)", + "borderColor": "var(--vscode-editorWidget-border)", }, ":hover .ms-Toggle-thumb": Object { - "backgroundColor": "var(--vscode-button-foreground)", + "background": "var(--vscode-contrastBorder, var(--vscode-button-secondaryHoverBackground))", + "borderColor": "var(--vscode-button-border)", }, - "background": "var(--vscode-titleBar-inactiveForeground)", - "borderColor": "var(--vscode-contrastBorder, transparent)", - "borderStyle": "dashed", + "background": "var(--vscode-editorWidget-background)", + "borderColor": "var(--vscode-editorWidget-border)", + "borderStyle": "solid", "height": 18, "padding": "0 2px", "selectors": Object { @@ -121,9 +124,14 @@ describe('', () => { `); expect(styles.thumb).toMatchInlineSnapshot(` Object { - "backgroundColor": "var(--vscode-button-foreground)", + ":hover": Object { + "background": "var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border))", + }, + "backgroundColor": "var(--vscode-button-secondaryBackground)", "backgroundPosition": "center", - "borderWidth": undefined, + "borderColor": "var(--vscode-button-border)", + "borderWidth": 1, "height": 14, "width": 14, } @@ -136,19 +144,16 @@ describe('', () => { expect(styles.pill).toMatchInlineSnapshot(` Object { ":disabled": Object { - "background": "var(--vscode-button-background)", - "borderColor": "var(--vscode-contrastBorder, transparent)", + "background": "var(--vscode-editorWidget-background)", + "borderColor": "var(--vscode-editorWidget-border)", "opacity": 0.4, }, ":hover": Object { - "background": "var(--vscode-button-hoverBackground)", - "borderColor": "var(--vscode-contrastActiveBorder, transparent)", + "background": "var(--vscode-editorWidget-background)", + "borderColor": "var(--vscode-editorWidget-border)", }, - ":hover .ms-Toggle-thumb": Object { - "backgroundColor": "var(--vscode-button-foreground)", - }, - "background": "var(--vscode-button-background)", - "borderColor": "var(--vscode-contrastBorder, transparent)", + "background": "var(--vscode-editorWidget-background)", + "borderColor": "var(--vscode-editorWidget-border)", "borderStyle": "solid", "height": 18, "padding": "0 2px", @@ -163,9 +168,14 @@ describe('', () => { `); expect(styles.thumb).toMatchInlineSnapshot(` Object { - "backgroundColor": "var(--vscode-button-foreground)", + ":hover": Object { + "background": "var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border))", + }, + "backgroundColor": "var(--vscode-button-background)", "backgroundPosition": "center", - "borderWidth": undefined, + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border))", + "borderWidth": 1, "height": 14, "width": 14, } From 929ded1cf23d1d720af0ba9dd90dc6ebdf2dd7ba Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Mon, 16 Dec 2024 14:04:12 +0200 Subject: [PATCH 13/16] fix(ui-toggle): adjust padding and border color handling Update padding values and improve border color logic for better appearance and consistency in the UIToggle component. Fix issues with incorrect border color assignments for both checked and unchecked states. --- .../src/components/UIToggle/UIToggle.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 30e4c60bda..61ec837ea8 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -41,7 +41,7 @@ const TOGGLE_SIZES = new Map([ { width: 30, height: 18, - padding: '0 2px', + padding: '0 1px', margin: '0', label: { fontSize: 13, @@ -59,7 +59,7 @@ const TOGGLE_SIZES = new Map([ { width: 30, height: 14, - padding: '0 2px', + padding: '0 1px', margin: '0', label: { fontSize: 13, @@ -117,9 +117,9 @@ const DISABLED_OPACITY = 0.4; const COLORS = { pill: { - borderColor: 'var(--vscode-editorWidget-border)', unchecked: { background: 'var(--vscode-editorWidget-background)', + borderColor: 'var(--vscode-editorWidget-border)', hover: { background: 'var(--vscode-editorWidget-background)', borderColor: 'var(--vscode-editorWidget-border)' @@ -127,9 +127,10 @@ const COLORS = { }, checked: { background: 'var(--vscode-editorWidget-background)', + borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))', hover: { background: 'var(--vscode-editorWidget-background)', - borderColor: 'var(--vscode-editorWidget-border)' + borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))' } }, focus: { @@ -139,17 +140,17 @@ const COLORS = { thumb: { unchecked: { background: 'var(--vscode-button-secondaryBackground)', - borderColor: 'var(--vscode-button-border)', + borderColor: 'var(--vscode-button-border, transparent)', hover: { - borderColor: 'var(--vscode-button-border)', + borderColor: 'var(--vscode-button-border, transparent)', background: 'var(--vscode-contrastBorder, var(--vscode-button-secondaryHoverBackground))' } }, checked: { background: 'var(--vscode-button-background)', - borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border))', + borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))', hover: { - borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border))', + borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))', background: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))' } } @@ -273,7 +274,7 @@ export class UIToggle extends React.Component { width: sizeInfo?.width, padding: sizeInfo?.padding, background: COLORS.pill.checked.background, - borderColor: COLORS.pill.borderColor, + borderColor: COLORS.pill.checked.borderColor, borderStyle: 'solid', ':hover': { background: COLORS.pill.checked.hover.background, @@ -281,11 +282,12 @@ export class UIToggle extends React.Component { }, ':disabled': { background: COLORS.pill.checked.background, - borderColor: COLORS.pill.borderColor, + borderColor: COLORS.pill.checked.borderColor, opacity: DISABLED_OPACITY }, ...(!styleProps.checked && { background: COLORS.pill.unchecked.background, + borderColor: COLORS.pill.unchecked.borderColor, borderStyle: 'solid', // This is a bug: the best implementation approach is to set hover styles in the "thumb" section. // However, the hover styles for the unchecked thumb don't work properly @@ -299,7 +301,7 @@ export class UIToggle extends React.Component { }, ':disabled': { background: COLORS.pill.unchecked.background, - borderColor: COLORS.pill.borderColor, + borderColor: COLORS.pill.unchecked.borderColor, opacity: DISABLED_OPACITY } }), From 9397f8a849a014ee2f1a1e22a86e137dc0acbb53 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Mon, 16 Dec 2024 14:41:28 +0200 Subject: [PATCH 14/16] fix(ui-toggle): adjust padding and border color styles Updated `innerPadding` to `0 1px` and refined border color handling to include fallback `transparent`. These changes ensure consistent rendering and improve visual clarity in various states. --- .../test/unit/components/UIToggle.test.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/ui-components/test/unit/components/UIToggle.test.tsx b/packages/ui-components/test/unit/components/UIToggle.test.tsx index 5c8c687930..4d5ca988fb 100644 --- a/packages/ui-components/test/unit/components/UIToggle.test.tsx +++ b/packages/ui-components/test/unit/components/UIToggle.test.tsx @@ -31,7 +31,7 @@ describe('', () => { padding: '', height: 18, width: 30, - innerPadding: '0 2px', + innerPadding: '0 1px', thumbHeight: 14, thumbWidth: 14, borderWidth: 1 @@ -46,7 +46,7 @@ describe('', () => { padding: '', height: 18, width: 30, - innerPadding: '0 2px', + innerPadding: '0 1px', thumbHeight: 14, thumbWidth: 14, borderWidth: 1 @@ -61,7 +61,7 @@ describe('', () => { padding: '2px 0', height: 14, width: 30, - innerPadding: '0 2px', + innerPadding: '0 1px', thumbHeight: 10, thumbWidth: 10, borderWidth: 1 @@ -106,13 +106,13 @@ describe('', () => { }, ":hover .ms-Toggle-thumb": Object { "background": "var(--vscode-contrastBorder, var(--vscode-button-secondaryHoverBackground))", - "borderColor": "var(--vscode-button-border)", + "borderColor": "var(--vscode-button-border, transparent)", }, "background": "var(--vscode-editorWidget-background)", "borderColor": "var(--vscode-editorWidget-border)", "borderStyle": "solid", "height": 18, - "padding": "0 2px", + "padding": "0 1px", "selectors": Object { ":focus::after": Object { "border": "none !important", @@ -126,11 +126,11 @@ describe('', () => { Object { ":hover": Object { "background": "var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))", - "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border))", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))", }, "backgroundColor": "var(--vscode-button-secondaryBackground)", "backgroundPosition": "center", - "borderColor": "var(--vscode-button-border)", + "borderColor": "var(--vscode-button-border, transparent)", "borderWidth": 1, "height": 14, "width": 14, @@ -145,18 +145,18 @@ describe('', () => { Object { ":disabled": Object { "background": "var(--vscode-editorWidget-background)", - "borderColor": "var(--vscode-editorWidget-border)", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))", "opacity": 0.4, }, ":hover": Object { "background": "var(--vscode-editorWidget-background)", - "borderColor": "var(--vscode-editorWidget-border)", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))", }, "background": "var(--vscode-editorWidget-background)", - "borderColor": "var(--vscode-editorWidget-border)", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))", "borderStyle": "solid", "height": 18, - "padding": "0 2px", + "padding": "0 1px", "selectors": Object { ":focus::after": Object { "border": "none !important", @@ -170,11 +170,11 @@ describe('', () => { Object { ":hover": Object { "background": "var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))", - "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border))", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))", }, "backgroundColor": "var(--vscode-button-background)", "backgroundPosition": "center", - "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border))", + "borderColor": "var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))", "borderWidth": 1, "height": 14, "width": 14, From a441d3d63362ddfbe31ec9cfb524ea965cf3beeb Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Mon, 16 Dec 2024 15:05:12 +0200 Subject: [PATCH 15/16] fix: update UIToggle to use UiIcons constants Replaced hardcoded icon names with UiIcons constants in UIToggle. This ensures consistency and easier maintainability for icon usage across the UI components. --- packages/ui-components/src/components/UIToggle/UIToggle.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 61ec837ea8..9f1b1ee13d 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -6,6 +6,7 @@ import { Toggle } from '@fluentui/react'; import type { UIComponentMessagesProps } from '../../helper/ValidationMessage'; import { getMessageInfo, MessageWrapper } from '../../helper/ValidationMessage'; import { UIIcon } from '../UIIcon'; +import { UiIcons } from '../Icons'; export interface UIToggleProps extends IToggleProps, UIComponentMessagesProps { inlineLabelLeft?: boolean; @@ -215,7 +216,7 @@ export class UIToggle extends React.Component { if (thumbElement) { const style = ICON_STYLE.get(getIconStyleKey(this.props.size ?? UIToggleSize.Standard, isSwitchOn)); ReactDOM.render( - , + , thumbElement ); } From 5c78cf544987f30441c7becf18dee8ddf4ccdef4 Mon Sep 17 00:00:00 2001 From: Vladislavs Silins Date: Mon, 16 Dec 2024 15:15:43 +0200 Subject: [PATCH 16/16] refactor: add readonly to toggleRootRef in UIToggle Marked toggleRootRef as readonly to prevent unintended reassignments. This ensures immutability and improves the reliability of the component. --- packages/ui-components/src/components/UIToggle/UIToggle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/UIToggle/UIToggle.tsx b/packages/ui-components/src/components/UIToggle/UIToggle.tsx index 9f1b1ee13d..f6b6d0bdbc 100644 --- a/packages/ui-components/src/components/UIToggle/UIToggle.tsx +++ b/packages/ui-components/src/components/UIToggle/UIToggle.tsx @@ -167,7 +167,7 @@ const COLORS = { * @extends {React.Component} */ export class UIToggle extends React.Component { - private toggleRootRef: React.RefObject; + private readonly toggleRootRef: React.RefObject; /** * Initializes component properties. *