From 85979f649ed345c5078382c8e90c0914852c2ea1 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Wed, 9 May 2018 13:08:27 -0500 Subject: [PATCH 01/11] feat(code-snippet): Update code snippet styles and names --- src/components/code-snippet/README.md | 7 +- .../code-snippet/_code-snippet.scss | 91 +++++++++++++------ src/components/code-snippet/_mixins.scss | 4 +- src/components/code-snippet/code-snippet.html | 32 ------- src/components/code-snippet/code-snippet.js | 12 +++ .../code-snippet/inline-code-snippet.html | 6 ++ src/components/code-snippet/migrate-to-9.x.md | 13 +++ .../code-snippet/multi-line-code-snippet.html | 38 ++++++++ ...nal.html => single-line-code-snippet.html} | 2 +- src/globals/scss/_colors.scss | 2 +- src/globals/scss/_vars.scss | 29 ++++-- 11 files changed, 160 insertions(+), 76 deletions(-) delete mode 100644 src/components/code-snippet/code-snippet.html create mode 100644 src/components/code-snippet/code-snippet.js create mode 100644 src/components/code-snippet/inline-code-snippet.html create mode 100644 src/components/code-snippet/migrate-to-9.x.md create mode 100644 src/components/code-snippet/multi-line-code-snippet.html rename src/components/code-snippet/{code-snippet--terminal.html => single-line-code-snippet.html} (94%) diff --git a/src/components/code-snippet/README.md b/src/components/code-snippet/README.md index 5495eeaa706e..df4a6407152d 100644 --- a/src/components/code-snippet/README.md +++ b/src/components/code-snippet/README.md @@ -11,9 +11,10 @@ Mixins specific to Code Snippet are located in [src/components/code-snippet/_mix #### Modifiers -Use these modifiers with `.bx--root-class` class. +Use these modifiers with `.bx--snippet` class. | Selector | Description | |----------------------------------|------------------------------------| -| .bx--snippet--code | Styles for multiple lines of code | -| .bx--snippet--terminal | Styles for single lines of code | +| .bx--snippet--single | Styles for multiple lines of code | +| .bx--snippet--multi | Styles for single lines of code | +| .bx--snippet--inline | Styles for code inline inside text | \ No newline at end of file diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss index bebd67edd4d6..fd51371c62e2 100644 --- a/src/components/code-snippet/_code-snippet.scss +++ b/src/components/code-snippet/_code-snippet.scss @@ -8,42 +8,63 @@ @import 'mixins'; @include exports('snippet') { - .#{$prefix}--snippet--code { - @include bx--snippet; - background-color: $snippet-background-color; - padding: $spacing-md $spacing-2xl $spacing-md $spacing-md; - } - .#{$prefix}--snippet code { @include typescale('epsilon'); + font-family: $font-family-mono; } - .#{$prefix}--snippet--code .#{$prefix}--snippet-container { - max-height: rem(192px); - overflow-y: scroll; - margin-right: $spacing-md; - position: relative; + // Inline Code Snippet + .#{$prefix}--snippet--inline { + padding: 0; + background: transparent; } - .#{$prefix}--snippet--code .#{$prefix}--snippet-container pre { - white-space: pre-wrap; + .#{$prefix}--snippet--inline code { + background-color: $field-01; + border-radius: 4px; + padding: 0 $spacing-xs; + cursor: pointer; } - .#{$prefix}--snippet--terminal { + .#{$prefix}--snippet--inline:hover code { + background-color: darken($field-01, 10%); + } + + // Single Line Snippet + .#{$prefix}--snippet--single { @include bx--snippet; - background-color: $text-01; - color: $inverse-01; - height: 3.5rem; + height: rem(56px); padding: 0 $spacing-2xl 0 $spacing-md; } - .#{$prefix}--snippet--terminal .#{$prefix}--snippet-container { + .#{$prefix}--snippet--single .#{$prefix}--snippet-container { display: flex; align-items: center; height: 130%; white-space: nowrap; overflow-x: scroll; position: relative; + padding-bottom: $spacing-md; + } + + // Multi Line Snippet + .#{$prefix}--snippet--multi { + @include bx--snippet; + padding: $spacing-md $spacing-3xl $spacing-md $spacing-lg; + } + + .#{$prefix}--snippet--multi .#{$prefix}--snippet-container { + max-height: rem(254px); + overflow: hidden; + position: relative; + } + + .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre { + white-space: pre-wrap; + } + + .#{$prefix}--snippet--expanded.#{$prefix}--snippet--multi .#{$prefix}--snippet-container { + max-height: none; } .#{$prefix}--snippet__icon { @@ -53,15 +74,7 @@ transition: $transition--base; &:hover { - fill: $brand-02; - } - } - - .#{$prefix}--snippet--terminal .#{$prefix}--snippet__icon { - fill: $inverse-01; - - &:hover { - fill: $brand-02; + fill: $hover-primary; } } @@ -69,7 +82,7 @@ @include reset; cursor: pointer; position: absolute; - top: 0.5rem; + top: 0.675rem; right: 0.5rem; border: none; background-color: transparent; @@ -91,4 +104,26 @@ top: 1rem; right: 1.25rem; } + + .#{$prefix}--snippet-btn--expand { + position: absolute; + right: 0; + bottom: 0; + } + + .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand { + display: none; + } + + .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down { + fill: $brand-01; + } + + .#{$prefix}--snippet-btn--expand:hover .#{$prefix}--icon-chevron--down { + fill: $inverse-01; + } + + .#{$prefix}--snippet--expanded .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down { + transform: rotate(180deg); + } } diff --git a/src/components/code-snippet/_mixins.scss b/src/components/code-snippet/_mixins.scss index f761a4461aec..d24a57438e15 100644 --- a/src/components/code-snippet/_mixins.scss +++ b/src/components/code-snippet/_mixins.scss @@ -1,6 +1,8 @@ @mixin bx--snippet { + background: $snippet-background-color; + border: 1px solid $snipppet-border-color; font-family: $font-family-mono; position: relative; - max-width: rem(640px); + max-width: rem(600px); width: 100%; } diff --git a/src/components/code-snippet/code-snippet.html b/src/components/code-snippet/code-snippet.html deleted file mode 100644 index 229335ed9285..000000000000 --- a/src/components/code-snippet/code-snippet.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
- - 
-@mixin bx--snippet($type) {
-  @if $type == 'terminal' {
-    background-color: red;
-  } @else if $type == 'code' {
-    background-color: blue;
-  } @else if $type == 'text' {
-    background-color: white;
-  }
-
-  @if $type == 'terminal' {
-    background-color: red;
-  } @else if $type == 'code' {
-    background-color: blue;
-  } @else if $type == 'text' {
-    background-color: white;
-  }
-}
-
- -
- -
diff --git a/src/components/code-snippet/code-snippet.js b/src/components/code-snippet/code-snippet.js new file mode 100644 index 000000000000..1895b6bd8ffe --- /dev/null +++ b/src/components/code-snippet/code-snippet.js @@ -0,0 +1,12 @@ +/* + + Get the height of .bx--snippet--multi + + If height of .bx--snippet--multi is less than 288px then we need to hide the show more button + so... add class .bx--snippet-btn--expand--hide to .bx--snippet-btn--expand + + click more button add class .bx--snippet--expanded to .bx--snippet--multi and change text from "show more" + to "show less" + --what about i18n? + + */ diff --git a/src/components/code-snippet/inline-code-snippet.html b/src/components/code-snippet/inline-code-snippet.html new file mode 100644 index 000000000000..37b58eb8e7e0 --- /dev/null +++ b/src/components/code-snippet/inline-code-snippet.html @@ -0,0 +1,6 @@ + +
+

Here is an example of a text that a user would be reading. In this paragraph would be inline code that the user could look at and copy in to their code editor.

+
+ +

Here is an example of a text that a user would be reading. In this paragraph would be inline code that the user could look at and copy in to their code editor.

diff --git a/src/components/code-snippet/migrate-to-9.x.md b/src/components/code-snippet/migrate-to-9.x.md new file mode 100644 index 000000000000..3e665aac8b82 --- /dev/null +++ b/src/components/code-snippet/migrate-to-9.x.md @@ -0,0 +1,13 @@ +### HTML + +Terminal snippet has been renamed to Single line snippet, Code snippet has been renamed to Multi-line snippet and we have added a new variation, Inline snippet. + +### SCSS + +|Old Class |New Class | +|------------------------|------------------------| +|`bx--snippet--terminal` |`bx--snippet--single` | +|`bx--snippet--code` |`bx--snippet--multi` | +| n/a | `bx--snippet--inline` | + + diff --git a/src/components/code-snippet/multi-line-code-snippet.html b/src/components/code-snippet/multi-line-code-snippet.html new file mode 100644 index 000000000000..fd18e8d19e30 --- /dev/null +++ b/src/components/code-snippet/multi-line-code-snippet.html @@ -0,0 +1,38 @@ +
+ +
+ + 
+<div class="bx--snippet bx--snippet--multi bx--snippet--expanded">
+  <div class="bx--snippet-container">
+    <code>
+      <pre></pre>
+    </code>
+  </div>
+<button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
+  <svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
+    <path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
+    <path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
+  </svg>
+  <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+</button>
+<button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand" type="button">
+  Show more
+  <svg class="bx--icon-chevron--down" width='12' height='8' viewBox='0 0 12 8' fill-rule='evenodd' aria-label="Show more icon" alt="Show more icon"><title>Show more icon</title><path d='M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z'></path></svg>
+</button>
+</div>
+
+ +
+ + +
diff --git a/src/components/code-snippet/code-snippet--terminal.html b/src/components/code-snippet/single-line-code-snippet.html similarity index 94% rename from src/components/code-snippet/code-snippet--terminal.html rename to src/components/code-snippet/single-line-code-snippet.html index 1b01bff0afe2..a58f52427106 100644 --- a/src/components/code-snippet/code-snippet--terminal.html +++ b/src/components/code-snippet/single-line-code-snippet.html @@ -1,4 +1,4 @@ -
+
node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!
diff --git a/src/globals/scss/_colors.scss b/src/globals/scss/_colors.scss index a1b952a475dd..bdf285562436 100644 --- a/src/globals/scss/_colors.scss +++ b/src/globals/scss/_colors.scss @@ -3,7 +3,7 @@ $color__blue-20: #7cc7ff !default; $color__blue-30: #5aaafa !default; $color__blue-40: #5596e6 !default; $color__blue-50: #4178be !default; -$color__blue-90: #152935 !default; +$color__blue-90: #152934 !default; $color__navy-gray-1: #0f212e !default; $color__navy-gray-2: #20343e !default; $color__navy-gray-3: #2d3f49 !default; diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss index a3a19b4eb2c6..f15020a40870 100644 --- a/src/globals/scss/_vars.scss +++ b/src/globals/scss/_vars.scss @@ -25,16 +25,18 @@ $brand-01: $color__blue-51 !default; $brand-02: $color__blue-40 !default; $brand-03: $color__teal-20 !default; $inverse-01: $color__white !default; +$inverse-02: #272d33 !default; $ui-01: $color__white !default; -$ui-02: $color__gray-3 !default; -$ui-03: $color__gray-2 !default; -$ui-04: $color__gray-1 !default; -$ui-05: $color__navy-gray-7 !default; +$ui-02: #f4f7fb !default; +$ui-03: $color__gray-1 !default; +$ui-04: #8897a2 !default; +$ui-05: $color__navy-gray-6 !default; $text-01: $color__blue-90 !default; $text-02: $color__navy-gray-6 !default; -$text-03: $color__navy-gray-6 !default; -$field-01: rgba($color__blue-51, 0.1) !default; -$support-01: #E0182D !default; +$text-03: #cdd1d4 !default; +$field-01: #f4f7fb !default; +$field-02: $color__white !default; +$support-01: #e0182d !default; $support-02: $color__green-40 !default; $support-03: $color__yellow-30 !default; $support-04: $color__blue-30 !default; @@ -47,6 +49,12 @@ $nav-06: $color__teal-50 !default; $nav-07: $color__blue-30 !default; $nav-08: $color__blue-51 !default; +$hover-primary: darken($brand-01, 10%) !default; +$hover-primary-text: darken($brand-01, 15%) !default; +$hover-danger: darken($support-01, 10%) !default; +$hover-secondary: $brand-01 !default; +$hover-row: rgba($brand-02, 0.1) !default; + // Global $input-border: 1px solid transparent !default; $input-label-weight: 600 !default; @@ -65,7 +73,7 @@ $accordion-flex-direction: row !default; $accordion-justify-content: flex-start !default; $accordion-arrow-margin: 0 0 0 $spacing-2xs !default; $accordion-title-margin: 0 0 0 $spacing-md !default; -$accordion-content-padding: 0 $spacing-md 0 $spacing-2xl !default; +$accordion-content-padding: 0 $spacing-md 0 $spacing-2xl !default; // Card $card-text-align: center !default; @@ -75,7 +83,8 @@ $card-flex-align: center !default; $checkbox-border-width: 2px !default; // Code Snippet -$snippet-background-color: $field-01 !default; +$snippet-background-color: $ui-01 !default; +$snipppet-border-color: $ui-03 !default; // Content Switcher $content-switcher-border-radius: 8px !default; @@ -88,7 +97,7 @@ $data-table-row-height: 2rem !default; // Modal $modal-border-top: $brand-01 4px solid !default; -$modal-footer-background-color: $ui-03 !default; +$modal-footer-background-color: $ui-02 !default; // Progress Indicator $progress-indicator-bar-width: 1px inset transparent !default; From be74044a0e07971cf5011503998720573500269e Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 10 May 2018 13:25:02 -0500 Subject: [PATCH 02/11] feat(code-snippet): Update font size --- demo/scss/_page.scss | 10 +++++----- src/components/code-snippet/_code-snippet.scss | 1 + src/components/code-snippet/_mixins.scss | 3 ++- .../code-snippet/inline-code-snippet-light.html | 16 ++++++++++++++++ .../code-snippet/inline-code-snippet.html | 6 +----- 5 files changed, 25 insertions(+), 11 deletions(-) diff --git a/demo/scss/_page.scss b/demo/scss/_page.scss index 6971ecccdbd8..70a0211319b1 100644 --- a/demo/scss/_page.scss +++ b/demo/scss/_page.scss @@ -75,12 +75,12 @@ td { } } - button { - border-radius: 0; - } - & > *:not(.component-example):not(.component-variation), & > { + button { + border-radius: 0; + } + .page__divider-heading { @include typescale('zeta'); font-weight: 600; @@ -151,7 +151,7 @@ td { display: block; background-color: $brand-01; position: absolute; - top: -.5rem; + top: -0.5rem; left: 0; } diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss index d63d5f493b05..db72cf1d7088 100644 --- a/src/components/code-snippet/_code-snippet.scss +++ b/src/components/code-snippet/_code-snippet.scss @@ -23,6 +23,7 @@ border: 1px solid transparent; border-radius: 4px; background-color: $field-01; + font-size: 85%; cursor: pointer; &:hover { diff --git a/src/components/code-snippet/_mixins.scss b/src/components/code-snippet/_mixins.scss index 1ffdf3882f0b..6fa3e2d7797f 100644 --- a/src/components/code-snippet/_mixins.scss +++ b/src/components/code-snippet/_mixins.scss @@ -1,5 +1,6 @@ @mixin bx--snippet { - @include typescale('epsilon'); + @include typescale('omega'); + line-height: 1.45; background: $snippet-background-color; border: 1px solid $snippet-border-color; font-family: $font-family-mono; diff --git a/src/components/code-snippet/inline-code-snippet-light.html b/src/components/code-snippet/inline-code-snippet-light.html index 5545c9cf4c9c..a0c5a4bebc2d 100644 --- a/src/components/code-snippet/inline-code-snippet-light.html +++ b/src/components/code-snippet/inline-code-snippet-light.html @@ -6,3 +6,19 @@ that the user could look at and copy in to their code editor.

+ +

Here is an example of a text that a user would be reading. In this paragraph would be + + that the user could look at and copy in to their code editor.

+ +

Here is an example of a text that a user would be reading. In this paragraph would be + + that the user could look at and copy in to their code editor.

+ + diff --git a/src/components/code-snippet/inline-code-snippet.html b/src/components/code-snippet/inline-code-snippet.html index fb51b7e72adb..c2a04b15e815 100644 --- a/src/components/code-snippet/inline-code-snippet.html +++ b/src/components/code-snippet/inline-code-snippet.html @@ -1,12 +1,8 @@ -
+

Here is an example of a text that a user would be reading. In this paragraph would be - - - that the user could look at and copy in to their code editor.

-
\ No newline at end of file From 58acdd56341e9d8e14a9af9bcdce00aa69cd817c Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 10 May 2018 13:27:14 -0500 Subject: [PATCH 03/11] chore: cleanup html files --- .../code-snippet/inline-code-snippet-light.html | 17 ----------------- .../code-snippet/multi-line-code-snippet.html | 1 - 2 files changed, 18 deletions(-) diff --git a/src/components/code-snippet/inline-code-snippet-light.html b/src/components/code-snippet/inline-code-snippet-light.html index a0c5a4bebc2d..08d22a6eb4a2 100644 --- a/src/components/code-snippet/inline-code-snippet-light.html +++ b/src/components/code-snippet/inline-code-snippet-light.html @@ -5,20 +5,3 @@ that the user could look at and copy in to their code editor.

- - -

Here is an example of a text that a user would be reading. In this paragraph would be - - that the user could look at and copy in to their code editor.

- -

Here is an example of a text that a user would be reading. In this paragraph would be - - that the user could look at and copy in to their code editor.

- - diff --git a/src/components/code-snippet/multi-line-code-snippet.html b/src/components/code-snippet/multi-line-code-snippet.html index 47754d526760..7e2490cb26a5 100644 --- a/src/components/code-snippet/multi-line-code-snippet.html +++ b/src/components/code-snippet/multi-line-code-snippet.html @@ -1,5 +1,4 @@
- 

From ecab0ff5d3f2e56f795ce1fbb599fc95780db989 Mon Sep 17 00:00:00 2001
From: Alison Joseph 
Date: Thu, 10 May 2018 13:41:35 -0500
Subject: [PATCH 04/11] feat(code-snippet): Update feedback copy tooltip to
 match new styles

---
 src/components/code-snippet/_code-snippet.scss |  6 +++++-
 src/components/copy-button/_copy-button.scss   | 17 +++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
index db72cf1d7088..08c6b68a929e 100644
--- a/src/components/code-snippet/_code-snippet.scss
+++ b/src/components/code-snippet/_code-snippet.scss
@@ -120,12 +120,16 @@
   .#{$prefix}--snippet .#{$prefix}--btn--copy__feedback {
     @include font-family;
     z-index: z('overlay');
-    font-weight: 600;
+    font-weight: 400;
     left: inherit;
     top: 1rem;
     right: 1.25rem;
   }
 
