@ni/nimble-components 20.2.1 → 20.2.2

package/README.md

@@ -100,9 +100,10 @@ The goal of the Nimble design system is to provide a consistent style for applic
 
 Most user-visible strings displayed by Nimble components are provided by the client application and are expected to be localized by the application if necessary. However, some strings are built into Nimble components and are provided only in English. An application can provide localized versions of these strings by using design tokens set on label provider elements.
 
-There are currently 2 label providers:
+The current label providers:
 
--   `nimble-label-provider-core`: Used for labels for all components besides the table
+-   `nimble-label-provider-core`: Used for labels for all components without a dedicated label provider
+-   `nimble-label-provider-rich-text`: Used for labels for the rich text components
 -   `nimble-label-provider-table`: Used for labels for the table (and table sub-components / column types)
 
 If a client is localized, it should:

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 01 Sep 2023 20:25:49 GMT
+   * Generated on Wed, 06 Sep 2023 05:19:46 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -55942,6 +55942,30 @@ img.ProseMirror-separator {
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = DesignSystem.tagFor(Toolbar);
 
+  const richTextLabelDefaults = {
+      richTextToggleBoldLabel: 'Bold',
+      richTextToggleItalicsLabel: 'Italics',
+      richTextToggleBulletedListLabel: 'Bulleted List',
+      richTextToggleNumberedListLabel: 'Numbered List'
+  };
+
+  const richTextToggleBoldLabel = DesignToken.create({
+      name: 'rich-text-toggle-bold-label',
+      cssCustomPropertyName: null
+  }).withDefault(richTextLabelDefaults.richTextToggleBoldLabel);
+  const richTextToggleItalicsLabel = DesignToken.create({
+      name: 'rich-text-toggle-italics-label',
+      cssCustomPropertyName: null
+  }).withDefault(richTextLabelDefaults.richTextToggleItalicsLabel);
+  const richTextToggleBulletedListLabel = DesignToken.create({
+      name: 'rich-text-toggle-bulleted-list-label',
+      cssCustomPropertyName: null
+  }).withDefault(richTextLabelDefaults.richTextToggleBulletedListLabel);
+  const richTextToggleNumberedListLabel = DesignToken.create({
+      name: 'rich-text-toggle-numbered-list-label',
+      cssCustomPropertyName: null
+  }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
+
   // prettier-ignore
   const template$l = html `
     <template>
@@ -55961,12 +55985,12 @@ img.ProseMirror-separator {
                         content-hidden
                         ?disabled="${x => x.disabled}"
                         slot="start"
-                        title="Bold"
+                        title=${x => richTextToggleBoldLabel.getValueFor(x)}
                         @click=${x => x.boldButtonClick()}
                         @change=${(x, c) => x.stopEventPropagation(c.event)}
                         @keydown=${(x, c) => x.boldButtonKeyDown(c.event)}
                     >
-                        Bold
+                        ${x => richTextToggleBoldLabel.getValueFor(x)}
                         <${iconBoldBTag} slot="start"></${iconBoldBTag}>
                     </${toggleButtonTag}>
                     <${toggleButtonTag}
@@ -55975,12 +55999,12 @@ img.ProseMirror-separator {
                         content-hidden
                         ?disabled="${x => x.disabled}"
                         slot="start"
-                        title="Italics"
+                        title=${x => richTextToggleItalicsLabel.getValueFor(x)}
                         @click=${x => x.italicsButtonClick()}
                         @change=${(x, c) => x.stopEventPropagation(c.event)}
                         @keydown=${(x, c) => x.italicsButtonKeyDown(c.event)}
                     >
-                        Italics
+                        ${x => richTextToggleItalicsLabel.getValueFor(x)}
                         <${iconItalicITag} slot="start"></${iconItalicITag}>
                     </${toggleButtonTag}>
                     <${toggleButtonTag}
@@ -55989,12 +56013,12 @@ img.ProseMirror-separator {
                         content-hidden
                         ?disabled="${x => x.disabled}"
                         slot="start"
-                        title="Bullet List"
+                        title=${x => richTextToggleBulletedListLabel.getValueFor(x)}
                         @click=${x => x.bulletListButtonClick()}
                         @change=${(x, c) => x.stopEventPropagation(c.event)}
                         @keydown=${(x, c) => x.bulletListButtonKeyDown(c.event)}
                     >
-                        Bullet List
+                        ${x => richTextToggleBulletedListLabel.getValueFor(x)}
                         <${iconListTag} slot="start"></${iconListTag}>
                     </${toggleButtonTag}>
                     <${toggleButtonTag}
@@ -56003,12 +56027,12 @@ img.ProseMirror-separator {
                         content-hidden
                         ?disabled="${x => x.disabled}"
                         slot="start"
-                        title="Numbered List"
+                        title=${x => richTextToggleNumberedListLabel.getValueFor(x)}
                         @click=${x => x.numberedListButtonClick()}
                         @change=${(x, c) => x.stopEventPropagation(c.event)}
                         @keydown=${(x, c) => x.numberedListButtonKeyDown(c.event)}
                     >
-                        Numbered List
+                        ${x => richTextToggleNumberedListLabel.getValueFor(x)}
                         <${iconNumberListTag} slot="start"></${iconNumberListTag}>
                     </${toggleButtonTag}>
                 </${toolbarTag}>