@ni/nimble-components 20.2.1 → 20.2.3

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 14:38:58 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}>
@@ -56356,7 +56380,6 @@ img.ProseMirror-separator {
        */
       boldButtonClick() {
           this.tiptapEditor.chain().focus().toggleBold().run();
-          this.forceFocusEditor();
       }
       /**
        * Toggle the bold mark and focus back to the editor
@@ -56365,7 +56388,6 @@ img.ProseMirror-separator {
       boldButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleBold().run();
-              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56376,7 +56398,6 @@ img.ProseMirror-separator {
        */
       italicsButtonClick() {
           this.tiptapEditor.chain().focus().toggleItalic().run();
-          this.forceFocusEditor();
       }
       /**
        * Toggle the italics mark and focus back to the editor
@@ -56385,7 +56406,6 @@ img.ProseMirror-separator {
       italicsButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleItalic().run();
-              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56396,7 +56416,6 @@ img.ProseMirror-separator {
        */
       bulletListButtonClick() {
           this.tiptapEditor.chain().focus().toggleBulletList().run();
-          this.forceFocusEditor();
       }
       /**
        * Toggle the unordered list node and focus back to the editor
@@ -56405,7 +56424,6 @@ img.ProseMirror-separator {
       bulletListButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleBulletList().run();
-              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56416,7 +56434,6 @@ img.ProseMirror-separator {
        */
       numberedListButtonClick() {
           this.tiptapEditor.chain().focus().toggleOrderedList().run();
-          this.forceFocusEditor();
       }
       /**
        * Toggle the ordered list node and focus back to the editor
@@ -56425,7 +56442,6 @@ img.ProseMirror-separator {
       numberedListButtonKeyDown(event) {
           if (this.keyActivatesButton(event)) {
               this.tiptapEditor.chain().focus().toggleOrderedList().run();
-              this.forceFocusEditor();
               return false;
           }
           return true;
@@ -56646,14 +56662,6 @@ img.ProseMirror-separator {
               }
           });
       }
-      // In Firefox browser, once the editor gets focused, the blinking caret will be visible until we click format buttons (Bold, Italic ...) in the Firefox browser (changing focus).
-      // But once any of the toolbar button is clicked, editor internally has its focus but the blinking caret disappears.
-      // As a workaround, manually triggering blur and setting focus on editor makes the blinking caret to re-appear.
-      // Mozilla issue https://bugzilla.mozilla.org/show_bug.cgi?id=1496769 tracks removal of this workaround.
-      forceFocusEditor() {
-          this.tiptapEditor.commands.blur();
-          this.tiptapEditor.commands.focus();
-      }
   }
   __decorate$1([
       attr({ mode: 'boolean' })