Skip to content

Commit caea2ab

Browse files
emyarodkodiakhq[bot]
emyarod
and
kodiakhq[bot]
authored
fix(code-snippet): update component to spec (#7214)
* feat(copy-button): add active state background color * fix(code-snippet): reposition multiline copy button * docs(CodeSnippet): remove container div width rule * fix(code-snippet): use correct light color token * feat(code-snippet): add active light copy button styles * fix(code-snippet): decrease copy button size * fix(code-snippet): reposition expand button * fix(code-snippet): replace ui-02 token * refactor(code-snippet): replace ui-01 usage * fix(code-snippet): use new active-light-ui token * docs(CodeSnippet): set default playground story type * refactor(code-snippet): reduce selector specificity * fix(code-snippet): remove hover effect on light no-copy inline snippet Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 824c1b0 commit caea2ab

File tree

5 files changed

+56
-34
lines changed

5 files changed

+56
-34
lines changed

‎packages/components/src/components/code-snippet/_code-snippet.scss‎

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
display: inline;
3636
padding: 0;
3737
color: $text-01;
38-
background-color: $ui-01;
38+
background-color: $field-01;
3939
border: 2px solid transparent;
4040
border-radius: 4px;
4141
cursor: pointer;
@@ -98,11 +98,16 @@
9898
display: inline-block;
9999

100100
&:hover {
101-
background-color: $ui-01;
101+
background-color: $field-01;
102102
cursor: auto;
103103
}
104104
}
105105

106+
.#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
107+
background-color: $field-02;
108+
cursor: auto;
109+
}
110+
106111
// Single Line Snippet
107112
.#{$prefix}--snippet--single {
108113
@include bx--snippet;
@@ -149,7 +154,7 @@
149154
width: rem(16px);
150155
height: 100%;
151156
// Safari interprets `transparent` differently, so make color token value transparent instead:
152-
background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
157+
background-image: linear-gradient(to right, rgba($field-01, 0), $field-01);
153158
content: '';
154159
}
155160

@@ -211,7 +216,7 @@
211216
width: rem(16px);
212217
height: 100%;
213218
// Safari interprets `transparent` differently, so make color token value transparent instead:
214-
background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
219+
background-image: linear-gradient(to right, rgba($field-01, 0), $field-01);
215220
content: '';
216221
}
217222

@@ -240,7 +245,7 @@
240245
height: $carbon--spacing-08;
241246
padding: 0;
242247
overflow: visible;
243-
background-color: $ui-01;
248+
background-color: $field-01;
244249
border: none;
245250
outline: none;
246251
cursor: pointer;
@@ -304,12 +309,11 @@
304309
@include carbon--font-family('sans');
305310

306311
position: absolute;
307-
right: $spacing-03;
312+
right: 0;
308313
bottom: $spacing-03;
309314
display: inline-flex;
310315
align-items: center;
311-
padding: $spacing-03;
312-
padding-left: $carbon--spacing-05;
316+
padding: $spacing-03 $spacing-05;
313317
color: $text-01;
314318
background-color: $field-01;
315319
border: 0;
@@ -356,29 +360,33 @@
356360
}
357361

358362
// Light version
359-
.#{$prefix}--snippet.#{$prefix}--snippet--light,
360-
.#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--snippet-button,
361-
.#{$prefix}--snippet.#{$prefix}--snippet--light
362-
.#{$prefix}--snippet-btn--expand,
363-
.#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn {
364-
background-color: $ui-02;
363+
.#{$prefix}--snippet--light,
364+
.#{$prefix}--snippet--light .#{$prefix}--snippet-button,
365+
.#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand,
366+
.#{$prefix}--snippet--light .#{$prefix}--copy-btn {
367+
background-color: $field-02;
365368
}
366369

