Add latest changes from gitlab-org/gitlab@master

app/views/projects/merge_requests/_merge_request.html.haml

@@ -35,7 +35,7 @@
         - if merge_request.labels.any?
            
           - presented_labels_sorted_by_title(merge_request.labels, merge_request.project).each do |label|
-            = link_to_label(label, type: :merge_request, css_class: 'label-link')
+            = link_to_label(label, type: :merge_request, small: true)
     .issuable-meta
       %ul.controls.d-flex.align-items-end

app/views/shared/_delete_label_modal.html.haml

@@ -2,7 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %h3.page-title Delete #{render_label(label, tooltip: false)} ?
+        %h3.page-title Delete label: #{label.name} ?
         %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
           %span{ "aria-hidden": true } ×

app/views/shared/boards/components/_board.html.haml

@@ -29,11 +29,14 @@
             ":title" => '(list.assignee && list.assignee.username || "")' }
             @{{ list.assignee.username }}
-          %span.has-tooltip.badge.color-label.title.d-inline-block.mw-100.text-truncate.align-middle{ "v-if": "list.type === \"label\"",
-            ":title" => '(list.label ? list.label.description : "")',
-            data: { container: "body", placement: "bottom" },
-            ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.textColor ? list.label.textColor : \"#2e2e2e\") }" }
-            {{ list.title }}
+          %gl-label{ "v-if" => " list.type === \"label\"",
+            ":background-color" => "list.label.color",
+            ":title" => "list.label.title",
+            ":description" => "list.label.description",
+            "tooltipPlacement" => "bottom",
+            ":size" => '(!list.isExpanded ? "sm" : "")',
+            ":scoped" => "showScopedLabels(list.label)",
+            ":scoped-labels-documentation-link" => "helpLink" }
         - if can?(current_user, :admin_list, current_board_parent)
           %board-delete{ "inline-template" => true,

app/views/shared/boards/components/sidebar/_labels.html.haml

@@ -8,15 +8,12 @@
     %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
       = _("None")
     %span{ "v-for" => "label in issue.labels" }
-      %span.d-inline-block.position-relative.scoped-label-wrapper{ "v-if" => "showScopedLabels(label)" }
-        %a{ href: '#' }
-          %span.badge.color-label.label{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-            {{ label.title }}
-        %a.label.scoped-label{ ":href" => "helpLink()" }
-          %i.fa.fa-question-circle{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-      %a{ href: "#", "v-else" => true }
-        .badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-          {{ label.title }}
+      %gl-label{ ":key" => "label.id",
+        ":background-color" => "label.color",
+        ":title" => "label.title",
+        ":description" => "label.description",
+        ":scoped" => "showScopedLabels(label)",
+        ":scoped-labels-documentation-link" => "helpLink" }
   - if can_admin_issue?
     .selectbox

app/views/shared/milestones/_issuable.html.haml

@@ -21,7 +21,7 @@
       %span.issuable-number= issuable.to_reference
     - labels.each do |label|
-      = render_label(label.present(issuable_subject: project), link: polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }))
+      = render_label(label.present(issuable_subject: project), link: polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }), small: true)
     %span.assignee-icon
       - assignees.each do |assignee|

app/views/shared/milestones/_labels_tab.html.haml

@@ -3,11 +3,9 @@
     - options = { milestone_title: @milestone.title, label_name: label.title }
     %li.no-border
-      %span.label-row
-        %span.label-name
-          = render_label(label, tooltip: false, link: milestones_label_path(options))
-        %span.prepend-description-left
-          = markdown_field(label, :description)
+      = render_label(label, tooltip: false, link: milestones_label_path(options))
+      %span.prepend-description-left
+        = markdown_field(label, :description)
       .float-right.d-none.d-lg-block.d-xl-block
         = link_to milestones_label_path(options.merge(state: 'opened')), class: 'btn btn-transparent btn-action' do

changelogs/unreleased/196648-replace-_-with-lodash.yml

+---
+title: Replaced underscore with lodash for app/assets/javascripts/lib
+merge_request: 25042
+author: Shubham Pandey
+type: other

