fix(slider)!: change compound attribute names to kebab-case

BREAKING_CHANGE: Attributes `valuelabel`, `valuestartlabel`, `valueendlabel`, and `tickmarks` have been renamed to `value-label`, `value-label-start`, `value-label-end`, and `ticks`. Properties `valueStartLabel`, `valueEndLabel`, and `tickmarks` have been renamed to `valueLabelStart`, `valueLabelEnd`, and `ticks` respectively. PiperOrigin-RevId: 542705999
material-components · Jun 22, 2023 · 83d9ede · 83d9ede
1 parent a5e4354
commit 83d9ede
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/slider/demo/demo.ts b/slider/demo/demo.ts
@@ -21,7 +21,7 @@ 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('tickmarks', {ui: boolInput(), defaultValue: false}),
+      new Knob('ticks', {ui: boolInput(), defaultValue: false}),
       new Knob('labeled', {ui: boolInput(), defaultValue: false}),
       new Knob('disabled', {ui: boolInput(), defaultValue: false}),
     ]);

diff --git a/slider/demo/stories.ts b/slider/demo/stories.ts
@@ -19,7 +19,7 @@ export interface StoryKnobs {
   max: number;
   step: number;
   range: boolean;
-  tickmarks: boolean;
+  ticks: boolean;
   labeled: boolean;
   disabled: boolean;
 }
@@ -45,7 +45,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
             .max=${knobs.max}
             .step=${knobs.step ?? 1}
             .range=${knobs.range}
-            .tickmarks=${knobs.tickmarks}
+            .ticks=${knobs.ticks}
             .labeled=${knobs.labeled ?? false}
             .disabled=${knobs.disabled ?? false}
         ></md-slider>
@@ -66,7 +66,7 @@ const multiValue: MaterialStoryInit<StoryKnobs> = {
           .min=${knobs.min}
           .max=${knobs.max}
           .step=${knobs.step ?? 1}
-          .tickmarks=${knobs.tickmarks}
+          .ticks=${knobs.ticks}
           .labeled=${knobs.labeled ?? true}
           .disabled=${knobs.disabled ?? false}
         ></md-slider>
@@ -124,18 +124,18 @@ const customStyling: MaterialStoryInit<StoryKnobs> = {
       const range = max - min;
       const fractionStart = valueStart! / range;
       const fractionEnd = valueEnd! / range;
-      target.valueStartLabel = labelFor(fractionStart);
-      target.valueEndLabel = labelFor(fractionEnd);
+      target.valueLabelStart = labelFor(fractionStart);
+      target.valueLabelEnd = labelFor(fractionEnd);
     }
     return html`
       <label>label
         <md-slider
           range
           .valueStart=${(knobs.valueStart)}
           .valueEnd=${(knobs.valueEnd)}
-          .valueStartLabel=${'😔'}
-          .valueEndLabel=${'😌'}
-          tickmarks
+          .valueLabelStart=${'😔'}
+          .valueLabelEnd=${'😌'}
+          ticks
           labeled
           .min=${knobs.min}
           .max=${knobs.max ?? 30}

diff --git a/slider/lib/slider.ts b/slider/lib/slider.ts
@@ -72,19 +72,19 @@ export class Slider extends LitElement {
    * An optional label for the slider's value displayed when range is
    * false; if not set, the label is the value itself.
    */
-  @property() valueLabel?: string;
+  @property({attribute: 'value-label'}) valueLabel?: string;
 
   /**
    * An optional label for the slider's start value displayed when
    * range is true; if not set, the label is the valueStart itself.
    */
-  @property() valueStartLabel?: string;
+  @property({attribute: 'value-label-start'}) valueLabelStart?: string;
 
   /**
    * An optional label for the slider's end value displayed when
    * range is true; if not set, the label is the valueEnd itself.
    */
-  @property() valueEndLabel?: string;
+  @property({attribute: 'value-label-end'}) valueLabelEnd?: string;
 
   /**
    * Aria label for the slider's start value displayed when
@@ -106,7 +106,7 @@ export class Slider extends LitElement {
   /**
    * Whether or not to show tick marks.
    */
-  @property({type: Boolean}) tickmarks = false;
+  @property({type: Boolean}) ticks = false;
 
   /**
    * Whether or not to show a value label when activated.
@@ -308,8 +308,8 @@ export class Slider extends LitElement {
     const containerClasses = {ranged: this.range};
 
     // optional label values to show in place of the value.
-    const labelStart = this.valueStartLabel ?? String(this.renderValueStart);
-    const labelEnd = (this.range ? this.valueEndLabel : this.valueLabel) ??
+    const labelStart = this.valueLabelStart ?? String(this.renderValueStart);
+    const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) ??
         String(this.renderValueEnd);
 
     const inputStartProps = {
@@ -360,7 +360,7 @@ export class Slider extends LitElement {
   }
 
   private renderTrack() {
-    const trackClasses = {'tickmarks': this.tickmarks};
+    const trackClasses = {'tickmarks': this.ticks};
     return html`<div class="track ${classMap(trackClasses)}"></div>`;
   }