mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

breaking: remove deprecated props

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
src/Button/Button.svelte
View file

@ -25,12 +25,6 @@
*/
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
* @type {typeof import("svelte").SvelteComponent}
@ -44,8 +38,8 @@
export let iconDescription = undefined;
/**
* Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true`
* Set the alignment of the tooltip relative to the icon.
* Only applies to icon-only buttons
* @type {"start" | "center" | "end"}
*/
export let tooltipAlignment = "center";

10
src/Button/ButtonSkeleton.svelte
View file

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

7
src/ContentSwitcher/ContentSwitcher.svelte
View file

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

8
src/DataTable/Table.svelte
View file

@ -11,12 +11,6 @@
/** Set to `true` to use static width */
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 */
export let sortable = false;
@ -35,7 +29,6 @@
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header="{stickyHeader}"
>
<slot />
@ -51,7 +44,6 @@
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header="{stickyHeader}"
{...$$restProps}
>

234
src/NumberInput/NumberInput.svelte
View file

@ -39,12 +39,6 @@
/** Set to `true` for the input to be read-only */
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 */
export let allowEmpty = false;
@ -174,158 +168,90 @@
class:bx--number--light="{light}"
class:bx--number--nolabel="{hideLabel}"
class:bx--number--nosteppers="{hideSteppers}"
class:bx--number--mobile="{mobile}"
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}"
{#if label}
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}"
>
<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}
<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}"
>
<input
bind:this="{ref}"
type="number"
pattern="[0-9]*"
aria-describedby="{errorId}"
data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}"
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
/>
{#if invalid}
<WarningFilled16 class="bx--number__invalid" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{#if readonly}
<EditOff16 class="bx--text-input__readonly-icon" />
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">
<button
type="button"
tabindex="-1"
title="{decrementLabel || iconDescription}"
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>
<div class:bx--number__rule-divider="{true}"></div>
<button
type="button"
tabindex="-1"
title="{incrementLabel || iconDescription}"
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 class:bx--number__rule-divider="{true}"></div>
</div>
{/if}
</div>
<slot name="label">{label}</slot>
</label>
{/if}
<div
class:bx--number__input-wrapper="{true}"
class:bx--number__input-wrapper--warning="{!invalid && warn}"
>
<input
bind:this="{ref}"
type="number"
pattern="[0-9]*"
aria-describedby="{errorId}"
data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}"
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
/>
{#if invalid}
<WarningFilled16 class="bx--number__invalid" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{#if readonly}
<EditOff16 class="bx--text-input__readonly-icon" />
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">
<button
type="button"
tabindex="-1"
title="{decrementLabel || iconDescription}"
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>
<div class:bx--number__rule-divider="{true}"></div>
<button
type="button"
tabindex="-1"
title="{incrementLabel || iconDescription}"
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 class:bx--number__rule-divider="{true}"></div>
</div>
{/if}
</div>
{#if !error && !warn && helperText}
<div
class:bx--form__helper-text="{true}"

9
src/Search/Search.svelte
View file

@ -10,12 +10,6 @@
*/
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
* @type {"sm" | "lg" | "xl"}
@ -86,7 +80,6 @@
{#if skeleton}
<SearchSkeleton
small="{small}"
size="{size}"
{...$$restProps}
on:click
@ -101,7 +94,7 @@
class:bx--search="{true}"
class:bx--search--light="{light}"
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--xl="{size === 'xl'}"
class:bx--search--expandable="{expandable}"

8
src/Search/SearchSkeleton.svelte
View file

@ -1,10 +1,4 @@
<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
* @type {"sm" | "lg" | "xl"}
@ -15,7 +9,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
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--xl="{size === 'xl'}"
{...$$restProps}

7
src/StructuredList/StructuredList.svelte
View file

@ -5,12 +5,6 @@
*/
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 */
export let condensed = false;
@ -41,7 +35,6 @@
<div
role="table"
class:bx--structured-list="{true}"
class:bx--structured-list--border="{border}"
class:bx--structured-list--selection="{selection}"
class:bx--structured-list--condensed="{condensed}"
class:bx--structured-list--flush="{flush}"

9
src/TimePicker/TimePickerSelect.svelte
View file

@ -14,12 +14,6 @@
/** Specify the label text */
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 */
export let id = "ccs-" + Math.random().toString(36);
@ -58,9 +52,8 @@
<label
for="{id}"
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">
{labelText}
</slot>

9
src/UIShell/GlobalHeader/HeaderNav.svelte
View file

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