changelogs/unreleased/38144-replace-labels-in-haml-with-gitlab-ui-css.yml

+---
+title: New styles for scoped labels
+merge_request: 21377
+author:
+type: changed

changelogs/unreleased/Resolve-Migrate--fa-spinner-app-assets-javascripts-notes-components-discu.yml

+---
+title: Migrate .fa-spinner to .spinner for app/assets/javascripts/notes/components/discussion_resolve_button.vue
+merge_request: 25055
+author: nuwe1
+type: other

lib/banzai/filter/label_reference_filter.rb

@@ -93,23 +93,26 @@ module Banzai
         end
         presenter = object.present(issuable_subject: parent)
-        LabelsHelper.render_colored_label(presenter, label_suffix: label_suffix, title: tooltip_title(presenter))
+        LabelsHelper.render_colored_label(presenter, suffix: label_suffix)
       end
-      def tooltip_title(label)
-        nil
+      def wrap_link(link, label)
+        presenter = label.present(issuable_subject: project || group)
+        LabelsHelper.wrap_label_html(link, small: true, label: presenter)
       end
       def full_path_ref?(matches)
         matches[:namespace] && matches[:project]
       end
+      def reference_class(type, tooltip: true)
+        super + ' gl-link gl-label-link'
+      end
+
       def object_link_title(object, matches)
-        # use title of wrapped element instead
-        nil
+        presenter = object.present(issuable_subject: project || group)
+        LabelsHelper.label_tooltip_title(presenter)
       end
     end
   end
 end
-
-Banzai::Filter::LabelReferenceFilter.prepend_if_ee('EE::Banzai::Filter::LabelReferenceFilter')

lib/banzai/filter/reference_filter.rb

@@ -37,7 +37,8 @@ module Banzai
         attributes[:reference_type] ||= self.class.reference_type
         attributes[:container] ||= 'body'
-        attributes[:placement] ||= 'bottom'
+        attributes[:placement] ||= 'top'
+        attributes[:html] ||= 'true'
         attributes.delete(:original) if context[:no_original_data]
         attributes.map do |key, value|
           %Q(data-#{key.to_s.dasherize}="#{escape_once(value)}")

lib/gitlab/markdown_cache.rb

@@ -3,7 +3,7 @@
 module Gitlab
   module MarkdownCache
     # Increment this number every time the renderer changes its output
-    CACHE_COMMONMARK_VERSION        = 18
+    CACHE_COMMONMARK_VERSION        = 19
     CACHE_COMMONMARK_VERSION_START  = 10
     BaseError = Class.new(StandardError)

locale/gitlab.pot

@@ -5848,6 +5848,9 @@ msgstr ""
 msgid "CustomCycleAnalytics|Select stop event"
 msgstr ""
+msgid "CustomCycleAnalytics|Stage name already exists"
+msgstr ""
+
 msgid "CustomCycleAnalytics|Start event"
 msgstr ""
@@ -18564,9 +18567,6 @@ msgstr ""
 msgid "Subscription deletion failed."
 msgstr ""
-msgid "Subscription successfully applied to \"%{group_name}\""
-msgstr ""
-
 msgid "Subscription successfully created."
 msgstr ""
@@ -20756,6 +20756,12 @@ msgstr ""
 msgid "Uninstalling"
 msgstr ""
+msgid "Units|ms"
+msgstr ""
+
+msgid "Units|s"
+msgstr ""
+
 msgid "Unknown"
 msgstr ""

spec/features/boards/sidebar_spec.rb

@@ -277,7 +277,7 @@ describe 'Issue Boards', :js do
         wait_for_requests
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 2)
+          expect(page).to have_selector('.gl-label-text', count: 2)
           expect(page).to have_content(development.title)
           expect(page).to have_content(stretch.title)
         end
@@ -299,7 +299,7 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 3)
+          expect(page).to have_selector('.gl-label-text', count: 3)
           expect(page).to have_content(bug.title)
         end
       end
