breaking: remove deprecated props

This commit is contained in:
Eric Liu 2022-03-20 08:18:13 -07:00
commit ba7eeda763
10 changed files with 88 additions and 223 deletions

View file

@ -25,12 +25,6 @@
*/ */
export let isSelected = false; export let isSelected = false;
/**
* Set to `true` for the icon-only variant
* @deprecated inferred using the $$slots API
*/
export let hasIconOnly = false;
/** /**
* Specify the icon to render * Specify the icon to render
* @type {typeof import("svelte").SvelteComponent} * @type {typeof import("svelte").SvelteComponent}
@ -44,8 +38,8 @@
export let iconDescription = undefined; export let iconDescription = undefined;
/** /**
* Set the alignment of the tooltip relative to the icon * Set the alignment of the tooltip relative to the icon.
* `hasIconOnly` must be set to `true` * Only applies to icon-only buttons
* @type {"start" | "center" | "end"} * @type {"start" | "center" | "end"}
*/ */
export let tooltipAlignment = "center"; export let tooltipAlignment = "center";

View file

@ -10,12 +10,6 @@
* @type {"default" | "field" | "small" | "lg" | "xl"} * @type {"default" | "field" | "small" | "lg" | "xl"}
*/ */
export let size = "default"; export let size = "default";
/**
* @deprecated this prop will be removed in the next major release
* Use size="small" instead
*/
export let small = false;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -27,7 +21,7 @@
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--btn="{true}" class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}" class:bx--btn--sm="{size === 'small'}"
class:bx--btn--lg="{size === 'lg'}" class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}" class:bx--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
@ -43,7 +37,7 @@
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--btn="{true}" class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}" class:bx--btn--sm="{size === 'small'}"
class:bx--btn--lg="{size === 'lg'}" class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}" class:bx--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}

View file

@ -6,12 +6,6 @@
/** Set the selected index of the switch item */ /** Set the selected index of the switch item */
export let selectedIndex = 0; export let selectedIndex = 0;
/**
* Set to `true` to enable the light variant
* @deprecated
*/
export let light = false;
/** /**
* Specify the size of the content switcher * Specify the size of the content switcher
* @type {"sm" | "xl"} * @type {"sm" | "xl"}
@ -67,7 +61,6 @@
<div <div
role="tablist" role="tablist"
class:bx--content-switcher="{true}" class:bx--content-switcher="{true}"
class:bx--content-switcher--light="{light}"
class:bx--content-switcher--sm="{size === 'sm'}" class:bx--content-switcher--sm="{size === 'sm'}"
class:bx--content-switcher--xl="{size === 'xl'}" class:bx--content-switcher--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}

View file

@ -11,12 +11,6 @@
/** Set to `true` to use static width */ /** Set to `true` to use static width */
export let useStaticWidth = false; export let useStaticWidth = false;
/**
* Set to `true` for the bordered variant
* @deprecated this prop will be removed in the next major release
*/
export let shouldShowBorder = false;
/** Set to `true` for the sortable variant */ /** Set to `true` for the sortable variant */
export let sortable = false; export let sortable = false;
@ -35,7 +29,6 @@
class:bx--data-table--sort="{sortable}" class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
> >
<slot /> <slot />
@ -51,7 +44,6 @@
class:bx--data-table--sort="{sortable}" class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
{...$$restProps} {...$$restProps}
> >

View file