+  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
+    right: auto;
+  }
+
   // Show more / less button
   .#{$prefix}--snippet-btn--expand {
     position: absolute;
diff --git a/src/components/copy-button/_copy-button.scss b/src/components/copy-button/_copy-button.scss
index 9c70893d3d90..defed5ac5423 100644
--- a/src/components/copy-button/_copy-button.scss
+++ b/src/components/copy-button/_copy-button.scss
@@ -31,21 +31,22 @@
       @include layer('overlay');
       @include typescale('omega');
       top: 1.1rem;
-      padding: 0.5rem 1rem;
-      border: 1px solid $ui-03;
-      color: $text-01;
+      padding: $spacing-2xs;
+      color: $inverse-01;
       content: attr(data-feedback);
       transform: translateX(-50%);
       white-space: nowrap;
       pointer-events: none;
+      border-radius: 4px;
+      font-weight: 400;
     }
 
     &:after {
       top: 0.85rem;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-right: 1px solid $ui-03;
-      border-bottom: 1px solid $ui-03;
+      width: 0.6rem;
+      height: 0.6rem;
+      border-right: 1px solid $inverse-02;
+      border-bottom: 1px solid $inverse-02;
       content: '';
       transform: rotate(-135deg);
     }
@@ -54,7 +55,7 @@
     &:after {
       position: absolute;
       display: block;
-      background: $ui-01;
+      background: $inverse-02;
     }
 
     &--displayed {

From 4d38a1cd0f018328ed32a7b185506a2a9d40ca96 Mon Sep 17 00:00:00 2001
From: Alison Joseph 
Date: Fri, 11 May 2018 12:21:26 -0500
Subject: [PATCH 05/11] chore: cleanup javascript

---
 src/components/code-snippet/code-snippet.js   | 35 ++++++++++++-------
 .../inline-code-snippet-light.html            |  1 -
 .../code-snippet/multi-line-code-snippet.html |  4 +--
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/code-snippet/code-snippet.js b/src/components/code-snippet/code-snippet.js
index 1e2c08feeb8b..fa0f5f3839a3 100644
--- a/src/components/code-snippet/code-snippet.js
+++ b/src/components/code-snippet/code-snippet.js
@@ -25,25 +25,29 @@ class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles)
   }
 
   _handleClick() {
-    this.element.parentElement.classList.toggle('bx--snippet--expand');
+    const expandBtn = this.element.querySelector(this.options.classExpandText);
+    this.element.classList.toggle(this.options.classExpanded);
 
-    if (this.element.parentElement.classList.contains('bx--snippet--expand')) {
-      this.element.querySelectorAll('.bx--snippet-btn--text')[0].innerHTML = this.options.showLess;
+    if (this.element.classList.contains(this.options.classExpanded)) {
+      expandBtn.textContent = expandBtn.getAttribute(this.options.showLessText);
     } else {
-      this.element.querySelectorAll('.bx--snippet-btn--text')[0].innerHTML = this.options.showMore;
+      expandBtn.textContent = expandBtn.getAttribute(this.options.showMoreText);
     }
   }
 
   _initCodeSnippet() {
-    this.element.querySelectorAll('.bx--snippet-btn--text')[0].innerHTML = this.options.showMore;
-    if (this.element.parentElement.offsetHeight < 288) {
-      this.element.classList.add('bx--snippet-btn--expand--hide');
-      this.element.parentElement.classList.add('bx--snippet--expand');
+    const expandBtn = this.element.querySelector(this.options.classExpandText);
+
+    expandBtn.textContent = expandBtn.getAttribute(this.options.showMoreText);
+
+    if (this.element.offsetHeight < this.options.minHeight) {
+      this.element.classList.add(this.options.classHideExpand);
+      this.element.classList.add(this.options.classExpanded);
     }
   }
 
   /**
-   * The map associating DOM element and copy button UI instance.
+   * The map associating DOM element and code snippet UI instance.
    * @member CodeSnippet.components
    * @type {WeakMap}
    */
@@ -56,12 +60,17 @@ class CodeSnippet extends mixin(createComponent, initComponentBySearch, handles)
    * properties in this object are overriden for the instance being create and how {@linkcode CodeSnippet.init .init()} works.
    * @member CodeSnippet.options
    * @type {Object}
-   * @property {string} selectorInit The data attribute to find copy button UIs.
+   * @property {string} selectorInit The data attribute to find code snippet UIs.
    */
   static options = {
-    selectorInit: '.bx--snippet--multi .bx--snippet-btn--expand',
-    showMore: 'Show more',
-    showLess: 'Show less',
+    selectorInit: '[data-code-snippet]',
+    showMoreText: 'data-show-more-text',
+    showLessText: 'data-show-less-text',
+    minHeight: 288,
+    classExpanded: 'bx--snippet--expand',
+    classExpandBtn: 'bx--snippet-btn--expand',
+    classExpandText: '.bx--snippet-btn--text',
+    classHideExpand: 'bx--snippet-btn--expand--hide',
   };
 }
 
diff --git a/src/components/code-snippet/inline-code-snippet-light.html b/src/components/code-snippet/inline-code-snippet-light.html
index 08d22a6eb4a2..0ee65a2dec6b 100644
--- a/src/components/code-snippet/inline-code-snippet-light.html
+++ b/src/components/code-snippet/inline-code-snippet-light.html
@@ -1,4 +1,3 @@
-
 
Here is an example of a text that a user would be reading. In this paragraph would be
From 201b4b911bc49a8c4bb295fa59af327b5c7fa97d Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 11 May 2018 14:30:45 -0500 Subject: [PATCH 06/11] feat(code-snippet): Update copy tooltip styles --- src/components/code-snippet/inline-code-snippet.html | 1 - src/components/copy-button/_copy-button.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/code-snippet/inline-code-snippet.html b/src/components/code-snippet/inline-code-snippet.html index c2a04b15e815..3f681c6145d4 100644 --- a/src/components/code-snippet/inline-code-snippet.html +++ b/src/components/code-snippet/inline-code-snippet.html @@ -1,4 +1,3 @@ -

Here is an example of a text that a user would be reading. In this paragraph would be