address feedback on PR

Author: cviterirei

src/components/fulfillmentTile/CdrFulfillmentTile.vue

@@ -12,6 +12,7 @@ defineOptions({ name: 'CdrFulfillmentTile' });
 const props = withDefaults(defineProps<surfaceSelection>(), {
   tag: 'div',
   role: 'checkbox',
+  borderRadius: 'soft'
 });
 
 const style = useCssModule();

src/components/fulfillmentTile/__tests__/__snapshots__/CdrFulfillmentTile.spec.js.snap

@@ -5,6 +5,7 @@ exports[`CdrFulfillmentTile > applies checked state 1`] = `
   aria-checked="true"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -56,6 +57,7 @@ exports[`CdrFulfillmentTile > applies disabled state 1`] = `
   aria-checked="false"
   aria-disabled="true"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -107,6 +109,7 @@ exports[`CdrFulfillmentTile > applies loading state 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="true"
   role="checkbox"
 >
@@ -158,6 +161,7 @@ exports[`CdrFulfillmentTile > applies multiple states 1`] = `
   aria-checked="true"
   aria-disabled="true"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="true"
   role="checkbox"
 >
@@ -209,6 +213,7 @@ exports[`CdrFulfillmentTile > base classes only 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -260,6 +265,7 @@ exports[`CdrFulfillmentTile > default snapshot 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -311,6 +317,7 @@ exports[`CdrFulfillmentTile > renders body slot 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -377,6 +384,7 @@ exports[`CdrFulfillmentTile > renders footer slot 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -443,6 +451,7 @@ exports[`CdrFulfillmentTile > renders header slot 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -513,6 +522,7 @@ exports[`CdrFulfillmentTile > renders icon-left slot 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >
@@ -594,6 +604,7 @@ exports[`CdrFulfillmentTile > renders icon-right slot 1`] = `
   aria-checked="false"
   aria-disabled="false"
   class="cdr-surface cdr-surface-selection cdr-fulfillment-tile"
+  data-border-radius="soft"
   data-loading="false"
   role="checkbox"
 >

src/components/fulfillmentTile/examples/FulfillmentTile.vue

@@ -59,11 +59,12 @@ defineOptions({ name: 'FulfillmentTile' });
 <style lang="scss" scoped>
 .example {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--cdr-space-one-x);
 }
 
 .example__tile {
-  height: 108px;
+  min-height: 108px;
   width: 230px;
 }
 </style>

src/components/fulfillmentTile/styles/CdrFulfillmentTileIcon.module.scss

@@ -1,14 +1,14 @@
 .cdr-fulfillment-tile-icon {
-  width: 2.2rem;
-  height: 2.2rem;
-  background: white;
-  display: flex;
   align-items: center;
-  justify-content: center;
+  background: white;
   border-radius: var(--cdr-radius-round);
-  position: relative;
+  display: flex;
   fill: var(--cdr-fulfillment-tile-icon-fill);
   flex-shrink: 0;
+  height: 2.2rem;
+  justify-content: center;
+  position: relative;
+  width: 2.2rem;
 
   &::after {
     content: '';

src/components/mediaObject/__tests__/CdrMediaObject.spec.js

@@ -83,7 +83,7 @@ export const examples = [
   {
     label: 'pass down props to Layout and Surface',
     props: {
-      background: 'brand-spruce',
+      background: 'brand',
       as: CdrSurfaceRaw,
     },
   },

src/components/mediaObject/__tests__/__snapshots__/CdrMediaObject.spec.js.snap

@@ -325,7 +325,7 @@ exports[`CdrMediaObject > snapshot tests > overlay, row align, column align, con
 exports[`CdrMediaObject > snapshot tests > pass down props to Layout and Surface 1`] = `
 <div
   class="cdr-surface cdr-layout cdr-layout--rows cdr-layout--columns cdr-media-object"
-  data-background="brand-spruce"
+  data-background="brand"
   style="--cdr-layout-rows: auto; --cdr-layout-columns: 1fr 1fr; --cdr-media-object-media-position: 'media content'; --cdr-media-object-align: start;"
 >
   

src/components/mediaObject/examples/MediaObject.vue

@@ -147,7 +147,7 @@ const examples: MediaObjectExample[] = [
   {
     label: 'pass down props to Layout and Surface',
     props: {
-      background: 'brand-spruce',
+      background: 'brand',
       gap: 'two-x',
       contentPadding: 'zero',
     },

src/components/surface/CdrSurface.vue

@@ -7,7 +7,6 @@ import { getSurfaceProps } from '../../utils/surface';
 defineOptions({ name: 'CdrSurface' });
 
 const props = withDefaults(defineProps<surface>(), {
-  variant: 'base',
   tag: 'div',
 });
 

src/components/surface/__tests__/CdrSurface.spec.js

@@ -49,8 +49,8 @@ describe('CdrSurface', () => {
   });
 
   it('applies radius property', () => {
-    const wrapper = mount(CdrSurface, { props: { radius: 'soft' } });
-    expect(wrapper.attributes('data-radius')).toBe('soft');
+    const wrapper = mount(CdrSurface, { props: { borderRadius: 'soft' } });
+    expect(wrapper.attributes('data-border-radius')).toBe('soft');
     expect(wrapper.element).toMatchSnapshot();
   });
 
@@ -67,15 +67,15 @@ describe('CdrSurface', () => {
         borderColor: 'primary',
         borderWidth: 'one-x',
         borderStyle: 'solid',
-        radius: 'soft',
+        borderRadius: 'soft',
         boxShadow: 'raised'
       }
     });
     expect(wrapper.attributes('data-background')).toBe('secondary');
     expect(wrapper.attributes('data-border-color')).toBe('primary');
     expect(wrapper.attributes('data-border-width')).toBe('one-x');
     expect(wrapper.attributes('data-border-style')).toBe('solid');
-    expect(wrapper.attributes('data-radius')).toBe('soft');
+    expect(wrapper.attributes('data-border-radius')).toBe('soft');
     expect(wrapper.attributes('data-box-shadow')).toBe('raised');
     expect(wrapper.element).toMatchSnapshot();
   });

src/components/surface/__tests__/__snapshots__/CdrSurface.spec.js.snap

@@ -65,10 +65,10 @@ exports[`CdrSurface > applies multiple properties 1`] = `
   class="cdr-surface"
   data-background="secondary"
   data-border-color="primary"
+  data-border-radius="soft"
   data-border-style="solid"
   data-border-width="one-x"
   data-box-shadow="raised"
-  data-radius="soft"
 >
   
   
@@ -89,7 +89,7 @@ exports[`CdrSurface > applies palette property 1`] = `
 exports[`CdrSurface > applies radius property 1`] = `
 <div
   class="cdr-surface"
-  data-radius="soft"
+  data-border-radius="soft"
 >