@ -39,12 +39,6 @@
/** Set to `true` for the input to be read-only */ /** Set to `true` for the input to be read-only */
export let readonly = false; export let readonly = false;
/**
* Set to `true` to enable the mobile variant
* @deprecated
*/
export let mobile = false;
/** Set to `true` to allow for an empty value */ /** Set to `true` to allow for an empty value */
export let allowEmpty = false; export let allowEmpty = false;
@ -174,75 +168,8 @@
class:bx--number--light="{light}" class:bx--number--light="{light}"
class:bx--number--nolabel="{hideLabel}" class:bx--number--nolabel="{hideLabel}"
class:bx--number--nosteppers="{hideSteppers}" class:bx--number--nosteppers="{hideSteppers}"
class:bx--number--mobile="{mobile}"
class="{size && `bx--number--${size}`}" class="{size && `bx--number--${size}`}"
> >
{#if mobile}
{#if label}
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}"
>
<slot name="label">{label}</slot>
</label>
{/if}
<div
class:bx--number__input-wrapper="{true}"
class:bx--number__input-wrapper--warning="{!invalid && warn}"
>
<button
type="button"
aria-live="polite"
aria-atomic="true"
title="{decrementLabel}"
aria-label="{decrementLabel || iconDescription}"
class:bx--number__control-btn="{true}"
class:down-icon="{true}"
on:click="{() => {
updateValue(-1);
}}"
disabled="{disabled}"
>
<Subtract16 class="down-icon" />
</button>
<input
bind:this="{ref}"
type="number"
pattern="[0-9]*"
aria-label="{label ? undefined : ariaLabel}"
disabled="{disabled}"
id="{id}"
name="{name}"
max="{max}"
min="{min}"
step="{step}"
value="{value ?? ''}"
readonly="{readonly}"
{...$$restProps}
on:change="{onChange}"
on:input="{onInput}"
on:focus
on:blur
/>
<button
type="button"
aria-live="polite"
aria-atomic="true"
title="{incrementLabel}"
aria-label="{incrementLabel || iconDescription}"
class:bx--number__control-btn="{true}"
class:up-icon="{true}"
on:click="{() => {
updateValue(1);
}}"
disabled="{disabled}"
>
<Add16 class="up-icon" />
</button>
</div>
{:else}
{#if label} {#if label}
<label <label
for="{id}" for="{id}"
@ -325,7 +252,6 @@
</div> </div>
{/if} {/if}
</div> </div>
{/if}
{#if !error && !warn && helperText} {#if !error && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"

View file

@ -10,12 +10,6 @@
*/ */
export let value = ""; export let value = "";
/**
* @deprecated this prop will be removed in the next major release
* Use size="sm" instead
*/
export let small = false;
/** /**
* Specify the size of the search input * Specify the size of the search input
* @type {"sm" | "lg" | "xl"} * @type {"sm" | "lg" | "xl"}
@ -86,7 +80,6 @@
{#if skeleton} {#if skeleton}
<SearchSkeleton <SearchSkeleton
small="{small}"
size="{size}" size="{size}"
{...$$restProps} {...$$restProps}
on:click on:click
@ -101,7 +94,7 @@
class:bx--search="{true}" class:bx--search="{true}"
class:bx--search--light="{light}" class:bx--search--light="{light}"
class:bx--search--disabled="{disabled}" class:bx--search--disabled="{disabled}"
class:bx--search--sm="{size === 'sm' || small}" class:bx--search--sm="{size === 'sm'}"
class:bx--search--lg="{size === 'lg'}" class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}" class:bx--search--xl="{size === 'xl'}"
class:bx--search--expandable="{expandable}" class:bx--search--expandable="{expandable}"

View file

@ -1,10 +1,4 @@
<script> <script>
/**
* @deprecated this prop will be removed in the next major release
* Set to `true` to use the small variant
*/
export let small = false;
/** /**
* Specify the size of the search input * Specify the size of the search input
* @type {"sm" | "lg" | "xl"} * @type {"sm" | "lg" | "xl"}
@ -15,7 +9,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div <div
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--search--sm="{size === 'sm' || small}" class:bx--search--sm="{size === 'sm'}"
class:bx--search--lg="{size === 'lg'}" class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}" class:bx--search--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}

View file

@ -5,12 +5,6 @@
*/ */
export let selected = undefined; export let selected = undefined;
/**
* Set to `true` to use the bordered variant
* @deprecated
*/
export let border = false;
/** Set to `true` to use the condensed variant */ /** Set to `true` to use the condensed variant */
export let condensed = false; export let condensed = false;
@ -41,7 +35,6 @@
<div <div
role="table" role="table"
class:bx--structured-list="{true}" class:bx--structured-list="{true}"
class:bx--structured-list--border="{border}"
class:bx--structured-list--selection="{selection}" class:bx--structured-list--selection="{selection}"
class:bx--structured-list--condensed="{condensed}" class:bx--structured-list--condensed="{condensed}"
class:bx--structured-list--flush="{flush}" class:bx--structured-list--flush="{flush}"

View file

@ -14,12 +14,6 @@
/** Specify the label text */ /** Specify the label text */
export let labelText = ""; export let labelText = "";
/**
* @deprecated The `hideLabel` prop for `TimePickerSelect` is no longer needed and has been deprecated. It will be removed in the next major release.
* Set to `false` to show the label text
*/
export let hideLabel = true;
/** Set an id for the select element */ /** Set an id for the select element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -58,9 +52,8 @@
<label <label
for="{id}" for="{id}"
class:bx--label="{true}" class:bx--label="{true}"
class:bx--visually-hidden="{hideLabel}" class:bx--visually-hidden="{true}"
> >
<!-- TODO: set to always be `true` after `hideLabel` is deprecated -->
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
</slot> </slot>

View file

@ -1,13 +1,6 @@
<script> <script>
/**
* Specify the ARIA label for the nav
* @deprecated use "aria-label" instead
* @type {string}
*/
export let ariaLabel = undefined;
$: props = { $: props = {
"aria-label": ariaLabel || $$props["aria-label"], "aria-label": $$props["aria-label"],
"aria-labelledby": $$props["aria-labelledby"], "aria-labelledby": $$props["aria-labelledby"],
}; };
</script> </script>