change to css var

RocketCommunicationsInc · May 3, 2024 · a325c91 · a325c91
1 parent 3082dd7
commit a325c91
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 12 deletions.
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -20177,7 +20177,6 @@ export namespace Components {
           * The playhead of rux-track.
          */
         "playhead": any;
-        "showGrid": boolean;
         "start": string;
         "timezone": string;
         "width": number;
@@ -55813,7 +55812,6 @@ declare namespace LocalJSX {
           * The playhead of rux-track.
          */
         "playhead"?: any;
-        "showGrid"?: boolean;
         "start"?: string;
         "timezone"?: string;
         "width"?: number;

diff --git a/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.scss b/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.scss
@@ -10,6 +10,7 @@
     display: flex;
     align-items: center;
     padding: 12px 20px;
+    justify-content: center;
 }
 
 .ruler-new-day-cell {

diff --git a/packages/web-components/src/components/rux-timeline/rux-timeline.scss b/packages/web-components/src/components/rux-timeline/rux-timeline.scss
@@ -1,5 +1,6 @@
 :host {
     display: block;
+
     ::-webkit-scrollbar {
         width: 16px;
         height: 16px;
@@ -44,6 +45,12 @@
     ::-webkit-scrollbar-track:horizontal {
         box-shadow: var(--scrollbar-shadow-inner-horizontal);
     }
+
+    --grid-line-color: transparent;
+}
+
+:host([show-grid]) {
+    --grid-line-color: var(--color-background-base-default);
 }
 
 .rux-timeline {
@@ -65,6 +72,7 @@
     height: 100%;
     top: 0;
     pointer-events: none; // allows scrolling when mouse cursor is positioned over the playhead
+
     &:after {
         width: 0;
         height: 0;

diff --git a/packages/web-components/src/components/rux-timeline/rux-timeline.tsx b/packages/web-components/src/components/rux-timeline/rux-timeline.tsx
@@ -98,7 +98,6 @@ export class RuxTimeline {
     @Watch('end')
     @Watch('interval')
     @Watch('timezone')
-    @Watch('showGrid')
     handleChange() {
         this.syncPlayhead()
         this._updateRegions()
@@ -374,7 +373,6 @@ export class RuxTimeline {
                 el.start = useStartEndDates.timelineStart.toISOString()
                 el.end = useStartEndDates.timelineEnd.toISOString()
                 el.timezone = this.timezone
-                el.showGrid = this.showGrid
             })
         }
 

diff --git a/packages/web-components/src/components/rux-timeline/rux-track/rux-track.scss b/packages/web-components/src/components/rux-timeline/rux-track/rux-track.scss
@@ -10,7 +10,7 @@
 .grid-line {
     grid-row: 1/-1;
     width: 1px;
-    background-color: var(--color-background-base-default);
+    background-color: var(--grid-line-color);
     opacity: 0.8;
     pointer-events: none;
 }

diff --git a/packages/web-components/src/components/rux-timeline/rux-track/rux-track.tsx b/packages/web-components/src/components/rux-timeline/rux-track/rux-track.tsx
@@ -73,11 +73,6 @@ export class RuxTrack {
      */
     @Prop({ reflect: true }) timezone = 'UTC'
 
-    /**
-     * @internal - The timeline's grid indicator. Set automatically from the parent Timeline component.
-     */
-    @Prop({ reflect: true }) showGrid = false
-
     /**
      * The playhead of rux-track.
      */
@@ -86,7 +81,6 @@ export class RuxTrack {
     @Watch('start')
     @Watch('end')
     @Watch('interval')
-    @Watch('showGrid')
     handleUpdate(_newValue: any, old: any) {
         if (old) {
             this.initializeRows()
@@ -376,7 +370,7 @@ export class RuxTrack {
                             (this.playedIndicator = el as HTMLInputElement)
                         }
                     ></div>
-                    {this.showGrid ? this.renderGrid() : null}
+                    {this.renderGrid()}
                 </div>
             </Host>
         )