fix(slider): renames withTickMarks to tickmarks and withLabel to labeled

PiperOrigin-RevId: 537962866

Author: material-web-copybara

slider/demo/demo.ts

@@ -21,8 +21,8 @@ const collection =
       new Knob('min', {ui: numberInput(), defaultValue: 0}),
       new Knob('max', {ui: numberInput(), defaultValue: 100}),
       new Knob('step', {ui: numberInput(), defaultValue: 1}),
-      new Knob('withTickMarks', {ui: boolInput(), defaultValue: false}),
-      new Knob('withLabel', {ui: boolInput(), defaultValue: false}),
+      new Knob('tickmarks', {ui: boolInput(), defaultValue: false}),
+      new Knob('labeled', {ui: boolInput(), defaultValue: false}),
       new Knob('disabled', {ui: boolInput(), defaultValue: false}),
     ]);
 

slider/demo/stories.ts

@@ -19,8 +19,8 @@ export interface StoryKnobs {
   max: number;
   step: number;
   range: boolean;
-  withTickMarks: boolean;
-  withLabel: boolean;
+  tickmarks: boolean;
+  labeled: boolean;
   disabled: boolean;
 }
 
@@ -45,8 +45,8 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             .max=${knobs.max}
             .step=${knobs.step ?? 1}
             .range=${knobs.range}
-            .withTickMarks=${knobs.withTickMarks}
-            .withLabel=${knobs.withLabel ?? false}
+            .tickmarks=${knobs.tickmarks}
+            .labeled=${knobs.labeled ?? false}
             .disabled=${knobs.disabled ?? false}
         ></md-slider>
       </label>`;
@@ -66,8 +66,8 @@ const multiValue: MaterialStoryInit<StoryKnobs> = {
           .min=${knobs.min}
           .max=${knobs.max}
           .step=${knobs.step ?? 1}
-          .withTickMarks=${knobs.withTickMarks}
-          .withLabel=${knobs.withLabel ?? true}
+          .tickmarks=${knobs.tickmarks}
+          .labeled=${knobs.labeled ?? true}
           .disabled=${knobs.disabled ?? false}
         ></md-slider>
       </label>`;
@@ -135,8 +135,8 @@ const customStyling: MaterialStoryInit<StoryKnobs> = {
           .valueEnd=${(knobs.valueEnd)}
           .valueStartLabel=${'😔'}
           .valueEndLabel=${'😌'}
-          withTickMarks
-          withLabel
+          tickmarks
+          labeled
           .min=${knobs.min}
           .max=${knobs.max ?? 30}
           .step=${knobs.step ?? 1}

slider/lib/_slider.scss

@@ -166,7 +166,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background-color: var(--_inactive-track-color);
   }
 
-  .track.tickMarks::before {
+  .track.tickmarks::before {
     background-image: _get-tick-image(
       'var(--_with-tick-marks-inactive-container-color)'
     );
@@ -197,7 +197,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     }
   }
 
-  .track.tickMarks::after {
+  .track.tickmarks::after {
     background-image: _get-tick-image(
       'var(--_with-tick-marks-active-container-color)'
     );
@@ -207,8 +207,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background-color: var(--_disabled-active-track-color);
   }
 
-  :host([disabled]) .track.tickMarks::before,
-  :host([disabled]) .track.tickMarks::after {
+  :host([disabled]) .track.tickmarks::before,
+  :host([disabled]) .track.tickmarks::after {
     background-image: _get-tick-image(
       'var(--_with-tick-marks-disabled-container-color)'
     );

slider/lib/slider.ts

@@ -113,12 +113,12 @@ export class Slider extends LitElement {
   /**
    * Whether or not to show tick marks.
    */
-  @property({type: Boolean}) withTickMarks = false;
+  @property({type: Boolean}) tickmarks = false;
 
   /**
    * Whether or not to show a value label when activated.
    */
-  @property({type: Boolean}) withLabel = false;
+  @property({type: Boolean}) labeled = false;
 
   /**
    * Whether or not to show a value range. When false, the slider displays
@@ -346,7 +346,7 @@ export class Slider extends LitElement {
   }
 
   private renderTrack() {
-    const trackClasses = {'tickMarks': this.withTickMarks};
+    const trackClasses = {'tickmarks': this.tickmarks};
     return html`<div class="track ${classMap(trackClasses)}"></div>`;
   }
 
@@ -367,8 +367,8 @@ export class Slider extends LitElement {
       onTop,
       isOverlapping
     })}">
-        <div class="handleNub"><md-elevation></md-elevation></div>
-        ${when(this.withLabel, () => this.renderLabel(label))}
+      <div class="handleNub"><md-elevation></md-elevation></div>
+      ${when(this.labeled, () => this.renderLabel(label))}
       <md-focus-ring for=${name}></md-focus-ring>
       <md-ripple for=${name} class=${name} ?disabled=${
         this.disabled}></md-ripple>

slider/slider_test.ts

@@ -300,15 +300,15 @@ describe('<md-slider>', () => {
   });
 
   describe('value label', () => {
-    it('shows on focus when withLabel is true', async () => {
+    it('shows on focus when labeled is true', async () => {
       const {harness} = await setupTest();
-      harness.element.withLabel = true;
+      harness.element.labeled = true;
       await harness.element.updateComplete;
       harness.element.focus();
       expect(harness.isLabelShowing()).toBeTrue();
     });
 
-    it('does now show when withLabel is false', async () => {
+    it('does now show when labeled is false', async () => {
       const {harness} = await setupTest();
       await harness.element.updateComplete;
       harness.element.focus();
@@ -317,7 +317,7 @@ describe('<md-slider>', () => {
 
     it('hides after blur', async () => {
       const {harness} = await setupTest();
-      harness.element.withLabel = true;
+      harness.element.labeled = true;
       await harness.element.updateComplete;
       harness.element.focus();
       expect(harness.isLabelShowing()).toBeTrue();
@@ -327,7 +327,7 @@ describe('<md-slider>', () => {
 
     it('shows value label on hover', async () => {
       const {harness} = await setupTest();
-      harness.element.withLabel = true;
+      harness.element.labeled = true;
       await harness.element.updateComplete;
       await harness.startHover();
       expect(harness.isLabelShowing()).toBeTrue();