@@ -328,7 +328,7 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 4)
+          expect(page).to have_selector('.gl-label-text', count: 4)
           expect(page).to have_content(bug.title)
           expect(page).to have_content(regression.title)
         end
@@ -357,13 +357,13 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 1)
+          expect(page).to have_selector('.gl-label-text', count: 1)
           expect(page).not_to have_content(stretch.title)
         end
       end
       # 'Development' label does not show since the card is in a 'Development' list label
-      expect(card).to have_selector('.badge', count: 0)
+      expect(card).to have_selector('.gl-label-text', count: 0)
       expect(card).not_to have_content(stretch.title)
     end

spec/features/container_registry_spec.rb → spec/features/groups/container_registry_spec.rb

@@ -4,30 +4,31 @@ require 'spec_helper'
 describe 'Container Registry', :js do
   let(:user) { create(:user) }
-  let(:project) { create(:project) }
+  let(:group) { create(:group) }
+  let(:project) { create(:project, namespace: group) }
   let(:container_repository) do
     create(:container_repository, name: 'my/image')
   end
   before do
+    group.add_owner(user)
     sign_in(user)
-    project.add_developer(user)
     stub_container_registry_config(enabled: true)
     stub_container_registry_tags(repository: :any, tags: [])
-    stub_feature_flags(vue_container_registry_explorer: false)
   end
   it 'has a page title set' do
     visit_container_registry
-    expect(page).to have_title(_('Container Registry'))
+
+    expect(page).to have_title _('Container Registry')
   end
   context 'when there are no image repositories' do
-    it 'user visits container registry main page' do
+    it 'list page has no container title' do
       visit_container_registry
-      expect(page).to have_content 'no container images'
+      expect(page).to have_content _('There are no container images available in this group')
     end
   end
@@ -37,39 +38,56 @@ describe 'Container Registry', :js do
       project.container_repositories << container_repository
     end
-    it 'user wants to see multi-level container repository' do
+    it 'list page has a list of images' do
       visit_container_registry
-      expect(page).to have_content('my/image')
+      expect(page).to have_content 'my/image'
     end
-    it 'user removes entire container repository', :sidekiq_might_not_need_inline do
+    it 'image repository delete is disabled' do
       visit_container_registry
-      expect_any_instance_of(ContainerRepository).to receive(:delete_tags!).and_return(true)
-      click_on(class: 'js-remove-repo')
-      expect(find('.modal .modal-title')).to have_content 'Remove repository'
-      find('.modal .modal-footer .btn-danger').click
+      delete_btn = find('[title="Remove repository"]')
+      expect(delete_btn).to be_disabled
+    end
+
+    it 'navigates to repo details' do
+      visit_container_registry_details('my/image')
+      expect(page).to have_content 'latest'
     end
-    it 'user removes a specific tag from container repository' do
-      visit_container_registry
-      find('.js-toggle-repo').click
-      wait_for_requests
-      service = double('service')
-      expect(service).to receive(:execute).with(container_repository) { { status: :success } }
-      expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: ['latest']) { service }
-      click_on(class: 'js-delete-registry-row', visible: false)
-      expect(find('.modal .modal-title')).to have_content 'Remove tag'
-      find('.modal .modal-footer .btn-danger').click
+    describe 'image repo details' do
+      before do
+        visit_container_registry_details 'my/image'
+      end
+      it 'shows the details breadcrumb' do
+        expect(find('.breadcrumbs')).to have_link 'my/image'
+      end
+      it 'shows the image title' do
+        expect(page).to have_content 'my/image tags'
+      end
+      it 'user removes a specific tag from container repository' do
+        service = double('service')
+        expect(service).to receive(:execute).with(container_repository) { { status: :success } }
+        expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: ['latest']) { service }
+
+        click_on(class: 'js-delete-registry')
+        expect(find('.modal .modal-title')).to have_content _('Remove tag')
+        find('.modal .modal-footer .btn-danger').click
+      end
     end
   end
   def visit_container_registry
-    visit project_container_registry_index_path(project)
+    visit group_container_registries_path(group)
+  end
+
+  def visit_container_registry_details(name)
+    visit_container_registry
+    click_link(name)
   end
 end

