feat: slider and progress: add ability to visually hide borders

src/components/Progress/Circle.tsx

@@ -25,11 +25,15 @@ function getStrokeColor({
   strokeColor,
 }: Partial<CircleProps>): (string | Record<string, string>)[] {
   const { strokeColor: successColor } = success;
-  return [successColor || 'var(--success-color)', strokeColor || null!];
+  return [
+    successColor || 'var(--progress-success-background-color)',
+    strokeColor || null!,
+  ];
 }
 
 const Circle: FC<CircleProps> = (props) => {
   const {
+    bordered,
     children,
     gapDegree,
     gapPosition,
@@ -77,6 +81,7 @@ const Circle: FC<CircleProps> = (props) => {
   return (
     <div className={wrapperClassNames} style={circleStyle}>
       <OcCircle
+        bordered={bordered}
         gapDegree={getGapDegree()}
         gapPosition={gapPos}
         percent={getPercentage(props)}

src/components/Progress/Internal/OcCircle.tsx

@@ -72,17 +72,18 @@ const getCircleStyle = (
 };
 
 const OcCircle: FC<OcProgressProps> = ({
+  bordered,
   classNames,
   gapDegree = 0,
   gapPosition = 'bottom',
   id,
   percent = 0,
   steps,
-  strokeColor = 'var(--primary-tertiary-color)',
+  strokeColor = 'var(--progress-complete-background-color)',
   strokeLinecap = 'butt',
   strokeWidth = 1,
   style,
-  trailColor = 'var(--accent-background1-color)',
+  trailColor = 'var(--progress-incomplete-background-color)',
   trailWidth = 1,
   ...rest
 }) => {
@@ -224,7 +225,7 @@ const OcCircle: FC<OcProgressProps> = ({
 
   return (
     <svg
-      className={mergeClasses([styles.progressCircle, classNames])}
+      className={styles.progressCircle}
       viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
       style={style}
       id={id}

src/components/Progress/Internal/OcLine.tsx

@@ -8,11 +8,11 @@ import styles from '../progress.module.scss';
 const OcLine: FC<OcProgressProps> = ({
   classNames,
   percent = 0,
-  strokeColor = 'var(--primary-tertiary-color)',
+  strokeColor = 'var(--progress-complete-background-color)',
   strokeLinecap = 'round',
   strokeWidth = 1,
   style,
-  trailColor = 'var(--accent-background1-color)',
+  trailColor = 'var(--progress-incomplete-background-color)',
   trailWidth = 1,
   transition,
   ...rest

src/components/Progress/Internal/OcProgress.types.ts

@@ -4,6 +4,11 @@ export type StrokeColorType = BaseStrokeColorType | BaseStrokeColorType[];
 export type StrokeLinecapType = 'round' | 'butt' | 'square';
 
 export interface OcProgressProps {
+  /**
+   * Whether to visually hide the Progress border.
+   * @default true
+   */
+  bordered?: boolean;
   /**
    * The Progress class names.
    */

src/components/Progress/Line.tsx

@@ -4,6 +4,7 @@ import type { ProgressGradient, StringGradients } from './Progress.types';
 import { getSuccessPercent, validProgress } from './Utils';
 import type { DirectionType } from '../ConfigProvider';
 import { ResizeObserver } from '../../shared/ResizeObserver/ResizeObserver';
+import { mergeClasses } from '../../shared/utilities';
 
 import styles from './progress.module.scss';
 
@@ -47,8 +48,8 @@ export const handleGradient = (
   directionConfig?: DirectionType
 ) => {
   const {
-    from = 'var(--primary-color)',
-    to = 'var(--primary-color)',
+    from = 'var(--progress-complete-background-color)',
+    to = 'var(--progress-complete-background-color)',
     direction = directionConfig === 'rtl' ? 'to left' : 'to right',
     ...rest
   } = strokeColor;
@@ -63,6 +64,7 @@ export const handleGradient = (
 
 const Line: FC<LineProps> = (props) => {
   const {
+    bordered,
     children,
     direction: directionConfig,
     maxLabelRef,
@@ -96,7 +98,7 @@ const Line: FC<LineProps> = (props) => {
   const borderRadius =
     strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;
   const trailStyle = {
-    backgroundColor: trailColor || undefined,
+    background: trailColor || undefined,
     borderRadius,
   };
 
@@ -113,7 +115,7 @@ const Line: FC<LineProps> = (props) => {
     width: `${validProgress(successPercent)}%`,
     height: strokeWidth || (size === ProgressSize.Small ? 2 : 4),
     borderRadius,
-    backgroundColor: success?.strokeColor,
+    background: success?.strokeColor,
   };
 
   const successSegment =
@@ -250,7 +252,13 @@ const Line: FC<LineProps> = (props) => {
   return (
     <ResizeObserver onResize={updateLayout}>
       <div className={styles.progressOuter}>
-        <div className={styles.progressInner} style={trailStyle}>
+        <div
+          className={mergeClasses([
+            styles.progressInner,
+            { [styles.bordered]: !!bordered },
+          ])}
+          style={trailStyle}
+        >
           <div
             ref={progressBgRef}
             className={styles.progressBg}

src/components/Progress/Progress.stories.tsx

@@ -176,16 +176,16 @@ const Steps_Story: ComponentStory<typeof Progress> = (args) => {
         {...args}
         percent={100}
         steps={5}
-        strokeColor={'var(--success-color)'}
+        strokeColor={'var(--progress-success-background-color)'}
       />
       <Progress
         {...args}
         percent={60}
         steps={5}
         strokeColor={[
-          'var(--success-color)',
-          'var(--success-color)',
-          'var(--error-color)',
+          'var(--progress-success-background-color)',
+          'var(--progress-success-background-color)',
+          'var(--progress-error-background-color)',
         ]}
       />
       <Progress {...args} percent={30} steps={6} showLabels={false} />
@@ -314,6 +314,7 @@ export const __namedExportsOrder = [
 ];
 
 const progressArgs: Object = {
+  bordered: true,
   classNames: 'my-progress',
   gapDegree: null,
   gapPosition: null,

src/components/Progress/Progress.tsx

@@ -20,6 +20,7 @@ import styles from './progress.module.scss';
 const Progress: FC<ProgressProps> = React.forwardRef(
   (props: ProgressProps, ref: Ref<HTMLDivElement>) => {
     const {
+      bordered = true,
       classNames,
       hideMax = false,
       hideMin = false,
@@ -102,7 +103,7 @@ const Progress: FC<ProgressProps> = React.forwardRef(
         text = isLineType ? (
           <Icon
             classNames={styles.progressIcon}
-            color={'var(--error-color)'}
+            color={'var(--progress-error-text-color)'}
             path={IconName.mdiCloseCircleOutline}
             size={
               size !== ProgressSize.Medium ? IconSize.XSmall : IconSize.Small
@@ -111,7 +112,7 @@ const Progress: FC<ProgressProps> = React.forwardRef(
         ) : (
           <Icon
             classNames={styles.progressIcon}
-            color={'var(--error-color)'}
+            color={'var(--progress-error-text-color)'}
             path={IconName.mdiClose}
             size={
               size !== ProgressSize.Medium ? IconSize.Small : IconSize.Large
@@ -123,7 +124,7 @@ const Progress: FC<ProgressProps> = React.forwardRef(
         text = isLineType ? (
           <Icon
             classNames={styles.progressIcon}
-            color={'var(--success-color)'}
+            color={'var(--progress-success-text-color)'}
             path={IconName.mdiCheckCircleOutline}
             size={
               size !== ProgressSize.Medium ? IconSize.XSmall : IconSize.Small
@@ -132,7 +133,7 @@ const Progress: FC<ProgressProps> = React.forwardRef(
         ) : (
           <Icon
             classNames={styles.progressIcon}
-            color={'var(--success-color)'}
+            color={'var(--progress-success-text-color)'}
             path={IconName.mdiCheck}
             size={
               size !== ProgressSize.Medium ? IconSize.Small : IconSize.Large
@@ -229,10 +230,24 @@ const Progress: FC<ProgressProps> = React.forwardRef(
 
     let progress;
 
+    const progressClassNames: string = mergeClasses([
+      styles.progress,
+      (styles as any)[
+        `progress-${
+          (type === 'dashboard' && 'circle') || (steps && 'steps') || type
+        }`
+      ],
+      (styles as any)[`progress-status-${progressStatus}`],
+      { [styles.progressSmall]: size === 'small' },
+      { [styles.progressRtl]: htmlDir === 'rtl' },
+      classNames,
+    ]);
+
     if (type === 'line') {
       progress = steps ? (
         <Steps
           {...props}
+          bordered={bordered}
           direction={htmlDir as DirectionType}
           maxLabelRef={maxLabelRef}
           minLabelRef={minLabelRef}
@@ -247,6 +262,7 @@ const Progress: FC<ProgressProps> = React.forwardRef(
       ) : (
         <Line
           {...props}
+          bordered={bordered}
           direction={htmlDir as DirectionType}
           maxLabelRef={maxLabelRef}
           minLabelRef={minLabelRef}
@@ -264,27 +280,36 @@ const Progress: FC<ProgressProps> = React.forwardRef(
       progress = (
         <Circle
           {...props}
+          bordered={bordered}
           strokeColor={strokeColorNotArray}
           progressStatus={progressStatus}
-        >
+        />
+      );
+
+      return (
+        <div className={progressClassNames} style={{ width: width }}>
+          <div
+            ref={ref}
+            style={{ width: width }}
+            {...omit(rest, [
+              'gapDegree',
+              'gapPosition',
+              'format',
+              'status',
+              'strokeLinecap',
+              'strokeWidth',
+              'success',
+              'trailColor',
+            ])}
+            className={!!bordered ? styles.bordered : ''}
+          >
+            {progress}
+          </div>
           {progressInfo}
-        </Circle>
+        </div>
       );
     }
 
-    const progressClassNames: string = mergeClasses([
-      styles.progress,
-      (styles as any)[
-        `progress-${
-          (type === 'dashboard' && 'circle') || (steps && 'steps') || type
-        }`
-      ],
-      (styles as any)[`progress-status-${progressStatus}`],
-      { [styles.progressSmall]: size === 'small' },
-      { [styles.progressRtl]: htmlDir === 'rtl' },
-      classNames,
-    ]);
-
     return (
       <div
         ref={ref}

src/components/Progress/Progress.types.ts

@@ -24,6 +24,11 @@ export enum ProgressSize {
 }
 
 export interface ProgressProps extends OcBaseProps<HTMLDivElement> {
+  /**
+   * Whether to visually hide the Progress border.
+   * @default true
+   */
+  bordered?: boolean;
   /**
    * The Progress render.
    */
@@ -162,6 +167,11 @@ export interface SuccessProps {
 }
 
 export interface ProgressStepsProps extends ProgressProps {
+  /**
+   * Whether to visually hide the Progress border.
+   * @default true
+   */
+  bordered?: boolean;
   /**
    * The current canvas direction.
    */
@@ -198,10 +208,15 @@ export interface ProgressStepsProps extends ProgressProps {
 }
 
 export interface CircleProps extends ProgressProps {
+  /**
+   * Whether to visually hide the Progress border.
+   * @default true
+   */
+  bordered?: boolean;
   /**
    * The Progress Circle render.
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * The status of the Progress Circle component.
    * options: 'success', 'exception', 'normal', 'active'
@@ -214,6 +229,11 @@ export interface CircleProps extends ProgressProps {
 }
 
 export interface LineProps extends ProgressProps {
+  /**
+   * Whether to visually hide the Progress border.
+   * @default true
+   */
+  bordered?: boolean;
   /**
    * The Progress Line render.
    */

src/components/Progress/Steps.tsx

@@ -10,6 +10,7 @@ const STEP_ITEM_MARGIN_OFFSET: number = 4;
 
 const Steps: FC<ProgressStepsProps> = (props) => {
   const {
+    bordered,
     children,
     direction: directionConfig,
     maxLabelRef,
@@ -43,13 +44,18 @@ const Steps: FC<ProgressStepsProps> = (props) => {
         key={i}
         className={mergeClasses([
           styles.progressStepsItem,
+          { [styles.bordered]: !!bordered },
           {
             [styles.progressStepsItemActive]: i <= current - 1,
           },
         ])}
         style={{
-          backgroundColor: i <= current - 1 ? color : trailColor,
-          borderColor: i <= current - 1 ? color : trailColor,
+          background: i <= current - 1 ? color : trailColor,
+          borderColor: bordered
+            ? i <= current - 1
+              ? color
+              : trailColor
+            : 'transparent',
           width: stepWidth ? stepWidth : calculatedWidth,
           height: size === 'small' ? 4 : strokeWidth,
         }}