367-
.#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
368-
.#{$prefix}--snippet.#{$prefix}--snippet--light
369-
.#{$prefix}--snippet-button:hover,
370-
.#{$prefix}--snippet.#{$prefix}--snippet--light
371-
.#{$prefix}--snippet-btn--expand:hover,
372-
.#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
373-
background-color: $hover-ui-light;
370+
.#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
371+
.#{$prefix}--snippet--light .#{$prefix}--snippet-button:hover,
372+
.#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand:hover,
373+
.#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
374+
background-color: $hover-light-ui;
374375
}
375376

376-
.#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
377-
.#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--multi
377+
.#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
378+
.#{$prefix}--snippet--light .#{$prefix}--snippet-button:active,
379+
.#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand:active,
380+
.#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
381+
background-color: $active-light-ui;
382+
}
383+
384+
.#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
385+
.#{$prefix}--snippet--light.#{$prefix}--snippet--multi
378386
.#{$prefix}--snippet-container
379387
pre::after {
380388
// Safari interprets `transparent` differently, so make color token value transparent instead:
381-
background-image: linear-gradient(to right, rgba($ui-02, 0), $ui-02);
389+
background-image: linear-gradient(to right, rgba($field-02, 0), $field-02);
382390
}
383391

384392
// Skeleton State
@@ -417,6 +425,13 @@
417425
}
418426
}
419427

428+
.#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
429+
top: $carbon--spacing-03;
430+
right: $carbon--spacing-03;
431+
width: $carbon--spacing-07;
432+
height: $carbon--spacing-07;
433+
}
434+
420435
.#{$prefix}--snippet--multi
421436
.#{$prefix}--snippet-button
422437
.#{$prefix}--btn--copy__feedback {

‎packages/components/src/components/code-snippet/_mixins.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@
1616
position: relative;
1717
width: 100%;
1818
max-width: rem(600px);
19-
background: $snippet-background-color;
19+
background-color: $snippet-background-color;
2020
}

‎packages/components/src/components/copy-button/_copy-button.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
background-color: $hover-ui;
9595
}
9696

97+
&:active {
98+
background-color: $active-ui;
99+
}
100+
97101
&::before {
98102
@include tooltip--caret;
99103

‎packages/components/src/globals/scss/_theme-tokens.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -189,8 +189,7 @@ $checkbox-border-width: 2px !default;
189189
/// @type Color
190190
/// @access public
191191
/// @group code-snippet
192-
/// TODO: Define for experimental
193-
$snippet-background-color: $ui-01 !default;
192+
$snippet-background-color: $field-01 !default;
194193

195194
/// @type Color
196195
/// @access public

‎packages/react/src/components/CodeSnippet/CodeSnippet-story.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const singleline = () => (
7272
);
7373

7474
export const skeleton = () => (
75-
<div style={{ width: '800px' }}>
75+
<div>
7676
<CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
7777
<CodeSnippetSkeleton type="multi" />
7878
</div>
@@ -99,11 +99,15 @@ const lightPropMessage = (
9999
);
100100

101101
const props = () => ({
102-
type: select('Type', {
103-
inline: 'inline',
104-
'single line': 'single',
105-
'multiple line': 'multi',
106-
}),
102+
type: select(
103+
'Type',
104+
{
105+
inline: 'inline',
106+
'single line': 'single',
107+
'multiple line': 'multi',
108+
},
109+
'inline'
110+
),
107111
light: boolean('Light variant', false),
108112
feedback: text('Feedback text', 'Copied to clipboard'),
109113
showMoreText: text('Text for "show more" button', 'Show more'),
@@ -116,7 +120,7 @@ const props = () => ({
116120
});
117121

118122
export const playground = () => (
119-
<div className={props().light ? 'bx--tile' : ''} style={{ width: '800px' }}>
123+
<div className={props().light ? 'bx--tile' : ''}>
120124
{props().light && lightPropMessage}
121125
<CodeSnippet {...props()}>
122126
{props().type === 'multi'

0 commit comments

Comments
 (0)