spec/features/issuables/issuable_list_spec.rb

@@ -41,10 +41,10 @@ describe 'issuable list' do
       visit_issuable_list(issuable_type)
-      expect(all('.label-link')[0].text).to have_content('B')
-      expect(all('.label-link')[1].text).to have_content('X')
-      expect(all('.label-link')[2].text).to have_content('a')
-      expect(all('.label-link')[3].text).to have_content('z')
+      expect(all('.gl-label-text')[0].text).to have_content('B')
+      expect(all('.gl-label-text')[1].text).to have_content('X')
+      expect(all('.gl-label-text')[2].text).to have_content('a')
+      expect(all('.gl-label-text')[3].text).to have_content('z')
     end
   end

spec/features/issues/filtered_search/filter_issues_spec.rb

@@ -332,7 +332,7 @@ describe 'Filter issues', :js do
     context 'issue label clicked' do
       it 'filters and displays in search bar' do
-        find('.issues-list .issue .issuable-main-info .issuable-info a .badge', text: multiple_words_label.title).click
+        find('.issues-list .issue .issuable-main-info .issuable-info a .gl-label-text', text: multiple_words_label.title).click
         expect_issues_list_count(1)
         expect_tokens([label_token("\"#{multiple_words_label.title}\"")])

spec/features/labels_hierarchy_spec.rb

@@ -161,9 +161,9 @@ describe 'Labels Hierarchy', :js do
       find('.btn-success').click
       expect(page.find('.issue-details h2.title')).to have_content('new created issue')
-      expect(page).to have_selector('span.badge', text: grandparent_group_label.title)
-      expect(page).to have_selector('span.badge', text: parent_group_label.title)
-      expect(page).to have_selector('span.badge', text: project_label_1.title)
+      expect(page).to have_selector('span.gl-label-text', text: grandparent_group_label.title)
+      expect(page).to have_selector('span.gl-label-text', text: parent_group_label.title)
+      expect(page).to have_selector('span.gl-label-text', text: project_label_1.title)
     end
   end

spec/features/projects/container_registry_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Container Registry', :js do
+  let(:user) { create(:user) }
+  let(:project) { create(:project) }
+
+  let(:container_repository) do
+    create(:container_repository, name: 'my/image')
+  end
+
+  before do
+    sign_in(user)
+    project.add_developer(user)
+    stub_container_registry_config(enabled: true)
+    stub_container_registry_tags(repository: :any, tags: [])
+  end
+
+  describe 'Registry explorer is off' do
+    before do
+      stub_feature_flags(vue_container_registry_explorer: false)
+    end
+
+    it 'has a page title set' do
+      visit_container_registry
+
+      expect(page).to have_title _('Container Registry')
+    end
+
+    context 'when there are no image repositories' do
+      it 'user visits container registry main page' do
+        visit_container_registry
+
+        expect(page).to have_content _('no container images')
+      end
+    end
+
+    context 'when there are image repositories' do
+      before do
+        stub_container_registry_tags(repository: %r{my/image}, tags: %w[latest], with_manifest: true)
+        project.container_repositories << container_repository
+      end
+
+      it 'user wants to see multi-level container repository' do
+        visit_container_registry
+
+        expect(page).to have_content 'my/image'
+      end
+
+      it 'user removes entire container repository', :sidekiq_might_not_need_inline do
+        visit_container_registry
+
+        expect_any_instance_of(ContainerRepository).to receive(:delete_tags!).and_return(true)
+
+        click_on(class: 'js-remove-repo')
+        expect(find('.modal .modal-title')).to have_content _('Remove repository')
+        find('.modal .modal-footer .btn-danger').click
+      end
+
+      it 'user removes a specific tag from container repository' do
+        visit_container_registry
+
+        find('.js-toggle-repo').click
+        wait_for_requests
+
+        service = double('service')
+        expect(service).to receive(:execute).with(container_repository) { { status: :success } }
+        expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: ['latest']) { service }
+
+        click_on(class: 'js-delete-registry-row', visible: false)
+        expect(find('.modal .modal-title')).to have_content _('Remove tag')
+        find('.modal .modal-footer .btn-danger').click
+      end
+    end
+  end
+
+  describe 'Registry explorer is on' do
+    it 'has a page title set' do
+      visit_container_registry
+
+      expect(page).to have_title _('Container Registry')
+    end
+
+    context 'when there are no image repositories' do
+      it 'list page has no container title' do
+        visit_container_registry
+
+        expect(page).to have_content _('There are no container images stored for this project')
+      end
+
+      it 'list page has quickstart' do
+        visit_container_registry
+
+        expect(page).to have_content _('Quick Start')
+      end
+    end
+
+    context 'when there are image repositories' do
+      before do
+        stub_container_registry_tags(repository: %r{my/image}, tags: %w[latest], with_manifest: true)
+        project.container_repositories << container_repository
+      end
+
+      it 'list page has a list of images' do
+        visit_container_registry
+
+        expect(page).to have_content 'my/image'
+      end
+
+      it 'user removes entire container repository', :sidekiq_might_not_need_inline do
+        visit_container_registry
+
+        expect_any_instance_of(ContainerRepository).to receive(:delete_tags!).and_return(true)
+
+        find('[title="Remove repository"]').click
+        expect(find('.modal .modal-title')).to have_content _('Remove repository')
+        find('.modal .modal-footer .btn-danger').click
+      end
+
+      it 'navigates to repo details' do
+        visit_container_registry_details('my/image')
+
+        expect(page).to have_content 'latest'
+      end
+
+      describe 'image repo details' do
+        before do
+          visit_container_registry_details 'my/image'
+        end
+
+        it 'shows the details breadcrumb' do
+          expect(find('.breadcrumbs')).to have_link 'my/image'
+        end
+
+        it 'shows the image title' do
+          expect(page).to have_content 'my/image tags'
+        end
+
+        it 'user removes a specific tag from container repository' do
+          service = double('service')
+          expect(service).to receive(:execute).with(container_repository) { { status: :success } }
+          expect(Projects::ContainerRepository::DeleteTagsService).to receive(:new).with(container_repository.project, user, tags: ['latest']) { service }
+
+          click_on(class: 'js-delete-registry')
+          expect(find('.modal .modal-title')).to have_content _('Remove tag')
+          find('.modal .modal-footer .btn-danger').click
+        end
+      end
+    end
+  end
+
+  def visit_container_registry
+    visit project_container_registry_index_path(project)
+  end
+
+  def visit_container_registry_details(name)
+    visit_container_registry
+    click_link(name)
+  end
+end

spec/frontend/lib/utils/unit_format/formatter_factory_spec.js

+import {
+  numberFormatter,
+  suffixFormatter,
+  scaledSIFormatter,
+} from '~/lib/utils/unit_format/formatter_factory';
+
+describe('unit_format/formatter_factory', () => {
+  describe('numberFormatter', () => {
+    let formatNumber;
+    beforeEach(() => {
+      formatNumber = numberFormatter();
+    });
+
+    it('formats a integer', () => {
+      expect(formatNumber(1)).toEqual('1');
+      expect(formatNumber(100)).toEqual('100');
+      expect(formatNumber(1000)).toEqual('1,000');
+      expect(formatNumber(10000)).toEqual('10,000');
+      expect(formatNumber(1000000)).toEqual('1,000,000');
+    });
+
+    it('formats a floating point number', () => {
+      expect(formatNumber(0.1)).toEqual('0.1');
+      expect(formatNumber(0.1, 0)).toEqual('0');
+      expect(formatNumber(0.1, 2)).toEqual('0.10');
+      expect(formatNumber(0.1, 3)).toEqual('0.100');
+
+      expect(formatNumber(12.345)).toEqual('12.345');
+      expect(formatNumber(12.345, 2)).toEqual('12.35');
+      expect(formatNumber(12.345, 4)).toEqual('12.3450');
+    });
+
+    it('formats a large integer with a length limit', () => {
+      expect(formatNumber(10 ** 7, undefined)).toEqual('10,000,000');
+      expect(formatNumber(10 ** 7, undefined, 9)).toEqual('1.00e+7');
+      expect(formatNumber(10 ** 7, undefined, 10)).toEqual('10,000,000');
+    });
+  });
+
+  describe('suffixFormatter', () => {
+    let formatSuffix;
+    beforeEach(() => {
+      formatSuffix = suffixFormatter('pop.', undefined);
+    });
+
+    it('formats a integer', () => {
+      expect(formatSuffix(1)).toEqual('1pop.');
+      expect(formatSuffix(100)).toEqual('100pop.');
+      expect(formatSuffix(1000)).toEqual('1,000pop.');
+      expect(formatSuffix(10000)).toEqual('10,000pop.');
+      expect(formatSuffix(1000000)).toEqual('1,000,000pop.');
+    });
+
+    it('formats a floating point number', () => {
+      expect(formatSuffix(0.1)).toEqual('0.1pop.');
+      expect(formatSuffix(0.1, 0)).toEqual('0pop.');
+      expect(formatSuffix(0.1, 2)).toEqual('0.10pop.');
+      expect(formatSuffix(0.1, 3)).toEqual('0.100pop.');
+
+      expect(formatSuffix(12.345)).toEqual('12.345pop.');
+      expect(formatSuffix(12.345, 2)).toEqual('12.35pop.');
+      expect(formatSuffix(12.345, 4)).toEqual('12.3450pop.');
+    });
+
+    it('formats a negative integer', () => {
+      expect(formatSuffix(-1)).toEqual('-1pop.');
+      expect(formatSuffix(-100)).toEqual('-100pop.');
+      expect(formatSuffix(-1000)).toEqual('-1,000pop.');
+      expect(formatSuffix(-10000)).toEqual('-10,000pop.');
+      expect(formatSuffix(-1000000)).toEqual('-1,000,000pop.');
+    });
+
+    it('formats a floating point nugative number', () => {
+      expect(formatSuffix(-0.1)).toEqual('-0.1pop.');
+      expect(formatSuffix(-0.1, 0)).toEqual('-0pop.');
+      expect(formatSuffix(-0.1, 2)).toEqual('-0.10pop.');
+      expect(formatSuffix(-0.1, 3)).toEqual('-0.100pop.');
+
+      expect(formatSuffix(-12.345)).toEqual('-12.345pop.');
+      expect(formatSuffix(-12.345, 2)).toEqual('-12.35pop.');
+      expect(formatSuffix(-12.345, 4)).toEqual('-12.3450pop.');
+    });
+
+    it('formats a large integer', () => {
+      expect(formatSuffix(10 ** 7)).toEqual('10,000,000pop.');
+      expect(formatSuffix(10 ** 10)).toEqual('10,000,000,000pop.');
+    });
+
+    it('formats a large integer with a length limit', () => {
+      expect(formatSuffix(10 ** 7, undefined, 10)).toEqual('1.00e+7pop.');
+      expect(formatSuffix(10 ** 10, undefined, 10)).toEqual('1.00e+10pop.');
+    });
+  });
+
+  describe('scaledSIFormatter', () => {
+    describe('scaled format', () => {
+      let formatScaled;
+
+      beforeEach(() => {
+        formatScaled = scaledSIFormatter('B');
+      });
+
+      it('formats bytes', () => {
+        expect(formatScaled(12.345)).toEqual('12.345B');
+        expect(formatScaled(12.345, 0)).toEqual('12B');
+        expect(formatScaled(12.345, 1)).toEqual('12.3B');
+        expect(formatScaled(12.345, 2)).toEqual('12.35B');
+      });
+
+      it('formats bytes in a scale', () => {
+        expect(formatScaled(1)).toEqual('1B');
+        expect(formatScaled(10)).toEqual('10B');
+        expect(formatScaled(10 ** 2)).toEqual('100B');
+        expect(formatScaled(10 ** 3)).toEqual('1kB');
+        expect(formatScaled(10 ** 4)).toEqual('10kB');
+        expect(formatScaled(10 ** 5)).toEqual('100kB');
+        expect(formatScaled(10 ** 6)).toEqual('1MB');
+        expect(formatScaled(10 ** 7)).toEqual('10MB');
+        expect(formatScaled(10 ** 8)).toEqual('100MB');
+        expect(formatScaled(10 ** 9)).toEqual('1GB');
+        expect(formatScaled(10 ** 10)).toEqual('10GB');
+        expect(formatScaled(10 ** 11)).toEqual('100GB');
+      });
+    });
+
+    describe('scaled format with offset', () => {
+      let formatScaled;
+
+      beforeEach(() => {
+        // formats gigabytes
+        formatScaled = scaledSIFormatter('B', 3);
+      });
+
+      it('formats floating point numbers', () => {
+        expect(formatScaled(12.345)).toEqual('12.345GB');
+        expect(formatScaled(12.345, 0)).toEqual('12GB');
+        expect(formatScaled(12.345, 1)).toEqual('12.3GB');
+        expect(formatScaled(12.345, 2)).toEqual('12.35GB');
+      });
+
+      it('formats large numbers scaled', () => {
+        expect(formatScaled(1)).toEqual('1GB');
+        expect(formatScaled(1, 1)).toEqual('1.0GB');
+        expect(formatScaled(10)).toEqual('10GB');
+        expect(formatScaled(10 ** 2)).toEqual('100GB');
+        expect(formatScaled(10 ** 3)).toEqual('1TB');
+        expect(formatScaled(10 ** 4)).toEqual('10TB');
+        expect(formatScaled(10 ** 5)).toEqual('100TB');
+        expect(formatScaled(10 ** 6)).toEqual('1PB');
+        expect(formatScaled(10 ** 7)).toEqual('10PB');
+        expect(formatScaled(10 ** 8)).toEqual('100PB');
+        expect(formatScaled(10 ** 9)).toEqual('1EB');
+      });
+
+      it('formatting of too large numbers is not suported', () => {
+        // formatting YB is out of range
+        expect(() => scaledSIFormatter('B', 9)).toThrow();
+      });
+    });
+
+    describe('scaled format with negative offset', () => {
+      let formatScaled;
+
+      beforeEach(() => {
+        formatScaled = scaledSIFormatter('g', -1);
+      });
+
+      it('formats floating point numbers', () => {
+        expect(formatScaled(12.345)).toEqual('12.345mg');
+        expect(formatScaled(12.345, 0)).toEqual('12mg');
+        expect(formatScaled(12.345, 1)).toEqual('12.3mg');
+        expect(formatScaled(12.345, 2)).toEqual('12.35mg');
+      });
+
+      it('formats large numbers scaled', () => {
+        expect(formatScaled(1)).toEqual('1mg');
+        expect(formatScaled(1, 1)).toEqual('1.0mg');
+        expect(formatScaled(10)).toEqual('10mg');
+        expect(formatScaled(10 ** 2)).toEqual('100mg');
+        expect(formatScaled(10 ** 3)).toEqual('1g');
+        expect(formatScaled(10 ** 4)).toEqual('10g');
+        expect(formatScaled(10 ** 5)).toEqual('100g');
+        expect(formatScaled(10 ** 6)).toEqual('1kg');
+        expect(formatScaled(10 ** 7)).toEqual('10kg');
+        expect(formatScaled(10 ** 8)).toEqual('100kg');
+      });
+
+      it('formats negative numbers scaled', () => {
+        expect(formatScaled(-12.345)).toEqual('-12.345mg');
+        expect(formatScaled(-12.345, 0)).toEqual('-12mg');
+        expect(formatScaled(-12.345, 1)).toEqual('-12.3mg');
+        expect(formatScaled(-12.345, 2)).toEqual('-12.35mg');
+
+        expect(formatScaled(-10)).toEqual('-10mg');
+        expect(formatScaled(-100)).toEqual('-100mg');
+        expect(formatScaled(-(10 ** 4))).toEqual('-10g');
+      });
+    });
+  });
+});